index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レストランサイト制作｜トップページ</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Raleway&family=Zen+Maru+Gothic&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/lightbox.css"> <link rel="stylesheet" href="css/hamburgers.css"> </head> <body id="top"> <header> <h1>オステリア ダ・ヴィンチ南池袋</h1> <p class="tag-line">食材とワインにこだわり抜いた、大人の隠れ家</p> </header> <p class="hamburger hamburger--stand" id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p> <nav id="g-nav"> <div class="nav-inner"> <ul class="nav-list"> <li><a href="#top" data-en="TOP">トップ</a></li> <li><a href="#news" data-en="NEWS">お知らせ</a></li> <li><a href="#menu" data-en="MENU">メニュー</a></li> <li><a href="#video" data-en="VIDEO">動画</a></li> <li><a href="#shop" data-en="SHOP">店舗情報</a></li> <li><a href="form/index.html#form" data-en="RESERVE">ご予約</a></li> </ul> <div class="sns-wrapper"> <p><a href="#">Instagram</a></p> <p><a href="#">Facebook</a></p> <p><a href="#">LINE</a></p> <p><a href="#">X</a></p> </div> </div> </nav> <div class="main-visual"> <ul class="bxslider"> <li><img src="img/main-1.webp" alt=""></li> <li><img src="img/main-2.webp" alt=""></li> <li><img src="img/main-3.webp" alt=""></li> </ul> </div> <div class="main-copy"> <h2>厳選された旬の食材と、<br> イタリア各地のワインを楽しめるオステリア</h2> <p class="lead">隠れ家的なオステリア「ダ・ヴィンチ」<br> 店内はアンティーク調の落ち着いた雰囲気で、大人のための空間となっています。<br> 豊富なワインリストから、お料理にぴったりのワインを選ぶことができます。</p> </div> <div class="gallery"> <p><img src="img/gallery-1.jpg" alt=""></p> <p><img src="img/gallery-2.jpg" alt=""></p> </div> <main> <section id="news"> <h2 data-en="NEWS">お知らせ</h2> <dl id="news-list"> </dl> </section> <div class="parallax-1"></div> <section id="menu"> <h2 data-en="MENU">メニュー</h2> <div class="menu-wrapper"> <div class="menu-box"> <a href="img/menu-1.jpg" data-lightbox="menu" data-title="画像のタイトル"> <p class="photo"><img src="img/menu-1.jpg" alt=""></p> <p class="menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, placeat!</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-2.jpg" data-lightbox="menu"> <p class="photo"><img src="img/menu-2.jpg" alt=""></p> <p class="menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, placeat!</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-3.jpg" data-lightbox="menu"> <p class="photo"><img src="img/menu-3.jpg" alt=""></p> <p class="menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, placeat!</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-4.jpg" data-lightbox="menu"> <p class="photo"><img src="img/menu-4.jpg" alt=""></p> <p class="menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, placeat!</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-5.jpg" data-lightbox="menu"> <p class="photo"><img src="img/menu-5.jpg" alt=""></p> <p class="menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, placeat!</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-6.jpg" data-lightbox="menu"> <p class="photo"><img src="img/menu-6.jpg" alt=""></p> <p class="menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, placeat!</p> </a> </div><!-- /.menu-box --> </div><!-- /.menu-wrapper --> </section> <section id="video"> <h2 data-en="VIDEO">動画</h2> <div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/RRfUKzMnFOM?si=ixHm8MVl8dXQZFWd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div><!-- /.video-wrapper --> </section> <section id="shop"> <h2 data-en="SHOP">店舗情報</h2> <div class="map-wrapper"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.945289559081!2d139.7117402746393!3d35.7275640274293!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1706775379631!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div> <div class="shop-wrapper"> <dl> <dt>〒</dt><dd>176-0000</dd> <dt>住所</dt><dd>東京都豊島区南池袋</dd> <dt>Tel</dt> <dd><a class="tel-num" href="tel:03-1111-1111">03-1111-1111</a></dd> <dt>Mail</dt><dd>aaa@bbbb.com</dd> </dl> <dl> <dt>Lunch</dt><dd>11:30~15:30</dd> <dt>Dinner</dt><dd>17:30~23:00</dd> <dt>定休日</dt><dd>年末年始</dd> <dt>総席数</dt><dd>120席</dd> </dl> </div> </section> <div class="parallax-2"></div> <section id="faq"> <h2 data-en="FAQ">よくある質問</h2> <details open name="faq"> <summary>Q:予約は必要ですか？</summary> <p class="answer">A:お席のご予約は、お電話またはウェブサイトにて承っております。特に週末やディナータイムは混雑が予想されますので、事前にご予約いただくことをおすすめいたします。</p> </details> <details name="faq"> <summary>Q:子供連れでも大丈夫ですか？</summary> <p class="answer">A:はい、お子様連れでも歓迎いたします。お子様用の椅子や食器もご用意しておりますので、お気軽にご利用ください。</p> </details> <details name="faq"> <summary>Q:アレルギー対応は可能ですか？</summary> <p class="answer">A:はい、可能な限り対応させていただきます。事前にご予約時に、アレルギーをお持ちの食材をお知らせください。</p> </details> <details name="faq"> <summary>Q:貸し切りは可能ですか？</summary> <p class="answer">A:はい、可能です。詳しくは店舗にお問い合わせください。</p> </details> </section> </main> <div class="carousel"> <ul class="bxslider2"> <li><img src="img/gallery-1.jpg" alt=""></li> <li><img src="img/gallery-2.jpg" alt=""></li> <li><img src="img/menu-1.jpg" alt=""></li> <li><img src="img/menu-2.jpg" alt=""></li> <li><img src="img/menu-3.jpg" alt=""></li> <li><img src="img/menu-4.jpg" alt=""></li> <li><img src="img/menu-5.jpg" alt=""></li> <li><img src="img/menu-6.jpg" alt=""></li> </ul> </div> <footer> <p><small>© <span id="this-year"></span> オステリア ダ・ヴィンチ南池袋</small></p> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="js/jquery.bxslider.js"></script> <script src="js/lightbox.js"></script> <script> $(function(){ //メインビジュアル $('.bxslider').bxSlider({ mode: 'fade', auto: true, infiniteLoop: false, controls: false, pager: false,//画像の下にある黒い丸 touchEnabled: false,//スマホ時のスクロールを無効 }); //外部ファイルを呼び出す $('#news-list').load('news.txt'); //カルーセル $('.bxslider2').bxSlider({ ticker: true, speed: 50000, minSlides: 2, maxSlides: 6, slideWidth: 320, }); //西暦の取得 let fullYear = new Date().getFullYear(); if(fullYear > 2024){ $('#this-year').text('2024-'+fullYear); }else{ $('#this-year').text(fullYear); } //ナビゲーション //ナビゲーションをまず隠す $('#g-nav').hide(); //ハンバーガーボタン //#btnをon.clickしたら $('#btn').on('click',function(){ $(this).toggleClass('is-active'); $('#g-nav').fadeToggle(200); }); //#g-nav aをon.clickしたら $('#g-nav a').on('click',function(){ $('#g-nav').fadeOut(200); $('#btn').removeClass('is-active'); }); }); </script> </body> </html><!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レストランサイト制作｜トップページ</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Raleway&family=Zen+Maru+Gothic&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/lightbox.css"> <link rel="stylesheet" href="css/hamburgers.css"> </head> <body id="top"> <header> <h1>オステリア ダ・ヴィンチ南池袋</h1> <p class="tag-line">食材とワインにこだわり抜いた、大人の隠れ家</p> </header> <p class="hamburger hamburger--stand" id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p> <nav id="g-nav"> <div class="nav-inner"> <ul class="nav-list"> <li><a href="#top" data-en="TOP">トップ</a></li> <li><a href="#news" data-en="NEWS">お知らせ</a></li> <li><a href="#menu" data-en="MENU">メニュー</a></li> <li><a href="#video" data-en="VIDEO">動画</a></li> <li><a href="#shop" data-en="SHOP">店舗情報</a></li> <li><a href="form/index.html#form" data-en="RESERVE">ご予約</a></li> </ul> <div class="sns-wrapper"> <p><a href="#">Instagram</a></p> <p><a href="#">Facebook</a></p> <p><a href="#">LINE</a></p> <p><a href="#">X</a></p> </div> </div> </nav> <div class="main-visual"> <ul class="bxslider"> <li><img src="img/main-1.webp" alt=""></li> <li><img src="img/main-2.webp" alt=""></li> <li><img src="img/main-3.webp" alt=""></li> </ul> </div> <div class="main-copy"> <h2>厳選された旬の食材と、<br> イタリア各地のワインを楽しめるオステリア</h2> <p class="lead">隠れ家的なオステリア「ダ・ヴィンチ」<br> 店内はアンティーク調の落ち着いた雰囲気で、大人のための空間となっています。<br> 豊富なワインリストから、お料理にぴったりのワインを選ぶことができます。</p> </div> <div class="gallery"> <p><img src="img/gallery-1.jpg" alt=""></p> <p><img src="img/gallery-2.jpg" alt=""></p> </div> <main> <section id="news"> <h2 data-en="NEWS">お知らせ</h2> <dl id="news-list"> </dl> </section> <div class="parallax-1"></div> <section id="menu"> <h2 data-en="MENU">メニュー</h2> <div class="menu-wrapper"> <div class="menu-box"> <a href="img/menu-1.jpg" data-lightbox="menu" data-title="画像のタイトル"> <p class="photo"><img src="img/menu-1.jpg" alt=""></p> <p class="menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, placeat!</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-2.jpg" data-lightbox="menu"> <p class="photo"><img src="img/menu-2.jpg" alt=""></p> <p class="menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, placeat!</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-3.jpg" data-lightbox="menu"> <p class="photo"><img src="img/menu-3.jpg" alt=""></p> <p class="menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, placeat!</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-4.jpg" data-lightbox="menu"> <p class="photo"><img src="img/menu-4.jpg" alt=""></p> <p class="menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, placeat!</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-5.jpg" data-lightbox="menu"> <p class="photo"><img src="img/menu-5.jpg" alt=""></p> <p class="menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, placeat!</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-6.jpg" data-lightbox="menu"> <p class="photo"><img src="img/menu-6.jpg" alt=""></p> <p class="menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, placeat!</p> </a> </div><!-- /.menu-box --> </div><!-- /.menu-wrapper --> </section> <section id="video"> <h2 data-en="VIDEO">動画</h2> <div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/RRfUKzMnFOM?si=ixHm8MVl8dXQZFWd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div><!-- /.video-wrapper --> </section> <section id="shop"> <h2 data-en="SHOP">店舗情報</h2> <div class="map-wrapper"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.945289559081!2d139.7117402746393!3d35.7275640274293!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1706775379631!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div> <div class="shop-wrapper"> <dl> <dt>〒</dt><dd>176-0000</dd> <dt>住所</dt><dd>東京都豊島区南池袋</dd> <dt>Tel</dt> <dd><a class="tel-num" href="tel:03-1111-1111">03-1111-1111</a></dd> <dt>Mail</dt><dd>aaa@bbbb.com</dd> </dl> <dl> <dt>Lunch</dt><dd>11:30~15:30</dd> <dt>Dinner</dt><dd>17:30~23:00</dd> <dt>定休日</dt><dd>年末年始</dd> <dt>総席数</dt><dd>120席</dd> </dl> </div> </section> <div class="parallax-2"></div> <section id="faq"> <h2 data-en="FAQ">よくある質問</h2> <details open name="faq"> <summary>Q:予約は必要ですか？</summary> <p class="answer">A:お席のご予約は、お電話またはウェブサイトにて承っております。特に週末やディナータイムは混雑が予想されますので、事前にご予約いただくことをおすすめいたします。</p> </details> <details name="faq"> <summary>Q:子供連れでも大丈夫ですか？</summary> <p class="answer">A:はい、お子様連れでも歓迎いたします。お子様用の椅子や食器もご用意しておりますので、お気軽にご利用ください。</p> </details> <details name="faq"> <summary>Q:アレルギー対応は可能ですか？</summary> <p class="answer">A:はい、可能な限り対応させていただきます。事前にご予約時に、アレルギーをお持ちの食材をお知らせください。</p> </details> <details name="faq"> <summary>Q:貸し切りは可能ですか？</summary> <p class="answer">A:はい、可能です。詳しくは店舗にお問い合わせください。</p> </details> </section> </main> <div class="carousel"> <ul class="bxslider2"> <li><img src="img/gallery-1.jpg" alt=""></li> <li><img src="img/gallery-2.jpg" alt=""></li> <li><img src="img/menu-1.jpg" alt=""></li> <li><img src="img/menu-2.jpg" alt=""></li> <li><img src="img/menu-3.jpg" alt=""></li> <li><img src="img/menu-4.jpg" alt=""></li> <li><img src="img/menu-5.jpg" alt=""></li> <li><img src="img/menu-6.jpg" alt=""></li> </ul> </div> <footer> <p><small>© <span id="this-year"></span> オステリア ダ・ヴィンチ南池袋</small></p> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="js/jquery.bxslider.js"></script> <script src="js/lightbox.js"></script> <script> $(function(){ //メインビジュアル $('.bxslider').bxSlider({ mode: 'fade', auto: true, infiniteLoop: false, controls: false, pager: false,//画像の下にある黒い丸 touchEnabled: false,//スマホ時のスクロールを無効 }); //外部ファイルを呼び出す $('#news-list').load('news.txt'); //カルーセル $('.bxslider2').bxSlider({ ticker: true, speed: 50000, minSlides: 2, maxSlides: 6, slideWidth: 320, }); //西暦の取得 let fullYear = new Date().getFullYear(); if(fullYear > 2024){ $('#this-year').text('2024-'+fullYear); }else{ $('#this-year').text(fullYear); } //ナビゲーション //ナビゲーションをまず隠す $('#g-nav').hide(); //ハンバーガーボタン //#btnをon.clickしたら $('#btn').on('click',function(){ $(this).toggleClass('is-active'); $('#g-nav').fadeToggle(200); }); //#g-nav aをon.clickしたら $('#g-nav a').on('click',function(){ $('#g-nav').fadeOut(200); $('#btn').removeClass('is-active'); }); }); </script> </body> </html>
style.css
@charset "utf-8"; /* 変数に登録 */ :root{ --font_ja:'Zen Maru Gothic', serif; --font_en:'Raleway', sans-serif; --color_1:#13745d; --color_2:#848522; --color_3:#f1ead5; } html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search][type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted}[type=reset],[type=submit],button,html [type=button]button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}img{max-width: 100%;vertical-align: bottom;} /* pcレイアウト */ html{ scroll-behavior: smooth; } header{ background-color: #FFF; position: absolute; top: 0; left: 0; z-index: 20; padding: 40px; font-family: var(--font_ja); } h1{ margin-bottom: 30px; font-size: 38px; } @media (max-width:680px){ header{ width: 80%; padding: 10px; left: 0; right: 0; top: 80px; margin: auto; background-color: #ffffffb3; } h1{ font-size: 24px; margin-bottom: 10px; } .tag-line{ font-size: 14px; } } /* ハンバーガーボタン部分 */ #btn{ position: fixed; right: 0; top: 0; padding: 20px; background-color: #FFF; z-index: calc(infinity);/* このページでとにかく1番上に配置させたい */ } /* ナビゲーション部分 */ #g-nav{ width: 100%; height: 100vh; background: url(../img/nav-bg.webp) no-repeat center center/cover; position: fixed; z-index: 30; top: 0; left: 0; } .nav-inner{ width: 50%; height: 100vh; background-color: #FFFFFF99; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-left: 50%; padding:40px 10% 0; } .nav-list{ margin-bottom: 40px; } #g-nav li{ margin-bottom: 10px; } #g-nav .nav-list a{ display: block; padding: 10px; border-bottom: 2px solid #333; color: #333; transition: 0.2s; } #g-nav .nav-list a:hover{ text-indent: 1em; font-weight: bold; } /* sns部分 */ .sns-wrapper{ display: flex; flex-wrap: wrap; gap: 20px 4%; } .sns-wrapper>p{ width: 48%; background-color: var(--color_3); transition: 0.2s; &:hover{ filter: brightness(80%); } } .sns-wrapper a{ display: block; padding: 16px 0 16px 44px; background: url(../img/instagram.svg) no-repeat 10px center/26px; color: #222; } .sns-wrapper>p:nth-of-type(2)>a{ background: url(../img/facebook.svg) no-repeat 10px center/26px; } .sns-wrapper>p:nth-of-type(3)>a{ background: url(../img/line.svg) no-repeat 10px center/26px; } .sns-wrapper>p:nth-of-type(4)>a{ background: url(../img/x-twitter.svg) no-repeat 10px center/26px; } @media (max-width:900px){ .nav-inner{ width: 100%; margin-left: 0; padding:20px 5% 0; } #g-nav .nav-list a{ padding: 8px; } .sns-wrapper a{ padding: 12px 0 12px 44px; } } /* メインビジュアル部分 */ .main-visual{ margin: 40px 0 0 5%; width: 95%; height: 100vh; } .main-visual li{ width: 100%; height: 100vh; } .main-visual img{ object-fit: cover; width: 100%; height: 100%; } @media (max-width:680px){ .main-visual{ margin: 0; width: 100%; height: 60vh; } .main-visual li{ height: 60vh; } } /* メインコピー部分 */ .main-copy{ font-family: var(--font_ja); text-align: center; padding: 120px 0; } .main-copy>h2{ font-size: 32px; margin-bottom: 40px; } .lead{ font-size: 20px; line-height: 2.4; } @media (max-width:680px){ .main-copy{ padding: 80px 10px; } .main-copy>h2{ font-size: 24px; margin-bottom: 40px; } .lead{ font-size: 16px; line-height: 2; word-break: keep-all; } } /* ギャラリー部分 */ .gallery{ max-width: 640px; margin: 0 auto 200px; position: relative; } .gallery>p:nth-of-type(1){ box-shadow: 20px 20px 0 #e51f19; } .gallery>p:nth-of-type(2){ width: 50%; position: absolute; right: -15%; bottom: -20%; box-shadow: 20px 20px 0 #24a63b; } @media (max-width:900px){ .gallery{ width: 70%; } .gallery>p:nth-of-type(2){ right: -5%; bottom: -30%; } } /* 共通部分 */ section{ padding: 120px 10px; } section>h2{ text-align: center; font-family: var(--font_ja); font-size: 34px; color: var(--color_1); margin-bottom: 60px; } section>h2::before{ content: attr(data-en); font-size: 28px; display: block; font-family: var(--font_en); color: var(--color_2); } @media (max-width:680px){ section{ padding: 80px 10px; } section>h2{ font-size: 26px; margin-bottom: 40px; &::before{ font-size: 22px; } } } /* お知らせ部分 */ #news-list{ max-width: 680px; margin: 0 auto; display: flex; flex-wrap: wrap; font-size: 18px; } #news-list>dt{ width: 30%; padding: 20px; border-bottom: 2px solid var(--color_1); margin-bottom: 20px; font-weight: bold; } #news-list>dd{ width: 70%; padding: 20px; border-bottom: 2px solid var(--color_1); margin-bottom: 20px; } #news-list>dt:nth-of-type(n+4){ display: none; } #news-list>dd:nth-of-type(n+4){ display: none; } @media (max-width:680px){ #news-list{ display: block; font-size: 14px; } #news-list>dt{ width: 100%; margin-bottom: 0; padding: 10px 20px; } #news-list>dd{ width: 100%; margin-bottom: 40px; padding: 10px 20px; } } /* メニュー部分 */ .menu-wrapper{ width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 80px 60px; } .menu-box{ width: calc((100% - 120px) / 3); background-color: var(--color_3); border-radius: 10px; } .menu-box>a{ display: block; padding: 20px; color: #111; } .photo{ margin-bottom: 20px; } .menu-text{ line-height: 1.8; } @media (max-width:900px){ .menu-wrapper{ width: 96%; gap: 20px 10px; } .menu-box{ width: calc((100% - 10px) / 2); } } /* 動画部分 */ .video-wrapper{ max-width: 800px; aspect-ratio: 16/9; margin: 0 auto; } .video-wrapper>iframe{ width: 100%; height: 100%; } /* パララックス部分 */ .parallax-1{ width: 100%; height: 70vh; background:url(../img/parallax-1.webp) no-repeat center center/cover fixed; } .parallax-2{ width: 100%; height: 70vh; background:url(../img/parallax-2.webp) no-repeat center center/cover fixed; } @media (max-width:959px){ .parallax-2{ background:url(../img/parallax-2.webp) no-repeat center center/cover scroll; height: 50vh; } } /* 店舗情報部分 */ .map-wrapper{ width: 80%; aspect-ratio: 1/0.4; margin: 0 auto 40px; } .map-wrapper>iframe{ width: 100%; height: 100%; } .shop-wrapper{ width: 80%; margin: 0 auto 100px; display: flex; } .shop-wrapper>dl{ width: 50%; display: flex; flex-wrap: wrap; } .shop-wrapper dt{ width: 20%; margin-bottom: 20px; } .shop-wrapper dd{ width: 80%; margin-bottom: 20px; } @media (max-width:680px){ .shop-wrapper{ flex-direction: column; gap: 30px 0; } .shop-wrapper>dl{ width: 100%; } } /* 電話番号の設定 */ .tel-num{ pointer-events: none;/* pc時のみクリックを無効にする */ color: #111; font-size: 30px; } @media (max-width:959px){ .tel-num{ pointer-events: auto;/* sp時にクリックを有効にする */ } } /* よくある質問部分 */ details{ width: 80%; margin: 0 auto 60px; } summary{ background-color: var(--color_3); padding: 20px; font-size: 22px; list-style: none;/* 黒い三角を消す */ cursor: pointer; } summary:hover{ background-color: #ded4b6; } .answer{ background-color: #dce3ec; padding: 20px; font-size: 18px; } summary::-webkit-details-marker{ display: none;/* iOS用のリセット */ } @media (max-width:680px){ summary{ font-size: 18px; } .answer{ font-size: 16px; } } /* カルーセル部分 */ .carousel{ max-width: 1366px; margin: 0 auto; } .carousel li{ width: 16.66%; aspect-ratio: 1.2/1; } .carousel img{ object-fit: cover; width: 100%; height: 100%; } footer{ height: 100px; background-color: var(--color_1); } footer>p{ text-align: center; color: #FFF; line-height: 100px; } /* 予約ページ部分 */ .g-form{ max-width: 640px; margin: 0 auto 100px; } .g-form>iframe{ width: 100%; }
