WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

6月30日の作業データ(Felica Donut&Salad)

2026年03月クラス

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Felica Donut&Salad</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/hamburgers.css">
<link rel="shortcut icon" href="favicon.png">
<link rel="apple-touch-icon" href="touch-icon.png" sizes="192x192">
</head>
<body>
<header>
<h1><a href="#">Felica<span>Donut&Salad</span></a></h1>
<nav class="pc-nav">
<ul>
<li><a href="#news">NEWS</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#item">ITEM</a></li>
<li><a href="#access">ACCESS</a></li>
<li><a href="#"><img src="img/facebook-brands-solid-full.svg" alt=""></a></li>
<li><a href="#"><img src="img/instagram-brands-solid-full.svg" alt=""></a></li>
</ul>
</nav>

<button class="hamburger hamburger--squeeze" type="button" id="ham-btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>
</header>



<nav id="sp-nav">
<ul>
<li><a href="#news">NEWS</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#item">ITEM</a></li>
<li><a href="#access">ACCESS</a></li>
<li><a href="#"><img src="img/facebook-brands-solid-full.svg" alt=""></a></li>
<li><a href="#"><img src="img/instagram-brands-solid-full.svg" alt=""></a></li>
</ul>
</nav>




<div class="main-visual">
  <ul class="bxslider">
    <li><img src="img/main-1.webp" /></li>
    <li><img src="img/main-2.webp" /></li>
    <li><img src="img/main-3.webp" /></li>
    <li><img src="img/main-04.webp" /></li>
  </ul>
</div>

<main>
<section class="page-section" id="news">
<h2 data-ja="お知らせ">NEWS</h2>
<dl id="news-list">

</dl>

</section>

<section class="page-section" id="about">
<h2 data-ja="私たちについて">ABOUT</h2>

<div class="about-text">
<h3 data-aos="fade-up">自然の恵みを味わう<br>
おいしいご褒美</h3>
<p class="lead" data-aos="fade-up" data-aos-delay="200">厳選されたオーガニック素材で作るフレッシュなサラダと、<br>
職人の手仕事で焼き上げたドーナツ。<br>
口にした瞬間、自然の甘みが広がります。<br>
毎日の暮らしに、ちょっとした幸せを。</p>
</div>
</section>

<div class="parallax">

</div>

<section class="page-section" id="item">
<h2 data-ja="商品について">ITEM</h2>

<ul class="item-wrapper">
<li><a href="img/item-1.webp" data-lightbox="item"><img src="img/item-1.webp" alt=""></a></li>
<li><a href="img/item-2.webp" data-lightbox="item"><img src="img/item-2.webp" alt=""></a></li>
<li><a href="img/item-3.webp" data-lightbox="item"><img src="img/item-3.webp" alt=""></a></li>
</ul>
</section>

<section class="page-section" id="access">
<h2 data-ja="店舗情報">ACCESS</h2>

<div class="g-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6477.890579118236!2d139.7117402752527!3d35.72756402742839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f9.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1780972025705!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

<div class="access-wrapper">
<dl>
<dt>Access</dt>
<dd>東京都豊島区南池袋1-1-1</dd>
<dt>Tel</dt>
<dd><a href="tel:03-1234-5678" class="tel">03-1234-5678</a></dd>
<dt>Mail</dt>
<dd><a href="mailto:example@email.com">example@email.com</a></dd>
</dl>

<dl>
<dt>Open</dt>
<dd>10:00 - 19:00</dd>
<dt>定休日</dt>
<dd>年末年始</dd>
<dt>駐車場</dt>
<dd>あり(2台)</dd>
</dl>
</div>

</section>
</main>

<ul class="shop-list">
<li><a href="#">SHOP-1</a></li>
<li><a href="#">SHOP-2</a></li>
<li><a href="#">SHOP-3</a></li>
<li><a href="#">SHOP-4</a></li>
<li><a href="#">SHOP-5</a></li>
<li><a href="#">SHOP-6</a></li>
</ul>

<a href="form/" class="to-form">お問い合わせはこちらから</a>

<footer>
<p class="footer-logo">Felica Donut&Salad</p>
<p class="copy"><small>&copy; <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/aos.js"></script>
<script src="js/lightbox.js"></script>
<script>
$(function(){
//bxslider
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,//trueは有効
controls: false,//falseは無効
pager: false,// 画像の下の黒い丸
speed: 2000,//画像が切り替わる時間
pause: 2000,//画像が制止している時間
touchEnabled: false,//スマホ時のスライドのスクロールを無効
});

//お知らせをajaxで呼び出す
$('#news-list').load('news.txt');

//AOSの呼び出し
AOS.init({
once: true,
});

//西暦の取得と表示
const fullYear = new Date().getFullYear();
console.log(fullYear);
//#this-yearに変数fullYearを表示させる

if(fullYear >= 2027){
$('#this-year').text('2026 - '+fullYear);
}else{
$('#this-year').text(fullYear);
}


//ハンバーガーボタン
//#ham-btnをon.clickしたら
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
$('#sp-nav').fadeToggle(300);
});

//#sp-nav aをclickしたら
$('#sp-nav a').on('click',function(){
$('#sp-nav').fadeOut(300);
$('#ham-btn').removeClass('is-active');
});


});
</script>

</body>
</html>

form/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Felica Donut&Salad|お問い合わせページ</title>
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/hamburgers.css">
<link rel="shortcut icon" href="../favicon.png">
<link rel="apple-touch-icon" href="../touch-icon.png" sizes="192x192">
</head>
<body>
<header>
<h1><a href="#">Felica<span>Donut&Salad</span></a></h1>
<nav class="pc-nav">
<ul>
<li><a href="#news">NEWS</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#item">ITEM</a></li>
<li><a href="#access">ACCESS</a></li>
<li><a href="#"><img src="../img/facebook-brands-solid-full.svg" alt=""></a></li>
<li><a href="#"><img src="../img/instagram-brands-solid-full.svg" alt=""></a></li>
</ul>
</nav>

<button class="hamburger hamburger--squeeze" type="button" id="ham-btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>
</header>

<nav id="sp-nav">
<ul>
<li><a href="#news">NEWS</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#item">ITEM</a></li>
<li><a href="#access">ACCESS</a></li>
<li><a href="#"><img src="../img/facebook-brands-solid-full.svg" alt=""></a></li>
<li><a href="#"><img src="../img/instagram-brands-solid-full.svg" alt=""></a></li>
</ul>
</nav>

<main>
<section class="page-section" id="contact">
<h2 data-ja="お問い合わせ">CONTACT</h2>


<form id="g-form" action="" method="post">
<dl class="form-list">
<dt>お名前</dt>

<dd><input type="text" class="textbox-2 text" name="" required placeholder="お名前を入力して下さい" autocomplete="name"></dd>



<dt>メールアドレス</dt>
<dd><input type="email" class="textbox-2 text" name="" required placeholder="メールアドレスを入力して下さい" autocomplete="email"></dd>
<dt>お問い合わせの種類</dt>
<dd>
<fieldset class="radio-3">
<label for="list-1">
<input id="list-1" type="radio" name="" required checked value="商品について">商品について
</label>
<label for="list-2">
<input id="list-2" type="radio" name="" required value="ケータリングについて">ケータリングについて
</label>
<label for="list-3">
<input id="list-3" type="radio" name="" required value="採用について">採用について  
</label>
<label for="list-4">
<input id="list-4" type="radio" name="" required value="その他">その他
</label>
</fieldset>
</dd>
<dt>お問い合わせの内容</dt>
<dd><textarea class="textbox-2 textarea" name="" required placeholder="お問い合わせの内容を入力して下さい"></textarea></dd>
</dl>
<button type="submit" class="button-56">送信</button>
</form>

</section>
</main>

<ul class="shop-list">
<li><a href="#">SHOP-1</a></li>
<li><a href="#">SHOP-2</a></li>
<li><a href="#">SHOP-3</a></li>
<li><a href="#">SHOP-4</a></li>
<li><a href="#">SHOP-5</a></li>
<li><a href="#">SHOP-6</a></li>
</ul>


<footer>
<p class="footer-logo">Felica Donut&Salad</p>
<p class="copy"><small>&copy; <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>
$(function(){


//西暦の取得と表示
const fullYear = new Date().getFullYear();
console.log(fullYear);
//#this-yearに変数fullYearを表示させる

if(fullYear >= 2027){
$('#this-year').text('2026 - '+fullYear);
}else{
$('#this-year').text(fullYear);
}


//ハンバーガーボタン
//#ham-btnをon.clickしたら
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
$('#sp-nav').fadeToggle(300);
});

//#sp-nav aをclickしたら
$('#sp-nav a').on('click',function(){
$('#sp-nav').fadeOut(300);
$('#ham-btn').removeClass('is-active');
});


});
</script>

</body>
</html>


form/thanks.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Felica Donut&Salad|お問い合わせページ</title>
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/hamburgers.css">
<link rel="shortcut icon" href="../favicon.png">
<link rel="apple-touch-icon" href="../touch-icon.png" sizes="192x192">
</head>
<body>
<header>
<h1><a href="#">Felica<span>Donut&Salad</span></a></h1>
<nav class="pc-nav">
<ul>
<li><a href="#news">NEWS</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#item">ITEM</a></li>
<li><a href="#access">ACCESS</a></li>
<li><a href="#"><img src="../img/facebook-brands-solid-full.svg" alt=""></a></li>
<li><a href="#"><img src="../img/instagram-brands-solid-full.svg" alt=""></a></li>
</ul>
</nav>

<button class="hamburger hamburger--squeeze" type="button" id="ham-btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>
</header>

<nav id="sp-nav">
<ul>
<li><a href="#news">NEWS</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#item">ITEM</a></li>
<li><a href="#access">ACCESS</a></li>
<li><a href="#"><img src="../img/facebook-brands-solid-full.svg" alt=""></a></li>
<li><a href="#"><img src="../img/instagram-brands-solid-full.svg" alt=""></a></li>
</ul>
</nav>

<main>
<section class="page-section" id="contact">
<h2 data-ja="お問い合わせ">CONTACT</h2>


<form id="g-form" action="" method="post">
<dl class="form-list">
<dt>お名前</dt>

<dd><input type="text" class="textbox-2 text" name="" required placeholder="お名前を入力して下さい" autocomplete="name"></dd>



<dt>メールアドレス</dt>
<dd><input type="email" class="textbox-2 text" name="" required placeholder="メールアドレスを入力して下さい" autocomplete="email"></dd>
<dt>お問い合わせの種類</dt>
<dd>
<fieldset class="radio-3">
<label for="list-1">
<input id="list-1" type="radio" name="" required checked value="商品について">商品について
</label>
<label for="list-2">
<input id="list-2" type="radio" name="" required value="ケータリングについて">ケータリングについて
</label>
<label for="list-3">
<input id="list-3" type="radio" name="" required value="採用について">採用について  
</label>
<label for="list-4">
<input id="list-4" type="radio" name="" required value="その他">その他
</label>
</fieldset>
</dd>
<dt>お問い合わせの内容</dt>
<dd><textarea class="textbox-2 textarea" name="" required placeholder="お問い合わせの内容を入力して下さい"></textarea></dd>
</dl>
<button type="submit" class="button-56">送信</button>
</form>

</section>
</main>

<ul class="shop-list">
<li><a href="#">SHOP-1</a></li>
<li><a href="#">SHOP-2</a></li>
<li><a href="#">SHOP-3</a></li>
<li><a href="#">SHOP-4</a></li>
<li><a href="#">SHOP-5</a></li>
<li><a href="#">SHOP-6</a></li>
</ul>


<footer>
<p class="footer-logo">Felica Donut&Salad</p>
<p class="copy"><small>&copy; <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>
$(function(){


//西暦の取得と表示
const fullYear = new Date().getFullYear();
console.log(fullYear);
//#this-yearに変数fullYearを表示させる

if(fullYear >= 2027){
$('#this-year').text('2026 - '+fullYear);
}else{
$('#this-year').text(fullYear);
}


//ハンバーガーボタン
//#ham-btnをon.clickしたら
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
$('#sp-nav').fadeToggle(300);
});

//#sp-nav aをclickしたら
$('#sp-nav a').on('click',function(){
$('#sp-nav').fadeOut(300);
$('#ham-btn').removeClass('is-active');
});


});
</script>

</body>
</html>


style.css

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New&display=swap');


/* カスタムプロパティの登録 */
:root{
--base_color:#ffffff;
--text_color:#333333;
--font_en:"Raleway", sans-serif;
--font_ja:"Zen Kaku Gothic New", sans-serif;
}

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;}

html{
scroll-behavior: smooth;
}

body{
background-color: var(--base_color);
color: var(--text_color);
a{
color: var(--text_color);
}
}

/* header部分 */
header{
width: fit-content;
height: fit-content;
background-color: var(--base_color);
position: fixed;
left: 0;
top: 0;
z-index: 100;
padding: 80px 20px;

>h1{
font-size: clamp(1.625rem, 1.313rem + 1.25vw, 2.25rem);
margin-bottom: 80px;
font-family: var(--font_en);
span{
display: block;
font-size: 0.75em;
margin-top: 10px;
}
}
}

/* pc用ナビ */
.pc-nav li{
margin-bottom: 16px;
>a{
display: block;
padding: 4px 0;
font-family: var(--font_en);
&:hover{
text-decoration: underline;
}
}
&:nth-of-type(n+5){
width: 40px;
margin-bottom: 0;
}
}

/* メインビジュアル部分 */
.main-visual{
width: calc(100% - 90px);
height: calc(100vh - 60px);
margin: 30px 30px 30px 60px;
li{
width: calc(100% - 90px);
height: calc(100vh - 60px);
>img{
object-fit: cover;
width: 100%;
height: 100%;
}
}
}


/* 共通部分 */
.page-section{
padding: 100px 20px;
>h2{
text-align: center;
font-family: var(--font_en);
font-size: clamp(1.5rem, 1.313rem + 0.75vw, 1.875rem);
margin-bottom: 60px;
&::before{
content: attr(data-ja);
display: block;
font-family: var(--font_ja);
font-size: 0.7em;
}
}
}


/* お知らせ部分 */
#news-list{
max-width: 720px;
margin: 0 auto;
>dt{
margin-bottom: 10px;
&:nth-of-type(n+4){
display: none;
}
}
>dd{
margin-bottom: 40px;
&:nth-of-type(n+4){
display: none;
}
}
}

/* about部分 */
.about-text{
text-align: center;
font-family: var(--font_ja);
>h3{
font-size: clamp(1.375rem, 1.188rem + 0.75vw, 1.75rem);
line-height: 2;
margin-bottom: 50px;
}
.lead{
font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
line-height: 2.4;
}
}

/* parallax部分 */
.parallax{
width: 100%;
height: 70vh;
background: url(../img/parallax.webp) no-repeat center center/cover fixed;
}

/* 商品情報部分 */
.item-wrapper{
max-width: 860px;
margin: 0 auto;
display: flex;
gap: 0 20px;
}

/* 店舗情報部分 */
.g-map{
max-width: 860px;
aspect-ratio: 2/1;
margin: 0 auto 50px;
>iframe{
width: 100%;
height: 100%;
filter: grayscale(1);
}
}

.access-wrapper{
max-width: 860px;
margin: 0 auto;
display: flex;
>dl{
width: 50%;
display: flex;
flex-wrap: wrap;
>dt{
width: 30%;
margin-bottom: 20px;
}
>dd{
width: 70%;
margin-bottom: 20px;
}
}
}


/* 電話番号 */
.tel{
pointer-events: none;
font-size: 22px;
}


/* 系列店のリンク */
.shop-list{
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
gap: 0 2px;
position: relative;
z-index: 110;
>li{
aspect-ratio: 4/3;
margin-bottom: 2px;
background: url(../img/shop-1.webp) no-repeat center center/cover;
&:nth-of-type(2){
background: url(../img/shop-2.webp) no-repeat center center/cover;
}
&:nth-of-type(3){
background: url(../img/shop-3.webp) no-repeat center center/cover;
}
&:nth-of-type(4){
background: url(../img/shop-4.webp) no-repeat center center/cover;
}
&:nth-of-type(5){
background: url(../img/shop-5.webp) no-repeat center center/cover;
}
&:nth-of-type(6){
background: url(../img/shop-6.webp) no-repeat center center/cover;
}
>a{
display: block;
height: 100%;
text-align: center;
background-color: #00000077;
color: #ffffff;
font-size: 22px;
padding-top: 30%;
transition: 0.3s;
&:hover{
background-color: #00000033;
}
}
}
}

/*   フッター部分 */
footer{
background-color: var(--text_color);
color: var(--base_color);
text-align: center;
padding: 40px 0;
position: relative;
z-index: 110;
.footer-logo{
font-family: var(--font_en);
font-weight: bold;
font-size: 24px;
margin-bottom: 10px;
}
.copy{
font-size: 20px;
}
}

/* CTAボタン */
.to-form{
display: block;
position: fixed;
right: 0;
top: 50%;
z-index: 120;
translate: 0 -50%;
width: fit-content;
height: fit-content;
background-color: #eb0e28;
writing-mode: vertical-rl;
color: #ffffff;
padding: 6px;
font-size: 18px;
}


/* sp用パーツ */
#ham-btn,#sp-nav{
display: none;/* 要素を非表示にする */
}


/* 1290px以下 */
@media (width <= 1290px){
main{
padding-left: 20%;
}
/* 店舗情報部分 */
.g-map{
max-width: 720px;
}
.access-wrapper{
max-width: 720px;
}
}

/* 960px以下 */
@media (width <= 960px){
/* pc用ナビを非表示に */
.pc-nav{
display: none;
}

/* ハンバーガーボタンを表示 */
#ham-btn{
display: block;
}

/* sp用ナビ */
#sp-nav{
width: 100%;
height: calc(100vh - 80px);
background-color: #c3d5e2;
position: fixed;
top: 80px;
left: 0;
z-index: 130;
padding: 80px 20px;
li{
margin-bottom: 10px;
&:nth-of-type(n+5){
width: 40px;
>a{
border-bottom: 0;
padding: 0;
}
}
>a{
display: block;
padding: 10px;
border-bottom: 1px solid var(--text_color);
}
}
}


/* header部分 */
header{
width: 100%;
height: 80px;
z-index: 100;
padding: 0 0 0 15px;
display: flex;
justify-content: space-between;
align-items: center;
>h1{
margin-bottom: 0;
span{
display: inline-block;
margin-top: 0;
margin-left: 10px;
}
}
}

main{
padding-left: 0;
}

/* メインビジュアル部分 */
.main-visual{
width: calc(100% - 40px);
height: calc(50vh - 40px);
margin: 20px;
li{
width: calc(100% - 40px);
height: calc(50vh - 40px);
}
}

/* 共通部分 */
.page-section{
padding: 100px 20px 50px;
>h2{
margin-bottom: 40px;
}
}

/* お知らせ部分 */
#news-list{
>dt{
margin-bottom: 6px;
}
>dd{
margin-bottom: 30px;
}
}

/* about部分 */
.about-text{
>h3{
margin-bottom: 30px;
}
.lead{
line-height: 2;
}
}

/* parallax部分 */
.parallax{
height: 50vh;
background: url(../img/parallax.webp) no-repeat center center/cover scroll;/* iOSがfixedが効かないのでscrollに戻す */
}

/* 商品情報部分 */
.item-wrapper{
flex-direction: column;
gap: 40px 0;
}

/* 店舗情報部分 */
.access-wrapper{
flex-direction: column;
>dl{
width: 100%;
}
}

/* 電話番号 */
.tel{
pointer-events: all;/* pc時はクリック出来ないようにnoneにしsp時はallに戻す */
}

}


/* お問い合わせ部分 */
#g-form{
max-width: 720px;
margin: 0 auto;
}
.form-list{
>dt{
margin-bottom: 10px;
}
>dd{
margin-bottom: 40px;
}
}

/* 完了ページ */
#thanks{
text-align: center;
.thanks-text{
line-height: 2.4;
margin-bottom: 100px;
}
}




/* フォームのスニペット */
.textbox-2 {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    background: #f7f7f7;
    color: #333;
    font-size: 1em;
    line-height: 1.5;
}

.textbox-2::placeholder {
    color: #999;
}


.radio-3 {
    border: none;
}

.radio-3 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    max-width: 260px;
    margin-bottom: .4em;
    padding: .5em .7em;
    border: 1px solid #2589d0;
    border-radius: 3px;
    background-color: #2589d026;
    cursor: pointer;
}

.radio-3 label:has(:checked) {
    background-color: #2589d0;
    color: #fff;
}

.radio-3 label::before,
.radio-3 label:has(:checked)::after {
    border-radius: 50%;
    content: '';
}

.radio-3 label::before {
    width: 14px;
    height: 14px;
    background-color: #fff;
}

.radio-3 label:has(:checked)::after {
    position: absolute;
    top: 50%;
    left: calc(7px + .7em);
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background-color: #2589d0;
}

.radio-3 input {
    display: none;
}


/* お名前とメールアドレス */
.textbox-2.text{
width: 60%;
}
/* お問い合わせ内容 */
.textbox-2.textarea{
height: 180px;
}

/* 送信ボタン */
.button-56 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 250px;
    margin: 0 auto;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-56:hover {
    background-color: #1579c0;
}

.button-56::before {
    width: 1.25em;
    height: 1.25em;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    content: '';
}


/* トップに戻るボタン */
.button-56.to-top {
width: 250px;
}
.button-56.to-top::before {
display: none;
}