<section class="faq"> <div class="faq_container wraper_1080"> <div class="faq_inner"> <input class="faq_check" type="checkbox" id="faq1"> <label class="faq_question" for="faq1">水槽サイズに適正な熱帯魚の数はどのくらいですか。</label> <div class="faq_answer flex mg_top_30"> <p class="faq_answer_icon">A</p> <div class="faq_text"> <p>基本的には水量1Lにつき体長1cmの魚を1匹というのが目安とされています。<br>ただし、水換えの頻度やろ過装置の性能などを高めれば、さらに多くの魚を飼うことが可能です。</p> <p class="faq_text_mg">店頭またはお問い合わせいただければスタッフが相談に乗りますのでお気軽にご連絡ください。</p> </div> </div> </div> <div class="faq_inner mg_top_30"> <input class="faq_check" type="checkbox" id="faq2"> <label class="faq_question" for="faq2">水槽の設置場所で不向きな場所はありますか。</label> <div class="faq_answer flex mg_top_30"> <p class="faq_answer_icon">A</p> <div class="faq_text"> <p>下記のような場所は水槽を置くのに不向きです。</p> <ul class="faq_list_style faq_text_mg"> <li>人がぶつかりやすい狭い通路</li> <li>電源が遠いところにある場所</li> <li>湿気や耐荷重に不安がある場所</li> <li>直射日光が当たる場所（コケが生えたり、水温管理が難しいため）</li> </ul> <p class="faq_text_mg">また、水槽付近に下記があると管理が楽になります。</p> <ul class="faq_list_style faq_text_mg"> <li>電源、コンセント</li> <li>水、お湯が出る水道</li> <li>排水口</li> </div> </div> </div> <div class="faq_inner mg_top_30"> <input class="faq_check" type="checkbox" id="faq3"> <label class="faq_question" for="faq3">水替えはどれくらいの頻度で行うべきですか。</label> <div class="faq_answer flex mg_top_30"> <p class="faq_answer_icon">A</p> <div class="faq_text"> <p>水換えの標準的な目安は、1週間～2週間に1回で水槽内の3分の1程度の水を換えます。<br>もし、極端に水槽が汚れてしまった場合は、3日に1回など、こまめに少量ずつ水換えをしてください。 </p> <p class="faq_text_mg">水槽の半分以上の水を一気に換えてしまうと、魚が水質の急激な変化についていけず突然死する可能性があります。</p> <p class="faq_text_mg">適度な量・頻度で水換えを行いましょう。</p> </div> </div> </div> <div class="faq_inner mg_top_30"> <input class="faq_check" type="checkbox" id="faq4"> <label class="faq_question" for="faq4">熱帯魚を飼うと旅行にはいけないのですか。</label> <div class="faq_answer flex mg_top_30"> <p class="faq_answer_icon">A</p> <div class="faq_text"> <p>下記に気をつければ、健康な魚であれば、1週間ほど家を空けても問題ありません。</p> <ul class="faq_list_style faq_text_mg"> <li>水槽用ヒーターやクーラーを使用して水温を管理</li> <li>水の蒸発を抑えるため水槽のフタを閉める</li> <li>水質の悪化を防ぐためフィルターやろ過材を洗浄・交換する</li> <li>水槽照明用のタイマーを設置する</li> </ul> <p class="faq_text_mg">もし心配であれば、店頭またはお問い合わせページにてご相談ください。</p> </div> </div> </div> <div class="faq_inner mg_top_30"> <input class="faq_check" type="checkbox" id="faq5"> <label class="faq_question" for="faq5">水は綺麗なのに魚の元気がなさそうに見えます。</label> <div class="faq_answer flex mg_top_30"> <p class="faq_answer_icon">A</p> <div class="faq_text"> <p>「水が綺麗」という前提が間違っているかもしれません。<br>水が透明=水が綺麗というわけではありません。</p> <p class="faq_text_mg">大事なのは透明度よりも水質。</p> <p class="faq_text_mg">下記に当てはまっているか確認してみてください。</p> <ul class="faq_list_style faq_text_mg"> <li>硝酸や亜硝酸など、熱帯魚にとって有毒な物質が蓄積していないか。</li> <li>pHや水温は適正範囲内か。</li> <li>十分に酸素が供給されていないか。</li> </ul> <p class="faq_text_mg">それでも原因が不明であれば下記お問合せページよりご連絡ください。</p> </div> </div> </div> <div class="faq_inner mg_top_30"> <input class="faq_check" type="checkbox" id="faq6"> <label class="faq_question" for="faq6">熱帯魚を購入してもすぐ死んでしまうときがあります。</label> <div class="faq_answer flex mg_top_30"> <p class="faq_answer_icon">A</p> <div class="faq_text"> <p>下記の可能性があります。</p> <ul class="faq_list_style faq_text_mg"> <li>熱帯魚が潜在的に病気や奇形を抱えている。</li> <li>購入時から弱っている。</li> </ul> <p class="faq_text_mg">白い点が体に現れたり、ヒレがボロボロになっている。<br>他の整体と比べて動きが鈍い、変な動きをしている。</p> <p class="faq_text_mg">など、熱帯魚を観察して異常を確認したら別の水槽に隔離しましょう。</p> <p class="faq_text_mg">本店の熱帯魚は病気の有無を確認してから、店頭に並んでおりますのでご安心ください。</p> </div> </div> </div> <div class="faq_inner mg_top_30"> <input class="faq_check" type="checkbox" id="faq7"> <label class="faq_question" for="faq7">水草を育てるには何が必要ですか。</label> <div class="faq_answer flex mg_top_30"> <p class="faq_answer_icon">A</p> <div class="faq_text"> <p>水草を育成するには下記が必要です。</p> <ul class="faq_list_style faq_text_mg"> <li>ソイル（土）</li> <li>二酸化炭素供給機材</li> <li>水草育成用の照明</li> <li>ピンセット</li> <li>ハサミ</li> </ul> <p class="faq_text_mg">水草育成用の照明装置や二酸化炭素供給機材を使用することで、水草に必要な栄養素を提供します。</p> <p class="faq_text_mg">また、ピンセットで水草を植栽していき、水草が成長したらハサミで整えます。</p> <p class="faq_text_mg">手間がかかる分、どんどん愛着が湧いてくるのも魅力のひとつです。</p> </div> </div> </div> </div>
</section>

/* FAQ */
.faq_container { padding-top: 100px;
}
.faq_check { display: none;
}
.faq_question { display: block; /* padding: 10px 0; */ padding-top: 10px; font-size: 24px; font-weight: 500; position: relative; line-height: 160%; margin-left: 100px; position: relative;
}
.faq_question::before { content: "Q"; position: absolute; display: inline-block; text-align: center; line-height: 53px; width: 57px; height: 57px; border-radius: 50%; background-color: #72B4BD; top: 0; left: -86px;
}
.faq_question::after { content: ""; position: absolute; top: 25px; right: 65px; display: inline-block; width: 14px; height: 14px; border-left: 1px solid #101010; border-bottom: 1px solid #101010; transform: rotate(-45deg); padding-bottom: 10px; transition: .5s;
}
.faq_answer { font-size: 18px; line-height: 170%; max-height: 0; padding: 0 16px; transition: .8s; overflow: hidden; background-color: #C7E6C4; border-bottom: 1px solid #101010;
}
.faq_check:checked+.faq_question+.faq_answer { max-height: 500px; padding: 30px 15px;
}
.faq_check:checked+.faq_question::after { transform: rotate(-225deg);
}
.faq_answer_icon { font-size: 24px; font-weight: 500; text-align: center; line-height: 53px; width: 57px; height: 57px; border-radius: 50%; background-color: #64B47A; margin-right: 30px; flex-shrink: 0;
}
.faq_list_style { list-style: inside;
}
.faq_text_mg { margin-top: 1em;
}

<!-- 店舗概要 -->
<section class="shop"> <div class="shop_container"> <h2 class="common_h2 common_h-center font">店舗概要</h2> <div class="shop_info"> <dl class="shop_list flex"> <dt class="shop_item">店舗名</dt> <dd class="shop_detail">アクアファクトリー</dd> </dl> <dl class="shop_list flex"> <dt class="shop_item">住所</dt> <dd class="shop_detail">〒131-0045<br>東京都墨田区押上◯丁目◯-◯ </dd> </dl> <dl class="shop_list flex"> <dt class="shop_item">電話</dt> <dd class="shop_detail">03-1234-5678</dd> </dl> <dl class="shop_list flex"> <dt class="shop_item">代表者</dt> <dd class="shop_detail">御手洗清志</dd> </dl> <dl class="shop_list flex"> <dt class="shop_item">動物取扱責任者</dt> <dd class="shop_detail">御手洗清志</dd> </dl> <dl class="shop_list flex"> <dt class="shop_item">設立</dt> <dd class="shop_detail">2007年4月1日</dd> </dl> <dl class="shop_list flex"> <dt class="shop_item">従業員数</dt> <dd class="shop_detail">13人</dd> </dl> <dl class="shop_list flex"> <dt class="shop_item">業務内容</dt> <dd class="shop_detail">水草・観賞魚の販売<br>水草レイアウト・観賞魚水槽の制作<br>その他・関連用品の販売</dd> </dl> <dl class="shop_list flex"> <dt class="shop_item">営業時間</dt> <dd class="shop_detail">平日 ：13:00～23:00<br>土日祝：11:00～21:00 </dd> </dl> <dl class="shop_list flex"> <dt class="shop_item">休業日</dt> <dd class="shop_detail">毎週火曜日、年末年始<br>※祝日は営業</dd> </dl> </div> </div>
</section>
<!-- アクセス -->
<section class="access"> <div class="access_container wraper_1080 pd_top_150"> <h2 class="common_h2 common_h-center font">アクセス</h2> <div class="access_inner flex mg_top_40"> <div class="access_area"> <div class="access_img"> <img class="round_c" src="../img/shop/access.jpg" alt="お店の前で2人のスタッフが立っている"> </div> <div class="mg_top_20"> <p class="access_title">最寄り駅</p> <p class="access_text">東武スカイツリーライン「とうきょうスカイツリー駅」から徒歩1分</p> <p class="access_text">都営浅草線「押上駅」から徒歩7分</p> </div> </div> <div class="access_map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6628555716225!2d139.80955925661453!3d35.709913314778056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed6f0500f01%3A0x89ca817a76aa9315!2z44CSMTMxLTAwNDUg5p2x5Lqs6YO95aKo55Sw5Yy65oq85LiK77yR5LiB55uu77yR!5e0!3m2!1sja!2sjp!4v1698585241162!5m2!1sja!2sjp" width="540" height="360" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div> </div> </div>
</section>

/* 店舗概要 */
.shop_container { padding-top: 70px;
}
.shop_info { max-width: 560px; margin: 70px auto 0;
}
.shop_list { padding-bottom: 30px; border-bottom: 1px solid #9D958E;
}
.shop_list:nth-child(n+2) { padding-top: 30px;
}
.shop_item,
.shop_detail { font-size: 18px;
}
.shop_item { width: 34.87%;
}
/* アクセス */
.access_img { width: 68.51%;
}
.access_title { font-size: 18px;
}
.access_title::before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-right: 9px solid transparent; border-left: 9px solid transparent; border-top: 16px solid #72B4BD; border-bottom: 0; margin-right: 5px;
}
.access_text { font-size: 14px; margin-left: 23px;
}
.access_text:nth-child(2) { margin-top: 15px;
}
.access_text:nth-child(3) { margin-top: 10px;
}
.access_map { width: 68.6%;
}
.access_map iframe { width: 100%;
}

<!-- お問い合わせ -->
<section class="inquiry"> <div class="inquiry_container"> <form id="inquiry_form" action="confirm.php" method="POST"> <div class="inquiry_area"> <p class="inquiry_common_text font">メールアドレス<span class="inquiry_Required">必須</span></p> <input class="inquiry_mail inquiry_common_text round_c" type="email" name="mail" placeholder="例：info@aqua-factory.com" required> </div> <div class="inquiry_area"> <p class="inquiry_common_text font">年齢<span class="inquiry_Required">必須</span></p> <div class="inquiry_age"> <label class="age_inner"> <input class="inquiry_radio" type="radio" name="age" value="10代" required> <span class="inquiry_radio_btn inquiry_common_text radio_font">10代</span> </label> <label class="age_inner"> <input class="inquiry_radio" type="radio" name="age" value="20代"> <span class="inquiry_radio_btn inquiry_common_text radio_font">20代</span> </label> <label class="age_inner"> <input class="inquiry_radio" type="radio" name="age" value="30代"> <span class="inquiry_radio_btn inquiry_common_text radio_font">30代</span> </label> <label class="age_inner"> <input class="inquiry_radio" type="radio" name="age" value="40代"> <span class="inquiry_radio_btn inquiry_common_text radio_font">40代</span> </label> <label class="age_inner"> <input class="inquiry_radio" type="radio" name="age" value="50代"> <span class="inquiry_radio_btn inquiry_common_text radio_font">50代</span> </label> <label class="age_inner"> <input class="inquiry_radio" type="radio" name="age" value="60代～"> <span class="inquiry_radio_btn inquiry_common_text radio_font">60代～</span> </label> </div> </div> <div class="inquiry_area"> <p class="inquiry_common_text font">性別<span class="inquiry_Required">必須</span></p> <div class="inquiry_sex"> <label class="sex_inner"> <input class="inquiry_radio" type="radio" name="sex" value="女性" required> <span class="inquiry_radio_btn inquiry_common_text radio_font">女性</span> </label> <label class="sex_inner"> <input class="inquiry_radio" type="radio" name="sex" value="男性"> <span class="inquiry_radio_btn inquiry_common_text radio_font">男性</span> </label> </div> </div> <div class="inquiry_area"> <p class="inquiry_common_text font">お名前</p> <div class="flex jc_sb"> <input class="inquiry_name inquiry_common_text round_c" type="text" name="f_name" placeholder="姓"> <input class="inquiry_name inquiry_common_text round_c" type="text" name="l_name" placeholder="名"> </div> </div> <div class="inquiry_area"> <p class="inquiry_common_text font">住所</p> <input class="inquiry_address inquiry_common_text round_c" type="text" name="address" placeholder="例：東京都墨田区押上◯丁目◯-◯"> </div> <div class=" inquiry_area"> <p class="inquiry_common_text font">電話番号</p> <input class="inquiry_tel inquiry_common_text round_c" type="tel" name="tel" placeholder="例：0312345678（ハイフンなし）"> </div> <div class="inquiry_area"> <p class="inquiry_common_text font">お問い合わせ内容<span class="inquiry_Required">必須</span></p> <textarea class="inquiry_content inquiry_common_text round_c" name="content" cols="30" rows="16" placeholder="例：お問い合わせ内容を記載してください。" required></textarea> </div> <label class="inquiry_policy inquiry_common_text font flex mg_top_30"> <input class="policy_check round_c" type="checkbox" name="policy_check" required> <span>利用規約・プライバシーポリシーに同意</span> </label> <div class="btn_area btn_center"> <button class="inquiry_link_btn font" type="submit" id="inquiry_btn">送信内容を確認</button> </div> </form> </div>
</section>

/* お問い合わせ共通 */
.inquiry_common_text { font-size: 24px;
}
/* ラジオボタン非表示 */
input[type=radio] { appearance: auto; opacity: 0; position: absolute;
}
input:focus,
textarea:focus { background-color: #C4E6E4; outline: none; transition: background-color .8s ease-out;
}
::placeholder { color: #908379;
}
/* リード文 */
.read_container { max-width: 600px; width: 95%; margin: 0 auto; padding-top: 100px; text-align: center; font-size: 18px; line-height: 160%;
}
/* お問い合わせ */
.inquiry_container { max-width: 720px; width: 95%; margin: 0 auto; padding-top: 100px;
}
.inquiry_area:not(:first-child) { margin-top: 30px;
}
.inquiry_Required { font-size: 16px; font-weight: 700; color: #F4EFEB; padding: 4px 16px; background-color: #72B4BD; border-radius: 50px; margin-left: 16px;
}
.inquiry_mail,
.inquiry_address,
.inquiry_tel,
.inquiry_content { width: 100%; padding: 24px 8px; background-color: #E7D5C8; color: #101010; line-height: 1em;
}
.inquiry_mail,
.inquiry_age,
.inquiry_sex,
.inquiry_name,
.inquiry_address,
.inquiry_tel,
.inquiry_content { margin-top: 15px;
}
.age_inner,
.sex_inner { cursor: pointer;
}
.age_inner:not(:first-child) { margin-left: 25px;
}
.sex_inner:not(:first-child) { margin-left: 30px;
}
.inquiry_name { width: 49.44%; padding: 24px 0 24px 8px; background-color: #E7D5C8; color: #101010;
}
/* ラジオボタン */
.inquiry_radio_btn { position: relative;
}
.inquiry_radio_btn::before { content: ""; display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #101010; margin-right: 10px;
}
.inquiry_radio:checked+.inquiry_radio_btn::after { content: ""; position: absolute; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #72B4BD; margin-right: 10px; top: 13px; left: 5px;
}
.radio_font { font-family: 'Kaisei Decol', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
}
/* 規約 */
.inquiry_policy { justify-content: center;
}
.policy_check { position: relative; display: inline-block; width: 30px; height: 30px; border: 1px solid #101010; margin-right: 15px;
}
.policy_check:focus { background-color: transparent; transition: none;
}
.policy_check:checked:before { content: ''; position: absolute; top: 0px; left: 9px; transform: rotate(50deg); width: 10px; height: 22px; border-right: 4px solid #F4EFEB; border-bottom: 4px solid #F4EFEB;
}
.policy_check:checked { background-color: #72B4BD;
}
/* お問い合わせボタン */
.inquiry_link_btn { display: inline-block; padding: 17px 80px; border-radius: 50px; position: relative; transition: .8s; font-size: 32px; background-color: #9E9E9E; color: #F4EFEB; cursor: auto;
}

const form = document.getElementById("inquiry_form");
const button = document.getElementById("inquiry_btn");
form.addEventListener("input", update);
form.addEventListener("change", update);
function update() { const isRequired = form.checkValidity(); console.log(isRequired) if (isRequired === true) { button.style.backgroundColor = '#72B4BD'; button.style.cursor = "pointer"; } else { button.style.backgroundColor = '#9E9E9E'; button.style.cursor = "auto"; }
}

<?php
$mail = $_POST['mail'];
$age = $_POST['age'];
$sex = $_POST['sex'];
$f_name = $_POST['f_name'];
$l_name = $_POST['l_name'];
$address = $_POST['address'];
$tel = $_POST['tel'];
$content = $_POST['content'];
?>
<!-- 確認画面 -->
<div class="confirm"> <div class="confirm_container wraper_1080"> <h2 class="confirm_h2 common_h-center font">お問い合わせ内容確認</h2> <div class="confirm_inner mg_top_40 round_c"> <dl class="confirm_area flex"> <dt class="confirm_item font">メールアドレス</dt> <dd class="confirm_content"><?php echo $mail ?></dd> </dl> <dl class="confirm_area flex"> <dt class="confirm_item font">年齢</dt> <dd class="confirm_content"><?php echo $age ?></dd> </dl> <dl class="confirm_area flex"> <dt class="confirm_item font">性別</dt> <dd class="confirm_content"><?php echo $sex ?></dd> </dl> <dl class="confirm_area flex"> <dt class="confirm_item font">お名前</dt> <dd class="confirm_content"><?php echo $f_name ?> <?php echo $l_name ?></dd> </dl> <dl class="confirm_area flex"> <dt class="confirm_item font">住所</dt> <dd class="confirm_content"><?php echo $address ?></dd> </dl> <dl class="confirm_area flex"> <dt class="confirm_item font">電話番号</dt> <dd class="confirm_content"><?php echo $tel ?></dd> </dl> <dl class="confirm_area flex"> <dt class="confirm_item font">お問い合わせ内容</dt> <dd class="confirm_content"><?php echo $content ?></dd> </dl> </div> <form id="inquiry_form" action="comp.php" method="POST"> <input type="hidden" name="mail" value="<?php echo $mail ?>"> <input type="hidden" name="age" value="<?php echo $age ?>"> <input type="hidden" name="sex" value="<?php echo $sex ?>"> <input type="hidden" name="f_name" value="<?php echo $f_name ?>"> <input type="hidden" name="l_name" value="<?php echo $l_name ?>"> <input type="hidden" name="address" value="<?php echo $address ?>"> <input type="hidden" name="tel" value="<?php echo $tel ?>"> <textarea style="display:none" name="content" value="<?php echo $content ?>"></textarea> <div class="btn_center mg_top_40"> <button class="confirm_return_btn font" type="button" id="confirm_btn" onclick="location.href='./index.php'">戻る</button> <button class="confirm_send_btn font" type="submit" id="confirm_btn">送信</button> </div> </form> </div>
</div>

/* 確認画面 */
.confirm_container { padding: 100px 0 200px;
}
.confirm_h2 { font-size: 48px; font-weight: 500;
}
.confirm_inner { padding: 100px 0; background-color: #C4E6E4;
}
.confirm_area:not(:first-child) { margin-top: 30px;
}
.confirm_area { margin-left: 21.57%;
}
.confirm_item { width: 27%;
}
.confirm_content { width: 52%; word-break: break-all;
}
.confirm_item,
.confirm_content { font-size: 24px;
}
.confirm_return_btn,
.confirm_send_btn { display: inline-block; padding: 17px 80px; border-radius: 50px; font-size: 32px; color: #F4EFEB;
}
.confirm_return_btn { background-color: #72B4BD; margin-right: 120px;
}
.confirm_send_btn { background-color: #64B47A;
}

<!-- 悩み訴求 -->
<div class="appeal"> <div class="appeal_container"> <p class="appeal_read">アクアリウムを始めてみたいけど<br>こんな不安はありませんか？</p> <div class="trouble_area flex jc_sb"> <div class="trouble_item"> <p>必要なものは?</p> <img class="trouble_img mg_top_30" src="../img/beginner/need.jpg" alt="金魚鉢でメダカが泳いでいる"> </div> <div class="trouble_item"> <p>費用は?</p> <img class="trouble_img mg_top_30" src="../img/beginner/Costs.jpg" alt="家計簿と電卓とボールペンが机の上に置かれている"> </div> <div class="trouble_item"> <p>お世話は大変?</p> <img class="trouble_img mg_top_30" src="../img/beginner/Care.jpg" alt="プロホースで水槽の汚れを吸い取っている"> </div> </div> <div class="appeal_sentence"> <div class="appeal_text_1"> <p>アクアリウムは幻想的な空間を気軽にご自宅へ取り入れることができます。<br>また、水槽内の美しい景色や魚たちの優雅な泳ぎはストレス解消にも効果的でリラックスできます。<br>ですが、導入費用が高かったり、日常のお世話が大変だと逆にストレスを感じてしまうことも・・・ </p> </div> <div class="appeal_text_2"> <p>そんなアクアリウムに興味があるけど始めるか迷っているあなたへ<br>気になる初期費用やお魚のお世話のお悩みを解決していきます!</p> </div> </div> </div>
</div>
<!-- 導入時に必要なアクアリウム用品 -->
<section class="goods"> <div class="goods_container pd_top_150"> <div class="goods_inner"> <h2 class="goods_h2 common_h-center font">導入時に必要なアクアリウム用品</h2> <div class="goods_area flex jc_sb mg_top_40"> <div class="goods_img"> <img src="../img/beginner/aquarium_supplies.jpg" alt="アクアリウム用品が一式揃っている水槽"> </div> <div class="goods_introduction"> <p class="goods_introduction_text"> 標準サイズである60cm水槽（W60×D30×H36cm）の場合だと下記のアクアリウム用品が必要となります。</p> <div class="goods_list flex jc_sb mg_top_30"> <div> <p class="goods_item">水槽</p> <p class="goods_item">水槽マット</p> <p class="goods_item">水槽台</p> <p class="goods_item">ろ過装置</p> <p class="goods_item">照明</p> <p class="goods_item">エアレーション</p> </div> <div> <p class="goods_item">ヒーター</p> <p class="goods_item">水温計</p> <p class="goods_item">砂</p> <p class="goods_item">餌</p> <p class="goods_item">カルキ抜き</p> <p class="goods_item">掃除用品</p> </div> </div> </div> </div> <p class="goods_cost mg_top_40">上記一式揃えると費用は約3万円～4万円です。</p> </div> <div class="goods_text mg_top_30"> <p>もう少し費用を抑えて始めたい方は、水槽セットが販売されているので<br>必要最低限だけ揃えて少しずつ買い足していく楽しみ方もできます。</p> <p class="mg_top_20">必要最低限だと約1万円～2万円です。</p> </div> </div>
</section>
<!-- 毎日のお世話 -->
<section class="care"> <div class="care_container wraper_1400 pd_top_150"> <h2 class="beginner_h2 common_h2 common_h-center font">毎日のお世話</h2> <div class="care_inner flex jc_sb mg_top_40"> <div class="care_area flex jc_sb"> <div class="care_img"> <img src="../img/beginner/feeding.jpg" alt="瓶の中に熱帯魚のエサが入っている"> </div> <div class="care_explanation flex"> <div> <h3 class="care_title">エサやり</h3> <p class="common_text mg_top_20">エサは1日2回に分け、水槽内の熱帯魚が2～3分程度で食べきれる量を与えます。</p> <p class="care_explanation_mg common_text"> 飼育環境にもよりますが、ほとんどのお魚は1週間程度エサがなくても問題ないため、旅行などで長期間家を空ける場合でも心配ありません。</p> </div> <div> <p class="care_band">気をつける点</p> <p class="common_text mg_top_20">餌をあげすぎると食べきれなかった餌が水槽を汚すので注意が必要です。</p> </div> </div> </div> <div class="care_area flex jc_sb"> <div class="care_img"> <img src="../img/beginner/water_change.jpg" alt="バケツで水槽に水を入れている"> </div> <div class="care_explanation flex"> <div> <h3 class="care_title">水換え</h3> <p class="common_text mg_top_20">頻度は1週間に1回程度です。<br>換える水の量は全部ではなく、全体の30%程度です。</p> </div> <div> <p class="care_band">気をつける点</p> <p class="common_text mg_top_20"> 水換え用の水と水槽の水の温度を合わせる必要があります。また、水道水にはカルキ（塩素）が含まれているのでカルキ抜きを使用します。 </p> </div> </div> </div> </div> </div>
</section>
<!-- おすすめ -->
<div class="reco"> <p>アクアリウムに興味がでてきたけど・・・</p> <div class="mg_top_30"> <p>「水槽を置くスペースがない」</p> <p class="mg_top_10">「もう少し費用を抑えたい」</p> </div> <p class="reco_text">そんな方には<span class="reco_emphasis">小型水槽</span>が<span class="reco_emphasis">おすすめ!</span></p>
</div>
<!-- 場所を取らずインテリアにもなる小型水槽 -->
<section class="interior"> <div class="interior_container flex"> <div class="interior_explanation"> <h2 class="interior_title font">場所を取らずインテリアにもなる小型水槽</h2> <p class="interior_text mg_top_40"> 水槽の大きさは20～30cm程度なので机の上など、ちょっとした空きスペースに気軽に置けます。また、水槽が小さい分、水換えの量も少ないのでお掃除の手間もありません。標準的な水槽と比べるとお値段もコンパクトなので手軽にアクアリウムを始めたい方におすすめです。 </p> </div> <div class="interior_img_1"> <img src="../img/beginner/small_aquarium_1.jpg" alt="水草が水槽全体に生い茂った水草水槽"> </div> <div class="interior_img_2"> <img src="../img/beginner/small_aquarium_2.jpg" alt="熱帯魚の大群が泳ぎ回っている"> </div> <div class="interior_img_3"> <img src="../img/beginner/small_aquarium_3.jpg" alt="一匹のネオンテトラが流木をくぐり抜けている"> </div> </div>
</section>
<!-- 水草だけの水槽で癒やされる -->
<section class="Healing"> <div class="Healing_container flex"> <div class="Healing_img_1"> <img src="../img/beginner/Aquatic_plants_aquarium_1.jpg" alt="照明の光で幻想的に輝く水草水槽"> </div> <div class="Healing_img_2"> <img src="../img/beginner/Aquatic_plants_aquarium_2.jpg" alt="流木が水草で覆い尽くされた水槽"> </div> <div class="Healing_img_3"> <img src="../img/beginner/Aquatic_plants_aquarium_3.jpg" alt="水草だけの小型水槽"> </div> <div class="Healing_explanation"> <h2 class="Healing_title font">水草だけの水槽で癒やされる</h2> <p class="Healing_text mg_top_40"> 静かな水音、ゆらぐ水草。家にいながら自然を感じることができる水草水槽。お魚のお世話をする自信がない、生き物が死んでしまうのがツライといった方には水草だけの水槽がおすすめです。お魚を飼うことによる毎日のエサやりや、死んだときのことを考える必要もありません。 </p> </div> </div>
</section>
<!-- サポート -->
<section class="support"> <div class="support_container wraper_1080 pd_top_150"> <h2 class="beginner_h2 common_h2 common_h-center font">私たちがサポートします</h2> <div class="support_img mg_top_40"> <img src="../img/beginner/support.jpg" alt="アクアファクトリーのスタッフ一同が笑顔でお店の前に立っている"> </div> <div class="support_text_area mg_top_20"> <p class="common_text">アクアリウムに関するお困りごとやお悩みをサポートします。<br>お世話の方法や水槽導入時に気をつけること、おすすめのお魚などお気軽にご相談ください。</p> <p class="support_text_1 mg_top_20">他にも、水族館のような水槽をお家にも置いてみたい方は出張レイアウトサービスも承っております。</p> <p class="support_text_2 mg_top_30">お客様の日々の疲れを癒やすサポートをさせていただきます!</p> </div> <div class="btn_area btn_center"> <a class="service_link_btn" href="../service/#layout">出張サービスの詳細はこちら</a> </div> </div>
</section>

/* 悩み訴求 */
.appeal_container { max-width: 930px; width: 98%; margin: 0 auto; padding-top: 60px;
}
.appeal_read { font-size: 36px; font-weight: 500; line-height: 170%; text-align: center;
}
.trouble_area { margin-top: 60px; font-size: 24px; font-weight: 500; text-align: center;
}
.trouble_item { width: 27%;
}
.trouble_img { border-radius: 50%;
}
.appeal_sentence { margin-top: 80px; text-align: center; font-weight: 400; line-height: 170%;
}
.appeal_text_1 { font-size: 14px;
}
.appeal_text_2 { font-size: 22px; font-weight: 500; margin-top: 50px; line-height: 170%;
}
/* 導入時に必要なアクアリウム用品 */
.goods_container { max-width: 1260px; width: 98%; margin: 0 auto;
}
.goods_inner { background-color: #C4E6E4; border-radius: 6px; padding: 40px 7%;
}
.goods_h2 { font-size: 32px; font-weight: 500; color: #80553C;
}
.goods_area { max-width: 1080px;
}
.goods_img { width: 45%;
}
.goods_introduction { width: 41%;
}
.goods_introduction_text { font-size: 14px; line-height: 170%;
}
.goods_list { width: 75%; font-size: 18px;
}
.goods_item:nth-child(n+2) { margin-top: 24px;
}
.goods_item::before { content: ""; display: inline-block; width: 12px; height: 12px; background-color: #009B92; border-radius: 50%; margin-right: 6px;
}
.goods_cost { font-size: 24px; font-weight: 500; text-align: center;
}
.goods_text { font-size: 18px; font-weight: 400; text-align: center; line-height: 170%;
}
/* 毎日のお世話 */
.care_area { width: 48%;
}
.care_img { width: 44%;
}
.care_explanation { width: 54%; flex-direction: column; justify-content: space-between;
}
.care_explanation_mg { margin-top: 10px;
}
.care_title { font-size: 24px; font-weight: 500;
}
.care_band { padding: 7px 39px; display: inline-block; background-color: #72B4BD; border-radius: 50px; color: #FFF;
}
/* おすすめ */
.reco { padding-top: 100px; font-size: 18px; font-weight: 400; text-align: center;
}
.reco_text { margin-top: 50px; font-size: 24px; font-weight: 500;
}
.reco_emphasis { font-size: 36px; color: #BD7272;
}
/* 場所を取らずインテリアにもなる小型水槽 */
.interior_container { padding: 100px 0 130px; flex-direction: row-reverse; position: relative; margin-right: 1.4%;
}
.interior_explanation { position: absolute; max-width: 722px; padding: 60px 5.5%; background-color: rgba(143, 184, 184, 0.8); top: 130px; left: 7%;
}
.interior_title { font-size: 24px; font-weight: 500; color: #003838;
}
.interior_text { font-size: 16px; line-height: 190%;
}
.interior_img_1 { width: 50%;
}
.interior_img_2 { width: 21%; position: absolute; top: 408px; left: 18%;
}
.interior_img_3 { width: 24.5%; position: absolute; top: 510px; left: 34%;
}
/* 水草だけの水槽で癒やされる */
.Healing_container { padding-top: 188px; position: relative; margin-left: 1.4%;
}
.Healing_explanation { position: absolute; max-width: 722px; padding: 60px 5.5%; background-color: rgba(118, 170, 132, 0.8); bottom: 30px; right: 6%;
}
.Healing_title { font-size: 24px; font-weight: 500; color: #003838;
}
.Healing_text { font-size: 16px; line-height: 190%;
}
.Healing_img_1 { width: 50%;
}
.Healing_img_2 { width: 25%; position: absolute; top: 158px; right: 2%; z-index: 2;
}
.Healing_img_3 { width: 20%; position: absolute; top: 112px; right: 22%; z-index: 1;
}
/* サポート */
.support_text_area { text-align: center;
}
.support_text_1 { font-size: 14px;
}
.support_text_2 { font-size: 18px; font-weight: 700; color: #BD7272;
}
.service_link_btn { display: inline-block; padding: 18px 70px; border-radius: 50px; position: relative; transition: .8s; font-size: 24px; background-color: #64B47A; color: #F4EFEB;
}
.service_link_btn:hover { background-color: #72B4BD;
}
.service_link_btn::after { content: ""; display: inline-block; border-bottom: 1px solid #F4EFEB; width: 20px; height: 6px; border-right: 1px solid #F4EFEB; position: absolute; top: 50%; right: 24px; transform: skew(45deg) translateY(-50%); transition: .8s;
}
.service_link_btn:hover::after { width: 30px; right: 15px;
}

<!-- 内部リンク -->
<section class="link"> <div class="link_container font flex wraper_1400"> <a class="link_btn bg_layout" href="#layout">出張レイアウト</a> <a class="link_btn bg_maintenance" href="#maintenance">出張メンテナンス</a> </div>
</section>
<!-- 出張レイアウト -->
<section id="layout" class="layout"> <div class="layout_container"> <div class="wraper_1400"> <h2 class="common_h2 common_h-center font">出張レイアウト</h2> <div class="layout_inner"> <div class="flex jc_sb ai_c mg_top_40"> <div class="layout_img_1"> <img class="round_c" src="../img/service/layout_1.jpg" alt="アーチ状の流木と生い茂った水草の水槽にたくさんの熱帯魚が泳いでいる"> </div> <div class="layout_explan common_text"> <h3 class="service_h3 font">プロが水槽のレイアウトをご提案</h3> <p class="mg_top_20"> 綺麗なレイアウトが組めない。<br>でも、水族館のように幻想的な水槽をお家でも楽しみたい。 </p> <p class="mg_top_20">そんな水槽のレイアウトでお困りの方におすすめのサービスです。</p> <p class="mg_top_20">コンテストでも上位入賞を果たしたプロが心を込めて対応させていただきます。</p> </div> </div> <div class="layout_img_2"> <img src="../img/service/layout_2.jpg" alt="水草の上を泳いでいるネオンテトラ"> </div> <div class="layout_img_3"> <img src="../img/service/layout_3.jpg" alt="光合成をして気泡がでているキューバパールグラス"> </div> <div class="layout_img_4"> <img src="../img/service/layout_4.jpg" alt="赤と白の色味がきれいなハーフムーンのベタ"> </div> <div class="layout_img_5"> <img src="../img/service/layout_5.jpg" alt="真っ白いエンジェルフィッシュ"> </div> </div> </div> </div>
</section>
<!-- 出張レイアウトお客様の声 -->
<section class="voice"> <div class="voice_container pd_top_150"> <h3 class="service_h3 common_h-center font">お客様の声</h3> <div class="voice_inner flex jc_sb mg_top_40"> <div class="voice_explan voice_layout_bg round_c"> <div class="voice_overview flex"> <div class="voice_img"> <img src="../img/service/layout_voice_1.jpg" alt="色鮮やかな水草水槽と緑一色の水草水槽"> </div> <div class="voice_text_innner flex"> <div> <p class="voice_title">幻想的な景色を見ると疲れがスッと抜けるような感じです。</p> </div> <div class="voice_memo_area"> <p class="voice_history">アクアリウム歴<span class="voice_mgl">3ヶ月</span></p> <p>30代<span class="voice_mgl">女性</span></p> </div> </div> </div> <p class="voice_text common_text"> 一人暮らしだと、家に帰ると真っ暗でいつも寂しかったのですが、水槽を置いてから寂しさがなくなりました。水槽のところだけ光に包まれているのでとても幻想的で、疲れがスッと抜けるような感じがします。また、レイアウトをお店の方と一緒に決めていくのですが、とても親身に考えてくださいました。部屋のレイアウトにも合うような提案もしていただき、毎日見ても全然飽きない完璧なレイアウトをしていただきました。出張レイアウトサービスを頼んで本当に良かったと感じています。 </p> </div> <div class="voice_explan voice_layout_bg round_c"> <div class="voice_overview flex"> <div class="voice_img"> <img src="../img/service/layout_voice_2.jpg" alt="照明の光で幻想的に輝く水草水槽"> </div> <div class="voice_text_innner flex"> <div> <p class="voice_title">親身になってレイアウトを一緒に考えてくれました。</p> </div> <div class="voice_memo_area"> <p class="voice_history">アクアリウム歴<span class="voice_mgl">9ヶ月</span></p> <p>20代<span class="voice_mgl">女性</span></p> </div> </div> </div> <p class="voice_text common_text"> 前からアクアリウムに興味がありましたが、きとんとお世話をする自信がないので諦めていました。そんなときに水草水槽を見つけて、これなら毎日のエサやりもしなくていいから私でもできそうだなと思いました。でも、初めてだからレイアウトなんてわからないし、それならプロにお任せしようとこのサービスを利用しました。とても親身になってレイアウトを一緒に考えてくれました。結果は大満足。今は水槽をみながらまったりするのがお気に入りの時間です。 </p> </div> <div class="voice_explan voice_layout_bg round_c"> <div class="voice_overview flex"> <div class="voice_img"> <img src="../img/service/layout_voice_3.jpg" alt="カラフルな熱帯魚と巨大な流木がレイアウトされている大型水槽"> </div> <div class="voice_text_innner flex"> <div> <p class="voice_title">要望をちゃんと再現してくれました。</p> </div> <div class="voice_memo_area"> <p class="voice_history">アクアリウム歴<span class="voice_mgl">4年</span></p> <p>30代<span class="voice_mgl">男性</span></p> </div> </div> </div> <p class="voice_text common_text"> 水族館にあるような水槽に憧れてこのサービスを利用しました。最初は不安でしたが、ヒアリングの内容がとても細かく、自分の要望をちゃんと再現してくれました。さすがコンテスト入賞者の方が作る水槽だなと改めて感動しました。水槽を増やすときはまたリピートしたいと思います。 </p> </div> <div class="voice_explan voice_layout_bg round_c"> <div class="voice_overview flex"> <div class="voice_img"> <img src="../img/service/layout_voice_4.jpg" alt="3匹のコリドラスが正面を見ている"> </div> <div class="voice_text_innner flex"> <div> <p class="voice_title">熱帯魚のかわいらしい姿に癒やされています。</p> </div> <div class="voice_memo_area"> <p class="voice_history">アクアリウム歴<span class="voice_mgl">1ヶ月</span></p> <p>40代<span class="voice_mgl">女性</span></p> </div> </div> </div> <p class="voice_text common_text"> 写真の子たちが一生懸命、砂をモフモフしたり、ちょこんと立ち止まる姿に一目惚れして水槽の導入を決意しました。せっかくならこの子たちが快適に暮らせるレイアウトにしてもらおうと出張レイアウトをお願いしました。この子たちも泳ぎやすいのか、あちこちを元気に泳ぎ回っています。1匹が泳ぎだすと次々に追いかけて泳ぐ姿が和やかで可愛らしいです。 </p> </div> </div>
</section>
<!-- 納品までの流れ -->
<section class="delivery"> <div class="delivery_container"> <h3 class="service_h3 common_h-center font">納品までの流れ</h3> <div class="delivery_inner"> <div class="delivery_inner_up flex jc_sb"> <div class="delivery_area_up"> <div class="delivery_img_up"> <img src="../img/service/delivery_1.jpg" alt="3人の女声が楽しそうに打ち合わせをしている"> </div> <div class="delivery_text"> <div class="delivery_heading mg_top_20"> <p>Step 01</p> <p class="mg_top_10">ヒアリング（1～2時間）</p> </div> <p class="common_text mg_top_20">お客様の求める水槽の種類、レイアウト、熱帯魚の種類、費用感などを詳しくヒアリングします。</p> </div> </div> <div class="arrow_img_up"> <img class="arrow_img_1" src="../img/service/arrow.svg" alt="エンジェルフィッシュのイラスト"> </div> <div class="delivery_area_up"> <div class="delivery_img_up"> <img src="../img/service/delivery_2.jpg" alt="テーブルの上に設計図を広げてペンで書いている"> </div> <div class="delivery_text"> <div class="delivery_heading mg_top_20"> <p>Step 02</p> <p class="mg_top_10">設計（1～3日）</p> </div> <p class="common_text mg_top_20">ヒアリング結果をもとに水槽のレイアウトや熱帯魚の選定を行います。</p> </div> </div> <div class="arrow_img_up"> <img class="arrow_img_2" src="../img/service/arrow.svg" alt="エンジェルフィッシュのイラスト"> </div> <div class="delivery_area_up"> <div class="delivery_img_up"> <img src="../img/service/delivery_3.jpg" alt="石と水草のボトルアクアリウムの中でメダカが2匹泳いでいる"> </div> <div class="delivery_text"> <div class="delivery_heading mg_top_20"> <p>Step 03</p> <p class="mg_top_10">レイアウトの調整</p> </div> <p class="common_text mg_top_20"> 実際に店舗で作成してお客様に写真を送付します。<br>レイアウトに問題なければ水槽設置の日程を調整させていただきます。<br>大幅な変更は別途料金をいただく場合があります。 </p> </div> </div> <div class="arrow_img_up"> <img class="arrow_img_3" src="../img/service/arrow.svg" alt="エンジェルフィッシュのイラスト"> </div> </div> <div class="delivery_inner_low flex mg_top_40"> <div class="arrow_img_low"> <img class="arrow_img_4" src="../img/service/arrow.svg" alt="エンジェルフィッシュのイラスト"> </div> <div class="delivery_area_low"> <div class="delivery_img_low"> <img src="../img/service/delivery_4.jpg" alt="バケツで水槽に水を入れている"> </div> <div class="delivery_text"> <div class="delivery_heading mg_top_20"> <p>Step 04</p> <p class="mg_top_10">水槽の設置（1日）</p> </div> <p class="common_text mg_top_20">お客様のご自宅まで伺い水槽の設置をさせていただきます。水槽のサイズが大きいと早朝から深夜の作業となる場合があります。 </p> </div> </div> <div class="arrow_img_low"> <img class="arrow_img_5" src="../img/service/arrow.svg" alt="エンジェルフィッシュのイラスト"> </div> <div class="delivery_area_low"> <div class="delivery_img_low"> <img src="../img/service/delivery_5.jpg" alt="二人のスタッフがお店の前に笑顔で立っている"> </div> <div class="delivery_text"> <div class="delivery_heading mg_top_20"> <p>Step 05</p> <p class="mg_top_10">アフターケア</p> </div> <p class="common_text mg_top_20">1週間以内に水槽に関する不具合がでましたら無料で対応いたします。</p> </div> </div> </div> </div> </div>
</section>
<!-- 出張レイアウト料金 -->
<section class="layout_cost"> <div class="layout_cost_container"> <h3 class="service_h3 common_h-center font">出張レイアウト料金</h3> <div class="layout_cost_table mg_top_40"> <div class="layout_cost_line layout_cost_line_color flex"> <p class="layout_aquarium_column_1">小型（30cm～）</p> <p class="layout_cost_column_1">1万円～</p> </div> <div class="layout_cost_line layout_cost_line_color flex"> <p class="layout_aquarium_column_2">標準（60cm～）</p> <p class="layout_cost_column_2">5万円～</p> </div> <div class="layout_cost_line layout_cost_line_color flex"> <p class="layout_aquarium_column_3">大型（120cm～）</p> <p class="layout_cost_column_3">15万円～</p> </div> </div> </div>
</section>
<!-- 出張レイアウトお問い合わせ -->
<section class="contact"> <div class="contact_container"> <div class="contact_inner layout_contact_bg"> <div class="contact_wraper"> <p class="contact_read">出張レイアウトに関する質問など<br>お気軽にお問い合わせください。</p> <div class="mg_top_40 flex jc_sb"> <div class="contact_area layout_contact_area_bg"> <p class="contact_title font"> 電話</p> <p class="contact_tel font"> 03-1234-5678 </p> <div class="contact_time common_text flex jc_sb"> <p>営業時間</p> <p>平日 ：13:00～23:00<br>土日祝：11:00～21:00 </p> </div> </div> <div class="contact_area layout_contact_area_bg"> <p class="contact_title font"> メール</p> <div class="contact_btn_area btn_center"> <a class="contact_btn" href="">お問い合わせ</a> </div> </div> </div> </div> </div> </div>
</section>
<!-- 出張メンテナンス -->
<section id="maintenance" class="maintenance"> <div class="maintenance_container pd_top_150"> <div class="wraper_1400"> <h2 class="common_h2 common_h-center font">出張メンテナンス</h2> <div class="maintenance_inner"> <div class="flex jc_sb ai_c mg_top_40"> <div class="maintenance_img_1"> <img class="round_c" src="../img/service/maintenance_1.jpg" alt="プロホースで水槽の汚れを吸い取っている"> </div> <div class="maintenance_explan common_text"> <h3 class="service_h3 font">毎日のお世話がラクになる</h3> <p class="mg_top_20"> いつでも水槽がきれいな状態を保つためには日々のメンテナンスが欠かせません。<br>ですが、癒やしを求めているのに、忙しい日々の合間にお世話を続けて疲弊するのは元も子もありません。 </p> <p class="mg_top_20">そんなお世話が難しいときは私たちをご活用ください。</p> <p class="mg_top_20">水質の調整、フィルターの清掃、水槽内の清掃、水草の剪定、熱帯魚の健康チェックなど、あらゆる水槽のメンテナンスを承ります。</p> <p class="mg_top_30">私たちがあなたの癒やしをサポートします。</p> </div> </div> </div> </div> </div>
</section>
<!-- 出張メンテナンスお客様の声 -->
<section class="voice"> <div class="voice_container pd_top_150"> <h3 class="service_h3 common_h-center font">お客様の声</h3> <div class="voice_inner flex jc_sb mg_top_40"> <div class="voice_explan voice_maintenance_bg round_c"> <div class="voice_overview flex"> <div class="voice_img"> <img src="../img/service/maintenance_voice_1.jpg" alt="両端に石が山の形のように積まれて真ん中にソイルが敷かれた水槽"> </div> <div class="voice_text_innner flex"> <div> <p class="voice_title">どのスタッフの方もとても丁寧で優しい方ばかりなので安心。</p> </div> <div class="voice_memo_area"> <p class="voice_history">アクアリウム歴<span class="voice_mgl">2年</span></p> <p>30代<span class="voice_mgl">女性</span></p> </div> </div> </div> <p class="voice_text common_text"> 仕事やプライベートで忙しくなる度に利用させてもらっています。コケだらけだった水槽が水槽立ち上げ時のように綺麗になるので毎回感動してしまいます。一度別のショップのメンテナンスサービスを利用しましたが、そちらはスタッフによって対応が異なっていたり、雑だったりしました。ですが、アクアファクトリーさんは、どのスタッフの方もとても丁寧で優しい方ばかりなので安心して任せられます。また、リピートさせていただきます。 </p> </div> <div class="voice_explan voice_maintenance_bg round_c"> <div class="voice_overview flex"> <div class="voice_img"> <img src="../img/service/maintenance_voice_2.jpg" alt="熱帯魚がたくさん泳いでいる水草水槽が2つ"> </div> <div class="voice_text_innner flex"> <div> <p class="voice_title">アクアリウムの話しができる唯一の存在です。</p> </div> <div class="voice_memo_area"> <p class="voice_history">アクアリウム歴<span class="voice_mgl">3年</span></p> <p>40代<span class="voice_mgl">女性</span></p> </div> </div> </div> <p class="voice_text common_text"> 出張メンテナンスサービスを頼んでから、水槽のお手入れがラクになりました。お世話がラクになる方法やオススメのアクアリウムグッズなど、プロの観点からお話を聞けてとても勉強になります。また、周りにアクアリウムの話をできる人がいないので話し相手になってくれるのもありがたいです。 </p> </div> <div class="voice_explan voice_maintenance_bg round_c"> <div class="voice_overview flex"> <div class="voice_img"> <img src="../img/service/maintenance_voice_3.jpg" alt="立ち上げたばかりで水草が成長途中の小型水槽"> </div> <div class="voice_text_innner flex"> <div> <p class="voice_title">女性のスタッフさんを指名できるので一人暮らしでも安心。</p> </div> <div class="voice_memo_area"> <p class="voice_history">アクアリウム歴<span class="voice_mgl">2ヶ月</span></p> <p>20代<span class="voice_mgl">女性</span></p> </div> </div> </div> <p class="voice_text common_text"> 一人暮らしなので男性のスタッフさんが家に入るのに抵抗がありましたが、お店に相談すると女性のスタッフさんを指名できるとのことでサービスを利用してみました。お店だとなかなか店員さんに話しかけられないのでこういった機会に色々話が聞けてとても楽しかったです。 </p> </div> <div class="voice_explan voice_maintenance_bg round_c"> <div class="voice_overview flex"> <div class="voice_img"> <img src="../img/service/maintenance_voice_4.jpg" alt="木に見立てた水草の前でコイベタが泳いでる"> </div> <div class="voice_text_innner flex"> <div> <p class="voice_title">水槽の掃除で丸1日潰れていたのが、今は2,3時間で終わるようになりました。</p> </div> <div class="voice_memo_area"> <p class="voice_history">アクアリウム歴<span class="voice_mgl">2ヶ月</span></p> <p>50代<span class="voice_mgl">男性</span></p> </div> </div> </div> <p class="voice_text common_text"> 水槽の数が多く、掃除をすると丸1日潰れてしまうのでこちらのサービスを利用しています。とても手際がよく毎回2,3時間ほどで終わります。今まで頑張って掃除していたのが馬鹿らしくなり、なんでもっと早く利用しなかったんだと後悔しています。余った時間でゆったりと水槽を眺めながら読書をするのが何よりも至福の時間です。 </p> </div> </div> </div>
</section>
<!-- 出張メンテナンス料金 -->
<section class="maintenance_cost"> <div class="maintenance_cost_container"> <h3 class="service_h3 common_h-center font">出張メンテナンス料金</h3> <div class="maintenance_cost_table mg_top_40"> <div class="maintenance_cost_line maintenance_cost_line_color flex"> <p class="maintenance_aquarium_column_1">小型（30cm～）</p> <p class="maintenance_cost_column_1">1万円～/回</p> </div> <div class="maintenance_cost_line maintenance_cost_line_color flex"> <p class="maintenance_aquarium_column_2">標準（60cm～）</p> <p class="maintenance_cost_column_2">2万円～/回</p> </div> <div class="maintenance_cost_line maintenance_cost_line_color flex"> <p class="maintenance_aquarium_column_3">大型（120cm～）</p> <p class="maintenance_cost_column_3">3万円～/回</p> </div> </div> <p class="maintenance_notes mg_top_10">出張レイアウトをご利用していないお客様も対応させていただきます。</p> </div>
</section>

/* サービス共通 */
.service_h3 { font-size: 32px; font-weight: 500;
}
/* 内部リンク */
.link_container { padding-top: 100px; justify-content: space-evenly;
}
.link_btn { display: inline-block; font-size: 30px; font-weight: 700; color: #F4EFEB; position: relative; transition: .8s;
}
.link_btn:hover { opacity: .5;
}
.link_btn::after { content: ""; position: absolute; border-top: 17.3px solid #F4EFEB; border-right: 10px solid transparent; border-left: 10px solid transparent; top: 39%; right: 7%;
}
.bg_layout { background-image: url(../../img/service/layout_button.jpg); background-repeat: no-repeat; background-size: cover; padding: 25px 105px;
}
.bg_maintenance { background-image: url(../../img/service/maintenance_button.jpg); background-repeat: no-repeat; background-size: cover; padding: 25px 90px;
}
/* 出張レイアウト */
.layout_container { padding: 100px 0 105px; overflow: hidden;
}
.layout_inner { max-width: 1264px; margin-left: 1.4%; position: relative;
}
.layout_img_1 { width: 55.4%;
}
.layout_explan { width: 40%;
}
.layout_img_2 { position: absolute; width: 41%; clip-path: circle(17% at 44% 54%); top: -167px; right: 6%;
}
.layout_img_3 { position: absolute; width: 22%; clip-path: circle(37% at 59% 47%); top: 77px; right: -15%;
}
.layout_img_4 { position: absolute; width: 12%; clip-path: circle(35% at 46% 52%); top: 294px; right: 7%;
}
.layout_img_5 { position: absolute; width: 33%; clip-path: circle(28% at 49% 47%); top: 340px; right: 17%;
}
/* 出張レイアウトお客様の声 */
.voice_container { max-width: 1360px; width: 98%; margin: 0 auto;
}
.voice_inner { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 40px 3%;
}
.voice_explan { padding: 40px; width: 100%;
}
.voice_layout_bg { background-color: #C7E6C4;
}
.voice_overview { justify-content: space-between;
}
.voice_img { width: 52%;
}
.voice_text_innner { width: 42%; flex-direction: column; justify-content: space-between;
}
.voice_category { font-size: 14px;
}
.voice_title { font-size: 24px; font-weight: 500; font-feature-settings: 'palt' 1; line-height: 130%;
}
.voice_memo_area { font-size: 18px; font-weight: 500;
}
.voice_mgl { margin-left: 15px;
}
.voice_text { margin-top: 20px;
}
/* 納品までの流れ */
.delivery_container { background-image: url(../../img/service/wave_background.svg); background-repeat: repeat-x; background-size: cover; margin-top: 100px; padding: 150px 0 100px;
}
.delivery_inner { max-width: 1300px; margin: 40px auto 0;
}
.delivery_inner_up { padding-left: 2%;
}
.delivery_area_up { width: 26.2%;
}
.delivery_img_up { width: 82.6%; margin: 0 auto;
}
.arrow_img_up { margin-top: 8.4%;
}
.delivery_inner_low { justify-content: center; padding-right: 7.1%;
}
.delivery_area_low { width: 28.1%; margin-right: 1.62%;
}
.delivery_img_low { width: 82.6%; margin: 0 auto;
}
.arrow_img_low { margin-top: 8.96%; margin-right: 1.62%;
}
.delivery_heading { font-size: 18px; font-weight: 500; text-align: center;
}
/* 出張レイアウト料金 */
.layout_cost_container { max-width: 600px; width: 98%; margin: 0 auto; padding-top: 100px;
}
.layout_cost_line:nth-child(n+2) { margin-top: 5px;
}
.layout_cost_line_color:nth-child(2n+1) { background-color: #64B47A;
}
.layout_cost_line_color:nth-child(2n) { background-color: #C7E6C4;
}
.layout_aquarium_column_1,
.layout_aquarium_column_2 { width: 300px; font-size: 24px; font-weight: 500; padding: 24px 50px 24px 67px;
}
.layout_aquarium_column_3 { width: 300px; font-size: 24px; font-weight: 500; padding: 24px 41px 24px 60px;
}
.layout_cost_column_1,
.layout_cost_column_2,
.layout_cost_column_3 { width: 300px; font-size: 24px; font-weight: 500; padding: 24px 0; text-align: center;
}
/* 出張レイアウトお問い合わせ */
.layout_contact_bg { background-color: #C4E6E4;
}
.layout_contact_area_bg { background-color: #72B4BD;
}
/* 出張メンテナンス */
.maintenance_inner { max-width: 1349px; margin-left: 1.4%;
}
.maintenance_img_1 { width: 52%;
}
.maintenance_explan { width: 42.8%;
}
/* 出張メンテナンスお客様の声 */
.voice_maintenance_bg { background-color: #C4E6E4;
}
/* 出張メンテナンス料金 */
.maintenance_cost_container { max-width: 600px; width: 98%; margin: 0 auto; padding-top: 100px;
}
.maintenance_cost_line:nth-child(n+2) { margin-top: 5px;
}
.maintenance_cost_line_color:nth-child(2n+1) { background-color: #72B4BD;
}
.maintenance_cost_line_color:nth-child(2n) { background-color: #C4E6E4;
}
.maintenance_aquarium_column_1,
.maintenance_aquarium_column_2 { width: 300px; font-size: 24px; font-weight: 500; padding: 24px 50px 24px 67px;
}
.maintenance_aquarium_column_3 { width: 300px; font-size: 24px; font-weight: 500; padding: 24px 41px 24px 60px;
}
.maintenance_cost_column_1,
.maintenance_cost_column_2,
.maintenance_cost_column_3 { width: 300px; font-size: 24px; font-weight: 500; padding: 24px 0; text-align: center;
}
.maintenance_notes { font-size: 14px; font-weight: 500;
}

<section class="contact"> <div class="contact_container"> <div class="contact_inner"> <div class="contact_wraper"> <p class="contact_read">熱帯魚や水草の在庫状況、出張サービスに関する質問など<br>お気軽にお問い合わせください。</p> <div class="mg_top_40 flex jc_sb"> <div class="contact_area"> <p class="contact_title font">電話</p> <p class="contact_tel font">03-1234-5678</p> <div class="contact_time common_text flex jc_sb"> <p>営業時間</p> <p>平日 ：13:00～23:00<br>土日祝：11:00～21:00</p> </div> </div> <div class="contact_area"> <p class="contact_title font">メール</p> <div class="contact_btn_area btn_center"> <a class="contact_btn" href="">お問い合わせ</a> </div> </div> </div> <div class="wood_shrimp_illust_1"> <img src="./img/common/wood_shrimp_illust_1.svg" alt=""> </div> <div class="wood_shrimp_illust_2"> <img src="./img/common/wood_shrimp_illust_2.svg" alt=""> </div> </div> </div> </div>
</section>

.contact_container { padding-top: 200px;
}
.contact_inner { padding: 80px; background-color: #C7E6C4;
}
.contact_wraper { max-width: 1280px; margin: 0 auto;
}
.contact_read { font-size: 20px; line-height: 170%; text-align: center;
}
.contact_area { width: 600px; padding: 20px 0 25px; background-color: #64B47A; text-align: center; border-radius: 6px;
}
.contact_title { font-size: 24px;
}
.contact_tel { font-size: 40px; font-weight: 500; color: #fff; margin-top: 20px;
}
.contact_time { width: 216px; margin: 25px auto 0; color: #fff;
}
/* お問い合わせあしらい */
.contact_container { overflow: hidden;
}
.contact_wraper { position: relative;
}
.wood_shrimp_illust_1 { position: absolute; width: 26%; top: -130px; left: -10%;
}
.wood_shrimp_illust_2 { position: absolute; width: 22%; top: 200px; right: -11%;
}
/* お問い合わせあしらい ここまで*/
/* お問い合わせボタン */
.contact_btn_area { margin-top: 52px;
}
.contact_btn { display: inline-block; padding: 14px 71px 14px 63px; background-color: #F4EFEB; border-radius: 50px; position: relative; transition: .8s; font-size: 24px; font-weight: 500;
}
.contact_btn:hover { background-color: #155f0f; color: #F4EFEB;
}
.contact_btn::before { content: ""; -webkit-mask-image: url(../img/common/mail_icon.svg); mask-image: url(../img/common/mail_icon.svg); background-color: #101010; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; fill: red; width: 20px; height: 16px; transform: scale(1.2); display: inline-block; margin-right: 5px; transition: .8s;
}
.contact_btn:hover:before { background-color: #F4EFEB;
}
.contact_btn::after { content: ""; display: inline-block; border-bottom: 1px solid #101010; width: 20px; height: 6px; border-right: 1px solid #101010; position: absolute; top: 50%; right: 24px; transform: skew(45deg) translateY(-50%); transition: .8s;
}
.contact_btn:hover::after { border-bottom: 1px solid #F4EFEB; border-right: 1px solid #F4EFEB; width: 30px; right: 15px;
}
/* お問い合わせボタン ここまで */

<footer class="footer"> <div class="footer_container"> <div class="footer_inner"> <div class="flex"> <div class="footer_logo"> <div class="logo"> <a href=""><img src="./img/common/logo.svg" alt="アクアファクトリー"></a> </div> <div class="footer_contact flex"> <div class="footer_icon"> <a href=""><img src="./img/common/phone_icon.svg" alt="電話のアイコン"></a> </div> <div class="footer_icon"> <a href="https://twitter.com/purekomusyoku" target="_blank"><img src="./img/common/x_icon.svg" alt="X（旧Twitter）のアイコン"></a> </div> <div class="footer_icon"> <a href="https://www.instagram.com/purekoblog/" target="_blank"><img src="./img/common/instagram_icon.svg" alt="Instagramのアイコン"></a> </div> </div> </div> <div class="footer_info"> <dl class="footer_list flex"> <dt class="footer_item">住所</dt> <dd class="footer_detail">〒131-0045<br>東京都墨田区押上◯丁目◯-◯</dd> </dl> <dl class="footer_list flex"> <dt class="footer_item">電話番号</dt> <dd class="footer_detail">03-1234-5678</dd> </dl> <dl class="footer_list flex"> <dt class="footer_item">営業時間</dt> <dd class="footer_detail"> 平日 ：13:00～23:00<br>土日祝：11:00～21:00 </dd> </dl> <dl class="footer_list flex"> <dt class="footer_item">休業日</dt> <dd class="footer_detail">毎週火曜日、年末年始<br>※祝日は営業</dd> </dl> <dl class="footer_list flex"> <dt class="footer_item">取扱商品</dt> <dd class="footer_detail">熱帯魚、水草、観賞魚用品全般</dd> </dl> <div class="footer_btn_area"> <a class="footer_btn" href="">お問い合わせ</a> </div> </div> <div class="footer_nav flex jc_sb"> <div class="footer_nav_inner"> <ul class="footer_link"> <li class="footer_content"><a href="">Gallery</a></li> <li class="footer_article"><a href="">熱帯魚</a></li> <li class="footer_article"><a href="">水草</a></li> <li class="footer_article"><a href="">水草水槽</a></li> </ul> </div> <div class="footer_nav_inner"> <ul class="footer_link"> <li class="footer_content"><a href="">サービス</a></li> <li class="footer_article"><a href="">水槽レイアウト</a></li> <li class="footer_article"><a href="">水槽メンテナンス</a></li> </ul> <ul class="footer_link mg_top_40"> <li class="footer_content"><a href="">初めての方へ</a></li> </ul> <ul class="footer_link"> <li class="footer_content footer_content_mg"><a href="">よくある質問</a></li> </ul> <ul class="footer_link"> <li class="footer_content footer_content_mg"><a href="">店舗情報</a></li> </ul> </div> </div> </div> <small class="footer_copyright">©Aqua Factory All Rights Reserved.</small> </div> </div>
</footer>

.footer_container { background-image: url(../img/common/footer_background.jpg); background-size: cover; background-repeat: no-repeat; overflow: hidden;
}
.footer_inner { max-width: 1080px; margin: 70px auto 0;
}
.footer_contact { margin-top: 10px;
}
.footer_icon { padding: 6px; background-color: #007E93; border-radius: 50%;
}
.footer_icon:nth-child(n+2) { margin-left: 10px;
}
.footer_icon a { transition: .5s;
}
.footer_icon a:hover { opacity: .5;
}
.footer_info { width: 27%; margin-left: 5%;
}
.footer_list:nth-child(n+2) { margin-top: 15px;
}
.footer_item,
.footer_detail { font-size: 14px; font-weight: 400; line-height: 160%;
}
.footer_item { width: 32%;
}
.footer_nav { width: 37%; margin-left: 18%;
}
.footer_nav_inner { width: 45%;
}
.footer_content_mg { margin-top: 10px;
}
.footer_content { font-size: 18px; padding-bottom: 10px; border-bottom: 1px solid #00434F;
}
.footer_article { font-size: 14px; margin-top: 10px;
}
/* フッターお問い合わせボタン */
.footer_btn_area { margin-top: 30px;
}
.footer_btn { display: inline-block; padding: 11px 62px; border: 1px solid #101010; border-radius: 50px; position: relative; transition: .8s; font-size: 14px;
}
.footer_btn:hover { background-color: #007E93; color: #F4EFEB;
}
.footer_btn::before { content: ""; -webkit-mask-image: url(../img/common/footer_mail_icon.svg); mask-image: url(../img/common/footer_background.jpg); background-color: #101010; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; width: 12px; height: 9px; display: inline-block; margin-right: 5px; transition: .8s;
}
.footer_btn:hover:before { background-color: #F4EFEB;
}
.footer_btn::after { content: ""; display: inline-block; border-bottom: 1px solid #101010; width: 20px; height: 6px; border-right: 1px solid #101010; position: absolute; top: 50%; right: 24px; transform: skew(45deg) translateY(-50%); transition: .8s;
}
.footer_btn:hover::after { border-bottom: 1px solid #F4EFEB; border-right: 1px solid #F4EFEB; width: 30px; right: 15px;
}
/* フッターお問い合わせボタン ここまで */
.footer_nav a { transition: .5s;
}
.footer_nav a:hover { color: #F4EFEB;
}
.footer_copyright { margin: 99px 0 20px; display: block; text-align: end;
}

.page_top_btn { position: fixed; right: 50px; bottom: 30px; z-index: 10; color: #007E93; font-weight: 500; opacity: 0; visibility: hidden; transition: .8s;
}
.btn_active { opacity: 1; visibility: visible;
}
.page_top_btn::before { position: absolute; content: ""; display: block; width: 50px; height: 50px; background-color: #007E93; border-radius: 50%; left: 8px; top: -50px;
}
.page_top_btn::after { content: ""; position: absolute; display: block; width: 15px; height: 15px; border-top: 3px solid #F4EFEB; border-right: 3px solid #F4EFEB; transform: rotate(-45deg); top: -29px; left: 26px;
}

<!-- メインビジュアル -->
<section class="mv"> <div class="mv_container"> <picture> <source media="(max-width:375px)" srcset=""> <img class="mv_img" srcset="../img/gallery/gallery_mv_2880.jpg 2x, ../img/gallery/gallery_mv_1440.jpg 1x" src="../img/gallery/gallery_mv_1440.jpg" alt="黒い背景にエンジェルフィッシュの横顔"> </picture> <div class="mv_text font"> <h2 class="gallery_title">Gallery</h2> </div> </div>
</section>
<!-- 内部リンク -->
<div class="link"> <div class="link_container wraper_1080"> <div class="font flex jc_sb"> <a class="link_btn bg_fish" href="#fish">熱帯魚</a> <a class="link_btn bg_plants" href="#plants">水草</a> <a class="link_btn bg_aquarium" href="#aquarium">水草水槽</a> </div> </div>
</div>
<!-- 熱帯魚 -->
<div id="fish" class="fish"> <div class="fish_container"> <h2 class="common_h2 common_h-center font">熱帯魚</h2> <div class="fish_inner wraper_1400 mg_top_40 flex"> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/neon_tetra.jpg" alt="ネオンテトラ"> <div class="text_mg flex jc_sb"> <p class="common_name">ネオンテトラ</p> <p class="fish_category tetra">テトラ系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/cardinal_tetra.jpg" alt="カージナルテトラ"> <div class="text_mg flex jc_sb"> <p class="common_name">カージナルテトラ</p> <p class="fish_category tetra">テトラ系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/green_neon_tetra.jpg" alt="グリーンネオンテトラ"> <div class="text_mg flex jc_sb"> <p class="common_name">グリーンネオンテトラ</p> <p class="fish_category tetra">テトラ系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/rummy_nose_tetra.jpg" alt="ラミーノーズテトラ"> <div class="text_mg flex jc_sb"> <p class="common_name">ラミーノーズテトラ</p> <p class="fish_category tetra">テトラ系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/congo_tetra.jpg" alt="コンゴテトラ"> <div class="text_mg flex jc_sb"> <p class="common_name">コンゴテトラ</p> <p class="fish_category tetra">テトラ系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/corydoras_panda.jpg" alt="コリドラス・パンダ"> <div class="text_mg flex jc_sb"> <p class="common_name">コリドラス・パンダ</p> <p class="fish_category corydoras">コリドラス系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/corydoras_sterbai.jpg" alt="コリドラス・ステルバイ"> <div class="text_mg flex jc_sb"> <p class="common_name">コリドラス・ステルバイ</p> <p class="fish_category corydoras">コリドラス系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/Corydoras_paleatus.jpg" alt="コリドラス・パレアタス"> <div class="text_mg flex jc_sb"> <p class="common_name">コリドラス・パレアタス</p> <p class="fish_category corydoras">コリドラス系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/Corydoras_julii.jpg" alt="コリドラス・ジュリー"> <div class="text_mg flex jc_sb"> <p class="common_name">コリドラス・ジュリー</p> <p class="fish_category corydoras">コリドラス系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/corydoras_pygmy.jpg" alt="コリドラス・ピグミー"> <div class="text_mg flex jc_sb"> <p class="common_name">コリドラス・ピグミー</p> <p class="fish_category corydoras">コリドラス系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/Betta_1.jpg" alt="ベタハーフムーン"> <div class="text_mg flex jc_sb"> <p class="common_name">ベタハーフムーン</p> <p class="fish_category betta_gourami">ベタ・グラミー系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/Betta_2.jpg" alt="ベタハーフムーン"> <div class="text_mg flex jc_sb"> <p class="common_name">ベタハーフムーン</p> <p class="fish_category betta_gourami">ベタ・グラミー系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/Betta_3.jpg" alt="ベタハーフムーン"> <div class="text_mg flex jc_sb"> <p class="common_name">ベタハーフムーン</p> <p class="fish_category betta_gourami">ベタ・グラミー系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/Betta_4.jpg" alt="ベタダンボ"> <div class="text_mg flex jc_sb"> <p class="common_name">ベタダンボ</p> <p class="fish_category betta_gourami">ベタ・グラミー系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/Betta_5.jpg" alt="ベタベールテール"> <div class="text_mg flex jc_sb"> <p class="common_name">ベタベールテール</p> <p class="fish_category betta_gourami">ベタ・グラミー系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/Betta_6.jpg" alt="コイベタ"> <div class="text_mg flex jc_sb"> <p class="common_name">コイベタ</p> <p class="fish_category betta_gourami">ベタ・グラミー系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/golden_honey_dwarf_gourami.jpg" alt="ゴールデンハニードワーフグラミー"> <div class="text_mg flex jc_sb"> <p class="common_name">ゴールデンハニードワーフグラミー</p> <p class="fish_category betta_gourami">ベタ・グラミー系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/Rasbora_heteromorpha.jpg" alt="ラスボラ・ヘテロモルファ"> <div class="text_mg flex jc_sb"> <p class="common_name">ラスボラ・ヘテロモルファ</p> <p class="fish_category carp">コイ系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/cherry_valve.jpg" alt="チェリーバルブ"> <div class="text_mg flex jc_sb"> <p class="common_name">チェリーバルブ</p> <p class="fish_category carp">コイ系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/guppy.jpg" alt="グッピー"> <div class="text_mg flex jc_sb"> <p class="common_name">グッピー</p> <p class="fish_category others">熱帯魚その他</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/translucent_glass_cat.jpg" alt="トランスルーセントグラスキャット"> <div class="text_mg flex jc_sb"> <p class="common_name">トランスルーセントグラスキャット</p> <p class="fish_category others">熱帯魚その他</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/Otocinculus_1.jpg" alt="オトシンクルス"> <div class="text_mg flex jc_sb"> <p class="common_name">オトシンクルス</p> <p class="fish_category others">熱帯魚その他</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/Angelfish.jpg" alt="エンジェルフィッシュ"> <div class="text_mg flex jc_sb"> <p class="common_name">エンジェルフィッシュ</p> <p class="fish_category others">熱帯魚その他</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/mickey_mouse_platy.jpg" alt="ミッキーマウスプラティ"> <div class="text_mg flex jc_sb"> <p class="common_name">ミッキーマウスプラティ</p> <p class="fish_category others">熱帯魚その他</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/doctor_fish.jpg" alt="ドクターフィッシュ"> <div class="text_mg flex jc_sb"> <p class="common_name">ドクターフィッシュ</p> <p class="fish_category others">熱帯魚その他</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/Minami_Numa_Shrimp.jpg" alt="ミナミヌマエビ"> <div class="text_mg flex jc_sb"> <p class="common_name">ミナミヌマエビ</p> <p class="fish_category Shrimp">シュリンプ系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/red_bee_shrimp.jpg" alt="レッドビーシュリンプ"> <div class="text_mg flex jc_sb"> <p class="common_name">レッドビーシュリンプ</p> <p class="fish_category Shrimp">シュリンプ系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/red_cherry_shrimp.jpg" alt="レッドチェリーシュリンプ"> <div class="text_mg flex jc_sb"> <p class="common_name">レッドチェリーシュリンプ</p> <p class="fish_category Shrimp">シュリンプ系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/velvet_blue_shrimp.jpg" alt="ベルベットブルーシュリンプ"> <div class="text_mg flex jc_sb"> <p class="common_name">ベルベットブルーシュリンプ</p> <p class="fish_category Shrimp">シュリンプ系</p> </div> </div> <div class="fish_area"> <img class="round_c" src="../img/gallery/fish/yellow_cherry_shrimp_.jpg" alt="イエローチェリーシュリンプ"> <div class="text_mg flex jc_sb"> <p class="common_name">イエローチェリーシュリンプ</p> <p class="fish_category Shrimp">シュリンプ系</p> </div> </div> </div> </div>
</div>
<!-- 水草 -->
<div id="plants" class="plants"> <div class="plants_container pd_top_150"> <h2 class="common_h2 common_h-center font"> 水草</h2> <div class="plants_inner wraper_1400 mg_top_40 flex"> <div class="plants_area"> <div class="plants_img"> <img class="round_c" src="../img/gallery/aquatic_plants/cuban_pearl_glasses.jpg" alt="キューバパールグラス"> </div> <div class="text_mg"> <p class="common_name">キューバパールグラス</p> </div> </div> <div class="plants_area"> <div class="plants_img"> <img class="round_c" src="../img/gallery/aquatic_plants/glossostigma.jpg" alt="グロッソスティグマ"> </div> <div class="text_mg"> <p class="common_name">グロッソスティグマ</p> </div> </div> <div class="plants_area"> <div class="plants_img"> <img class="round_c" src="../img/gallery/aquatic_plants/green_rotala.jpg" alt="グリーンロタラ"> </div> <div class="text_mg"> <p class="common_name">グリーンロタラ</p> </div> </div> <div class="plants_area"> <div class="plants_img"> <img class="round_c" src="../img/gallery/aquatic_plants/new_large_pearl_glass.jpg" alt="ニューラージ・パールグラス"> </div> <div class="text_mg"> <p class="common_name">ニューラージ・パールグラス</p> </div> </div> <div class="plants_area"> <div class="plants_img"> <img class="round_c" src="../img/gallery/aquatic_plants/anacharis.jpg" alt="アナカリス"> </div> <div class="text_mg"> <p class="common_name">アナカリス</p> </div> </div> <div class="plants_area"> <div class="plants_img"> <img class="round_c" src="../img/gallery/aquatic_plants/anubias_Nana.jpg" alt="アヌビアス・ナナ"> </div> <div class="text_mg"> <p class="common_name">アヌビアス・ナナ</p> </div> </div> <div class="plants_area"> <div class="plants_img"> <img class="round_c" src="../img/gallery/aquatic_plants/willow_moss.jpg" alt="ウィローモス"> </div> <div class="text_mg"> <p class="common_name">ウィローモス</p> </div> </div> <div class="plants_area"> <div class="plants_img"> <img class="round_c" src="../img/gallery/aquatic_plants/Vallisneria_spiralis.jpg" alt="バリスネリア・スピラリス"> </div> <div class="text_mg"> <p class="common_name">バリスネリア・スピラリス</p> </div> </div> <div class="plants_area"> <div class="plants_img"> <img class="round_c" src="../img/gallery/aquatic_plants/microsolium.jpg" alt="ミクロソリウム"> </div> <div class="text_mg"> <p class="common_name">ミクロソリウム</p> </div> </div> <div class="plants_area"> <div class="plants_img"> <img class="round_c" src="../img/gallery/aquatic_plants/matsumo.jpg" alt="マツモ"> </div> <div class="text_mg"> <p class="common_name">マツモ</p> </div> </div> <div class="plants_area"> <div class="plants_img"> <img class="round_c" src="../img/gallery/aquatic_plants/cabomba.jpg" alt="カボンバ"> </div> <div class="text_mg"> <p class="common_name">カボンバ</p> </div> </div> </div> </div>
</div>
<!-- 水草水槽 -->
<div id="aquarium" class="aquarium"> <div class="aquarium_container pd_top_150"> <h2 class="common_h2 common_h-center font"> 水草水槽</h2> <div class="aquarium_inner flex"> <div class="aquarium_area"> <div class="aquarium_img"> <img class="round_c" src="../img/gallery/aquatic_plants aquarium/aquatic_plants aquarium_1.jpg" alt="ネオンテトラの群れが泳いでいる石組み水槽"> </div> </div> <div class="aquarium_area"> <div class="aquarium_img"> <img class="round_c" src="../img/gallery/aquatic_plants aquarium/aquatic_plants aquarium_2.jpg" alt="水草と石のレイアウトのボトルアクアリウム"> </div> </div> <div class="aquarium_area"> <div class="aquarium_img"> <img class="round_c" src="../img/gallery/aquatic_plants aquarium/aquatic_plants aquarium_3.jpg" alt="アーチ状の流木と生い茂った水草の水槽にたくさんの熱帯魚が泳いでいる"> </div> </div> <div class="aquarium_area"> <div class="aquarium_img"> <img class="round_c" src="../img/gallery/aquatic_plants aquarium/aquatic_plants aquarium_4.jpg" alt="カラフルな熱帯魚と巨大な流木がレイアウトされている大型水槽"> </div> </div> <div class="aquarium_area"> <div class="aquarium_img"> <img class="round_c" src="../img/gallery/aquatic_plants aquarium/aquatic_plants aquarium_5.jpg" alt="暗い部屋に照らされている水草水槽"> </div> </div> <div class="aquarium_area"> <div class="aquarium_img"> <img class="round_c" src="../img/gallery/aquatic_plants aquarium/aquatic_plants aquarium_6.jpg" alt="下から見上げるアングルから撮られた水草水槽"> </div> </div> <div class="aquarium_area"> <div class="aquarium_img"> <img class="round_c" src="../img/gallery/aquatic_plants aquarium/aquatic_plants aquarium_7.jpg" alt="山のような石の周りを熱帯魚の群れが泳いでいる水草水槽"> </div> </div> <div class="aquarium_area"> <div class="aquarium_img"> <img class="round_c" src="../img/gallery/aquatic_plants aquarium/Aquatic_plants aquarium_8.jpg" alt="両端に石が配置され真ん中が水草の道になっている水草水槽"> </div> </div> </div> <div class="service_link"> <p class="service_link_text">水草水槽では出張レイアウトのサービスも承っております。</p> <div class="btn_area btn_center"> <a class="service_link_btn" href="">出張レイアウトの詳細はこちら</a> </div> </div> </div>
</div>

/* Gallery共通 */
.common_name { font-size: 14px; font-weight: 400;
}
.text_mg { margin-top: 10px;
}
/* メインビジュアル */
.mv_container { position: relative;
}
.mv_img { width: 100%;
}
.mv_text { position: absolute; top: 39%; right: 12.5%; font-size: 67px; color: #F4EFEB;
}
.shop_summary { margin-left: 7px;
}
.copy { color: #06541C; font-size: 56px;
}
.copy_small { font-size: 36px; font-weight: 700;
}
/* 内部リンク */
.link_container { padding-top: 50px;
}
.link_btn { display: inline-block; font-size: 30px; font-weight: 700; color: #F4EFEB; position: relative;
}
.link_btn::after { content: ""; position: absolute; border-top: 17.3px solid #F4EFEB; border-right: 10px solid transparent; border-left: 10px solid transparent; top: 39%; right: 7%;
}
.bg_fish { background-image: url(../../img/gallery/fish_button.jpg); background-repeat: no-repeat; background-size: cover; padding: 25px 105px;
}
.bg_plants { background-image: url(../../img/gallery/plants_button.jpg); background-repeat: no-repeat; background-size: cover; padding: 25px 120px;
}
.bg_aquarium { background-image: url(../../img/gallery/Aquarium_button.jpg); background-repeat: no-repeat; background-size: cover; padding: 25px 90px;
}
/* 熱帯魚 */
.fish_container { padding-top: 100px;
}
.fish_inner { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(8, 1fr); gap: 30px 1.3%;
}
.fish_area { width: 100%;
}
.text_mg { align-items: center;
}
.fish_category { font-size: 11px; font-weight: 500; color: #FFFFFF; padding: 7px 10px; border-radius: 50px;
}
.tetra { background-color: #72B4BD;
}
.corydoras { background-color: #BD7272;
}
.betta_gourami { background-color: #7872BD;
}
.carp { background-color: #BDBA72;
}
.others { background-color: #72BD99;
}
.Shrimp { background-color: #BD729A;
}
/* 水草 */
.plants_inner { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 30px 1.3%;
}
.plants_area { width: 100%;
}
/* 水草水槽 */
.aquarium_inner { max-width: 1360px; width: 97%; margin: 40px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); gap: 40px 2.9%;
}
.aquarium_area { width: 100%;
}
.service_link { margin: 80px auto 0;
}
.service_link_text { font-size: 24px; font-weight: 400; text-align: center;
}
.service_link_btn { display: inline-block; padding: 18px 70px; border-radius: 50px; position: relative; transition: .8s; font-size: 24px; background-color: #64B47A; color: #F4EFEB;
}
.service_link_btn:hover { background-color: #72B4BD;
}
.service_link_btn::after { content: ""; display: inline-block; border-bottom: 1px solid #F4EFEB; width: 20px; height: 6px; border-right: 1px solid #F4EFEB; position: absolute; top: 50%; right: 24px; transform: skew(45deg) translateY(-50%); transition: .8s;
}
.service_link_btn:hover::after { width: 30px; right: 15px;
}

<!-- ヘッダー -->
<header class="header"> <div class="header_container flex jc_sb"> <div class="logo"> <h1><a href=""><img src="./img/common/logo.svg" alt="アクアファクトリー"></a></h1> </div> <nav> <ul class="header_gnav flex"> <li><a href="">Gallery</a></li> <li><a href="">初めての方へ</a></li> <li><a href="">サービス</a></li> <li><a href="">よくある質問</a></li> <li><a href="">SHOP</a></li> <li><a class="header_btn" href="">お問い合わせ</a></li> </ul> </nav> </div>
</header>
<!-- メインビジュアル -->
<section class="mv"> <div class="mv_container"> <picture> <source media="(max-width:375px)" srcset=""> <img class="mv_img" srcset="./img/top/top_mv_2880.jpg 2x, ./img/top/top_mv_1440.jpg 1x" src="./img/top/top_mv_1440.jpg" alt="ゆらゆら揺れる水草と泳いでいるネオンテトラ"> </picture> <div class="mv_text"> <h2 class="shop_summary">熱帯魚と水草の専門店</h2> <p class="copy">お家<span class="copy_small">で</span>森林浴</p> </div> </div>
</section>
<!-- Gallery -->
<section class="gallery"> <div class="gallery_container"> <div class="gallery_inner flex wraper_1080 pd_top_150"> <div class="gallery_explan"> <h2 class="common_h2">Gallery</h2> <div class="gallery_img_1 mg_top_40"> <img class="round_c" src="./img/top/gallery_1.jpg" alt="熱帯魚たちが水草水槽で泳いでいる"> </div> <p class="common_text mg_top_30"> アクアファクトリーでは、熱帯魚や水草を多数取り揃えております。また、水草レイアウト水槽も設置しており、美しい水中の景色や、魅力的な熱帯魚たちの世界をご覧いただけます。ふらっと店舗に立ち寄りぼーっと水槽を眺めるだけでも大歓迎です。日常の喧騒を忘れてたっぷりと癒やされてください。 </p> <div class="btn_area"> <a class="btn btn_font" href="">Read More</a> </div> </div> <div class="gallery_img flex"> <div class="gallery_img_2"> <img src="./img/top/gallery_2.jpg" alt="暗い部屋で幻想的に輝く水草水槽"> </div> <div class="gallery_img_3"> <img src="./img/top/gallery_3.jpg" alt="尾びれがハーフムーンで色が白いベタが泳いでいる"> </div> </div> </div> </div>
</section>
<!-- 初めての方へ -->
<section class="beginner"> <div class="beginner_container pd_top_150"> <div class="beginner_inner wraper_1080 flex"> <div class="beginner_img"> <img src="./img/top/Beginner's_Guide.jpg" alt="石組みと水草のレイアウトと水滴が着いた石組みレイアウトのボトルアクアリウム"> </div> <div class="beginner_explan"> <h2 class="beginner_title">初めての方へ</h2> <div class="beginner_text"> <p class="common_text"> アクアリウムに興味がある。でも、何から始めればよいかわからない。 <p class="beginner_newline common_text"> そんな方に向けて、水槽導入時に必要なものや毎日のお世話といったアクアリウムを始めるうえで必要なことを紹介しています。</p> <p class="beginner_newline common_text">お世話ができるか不安な方も下記リンク先の内容をご覧いただければ不安が解消されるはずです。</p> </p> </div> <div class="btn_area"> <a class="btn" href="">Read More</a> </div> </div> </div> </div>
</section>
<!-- サービス -->
<section class="service pd_top_150"> <div class="service_container"> <div class="service_background"> <img src="./img/top/bubbles_illust.svg" alt="青い気泡の背景"> </div> <div class="wraper_1400"> <h2 class="common_h2 common_h-center">サービス</h2> <div class="test flex jc_sb ai_c mg_top_40"> <div class="service_img"> <img src="./img/top/service_1.jpg" alt="水槽の横幅ほど大きい流木とジャングルのように生い茂った水草が光に照らされて神々しい景色の中に色鮮やかな熱帯魚たちが泳いでいる"> </div> <div class="service_explan service_mgr"> <h3 class="service_h3">出張レイアウト<span class="service_cost">1万円～</span></h3> <p class="service_text common_text"> 私たちの出張レイアウトサービスは、あなたの部屋に合わせたレイアウトを専門家の手によって生活空間に幻想的な美しさを持ち込みます。<br>ご自宅はもちろん、会社のオフィスでのご注文も承っております。 </p> <div class="btn_area"> <a class="btn" href="">出張レイアウトの詳細はこちら</a> </div> </div> </div> <div class="flex jc_sb ai_c"> <div class="service_explan service_mgl"> <div> <h3 class="service_h3">出張メンテナンス<span class="service_cost">1万円～</span></h3> <p class="service_text common_text"> 専門家の手によるメンテナンスでは、水槽の掃除、お魚の健康チェックなど水槽に関することならなんでも対応いたします。<br>ふとした瞬間に目に映るお魚と水草の美しい景色をいつでも楽しむため、水槽メンテナンスは私たちにお任せください。 </p> <div class="btn_area"> <a class="btn" href="">出張メンテナンスの詳細はこちら</a> </div> </div> </div> <div class="service_img"> <img src="./img/top/service_2.jpg" alt="水槽をプロホースで掃除している"> </div> </div> </div> </div>
</section>
<!-- お客様の声 -->
<section class="voice"> <div class="voice_container pd_top_150"> <h2 class="common_h2 common_h-center">お客様の声</h2> <div class="flex jc_sb mg_top_40"> <div class="voice_explan voice_layout_bg round_c"> <div class="voice_overview flex"> <div class="voice_img"> <img src="./img/top/voice_1.jpg" alt="色鮮やかな水草水槽と緑一色の水草水槽"> </div> <div class="voice_text_innner flex"> <div> <p class="voice_category">出張レイアウト</p> <p class="voice_title">幻想的な景色を見ると疲れがスッと抜けるような感じです。</p> </div> <div class="voice_memo_area"> <p class="voice_history">アクアリウム歴<span class="voice_mgl">3ヶ月</span></p> <p>30代<span class="voice_mgl">女性</span></p> </div> </div> </div> <p class="voice_text common_text"> 一人暮らしだと、家に帰ると真っ暗でいつも寂しかったのですが、水槽を置いてから寂しさがなくなりました。水槽のところだけ光に包まれているのでとても幻想的で、疲れがスッと抜けるような感じがします。また、レイアウトをお店の方と一緒に決めていくのですが、とても親身に考えてくださいました。部屋のレイアウトにも合うような提案もしていただき、毎日見ても全然飽きない完璧なレイアウトをしていただきました。出張レイアウトサービスを頼んで本当に良かったと感じています。 </p> </div> <div class="voice_explan voice_maintenance_bg round_c"> <div class="voice_overview flex"> <div class="voice_img"> <img src="./img/top/voice_2.jpg" alt="両端に石が積まれ真ん中が道にのようになっている水草水槽"> </div> <div class="voice_text_innner flex"> <div> <p class="voice_category">出張メンテナンス</p> <p class="voice_title">アクアリウムの話しができる唯一の存在です。</p> </div> <div class="voice_memo_area"> <p class="voice_history">アクアリウム歴<span class="voice_mgl">2年</span></p> <p>30代<span class="voice_mgl">女性</span></p> </div> </div> </div> <p class="voice_text common_text"> 出張メンテナンスサービスを選んでから、水槽のお手入れがラクになりました。お世話がラクになる方法やオススメのアクアリウムグッズなど、プロの観点からお話を聞けてとても勉強になります。また、周りにアクアリウムの話をできる人がいないので話し相手にもなってくれるのもありがたいです。 </p> </div> </div> <div class="btn_area btn_center"> <a class="btn" href="">サービスの詳細はこちら</a> </div> </div>
</section>
<!-- SNS -->
<section class="sns pd_top_150"> <div class="sns_container"> <div class="sns_decoration"> <img src="./img/common/fish_bubbles.svg" alt="魚の群れと気泡"> </div> <h2 class="sns_h2 common_h-center">SNS</h2> <div class="flex sns_inner mg_top_40"> <div class="sns_x"> <p class="sns_title">X（旧Twitter）</p> <div class="sns_post"> <a class="twitter-timeline" data-width="420" data-height="600" data-theme="light" href="https://twitter.com/purekomusyoku?ref_src=twsrc%5Etfw">Tweets by purekomusyoku</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> </div> <div class="sns_instagram"> <p class="sns_title">Instagram</p> <div class="sns_post sns_post_size"> <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/Cy-5wWtR-bH/?utm_source=ig_embed&utm_campaign=loading" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:420px; min-width:420px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"> <div style="padding:16px;"> <a href="https://www.instagram.com/p/Cy-5wWtR-bH/?utm_source=ig_embed&utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"> </div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"> </div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"> </div> </div> </div> <div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-511.000000, -20.000000)" fill="#000000"> <g> <path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"> </path> </g> </g> </g> </svg></div> <div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> この投稿をInstagramで見る</div> </div> <div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"> <div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"> </div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"> </div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"> </div> </div> <div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"> </div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"> </div> </div> <div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"> </div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"> </div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"> </div> </div> </div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"> </div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"> </div> </div> </a> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"> <a href="https://www.instagram.com/p/Cy-5wWtR-bH/?utm_source=ig_embed&utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">ぷれこ@AI画像フリー素材屋(@purekoblog)がシェアした投稿</a> </p> </div> </blockquote> <script async src="//www.instagram.com/embed.js"></script> </div> </div> </div> </div>
</section>
<!-- 店舗情報 -->
<section class="shop"> <div class="shop_container pd_top_150"> <h2 class="common_h2 common_h-center">店舗情報</h2> <div class="shop_inner flex jc_sb"> <div class="shop_info"> <div class="logo"> <img src="./img/common/logo.svg" alt="アクアファクトリー"> </div> <table class="shop_text"> <tr class="shop_list"> <td class="shop_item">住所</td> <td class="shop_detail">〒131-0045<br>東京都墨田区押上◯丁目◯-◯</td> </tr> <tr class="shop_list"> <td class="shop_item">電話番号</td> <td class="shop_detail">03-1234-5678</td> </tr> <tr class="shop_list"> <td class="shop_item">営業時間</td> <td class="shop_detail"> 平日 ：13:00～23:00<br>土日祝：11:00～21:00 </td> </tr> <tr class="shop_list"> <td class="shop_item">休業日</td> <td class="shop_detail">毎週火曜日、年末年始<br>※祝日は営業</td> </tr> <tr class="shop_list"> <td class="shop_item">取扱商品</td> <td class="shop_detail">熱帯魚、水草、観賞魚用品全般</td> </tr> </table> </div> <div class="shop_map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6628555716225!2d139.80955925661453!3d35.709913314778056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed6f0500f01%3A0x89ca817a76aa9315!2z44CSMTMxLTAwNDUg5p2x5Lqs6YO95aKo55Sw5Yy65oq85LiK77yR5LiB55uu77yR!5e0!3m2!1sja!2sjp!4v1698585241162!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div> </div> </div>
</section>
<!-- お問い合わせ -->
<section class="contact"> <div class="contact_container"> <p class="contact_read">熱帯魚や水草の在庫状況、出張サービスに関する質問など<br>お気軽にお問い合わせください。</p> <div class="contact_inner flex jc_sb"> <div class="contact_area"> <p>電話</p> <p>03-1234-5678</p> <div class="contact_time"> <p>営業時間</p> <p>平日 ：13:00～23:00<br>土日祝：11:00～21:00</p> </div> </div> <div class="contact_area"> <p>メール</p> <p>03-1234-5678</p> <div class="btn_area"> <a class="btn" href="">お問い合わせ</a> </div> </div> </div> </div>
</section>
<!-- フッター -->
<footer class="footer"> <div class="footer_container"> <div class="footer_shop"> <div class="footer_logo"> <div class="logo"> <a href=""><img src="./img/common/logo.svg" alt="アクアファクトリー"></a> </div> <div class="footer_contact"> <div class="footer_icon"> <a href=""><img src="./img/common/phone_icon.svg" alt="電話のアイコン"></a> </div> <div class="footer_icon"> <a href=""><img src="./img/common/x_icon.svg" alt="X（旧Twitter）のアイコン"></a> </div> <div class="footer_icon"> <a href=""><img src="./img/common/instagram_icon.svg" alt="Instagramのアイコン"></a> </div> </div> </div> <div class="footer_info"> <dl class="footer_list"> <dt class="footer_item">住所</dt> <dd class="footer_detail">〒131-0045<br>東京都墨田区押上◯丁目◯-◯</dd> </dl> <dl class="footer_list"> <dt class="footer_item">電話番号</dt> <dd class="footer_detail">03-1234-5678</dd> </dl> <dl class="footer_list"> <dt class="footer_item">営業時間</dt> <dd class="footer_detail"> 平日 ：13:00～23:00<br>土日祝：11:00～21:00 </dd> </dl> <dl class="footer_list"> <dt class="footer_item">休業日</dt> <dd class="footer_detail">毎週火曜日、年末年始<br>※祝日は営業</dd> </dl> <dl class="footer_list"> <dt class="footer_item">取扱商品</dt> <dd class="footer_detail">熱帯魚、水草、観賞魚用品全般</dd> </dl> </div> <div class="btn_area"> <a class="btn" href="">お問い合わせ</a> </div> </div> <div class="footer_nav"> <ul class="footer_link"> <li class="footer_content"><a href="">Gallery</a></li> <li class="footer_article"><a href="">熱帯魚</a></li> <li class="footer_article"><a href="">水草</a></li> <li class="footer_article"><a href="">水草水槽</a></li> </ul> <ul class="footer_link"> <li class="footer_content"><a href="">サービス</a></li> <li class="footer_article"><a href="">水槽レイアウト</a></li> <li class="footer_article"><a href="">水槽メンテナンス</a></li> </ul> <ul class="footer_link"> <li class="footer_content"><a href="">初めての方へ</a></li> </ul> <ul class="footer_link"> <li class="footer_content"><a href="">よくある質問</a></li> </ul> <ul class="footer_link"> <li class="footer_content"><a href="">店舗情報</a></li> </ul> </div> </div> <small>©Aqua Factory All Rights Reserved.</small>
</footer>

body { background-color: #F4EFEB; font-family: 'Noto Sans JP', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif; /* font-family: 'Kaisei Decol', serif; font-family: 'Noto Sans JP', sans-serif; font-family: 'Roboto Slab', serif; font-family: 'Times New Roman', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif; */ color: #101010;
}
/* 見出し */
.common_h2 { font-family: 'Roboto Slab', 'Times New Roman', 'Kaisei Decol', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif; font-size: 48px; font-weight: 500; color: #80553C; display: inline-block; position: relative;
}
.common_h2::before { content: url(../img/common/heading_decorate.svg); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1;
}
.common_h-center { display: block; text-align: center;
}
/* 本文 */
.common_text { font-size: 14px; font-weight: 400; line-height: 170%;
}
/* 画像 */
img { max-width: 100%;
}
.round_c { border-radius: 6px;
}
/* flex */
.flex { display: flex;
}
.jc_sb { justify-content: space-between;
}
.ai_c { align-items: center;
}
/* コンテンツ幅 */
.wraper_1080 { max-width: 1080px; width: 95%; margin: 0 auto;
}
.wraper_1400 { max-width: 1400px; margin: 0 auto;
}
/* 余白 */
.mg_top_30 { margin-top: 30px;
}
.mg_top_40 { margin-top: 40px;
}
.pd_top_150 { padding-top: 150px;
}
/* ボタン */
.btn_area { margin-top: 30px;
}
.btn { display: inline-block; padding: 11px 63px; border: 1px solid #101010; border-radius: 22px; position: relative; transition: .8s;
}
.btn::after { content: ""; display: inline-block; border-bottom: 1px solid #101010; width: 20px; height: 6px; border-right: 1px solid #101010; position: absolute; top: 50%; right: 24px; transform: skew(45deg) translateY(-50%); transition: .8s;
}
.btn:hover { background-color: #72B4BD; color: #F4EFEB;
}
.btn:hover::after { border-bottom: 1px solid #F4EFEB; border-right: 1px solid #F4EFEB; width: 30px; right: 15px;
}
.btn_font { font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 18px; font-weight: 400;
}
.btn_center { text-align: center;
}
/* ヘッダー */
.header_container { max-width: 1440px; width: 86%; margin: 0 auto; align-items: center; padding: 10px 0;
}
.logo { min-width: 138px;
}
.header_gnav { gap: 30px; font-family: 'Kaisei Decol', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif; font-weight: 500;
}
.header_btn { padding: 20px 40px; color: #fff; background-color: #64B47A; font-size: 20px; font-weight: 700; border-radius: 6px;
}
.header_btn::before { content: url(../img/common/mail_icon.svg); color: #fff; display: inline-block; margin-right: 10px;
}

/* メインビジュアル */
.mv_container { height: calc(100vh - 99px); overflow: hidden; position: relative;
}
.mv_img { object-fit: cover; min-width: 100%; min-height: 100%;
}
.mv_text { position: absolute; top: 9%; left: 3%; font-family: 'Kaisei Decol', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif; font-size: 18px; font-weight: 400;
}
.shop_summary { margin-left: 7px;
}
.copy { color: #06541C; font-size: 56px;
}
.copy_small { font-size: 36px; font-weight: 700;
}
/* Gallery */
.gallery_inner { justify-content: space-between;
}
.gallery_explan { width: 50%;
}
.gallery_img { max-width: 474px;
}
.gallery_img_2 { width: 45%; margin-right: 20px; margin-top: 250px;
}
.gallery_img_3 { width: 50%; margin-top: 40px;
}
/* 初めての方へ */
.beginner_inner { justify-content: space-between; padding: 60px; background-color: #C7E6C4; border-radius: 12px;
}
.beginner_img { width: 47%;
}
.beginner_explan { width: 47%;
}
.beginner_title { font-family: 'Kaisei Decol', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif; font-size: 36px; color: #80553C;
}
.beginner_text { margin-top: 30px;
}
.beginner_newline { width: 99%;
}
/* サービス */
.service_container { position: relative;
}
.service_background { position: absolute; z-index: -1; top: 55%; left: 47%; transform: translate(-50%, -50%); max-width: 1440px; width: 100%;
}
.service_img { width: 50%;
}
.service_explan { width: 37%;
}
.service_mgr { margin-right: 5.5%;
}
.service_mgl { margin-left: 5.5%;
}
.service_h3 { font-size: 28px; font-weight: 500;
}
.service_cost { margin-left: 20px;
}
.service_text { margin-top: 30px;
}
/* お客様の声 */
.voice_container { max-width: 1360px; margin: 0 auto;
}
.voice_explan { width: 48.5%; padding: 40px;
}
.voice_layout_bg { background-color: #C7E6C4;
}
.voice_maintenance_bg { background-color: #C4E6E4;
}
.voice_overview { justify-content: space-between;
}
.voice_img { width: 52%;
}
.voice_text_innner { width: 44%; flex-direction: column; justify-content: space-between;
}
.voice_category { font-size: 14px; font-weight: 400;
}
.voice_title { margin-top: 20px; font-size: 24px; font-weight: 500;
}
.voice_memo_area { font-size: 18px; font-weight: 500;
}
.voice_mgl { margin-left: 15px;
}
.voice_text { margin-top: 20px;
}
/* SNS */
.sns_container { position: relative; background-image: url(../img/common/wave_background.svg); background-repeat: repeat-x; z-index: 1;
}
.sns_decoration { position: absolute; top: 47%; left: 53%; transform: translate(-50%, -50%); width: 110%; z-index: -1;
}
.sns_inner { justify-content: center;
}
.sns_x { margin-right: 13%;
}
.sns_h2 { font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 48px; font-weight: 500; color: #F4EFEB; padding-top: 100px;
}
.sns_title { font-family: 'Kaisei Decol', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif; font-size: 36px; font-weight: 500; text-align: center;
}
.sns_post { margin-top: 20px;
}
/* .sns_post { width: 420px;
} */
/* .sns_post_size { width: 420px; height: 600px;
} */
/* 店舗情報 */
.shop_inner { max-width: 1080px; margin: 40px auto 0;
}
.shop_info { width: 34%;
}
.shop_list { width: 100%;
}
.shop_text { width: 100%;
}
.shop_text { margin-top: 30px; line-height: 30px;
}
.shop_list { padding-top: 20px;
}
.shop_item,
.shop_detail { font-size: 14px; font-weight: 400;
}
.shop_detail { padding-left: 18%;
}
.shop_map { width: 37.5%;
}
/* お問い合わせ */
.contact_inner { max-width: 1280px; margin: 0 auto;
}
.contact_read { text-align: center;
}