サイト模写 ｜ エステサイト（ホームページ）

※サイト模写用に作成したページの解説です。

※使用画像はフリー素材からダウンロードしています。

※下記、模写サイトへボタンから該当のサイトへGo!!

MEMO HTML css js
模写サイトへ

MEMO

1.body

  • 最大幅1200px
  • 左右の余白は2%
  • ページ内メインカラーを#e874de
  • jsで、ページ内スムーススクロール実装
  • グーグルフォントZen Maru Gothic使用

2.ヘッダー

  • スマホの際はハンバーガーメニューにし、上に固定
  • section05をホバーしたらsection06とsection07が表示される
  • スマホの際はsection05をタップしたらsection06とsection07が表示される

3.メインビジュアル

  • 横幅いっぱい
  • jsのslickでスライダーを設置

4.キャンペーン

  • 背景画像のドットをcssでリピート表示
  • キャンペーンのコースを横並び表示
  • スマホの際の表は、デモサイトのように縦表示

5.ヒアリング

  • 画像 ＋ テキストと手順の表を横並び配置
  • スマホの際は、画像とテキストと手順の表をを縦表示
  • 手順の表はpositionをつかって画像の上にテキストを配置

6.施術

  • 画像を横並び配置
  • png文字をslickでスライダーを設置

7.HOW TO USE ＋ AWARD ＋ REVIEW

  • 横幅いっぱい
  • pcもスマホもランダムに配置するので、positionやmarginで調整
  • 動画はクリックしたらべ地タブで再生

8.地図

  • マップを埋め込み
  • マップとテキストを横並び配置
  • スマホの際はマップとテキストを縦配置

8.フッター

  • section05の右下にsection06とsection07を表示

9.レスポンシブ

  • ブレークポイントは800px

10.その他

  • jsのinviewをテキストや画像に設置し要素が見えたらクラスを追加して変化させる
  • 【css例】 .inview-appear { opacity: 0; transform: translateY(80px) scale(1.05); transition: .6s .2s; } .inview-appear.inview-add { opacity: 1; transform: translateY(0) scale(1); } ※inview-appearが見えたらinview-addを追加し変化させる

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Esthetic site｜サイト模写</title>
   <link rel="stylesheet" href="">
   <meta name="description" content="テキストテキストテキストテキスト">
   <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
   <link rel="stylesheet" href="../slick/slick-theme.css">
   <link rel="stylesheet" type="text/css" href="../slick/slick.css"/>
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
   <script type="text/javascript" src="../inview.js" defer></script>
   <script type="text/javascript" src="../slick/slick.min.js" defer></script>
   <script src="script.js" defer></script>
</head>
<body ontouchstart="">
   <header id="esthetic-header">
      <div class="esthetic-wrapper">
      <h1 class="logo">Esthetic site</h1>
      <nav>
         <ul>
            <li><a href="#sec-01">section01</a></li>
            <li><a href="#sec-02">section02</a></li>
            <li><a href="#sec-03">section03</a></li>
            <li><a href="#sec-04">section04</a></li>
            <li>
            <a href="#sec-05">section05</a>
            <ul>
               <li><a href="#sec-06">section06</a></li>
               <li><a href="#sec-07">section07</a></li>
            </ul>
            </li>
            <li><a href="#sec-05">section08</a></li>
         </ul>
      </nav>
      <div class="ham">
         <span></span>
         <span></span>
         <span></span>
      </div>
      <div class="mask"></div>
      </div>
   </header>
   <main class="esthetic-main">
      <section id="sec-01">
      <ul class="slick01">
         <li><img src="img/01.jpg" alt=""></li>
         <li><img src="img/02.jpg" alt=""></li>
         <li><img src="img/03.jpg" alt=""></li>
         <li><img src="img/04.jpg" alt=""></li>
         <li><img src="img/05.jpg" alt=""></li>
      </ul>
      </section>
      <section id="sec-02">
      <div class="esthetic-wrapper">
         <h2 class="section-title">Campaign<span>キャンペーン</span></h2>
         <ul>
            <li class="inview-appear-txt">
            <h3 class="sec-02-t">コース＿A</h3>
            
            <div class="txt"><span>テキストテキストテキストテキストテキストテキストテキストテキスト</span><span class="bg">月額¥1,600</span><span class="bold"><span class="normal">FACE3回</span> ¥10,000</span></div>
            </li>
            <li class="inview-appear-txt">
            <h3 class="sec-02-t">コース＿B</h3>
            <div class="txt"><span>テキストテキストテキストテキストテキストテキストテキストテキスト</span><span class="bg">月額¥1,600</span><span class="bold"><span class="normal">FACE5回</span> ¥12,000</span></div>
            </li>
            <li class="inview-appear-txt">
            <h3 class="sec-02-t">コース＿C</h3>
            <div class="txt"><span>テキストテキストテキストテキストテキストテキストテキストテキスト</span><span class="bg">月額¥1,600</span><span class="bold"><span class="normal">BODY3回</span> ¥15,000</span></div>
            </li>
            <li class="inview-appear-txt">
            <h3 class="sec-02-t">コース＿D</h3>
            <div class="txt"><span>テキストテキストテキストテキストテキストテキストテキストテキスト</span><span class="bg">月額¥1,600</span><span class="bold"><span class="normal">BODY5回</span> ¥20,000</span></div>
            </li>
         </ul>
      </div>
      </section>
      <section id="sec-03">
      <div class="esthetic-wrapper">
         <div class="txt">
            <h2 class="section-title">Hearing<span>ヒアリング</span></h2>
            <div class="flow-txt inview-appear-txt">
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
            </div>
            <img class="inview-right" src="img/01.jpg" alt="">
         </div>
         <div class="flow">
            <ul>
            <li>
               <img class="inview-appear" src="img/1-cdcdcd.png" alt="">
               <p class="inview-op"><span>Step.01</span>テキストテキストテキストテキスト</p>
            </li>
            <li>
               <img class="inview-appear" src="img/2-c0c0c0.png" alt="">
               <p class="inview-op"><span>Step.02</span>テキストテキストテキストテキスト</p>
            </li>
            <li>
               <img class="inview-appear" src="img/3-b3b3b3.png" alt="">
               <p class="inview-op"><span>Step.03</span>テキストテキストテキストテキスト</p>
            </li>
            <li>
               <img class="inview-appear" src="img/4-a6a6a6.png" alt="">
               <p class="inview-op"><span>Step.04</span>テキストテキストテキストテキスト</p>
            </li>
            </ul>
         </div>
      </div>
      </section>
      <section id="sec-04">
      <div class="esthetic-wrapper">
         <h2 class="section-title">Treatment<span>施術</span></h2>
         <ul class="treatment-img">
            <li><img class="inview-appear" src="img/05.jpg" alt=""></li>
            <li><img class="inview-appear" src="img/02.jpg" alt=""></li>
            <li><img class="inview-appear" src="img/03.jpg" alt=""></li>
         </ul>
         <ul class="slick03">
            <li><img src="img/beautiful.png" alt=""></li>
            <li><img src="img/face.png" alt=""></li>
            <li><img src="img/beautiful.png" alt=""></li>
            <li><img src="img/body.png" alt=""></li>
         </ul>
         <p class="inview-appear-txt">
            テキストテキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキストテキスト
         </p>
      </div>
      </section>
      <section> id="sec-05">
         <div class="move-wrap">
            <div class="txt inview-left">
               HOW TO USE
            </div>
            <a target="_blank" href="https://youtu.be/xnvsebKyiHk">
               <div class="img inview-appear-txt">
               <img src="img/move.png" alt="">
               </div>
            </a>
         </div>
      </section>
      <section id="sec-06">
      <div class="award-wrap">
         <div class="txt inview-right">
            AWARD
         </div>
         <ul>
            <li><img src="img/manzoku.png" class="inview-left" alt=""></li>
            <li><img src="img/ninchi.png" class="inview-op" alt=""></li>
            <li><img src="img/koukan.png" class="inview-right" alt=""></li>
         </ul>
      </div>
      </section>
      <section id="sec-07">
      <div class="review-wrap">
         <div class="txt inview-left">
            REVIEW
         </div>
         <ul class="hukidashi">
            <li><img class="inview-left" src="img/hukidashi01.png" alt=""></li>
            <li><img class="inview-right" src="img/hukidashi02.png" alt=""></li>
            <li><img class="inview-left" src="img/hukidashi03.png" alt=""></li>
            <li><img  class="inview-right"src="img/hukidashi01.png" alt=""></li>
            <li><img class="inview-left" src="img/hukidashi02.png" alt=""></li>
            <li><img  class="inview-right"src="img/hukidashi03.png" alt=""></li>
         </ul>
      </div>
      </section>
      <section id="sec-08">
      <div class="esthetic-wrapper">
         <h2 class="section-title">Map<span>地図</span></h2>
         <div class="m-wrap">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.74797546837!2d139.74324421538273!3d35.658580480199575!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1640073005786!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            <div class="txt">
            <p>郵便番号：105-0011</p>
            <p>住所：東京都港区芝公園４-2-8</p>
            <p>電話番号：00-0000-0000</p>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
         </div>
         
      </div>
      </section>
   </main>
   <footer class="esthetic-footer">
      <div class="esthetic-wrapper">
      <h1 class="logo">Esthetic site</h1>
      <ul>
         <li><a href="#sec-01">section01</a></li>
         <li><a href="#sec-02">section02</a></li>
         <li><a href="#sec-03">section03</a></li>
         <li><a href="#sec-04">section04</a></li>
         <li>
            <a href="#sec-05">section05</a>
            <ul>
            <li><a href="#sec-06">section06</a></li>
            <li><a href="#sec-07">section07</a></li>
            </ul>
         </li>
         <li><a href="#sec-05">section08</a></li>
      </ul>
      </div>
      <p>© esthetic site</p>
   </footer>
</body>
</html>

css

html {
font-size: 100%;
}

body {
font-family: 'Zen Maru Gothic', Arial, Helvetica, sans-serif;
line-height: 1.6;
}

*, *::before, *::after {
box-sizing: border-box;
}

a {
text-decoration: none;
color: #333;
}

img {
max-width: 100%;
vertical-align: bottom;
}

.inview-appear {
opacity: 0;
transform: translateY(80px) scale(1.05);
transition: .6s .2s;
}

.inview-appear.inview-add {
opacity: 1;
transform: translateY(0) scale(1);
}

.inview-op {
opacity: 0;
transition: .6s .4s;
}

.inview-op.inview-add {
opacity: 1;
}

.inview-left {
opacity: 0;
transform: translateX(50%);
transition: .6s .2s;
}

.inview-left.inview-add {
opacity: 1;
transform: translateX(0);
}

.inview-right {
opacity: 0;
transform: translateX(-50%);
transition: .6s .2s;
}

.inview-right.inview-add {
opacity: 1;
transform: translateX(0);
}

.inview-appear-txt {
opacity: 0;
transform: scale(0.5);
transition: .6s .2s;
}

.inview-appear-txt.inview-add {
opacity: 1;
transform: scale(1);
}

.esthetic-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 2%;
}

.logo {
font-weight: bold;
font-size: 1.6rem;
}

#esthetic-header .esthetic-wrapper {
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
}

#esthetic-header nav ul {
display: flex;
}

#esthetic-header nav ul li {
padding: 20px 0;
margin-left: 30px;
}

#esthetic-header nav ul li:nth-child(5) {
position: relative;
z-index: 1000;
}

#esthetic-header nav ul li:nth-child(5):hover ul {
display: block;
background-color: #fff;
}

#esthetic-header nav ul li ul {
display: none;
position: absolute;
top: 60px;
left: 0;
padding: 0 5px;
}

#esthetic-header nav ul li ul li {
padding: 0;
margin-left: 0;
margin-bottom: 10px;
}

#esthetic-header nav ul li a {
position: relative;
display: inline-block;
}

#esthetic-header nav ul li a::after {
content: '';
width: 100%;
height: 3px;
background-color: #e874de;
position: absolute;
bottom: -4px;
left: 0;
transform: scale(0, 1);
transform-origin: right top;
transition: transform .3s;
}

#esthetic-header nav ul li a:hover::after {
transform: scale(1, 1);
transform-origin: left top;
}

#esthetic-header nav ul li:first-child {
margin-left: 0;
}

#esthetic-header .ham {
display: none;
}

#esthetic-header .mask {
display: none;
}

.esthetic-main {
overflow: hidden;
margin-bottom: 120px;
}

.esthetic-main #sec-01 .slick01 {
padding: 0;
margin: 0;
}

.esthetic-main #sec-01 img {
width: 100vw;
height: 80vh;
object-fit: cover;
}

.esthetic-main #sec-01 .slick-slide {
width: 100vw;
}

.esthetic-main .section-title {
font-weight: bold;
font-size: 3rem;
line-height: 1.1;
display: inline-block;
position: relative;
}

.esthetic-main .section-title span {
margin-top: 10px;
display: block;
font-size: 0.9rem;
position: relative;
}

.esthetic-main .section-title span::after {
content: '';
display: block;
background-color: #e874de;
height: 2px;
width: 40%;
position: absolute;
right: 0;
bottom: 40%;
}

.esthetic-main #sec-02 {
position: relative;
padding: 100px 0 400px;
text-align: center;
}

.esthetic-main #sec-02::before {
content: '';
background: url(img/dot.png);
opacity: 0.5;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}

.esthetic-main #sec-02 .section-title span::after {
bottom: -10px;
margin-left: 30%;
left: 0;
}

.esthetic-main #sec-02 ul {
margin-top: 80px;
margin-left: 10%;
width: 80%;
}

.esthetic-main #sec-02 ul li {
display: flex;
align-items: center;
border: 3px solid #e874de;
border-radius: 5px;
margin-bottom: 5px;
}

.esthetic-main #sec-02 ul li .sec-02-t {
margin: 0;
width: 20%;
padding: 7% 4%;
color: #fff;
background-color: #e874de;
}

.esthetic-main #sec-02 ul li .txt {
padding: 2% 4%;
width: 80%;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
}

.esthetic-main #sec-02 ul li .txt span {
width: 33%;
display: block;
}

.esthetic-main #sec-02 ul li .txt .bold {
font-weight: bold;
font-size: 1.6rem;
}

.esthetic-main #sec-02 ul li .txt .bold .normal {
font-weight: normal;
display: inline;
}

.esthetic-main #sec-02 ul li .txt .bg {
width: 20%;
margin-left: 10%;
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}

.esthetic-main #sec-03 {
position: relative;
width: 100%;
margin-top: -350px;
padding: 0 0 100px;
top: 50%;
overflow: hidden;
}

.esthetic-main #sec-03::before {
content: '';
background: #fef7fd;
position: absolute;
top: 100px;
bottom: 0;
left: 0;
right: 0;
transform: skewY(-7deg) translateY(90px);
z-index: -1;
}

.esthetic-main #sec-03 .esthetic-wrapper {
display: flex;
align-items: center;
}

.esthetic-main #sec-03 .txt {
width: 50%;
}

.esthetic-main #sec-03 .txt .flow-txt {
padding: 10%;
}

.esthetic-main #sec-03 .txt img {
height: 300px;
object-fit: cover;
}

.esthetic-main #sec-03 .flow {
width: 50%;
}

.esthetic-main #sec-03 .flow ul {
padding: 10%;
}

.esthetic-main #sec-03 .flow ul li {
margin-top: -30px;
position: relative;
}

.esthetic-main #sec-03 .flow ul li:first-child {
margin-top: 0;
}

.esthetic-main #sec-03 .flow ul p {
position: absolute;
top: 30%;
left: 0%;
width: 100%;
text-align: center;
font-size: 1.2rem;
}

.esthetic-main #sec-03 .flow ul p span {
display: block;
font-size: 1.6rem;
font-weight: bold;
}

.esthetic-main #sec-04 {
position: relative;
width: 100%;
margin-top: -50px;
padding: 0 0 200px;
top: 50%;
overflow: hidden;
color: #fff;
}

.esthetic-main #sec-04::before {
content: '';
background: #666;
position: absolute;
top: -100px;
bottom: 100px;
left: 0;
right: 0;
transform: skewY(-7deg) translateY(-90px);
z-index: -1;
}

.esthetic-main #sec-04 .section-title {
margin: 80px 0;
}

.esthetic-main #sec-04 .treatment-img {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}

.esthetic-main #sec-04 .treatment-img li {
width: 32%;
}

.esthetic-main #sec-04 .slick03 {
margin-right: 35%;
margin-bottom: 60px;
overflow: hidden;
}

.esthetic-main #sec-04 .slick03 .slick-slide {
transition: opacity .5s, transform .5s;
transform: scale(0.6);
}

.esthetic-main #sec-04 .slick03 .slick-center {
transform: scale(1);
}

.esthetic-main #sec-04 p {
width: 60%;
margin-bottom: 30px;
}

.esthetic-main #sec-05 .move-wrap {
display: flex;
justify-content: space-around;
margin-left: 30%;
}

.esthetic-main #sec-05 .move-wrap .txt {
font-style: italic;
font-weight: bold;
font-size: 3rem;
position: relative;
margin-top: 30px;
}

.esthetic-main #sec-05 .move-wrap .txt::after {
content: "";
display: block;
background-color: #333;
height: 2px;
width: 120px;
position: absolute;
top: 40px;
right: -150px;
}

.esthetic-main #sec-05 .move-wrap .img {
overflow: hidden;
width: 300px;
height: 300px;
border-radius: 50%;
z-index: -1;
}

.esthetic-main #sec-05 .move-wrap .img img {
overflow: hidden;
transform: scale(1);
transition: .4s;
}

.esthetic-main #sec-05 .move-wrap .img:hover img {
display: block;
transform: scale(1.1);
}

.esthetic-main #sec-06 {
margin-bottom: 160px;
}

.esthetic-main #sec-06 .award-wrap {
margin-right: 30%;
position: relative;
}

.esthetic-main #sec-06 .award-wrap .txt {
font-style: italic;
font-weight: bold;
font-size: 3rem;
margin-top: 30px;
position: absolute;
bottom: 40px;
right: -30%;
}

.esthetic-main #sec-06 .award-wrap .txt::after {
content: "";
display: block;
background-color: #333;
height: 2px;
width: 120px;
position: absolute;
bottom: 40px;
left: -150px;
}

.esthetic-main #sec-06 .award-wrap ul {
padding: 0 10%;
display: flex;
align-items: center;
justify-content: space-between;
}

.esthetic-main #sec-06 .award-wrap ul li {
width: 30%;
z-index: -1;
}

.esthetic-main #sec-07 {
margin-bottom: 80px;
}

.esthetic-main #sec-07 .review-wrap {
margin-left: 15%;
display: flex;
}

.esthetic-main #sec-07 .txt {
font-style: italic;
font-weight: bold;
font-size: 3rem;
position: relative;
margin-top: 30px;
}

.esthetic-main #sec-07 .txt::after {
content: "";
display: block;
background-color: #333;
height: 2px;
width: 120px;
position: absolute;
top: 40px;
right: -150px;
}

.esthetic-main #sec-07 .hukidashi {
display: flex;
flex-wrap: wrap;
margin-left: 20%;
}

.esthetic-main #sec-07 .hukidashi li {
width: 35%;
filter: drop-shadow(0 0 5px #999);
margin-bottom: 10px;
}

.esthetic-main #sec-07 .hukidashi li:nth-child(1) {
margin-left: 20px;
}

.esthetic-main #sec-07 .hukidashi li:nth-child(2) {
margin-right: 20px;
margin-top: -30px;
}

.esthetic-main #sec-07 .hukidashi li:nth-child(3) {
margin-left: -60px;
margin-top: 10px;
}

.esthetic-main #sec-07 .hukidashi li:nth-child(4) {
margin-top: -20px;
}

.esthetic-main #sec-07 .hukidashi li:nth-child(5) {
margin-top: 20px;
}

.esthetic-main #sec-07 .hukidashi li:nth-child(5) {
margin-right: 30px;
}

.esthetic-main #sec-08 .m-wrap {
margin-top: 30px;
display: flex;
align-items: center;
width: 100%;
}

.esthetic-main #sec-08 .m-wrap iframe {
display: block;
margin-top: 30px;
width: 70%;
height: 300px;
}

.esthetic-main #sec-08 .m-wrap .txt {
width: 30%;
margin-left: 30px;
}

.esthetic-footer {
background-color: #333;
color: #fff;
padding: 80px 0 10px;
text-align: center;
}

.esthetic-footer .esthetic-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 80px;
}

.esthetic-footer ul li {
margin-bottom: 5px;
}

.esthetic-footer ul li a {
color: #fff;
}

.esthetic-footer ul li:last-child {
margin-bottom: 0;
}

.esthetic-footer p {
font-size: 0.7rem;
}

@media screen and (max-width: 800px) {
.logo {
   font-size: 1.2rem;
}
#esthetic-header .esthetic-wrapper {
   width: 100%;
   height: auto;
}
#esthetic-header .logo {
   position: fixed;
   top: 25px;
   left: 10px;
   z-index: 1;
}
#esthetic-header nav {
   opacity: 0;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   width: 300px;
   height: 100vh;
   background-color: #333;
   padding: 100px 4% 0;
   z-index: 30;
   transition: .6s;
}
#esthetic-header nav ul {
   margin-top: 30px;
   flex-direction: column;
}
#esthetic-header nav ul li {
   margin-left: 0;
   margin-bottom: 5px;
}
#esthetic-header nav ul li a {
   position: static;
}
#esthetic-header nav ul li a::after {
   display: none;
}
#esthetic-header .ham {
   display: block;
   position: fixed;
   top: 0;
   right: 0;
   width: 80px;
   height: 80px;
   z-index: 30;
}
#esthetic-header .ham span {
   background-color: #333;
   width: 30px;
   height: 2px;
   position: relative;
   left: 25px;
   transition: .6s;
}
#esthetic-header .ham span:nth-child(1) {
   position: absolute;
   top: 30px;
}
#esthetic-header .ham span:nth-child(2) {
   position: absolute;
   top: 39px;
}
#esthetic-header .ham span:nth-child(3) {
   position: absolute;
   bottom: 30px;
}
#esthetic-header .mask {
   opacity: 0;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   width: 100%;
   height: 100vh;
   z-index: 20;
   transition: .6s;
}
#esthetic-header.open .logo {
   margin-top: 50px;
   z-index: 40;
   color: #fff;
}
#esthetic-header.open a {
   color: #fff;
}
#esthetic-header.open nav {
   opacity: 1;
}
#esthetic-header.open nav ul li:nth-child(5):hover ul, #esthetic-header.open nav ul li:nth-child(5):active ul {
   background-color: transparent;
   margin-top: -20px;
   margin-left: 40px;
}
#esthetic-header.open nav ul li:nth-child(5):hover ul li:nth-child(2), #esthetic-header.open nav ul li:nth-child(5):active ul li:nth-child(2) {
   margin-top: -10px;
}
#esthetic-header.open .ham span:nth-child(1) {
   transform: translateY(9px) rotate(315deg);
}
#esthetic-header.open .ham span:nth-child(2) {
   opacity: 0;
}
#esthetic-header.open .ham span:nth-child(3) {
   transform: translateY(-9px) rotate(-315deg);
}
#esthetic-header.open .mask {
   display: block;
   opacity: 1;
}
.inview-left {
   opacity: 0;
   transform: translateY(50px) scale(1.1);
   transition: .6s .2s;
}
.inview-left.inview-add {
   opacity: 1;
   transform: translateY(0);
}
.inview-right {
   opacity: 0;
   transform: translateY(-50px) scale(0.9);
   transition: .6s .2s;
}
.inview-right.inview-add {
   opacity: 1;
   transform: translateY(0);
}
.esthetic-main {
   padding: 0 2%;
}
.esthetic-main .section-title {
   font-size: 2rem;
}
.esthetic-main .section-title span::after {
   width: 30%;
}
.esthetic-main #sec-01 {
   z-index: -1;
}
.esthetic-main #sec-02 .section-title span::after {
   margin-left: 35%;
}
.esthetic-main #sec-02 ul {
   width: 100%;
   margin-top: 30px;
   margin-left: 0;
}
.esthetic-main #sec-02 ul li {
   flex-direction: column;
   flex-wrap: wrap;
   width: 100%;
}
.esthetic-main #sec-02 ul li .sec-02-t {
   width: 100%;
}
.esthetic-main #sec-02 ul li .txt {
   align-items: flex-start;
   flex-wrap: wrap;
   width: 100%;
}
.esthetic-main #sec-02 ul li .txt span {
   width: 100%;
}
.esthetic-main #sec-02 ul li .txt span:first-child {
   width: 100%;
}
.esthetic-main #sec-02 ul li .txt .bg {
   display: inline;
   margin-top: 10px;
   margin-left: 0;
   width: 35%;
   font-size: 0.9rem;
}
.esthetic-main #sec-02 ul li .txt .bold {
   padding-top: 15px;
   display: inline;
   font-size: 1.2rem;
   width: 60%;
}
.esthetic-main #sec-03 .esthetic-wrapper {
   flex-direction: column;
}
.esthetic-main #sec-03 .txt {
   width: 100%;
}
.esthetic-main #sec-03 .txt img {
   width: 100%;
}
.esthetic-main #sec-03 .flow {
   width: 100%;
}
.esthetic-main #sec-03 .flow ul li {
   margin-top: -20px;
}
.esthetic-main #sec-03 .flow ul p {
   top: 25%;
   font-size: 0.9rem;
}
.esthetic-main #sec-03 .flow ul p span {
   margin-bottom: 0;
}
.esthetic-main #sec-04 .treatment-img {
   flex-direction: column;
}
.esthetic-main #sec-04 .treatment-img li {
   width: 80%;
   margin-bottom: 30px;
}
.esthetic-main #sec-04 .treatment-img li:nth-child(2) {
   margin-left: 20%;
}
.esthetic-main #sec-04 p {
   margin-left: 10%;
   width: 90%;
}
.esthetic-main #sec-05 {
   margin-bottom: 80px;
}
.esthetic-main #sec-05 .move-wrap {
   flex-direction: column;
   margin-left: calc(50% - 150px);
}
.esthetic-main #sec-05 .move-wrap .txt {
   padding-bottom: 30px;
}
.esthetic-main #sec-05 .move-wrap .txt::after {
   right: 0;
   left: -25px;
   top: 160px;
   z-index: 1;
}
.esthetic-main #sec-05 .move-wrap .img {
   z-index: -1;
}
.esthetic-main #sec-06 {
   margin-bottom: 60px;
}
.esthetic-main #sec-06 .award-wrap {
   margin-right: 0;
}
.esthetic-main #sec-06 .award-wrap .txt {
   top: 20%;
   right: 0;
   left: 10px;
}
.esthetic-main #sec-06 .award-wrap .txt::after {
   top: 25%;
   left: 60px;
}
.esthetic-main #sec-06 .award-wrap ul {
   flex-direction: column;
}
.esthetic-main #sec-06 .award-wrap ul li {
   margin-left: 30%;
   width: 60%;
}
.esthetic-main #sec-06 .award-wrap ul li:nth-child(2) {
   margin-left: 40%;
}
.esthetic-main #sec-06 .award-wrap ul li:nth-child(3) {
   margin-left: -30%;
   margin-top: -10%;
}
.esthetic-main #sec-07 .review-wrap {
   flex-direction: column;
   margin-left: 0;
}
.esthetic-main #sec-07 .txt::after {
   top: 130%;
   left: 30px;
   right: 0;
}
.esthetic-main #sec-07 .hukidashi {
   margin-top: 80px;
   margin-left: 0;
   flex-direction: column;
}
.esthetic-main #sec-07 .hukidashi li {
   width: 80%;
}
.esthetic-main #sec-07 .hukidashi li:nth-child(2), .esthetic-main #sec-07 .hukidashi li:nth-child(4) {
   margin-top: 0;
   margin-left: 30px;
}
.esthetic-main #sec-07 .hukidashi li:nth-child(3), .esthetic-main #sec-07 .hukidashi li:nth-child(5) {
   margin-left: 50px;
   margin-right: 0;
}
.esthetic-main #sec-08 .m-wrap {
   flex-direction: column;
   margin-top: 0;
}
.esthetic-main #sec-08 .m-wrap iframe {
   width: 100%;
}
.esthetic-main #sec-08 .m-wrap .txt {
   width: 100%;
   margin-top: 30px;
   margin-left: 0;
}
.esthetic-footer {
   padding-left: 2%;
   padding-right: 2%;
}
.esthetic-footer ul li li {
   margin-left: 40px;
   list-style: square;
}
}

js

$(function(){
   /*==============================================
   ハンバーガ―メニュー
   ================================================*/
   $('.ham').on('click', function() {
      if (!$('#esthetic-header').hasClass('open')) {
         $('#esthetic-header').addClass('open');
      } else {
         $('#esthetic-header').removeClass('open');
      }
   });
   $('nav').on('click', function() {
      $('#esthetic-header').removeClass('open');
   });
   $('nav a').on('click', function() {
      $('#esthetic-header').removeClass('open');
   });

   $('.mask').on('click', function() {
      $('#esthetic-header').removeClass('open');
   });
   /*==============================================
   ページ内スムーズスクロール
   ================================================*/
   // ページ内リンクのイベント
   $('a[href^="#"]').click(function(){
   // リンクを取得
   let href= $(this).attr("href");
   // ジャンプ先のid名をセット
   let target = $(href == "#" || href == "" ? 'html' : href);
   // トップからジャンプ先の要素までの距離を取得
   // ヘッダーの高さがある場合はtopからマイナスする
   let position = target.offset().top - 80;
   // animateでスムーススクロールを行う
   // 600はスクロール速度で単位はミリ秒
   $("html, body").animate({scrollTop:position}, 600, "swing");
   return false;
});
   /*==============================================
   slick
   ================================================*/
   $('.slick01').slick({
      autoplay: true,
      autoplaySpeed: 3000,
      dots: true,
      arrows: false,
      fade: true,
      slidesToShow: 1,
   });
   $('.slick03').slick({
      autoplay: true,
      autoplaySpeed: 3000,
      arrows: false,
      slidesToShow: 3,
      centerMode: true,
      centerPadding: '10px',
   });
// $('.carousel').bind('touchstart', function(){
//   return true;
// });
   /*==============================================
   inview
   ================================================*/
   $('.inview-appear').on('inview', function(){
         $(this).addClass('inview-add');
   });
   $('.inview-op').on('inview', function(){
      $(this).addClass('inview-add');
   });
   $('.inview-left').on('inview', function(){
      $(this).addClass('inview-add');
   });
   $('.inview-right').on('inview', function(){
   $(this).addClass('inview-add');
   });
   $('.inview-appear-txt').on('inview', function(){
      $(this).addClass('inview-add');
   });

});
MEMO HTML css js
模写サイトへ
​