@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 70px; } :root { --semi-fontsize: 0.7rem; --normal-fontsize: 0.88rem; --middle-fontsize: 0.95rem; --big-fontsize: 1.2rem; --line-height: 1.6; } @media screen and (min-width: 600px) { :root { --semi-fontsize: 0.78rem; --normal-fontsize: 0.95rem; --middle-fontsize: 1.1rem; --big-fontsize: 1.4rem; --line-height: 1.7; } } @media screen and (min-width: 1024px) { :root { --semi-fontsize: 0.83rem; --normal-fontsize: 1.03rem; --middle-fontsize: 1.25rem; --big-fontsize: 1.6rem; --line-height: 1.8; } } @media screen and (min-width: 1536px) { :root { --semi-fontsize: 0.95rem; --normal-fontsize: 1.15rem; --middle-fontsize: 1.5rem; --big-fontsize: 2.0rem; --line-height: 1.9; } } body { font-family: "Noto Sans JP", sans-serif; font-weight: normal; font-size: var(--normal-fontsize); font-style: normal; color: #231815; line-height: var(--line-height); letter-spacing: 0.01rem; font-feature-settings: 'palt'; -webkit-text-size-adjust: 100%; overflow-x: hidden; background-color: #FFF; } p { word-break: break-word; font-size: var(--normal-fontsize); line-height: var(--line-height); } @media screen and (min-width: 1024px) { p{ font-weight: 500; } } a { text-decoration: none; color: #000; font-size: var(--normal-fontsize); line-height: var(--line-height); } img { max-width: 100%; height: auto; border: 0; line-height: 0; } table { border-collapse: collapse; } ol, ul { list-style: none; } button{ outline: none; border: 0; } a:link, a:visited, a:active, a:hover { overflow: hidden; outline: none; } .sp-only { display: block; } .tb-only{ display: none; } .pc-only { display: none; } @media screen and (min-width: 599px) { .sp-only { display: none; } .tb-only { display: block; } } @media screen and (min-width: 1024px) { .pc-only { display: block; } } /*-- ここからHEADER --*/ .site-header { position: absolute; inset: 0 auto auto 0; width: 100%; z-index: 100; /* background: rgba(255,255,255,0.01); box-shadow: 0 3px 15px rgba(0,0,0,0.2); */ } .header-inner { display: flex; align-items: center; padding-inline: 1rem; min-height: 64px; } @media screen and (min-width: 600px) { .header-inner { padding-inline: 1.8rem; } } .site-logo { margin: 0; } .site-logo img { width: 130px; } .hamburger { margin-inline-start: auto; width: 28px; height: 24px; position: relative; background: none; border: none; cursor: pointer; } .hamburger span { position: absolute; inset-inline-start: 0; width: 100%; height: 1px; background: #444; transition: transform .3s ease, opacity .3s ease; } .hamburger span:nth-child(1) { inset-block-start: 0; } .hamburger span:nth-child(2) { inset-block-start: 11px; } .hamburger span:nth-child(3) { inset-block-start: 22px; } .hamburger.is-open span:nth-child(1) { transform: translateY(11px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; } .hamburger.is-open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); } .global-nav { position: fixed; inset: 0; background: rgba(10,10,10,.92); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .global-nav.is-open { opacity: 1; pointer-events: auto; } .global-nav ul { list-style: none; padding: 0; margin: 0; text-align: center; } .global-nav li { margin-block: 1.5rem; } .global-nav a { font-size: 1rem; letter-spacing: .15em; color: #fff; text-decoration: none; } @media (min-width: 1280px) { .site-logo img { width: 160px; } .header-inner { padding-inline: 2rem; } .hamburger { display: none; } .global-nav { position: static; opacity: 1; pointer-events: auto; background: none; margin-inline-start: auto; display: block; } .global-nav ul { display: flex; gap: 2rem; } .global-nav li { margin: 0; font-size: .85rem; } .global-nav a { color: #232323; position: relative; font-size: 0.9rem; font-weight: 600; } .global-nav a::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: -6px; width: 100%; height: 1px; background: #C9A24D; opacity: 0; transform: translateY(4px); transition: .3s; } .global-nav a:hover::after { opacity: 1; transform: translateY(0); } } /*-- ここまでHEADER --*/ /* ここから 共通 */ .marker-title { position: relative; display: inline-block; } .marker-title::after { content: ""; position: absolute; left: 0; bottom: -0.5rem; height: 0.2rem; width: 0%; background: linear-gradient(to right, #b71c1c, #f92828); transition: width 0.5s ease-in-out; } .marker-title.active::after { width: 100%; } /* ここまで 共通 */ /* ここからMAIN VISUAL */ .kv { padding-top: 120px; } .kv__heading { padding: 0 60px 20px 2rem; } .kv__visual{ padding-left: 2rem; padding-right: 2rem; } .kv__visual img { width: 100%; height: auto; object-fit: cover; display: block; filter: brightness(1.1); } .kv__title { opacity: 0; transform: translateY(60px); } @media (min-width: 600px) { .kv { padding-top: 80px; } .kv__heading { margin: 60px auto 0; padding: 0 2rem 10px; } } @media (min-width: 1200px) { .kv__heading { margin: 80px auto 10px; padding: 0 2rem; } } /* scroll */ .scroll_down{ display: none; } @media screen and (min-width: 990px) { .scroll_down{ display: block; position: absolute; top: 100vh; right: 4%; z-index: 99; } .scroll_down.hidden { display: none; } .scroll_down a{ position: absolute; left: 10px; bottom: 110px; color: #F2F2F2; font-size: 12px; font-family: 'Josefin Sans', sans-serif; letter-spacing: .2em; writing-mode: vertical-lr; text-decoration: none; text-transform: uppercase; } .scroll_down:before { content: ""; position: absolute; bottom: 0; left: -4px; width: 9px; height: 9px; border-radius: 50%; background:#F2F2F2; animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite; } @keyframes circlemove{ 0%{bottom:180px;} 100%{bottom:0px;} } @keyframes cirlemovehide{ 0%{opacity:0} 50%{opacity:1;} 80%{opacity:0.9;} 100%{opacity:0;} } .scroll_down:after{ content:""; position: absolute; bottom:0; left:0; width: 1px; height: 180px; background:#FFF; } } /* scroll */ /* ここまでMAIN VISUAL */ /* fuwa */ .fade-up { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; } .fade-up.is-active { opacity: 1; transform: translateY(0); } /* fuwa */ /* ここから intro */ .intro__contents { padding: 4rem 2rem 6rem; } @media (min-width: 1024px) { .intro__contents { padding: 6rem 2rem 8rem; } } @media (min-width: 1440px) { .intro__contents { padding: 8% 0; } } .intro__section { display: flex; flex-direction: column; gap: 2rem; } .intro__section:nth-child(even){ padding-top: 4rem; } .intro__text__wrap h2 { font-family: "Noto serif jp",serif; font-weight: bold; font-size: 1rem; line-height: 1.4; margin-bottom: 1rem; letter-spacing: 0.05em; } .intro__image { width: 80%; margin: auto; height: auto; display: block; object-fit: cover; opacity: 0; transform: translateX(6%) scale(0.98); } .intro__image.is-active { opacity: 1; transform: translateX(0); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(.22,.61,.36,1); } .intro__section, .intro__text__wrap, .intro__image { box-sizing: border-box; } @media (min-width: 1024px) { .intro__section { justify-content: space-between; flex-direction: row; max-width: 1300px; margin-left: auto; margin-right: auto; gap: 6rem; } .intro__section:nth-child(even){ flex-direction: row-reverse; padding-top: 6rem; } .intro__text__wrap h2 { font-size: 1.3rem; letter-spacing: 0.08em; margin-bottom: 2.5rem; } .intro__text__wrap, .intro__image { flex: 0 0 calc(50% - 3rem); max-width: calc(50% - 3rem); } .intro__image { margin: 0; } } @media (min-width: 1440px) { .intro__text__wrap h2 { font-size: 1.5rem; margin-bottom: 2.5rem; } .intro__section { gap: 6rem; } .intro__section:nth-child(even){ padding-top: 10rem; } } /* ここまで intro */ /* ここから point */ .section-title { position: relative; font-size: 26px; font-family: "Playfair Display SC", serif; font-weight: bold; text-align: center; line-height: 1.4; letter-spacing: 0.08em; margin-bottom: 1rem; padding-bottom: 20px; z-index: 1; } .section-title::before { content: attr(data-en); position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 60px; font-weight: 700; letter-spacing: 0.2em; color: #f92828; opacity: 0.05; white-space: nowrap; z-index: -1; } .section-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 60px; height: 3px; background: #f92828; } @media (min-width: 768px) { .section-title::before { font-size: 80px; top: -32px; } .section-title::after { width: 90px; } } @media (min-width: 1024px) { .section-title { font-size: 36px; letter-spacing: 0.12em; margin-bottom: 80px; } .section-title::before { font-size: 120px; top: -30px; } .section-title::after { width: 120px; } } .point__wrapper { padding: 4rem 2rem; overflow: hidden; /* max-width: 1300px; margin-left: auto; margin-right: auto; */ } @media screen and (min-width: 1440px) { .point__wrapper { padding: 4rem 0; } } .point__title { position: relative; max-width: 1300px; margin-bottom: 20px; z-index: 1; } .point__title .number { position: absolute; top: -60px; left: -10px; font-family: "Noto Serif JP", serif; font-size: clamp(4.5rem, 10vw, 8rem); font-weight: 700; color: #f92828; opacity: 0.12; line-height: 1; pointer-events: none; } .point__title .title-ja, .point__title .title-en, .point__title .lead { position: relative; margin-left: 0; } .point__title .title-ja { font-size: 1.05rem; font-weight: bold; font-family: "Noto Serif JP", serif; letter-spacing: 0.08em; } .point__title .title-en { font-size: 0.9rem; font-weight: 500; font-family: "Playfair Display SC", serif; letter-spacing: 0.12em; color: #f92828; } .point__title .lead { font-size: 1.2rem; font-weight: 600; line-height: 1.45; } @media screen and (min-width: 600px) { .point__contents{ padding: 0 0 2rem; } .point__title { margin: 0 auto 40px; } .point__title .title-ja { font-size: 1.2rem; } .point__title .title-en { margin: 0 0 1.6rem; } } @media screen and (min-width: 1024px) { .point__title .number { position: absolute; top: -90px; left: -20px; } .point__title .title-ja { font-size: 1.4rem; } } @media screen and (min-width: 1536px) { .point__title { margin: 2% auto; } .point__title .title-ja { font-size: 1.6rem; } } @media screen and (min-width: 1900px) { .point__title { max-width: 1400px; } .point__title .number { font-size: 9rem; left: -96px; top: -110px; } .point__title .lead { font-size: 1.4rem; } } .point__detail__wrapper { max-width: 1300px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 30px; } @media screen and (min-width: 600px) { .point__detail__wrapper { gap: 80px; } } @media screen and (min-width: 600px) { .point__detail__wrapper { gap: 120px; } } @media screen and (min-width: 1900px) { .point__detail__wrapper { max-width: 1400px; } } .point__group { display: flex; flex-direction: column; gap: 18px; } .desc { line-height: 1.7; } .point-image img { width: 100%; height: auto; display: block; } @media screen and (min-width: 600px) { .point__group { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px; } .point__group.is-right { flex-direction: row-reverse; } .point__group:nth-child(odd) { flex-direction: row; } .point__group:nth-child(even) { flex-direction: row-reverse; } .desc, .desc_detail, .point-image { flex: 0 0 46%; max-width: 46%; } } @media screen and (min-width: 1024px) { .desc, .desc_detail, .point-image { flex: 0 0 48%; max-width: 48%; } } @media screen and (min-width: 1536px) { .desc { line-height: 1.9; padding: 0.5rem 0 0 0; } .point-image { flex: 0 0 43%; max-width: 43%; } .desc, .desc_detail { flex: 0 0 50%; max-width: 50%; } } .desc_detail { line-height: 2; } .desc-block { margin-bottom: 20px; } .desc-head { font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; position: relative; } .desc-list { list-style: none; padding: 0; margin: 0; line-height: 1.6; } .desc-list li { position: relative; padding-left: 1.2em; margin-bottom: 8px; font-weight: 500; } .desc-list li::before { content: "–"; position: absolute; left: 0; color: #f92828; } .desc-summary { margin-top: 30px; font-weight: 600; font-size: 0.95rem; line-height: 1.7; } .desc-text{ margin: 0 0 36px; } @media screen and (min-width: 1024px) { .desc-head, .desc-summary { font-size: 1.1rem; } } @media screen and (min-width: 1900px) { .desc-head, .desc-summary { font-size: 1.2rem; } .desc-block { margin-bottom: 40px; } .desc-summary { margin-top: 40px; } } /* ===== button ===== */ .point__btn { margin-top: 40px; text-align: center; } .btn-more { position: relative; display: inline-block; padding: 12px 48px; border: 1px solid #C9A24D; overflow: hidden; color: #C9A24D; background: #FFF; font-weight: 500; } .btn-more span { position: relative; z-index: 1; } .btn-more::before { content: ""; position: absolute; inset: 0; background: #C9A24D; transform: scaleX(0); transform-origin: left; transition: transform .4s ease; } .btn-more:hover { color: #fff; } .btn-more:hover::before { transform: scaleX(1); } @media screen and (min-width: 1024px) { .point__btn { margin-top: 60px; } } @media screen and (min-width: 1536px) { .point__btn { margin-top: 80px; } .btn-more { padding: 15px 60px; } } /* ここまで point */ /* ここから difference */ .difference__contents{ background: #fff7f7; } .difference__wrapper{ padding: 10% 2rem 4%; max-width: 840px; margin: auto; line-height: 1.6; } @media screen and (min-width: 600px) { .difference__wrapper{ text-align: center; } } @media screen and (min-width: 1024px) { .difference__wrapper{ padding: 6rem 0 3rem; } } @media screen and (min-width: 1900px) { .difference__wrapper{ padding: 7rem 0 4rem; } } .difference__wrapper h2{ line-height: 1.4; margin-bottom: 2rem; font-size: 1.1rem; font-family: "Noto serif JP", serif; font-weight: bold; letter-spacing: 0.025em; } .difference__wrapper img{ margin: 2rem auto; display: block; } @media screen and (min-width: 1400px) { .difference__wrapper h2{ margin-bottom: 2.3rem; font-size: 1.4rem; } } @media screen and (min-width: 1900px) { .difference__wrapper h2{ margin-bottom: 2.8rem; font-size: 1.6rem; } } /* ここまで difference */ /* ここから gallery */ .store__wrapper { max-width: 1300px; margin-left: auto; margin-right: auto; padding: 2rem; } @media (min-width: 1024px) { .store__wrapper { padding: 0 2rem 2rem; } } @media (min-width: 1440px) { .store__wrapper { padding: 0 0 2rem; } } @media (min-width: 1900px) { .store__wrapper { max-width: 1800px; margin: 0 auto 3rem; } } .store__wrapper h2{ font-family: "Playfair Display SC", serif; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.07em; text-align: center; } .store__text{ font-size: var(--semi-fontsize); text-align: center; } .store-gallery { max-width: 1600px; margin: 1rem auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .store-gallery li { list-style: none; } .store-gallery img { width: 100%; display: block; cursor: zoom-in; } @media (min-width: 600px) { .store-gallery { grid-template-columns: repeat(4, 1fr); gap: 16px; } } @media (min-width: 1024px) { .store__wrapper h2{ font-size: 3.8vw; } .store-gallery { margin: 2.5rem auto 0; } } .gallery__contents{ padding: 0 0 1rem; background: #fff7f7; } @media (min-width: 600px) { .gallery__contents{ padding: 0 0 4rem; } } .gallery-modal { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: none; z-index: 9999; } .gallery-modal.is-open { display: flex; align-items: center; justify-content: center; } .gallery-swiper { width: 100%; height: 100%; position: relative; } .gallery-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; } .gallery-swiper .slide-inner { position: relative; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; } .gallery-swiper .slide-inner img { max-width: 100%; max-height: 90vh; width: auto; height: auto; object-fit: contain; display: block; } .gallery-swiper .swiper-button-prev, .gallery-swiper .swiper-button-next { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; color: #fff; } .gallery-swiper .swiper-button-prev { left: 12px; } .gallery-swiper .swiper-button-next { right: 12px; } .gallery-close { position: fixed; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; cursor: pointer; z-index: 10000; } .gallery-close::before, .gallery-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background: #000; } .gallery-close::before { transform: translate(-50%, -50%) rotate(45deg); } .gallery-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .gallery-close:hover { background: #efc671; } @media (min-width: 600px) { .gallery-swiper .swiper-button-prev { left: calc(50% - 520px); } .gallery-swiper .swiper-button-next { right: calc(50% - 520px); } } /* ここまで gallery */ /* ここから kodawari bnr */ .kodawari__bnr__contents{ background: #f8f6fb; background: linear-gradient(90deg, rgba(248, 246, 251, 1) 0%, rgba(235, 235, 235, 1) 100%); padding: 6% 2rem 8%; } .kodawari__bnr__wrap{ max-width: 1300px; margin: auto; } .kodawari__bnr__wrap h2{ font-size: var(--middle-fontsize); text-align: center; padding: 0 0 1rem; } .kodawari__bnr{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .kodawari__bnr a{ position: relative; display: block; overflow: hidden; } .kodawari__bnr img{ width: 100%; height: auto; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease; will-change: transform; } .kodawari__bnr a::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background: linear-gradient( 90deg, #d6001c, #d9101e ); transition: width .5s ease; z-index: 2; } @media (hover: hover){ .kodawari__bnr a:hover img{ transform: scale(1.03); filter: brightness(1.05) contrast(1.05); } .kodawari__bnr a:hover::before{ opacity: .85; } .kodawari__bnr a:hover::after{ width: 100%; } } .kodawari__bnr a:focus-visible{ outline: 2px solid #111; outline-offset: 4px; } .kodawari__bnr{ align-items: stretch; } @media (max-width: 767px){ .kodawari__bnr a::after{ height: 3px; } } @media (min-width: 1024px) { .kodawari__bnr__wrap h2{ padding: 0 0 2rem; } .kodawari__bnr{ gap: 1rem; } } @media (min-width: 1400px) { .kodawari__bnr__wrap h2{ padding: 0 0 3rem; font-size: 1.4rem; } .kodawari__bnr{ gap: 2rem 1.8rem; } } @media (min-width: 1900px) { .kodawari__bnr__wrap{ max-width: 1400px; } } /* ここまで kodawari bnr */ /* ここから shop info */ .shop__infowrap { margin: 0 auto; background: #fffcf7; padding: 40px 20px; } .shop__list__title { font-size: var(--big-fontsize); text-align: center; margin-bottom: 0.7rem; border-bottom: 2px solid #093781; padding-bottom: 10px; } .shop__list_title span { background: linear-gradient(90deg, #1485cc 0%, #093781 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; } .shop__open { text-align: center; font-size: var(--semi-fontsize); margin-bottom: 30px; } .shop__adress__contents{ max-width: 580px; margin: auto; } .shop__adress_wrap { margin-bottom: 40px; font-size: var(--semi-fontsize); } .shop__adress_wrap h3 { font-size: var(--middle-fontsize); border-left: 5px solid #093781; padding-left: 10px; margin-bottom: 15px; color: #093781; } .shop__adress_wrap h3 span{ color: #FF2323; } .shop__table { width: 100%; border-collapse: collapse; } .shop__table th, .shop__table td { padding: 7px 15px; border-bottom: 1px solid #555; text-align: left; } .shop_table tbody tr:last-child th, .shop_table tbody tr:last-child td { border-bottom: none; } .shop__table th.tenpo { font-weight: bold; white-space: nowrap; width: 20%; } .shop__table td.adress { width: 75%; } .shop__table td.detail{ width: 15%; } .shop__table td.detail a { color: #093781; text-decoration: none; border-bottom: 1px dashed #1485cc; transition: all 0.3s ease; font-size: var(--semi-fontsize); } .shop__table td.detail a:hover { color: #1485cc; border-bottom: 1px solid #fff; } @media screen and (min-width: 1024px) { .shop__infowrap { padding: 6rem 2%; } .shop__list__title { font-size: 1.5rem; margin-bottom: 1rem; } .shop__adress__contents { max-width: 900px; margin: 4rem auto 0; } .shop__table tbody{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; } .shop__table th.tenpo { width: 20%; } .shop__adress_wrap h3 { font-size: var(--normal-fontsize); } } @media screen and (min-width: 1440px) { .shop__adress__contents { max-width: 1000px; } .shop__table tbody{ gap: 0 4rem; } } /* ここまで shop info */ /* ここから フッター */ .p-footer { padding: 20px 60px 10px; background-color: #3D3E4A; } .p-footer__inner { display: block; } .p-footer__nav { font-size: 0.65rem; } .p-footer__navList { max-width: 280px; margin: 18px auto 0; display: flex; flex-wrap: wrap; justify-content: center; } .p-footer__navItem { padding-right: 10px; margin-right: 10px; border-right: 1px solid #75706f; } .p-footer__navItem:nth-child(3n) { border-right: transparent; margin-right: 0; padding-right: 0; } .p-footer__logo { width: 100%; height: auto; max-width: 160px; margin-right: auto; margin-left: auto; margin-top: 24px; } .p-footer__navItem a { color: #FFF; font-size: 0.8rem; } .p-footer__copyLight { text-align: center; display: block; margin-top: 30px; font-size: 0.7rem; color: #FFF; } @media screen and (min-width: 599px) { .p-footer__navList { max-width: 100%; } .p-footer__navItem:nth-child(3n) { padding-right: 10px; margin-right: 10px; border-right: 1px solid #75706f; } .p-footer__navItem:last-child { border-right: transparent; margin-right: 0; padding-right: 0; } } @media screen and (min-width: 768px) { .p-footer__inner { max-width: 1000px; display: flex; justify-content: center; margin-left: auto; margin-right: auto; } } /* ここまで フッター */ /* go to TOP */ #pagetop { position: fixed; right: 10px; bottom: 10px; margin: 0; } #pagetop a { position: relative; display: flex; width: 60px; height: 60px; justify-content: center; align-items: center; background: #f92828; color: #fff; text-decoration: none; font-size: 40px; border-radius: 100%; transition: opacity .6s ease; } #pagetop a:hover { opacity: .6; } @media screen and (max-width: 1024px) { #pagetop a { width: 40px; height: 40px; font-size: 20px; } } /* go to TOP */