@charset "UTF-8"; /* コード文字化け防止 */
/*
GENERAL STYLING
memo
(ゼネラルスタイリング)表示の差異をなくす場所
・font-size: 100%; ユーザーが設定した文字サイズを正しく反映
・scroll-behavior: smooth; スムーズスクロール アニメーションをスムーズにする
================================================ */
html {
font-size: 100%; /* ユーザーが設定した文字サイズを正しく反映 */
scroll-behavior: smooth; /* スムーズスクロール アニメーションをスムーズにする */
}
body {
font-family: "Noto Sans JP", "M PLUS 1p", "Manrope", sans-serif ;
color: var(--grey);
background-color: var(--brey);
background-size: cover;/* 背景画像が要素の全体を比率保持のまま隙間なく覆う */
background-position: center;
/*min-height: 100vh;*/
background-image: url(../images/back-fot.png);
}
/*
COLORS
memo
（カラーズ）
rootは、CSS変数（カスタムプロパティ）を定義するための特別なセレクタで、
HTML文書の最上位要素（要素）を指します。サイト全体のテーマカラーや
フォントサイズなどをここでまとめて定義することで、
コードの再利用性が高まり、保守・管理が非常にしやすくなるため、
CSSの設計（プログラム）で広く使われています。
================================================ */
:root {
--brey: #e3fcff;
--white: #fff;
--menu: #12688a;
--grey: #432;
--yellow:#ffdd00;
}
/*
COMMON(共通）
================================================ */
p {
line-height: 1.7;
font-size: 17px;
}
img {
max-width: 100%;
}
nav {
font-family: "Manrope";
font-weight: bold;
font-size: 20px;
}
h3 {
font-size: 18px;
}
/* Layout */
.wrapper {
max-width: 1000px;
width: 100%;
margin: 0 auto;
padding: 0 1rem;
}
a {
text-decoration: none;
}
/*
HEADER
================================================ */
header {
background: var(--white);
padding: .3rem 0;
position: fixed;
width: 100%;
z-index: 1;
}
header .wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.rogo {
width: 250px;
}
nav a {
text-decoration: none;
color: var(--menu);
font-size: 25px;
font-family: "M PLUS 1p";
}
.btn-menu {
border: 1px solid var(--menu);
color: var(--menu);
padding: .5rem 1rem;
}
/* .main-nav の absolute の基準にする */
/* nav.page-nav { position: relative;} */
.main-nav {
background: var(--white);
width: 0;
position: absolute;
z-index: 2;
top: 100%;
right: 0;
overflow: hidden;
transition: .5s;
list-style: none;
}
.main-nav.open-menu {
width: 100%;
}
.main-nav li {
text-align: center;
margin: 2rem 0;
}
.main-nav a {
display: block;
}
/*
DESIGN
================================================ */
/*ここはタイトルと背景*/
.title {
background-image: url(../images/content-bacsp.webp);
background-size: contain;
background-position: -18vw -12vw;
min-height: 60vw; /* 例: 最小の高さを確保する */
position: relative;
}
.contentbac-sp {
width: 50%;
text-align: left;
position: absolute;
right: 0;
top: 25vw;
}
.title-text {
position: absolute;
top: 52vw;
left: 10vw;
}
.title-text h2 {
font-family: "Noto Sans JP";
font-weight: 500;
font-size: 8vw;
color: var(--menu);
}
.title-text p {
font-family: "Manrope";
font-size: 5vw;
color: var(--menu);
}
.start {
margin: 0 2rem 0vw;
padding-top: 75vw;
text-align: justify;
}
/* ここからメイン 害虫害獣の被害と特徴 */
.gaityucon {display: block !important;}
.gaityucon-pc{display: none !important;}
.content-h h2 br {display: none !important;}
.content {
margin: 7vw 0 0;
position: relative;
border-top: 1px dashed var(--menu);
padding-top: 100px;
}
.content img {
opacity: 0.5;
}
.content-h {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Noto Sans JP";
font-weight: 400;
font-size: 5vw;
color: var(--menu);
text-shadow:
0 0 30px var(--brey),
0 0 30px var(--brey) ;
}
/* 害虫でお困りの方 */
.gaityu {
margin-top: 20px;
}
.gaityu h2{
margin: 30px 2rem 0;
display: inline-block;
padding: 5px 20px;
font-size: 25px;
background-color: var(--menu);
color: var(--brey);
border-radius: 5px;
}
.musi-botn {
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10vw;
}
.musi-botn a {
/* タグ自体をブロック要素にし、縦に並べる */
display: flex;
flex-direction: column; /* 縦並びにする（画像→テキストの順）*/
align-items: center; /* 縦並びにしたものを横方向の中央に寄せる */
text-decoration: none; /* 下線を消す */
}
.musi-botn img {
width: 200px; /* ★ 画像サイズを大きくする */
height: auto;
/* または: width: 70%; height: 70%; でもOKです */
}
.musi-botn span {
font-size: 25px; /* ★ テキストサイズを調整 */
margin-top: 6px; /* 画像との間に少し隙間を作る */
color: var(--grey); /* テキストの色を調整 */
font-weight: bold;
}
.gaityu-ran {
max-width: 800px;
width: 100%;
margin: 50px auto 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 0;
justify-items: center;
}
.gaityu p {
margin: 20px 2rem 0;
text-align: justify;
}
/* 害獣でお困りの方 */
.dobutu {
margin-top: 20px;
}
.dobutu h2{
margin: 30px 2rem 0;
display: inline-block;
padding: 5px 20px;
font-size: 25px;
background-color: var(--menu);
color: var(--brey);
border-radius: 5px;
}
.dobutu-botn {
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10vw;
}
.dobutu-botn a {
/* タグ自体をブロック要素にし、縦に並べる */
display: flex;
flex-direction: column; /* 縦並びにする（画像→テキストの順）*/
align-items: center; /* 縦並びにしたものを横方向の中央に寄せる */
text-decoration: none; /* 下線を消す */
}
.dobutu-botn img {
width: 200px; /* ★ 画像サイズを大きくする */
height: auto;
/* または: width: 70%; height: 70%; でもOKです */
}
.dobutu-botn span {
font-size: 25px; /* ★ テキストサイズを調整 */
margin-top: 6px; /* 画像との間に少し隙間を作る */
color: var(--grey); /* テキストの色を調整 */
font-weight: bold;
}
.dobutu-ran {
max-width: 800px;
width: 100%;
margin: 50px auto 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 0;
justify-items: center;
}
.dobutu p {
margin: 20px 2rem 0;
text-align: justify;
}
/* 年間定期メンテナンス */
.mente {
margin: 100px 2rem 100px;
}
.mente-title {
margin-bottom: 30px;
display: inline-block;
padding: 5px 20px;
font-size: 25px;
background-color: var(--menu);
color: var(--brey);
border-radius: 5px;
}
.mente-aicon {
position: relative;
text-align: center;
}
.mente-aicon img {
border-radius: 10px;
opacity: 0.5;
}
.mente-aicon h2 {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%);
color: var(--menu);
font-size: 6vw;
text-shadow:
0 0 30px var(--brey),
0 0 30px var(--brey),
0 0 30px var(--brey) ;
}
.mente p {
text-align: justify;
margin-top: 20px;
line-height: 2;
}
.mente-botn {
text-align: center;
margin: 80px 0 20px;
}
.mente a {
font-size: 25px;
font-weight: 700;
display: inline-block;
padding: 5px 20px;
border: 2px solid var(--menu);
border-radius: 10px;
color: var(--menu);
}
/*
FOOTER
================================================ */
footer {
padding-top: 100px;
border-top: 1px dashed var(--menu);
}
.footer-renraku{
text-align: center;
margin-left: 2rem;
margin-right: 2rem;
}
.footer-renraku h3 {
margin: 0 1rem .5rem;
color: var(--menu);
}
.footer-renraku img {
width: 300px;
}
.footer-line {
margin-top: 2rem;
}
.footer-renraku p {
margin: 1.5rem auto 3rem;
text-align: left;
max-width: 700px;
}
.footer-sns {
text-align: center;
}
.footer-sns img {
width: 300px;
}
.footer-pesuto {
margin-top: 2rem;
}
.copyright {
background-color: var(--menu);
text-align: center;
padding: 2rem 0;
margin-top: 3rem;
color: var(--white);
}
/*
DESKTOP SIZE
================================================ */
@media(min-width: 750px){
/* common --------------------------------------------*/
/* Layout */
.wrapper {
padding: 0 2rem;
}
/* Header --------------------------------------------*/
.btn-menu {
display: none;
}
.main-nav {
width: 100%;
position: static;
display: flex;
}
.main-nav li {
margin: 0 0 0 1.5rem;
}
nav a {
font-size: 1rem;
}
/* Footer------------------------------------------- */
.footer-tel {
margin-right: 5rem;
}
.footer-renraku h3 {
font-size: 23px;
}
.footer-sns {
margin-top: -30px;
}
.footer-inst {
margin-right: 5rem;
}
/* Design ------------------------------------------ */
.total {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.title {
background-image: url(../images/content-bacsp.png);
background-size: contain;
background-position: -100px -150px;
min-height: 700px; /* 例: 最小の高さを確保する */
position: relative;
}
.contentbac-sp {
width: 50%;
text-align: left;
position: absolute;
right: 0;
top: 28%;
margin-right: 20px;
}
.title-text {
position: absolute;
top: 55%;
left: 90px;
}
.title-text h2 {
font-family: "Noto Sans JP";
font-weight: 500;
font-size: 70px;
color: var(--menu);
}
.title-text p {
font-family: "Manrope";
font-size: 20px;
color: var(--menu);
margin-top: -10px;
}
.start {
margin: 0px 50px 0vw;
padding-top: 700px;
text-align: justify;
}
.start p {
line-height: 2.2;
font-size: 20px;
}
/* 害虫・害獣の被害と特徴*/
.gaityucon {display: none !important;}
.gaityucon-pc{display: block !important;}
.content-h h2 br {display: block !important;}
.content-h {
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
width: max-content;
text-align: center;
font-family: "Noto Sans JP";
font-weight: 400;
font-size: 50px;
line-height: 1.3;
color: var(--menu);
}
/* 害虫でお困りの方 */
.gaityu {
margin-top: 100px;
}
.gaityu h2{
margin: 30px 2rem 0;
display: inline-block;
padding: 5px 20px;
font-size: 40px;
background-color: var(--menu);
color: var(--brey);
border-radius: 5px;
}
.musi-botn {
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-bottom: 100px;
}
.musi-botn a {
/* タグ自体をブロック要素にし、縦に並べる */
display: flex;
flex-direction: column; /* 縦並びにする（画像→テキストの順）*/
align-items: center; /* 縦並びにしたものを横方向の中央に寄せる */
text-decoration: none; /* 下線を消す */
}
.musi-botn img {
width: 200px; /* ★ 画像サイズを大きくする */
height: auto;
/* または: width: 70%; height: 70%; でもOKです */
}
.musi-botn span {
font-size: 25px; /* ★ テキストサイズを調整 */
margin-top: 6px; /* 画像との間に少し隙間を作る */
color: var(--grey); /* テキストの色を調整 */
font-weight: bold;
}
.gaityu-ran {
max-width: 800px;
width: 100%;
margin: 50px auto 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px 0;
justify-items: center;
}
.gaityu p {
margin: 0 2rem 0;
}
/* 害獣でお困りの方 */
.dobutu {
margin-top: 100px;
}
.dobutu h2{
margin: 30px 2rem 0;
display: inline-block;
padding: 5px 20px;
font-size: 40px;
background-color: var(--menu);
color: var(--brey);
border-radius: 5px;
}
.dobutu-botn {
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-bottom: 100px;
}
.dobutu-botn a {
/* タグ自体をブロック要素にし、縦に並べる */
display: flex;
flex-direction: column; /* 縦並びにする（画像→テキストの順）*/
align-items: center; /* 縦並びにしたものを横方向の中央に寄せる */
text-decoration: none; /* 下線を消す */
}
.dobutu-botn img {
width: 200px; /* ★ 画像サイズを大きくする */
height: auto;
/* または: width: 70%; height: 70%; でもOKです */
}
.dobutu-botn span {
font-size: 25px; /* ★ テキストサイズを調整 */
margin-top: 6px; /* 画像との間に少し隙間を作る */
color: var(--grey); /* テキストの色を調整 */
font-weight: bold;
}
.dobutu-ran {
max-width: 800px;
width: 100%;
margin: 50px auto 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px 0;
justify-items: center;
}
.dobutu p {
margin: 0 2rem 0;
}
/* 年間定期メンテナンス */
.mente {
margin: 100px 2rem 100px;
}
.mente-title {
margin-bottom: 30px;
display: inline-block;
padding: 5px 20px;
font-size: 40px;
background-color: var(--menu);
color: var(--brey);
border-radius: 5px;
}
.mente-aicon {
position: relative;
text-align: center;
}
.mente-aicon img {
border-radius: 10px;
opacity: 0.5;
}
.mente-aicon h2 {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%);
color: var(--menu);
font-size: 40px;
text-shadow:
0 0 30px var(--brey),
0 0 30px var(--brey),
0 0 30px var(--brey) ;
}
.mente p {
text-align: justify;
margin-top: 20px;
}
.mente-botn {
text-align: center;
margin: 80px 0 20px;
}
.mente a {
font-size: 25px;
font-weight: 700;
display: inline-block;
padding: 5px 20px;
border: 2px solid var(--menu);
border-radius: 10px;
color: var(--menu);
}
}