index.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>© <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({
mode: 'fade',
auto: true,
controls: false,
pager: false,
speed: 2000,
pause: 2000,
touchEnabled: false,
});
$('#news-list').load('news.txt');
AOS.init({
once: true,
});
const fullYear = new Date().getFullYear();
console.log(fullYear);
if(fullYear >= 2027){
$('#this-year').text('2026 - '+fullYear);
}else{
$('#this-year').text(fullYear);
}
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
$('#sp-nav').fadeToggle(300);
});
$('#sp-nav a').on('click',function(){
$('#sp-nav').fadeOut(300);
$('#ham-btn').removeClass('is-active');
});
});
</script>
</body>
</html>
form/index.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>© <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);
if(fullYear >= 2027){
$('#this-year').text('2026 - '+fullYear);
}else{
$('#this-year').text(fullYear);
}
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
$('#sp-nav').fadeToggle(300);
});
$('#sp-nav a').on('click',function(){
$('#sp-nav').fadeOut(300);
$('#ham-btn').removeClass('is-active');
});
});
</script>
</body>
</html>
form/thanks.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>© <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);
if(fullYear >= 2027){
$('#this-year').text('2026 - '+fullYear);
}else{
$('#this-year').text(fullYear);
}
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
$('#sp-nav').fadeToggle(300);
});
$('#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;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;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]::search-cancel-button,[type=search]::search-decoration{appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::focus-inner,[type=reset]::focus-inner,[type=submit]::focus-inner,button::focus-inner{border-style:0;padding:0}[type=button]::focus-inner,[type=reset]::focus-inner,[type=submit]::focus-inner,button: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::expand{display:none}select::value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::file-upload-button{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}::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{
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-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-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{
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;
}
}
.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;
}
#ham-btn,#sp-nav{
display: none;
}
@media (width <= 1290px){
main{
padding-left: 20%;
}
.g-map{
max-width: 720px;
}
.access-wrapper{
max-width: 720px;
}
}
@media (width <= 960px){
.pc-nav{
display: none;
}
#ham-btn{
display: block;
}
#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{
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-text{
>h3{
margin-bottom: 30px;
}
.lead{
line-height: 2;
}
}
.parallax{
height: 50vh;
background: url(../img/parallax.webp) no-repeat center center/cover scroll;
}
.item-wrapper{
flex-direction: column;
gap: 40px 0;
}
.access-wrapper{
flex-direction: column;
>dl{
width: 100%;
}
}
.tel{
pointer-events: 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;
}
