@charset "UTF-8";
 a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, main {
-webkit-box-sizing: border-box;
vertical-align: baseline;
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main {
display: block;
}
body, html {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:after, blockquote:before {
content: '';
content: none;
}
q:after, q:before {
content: '';
content: none;
}
a img {
border: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
} input[type="button"], input[type="text"], input[type="tel"], input[type="email"], input[type="submit"], input[type="image"], textarea {
-webkit-box-sizing: content-box;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
-webkit-box-sizing: border-box;
cursor: pointer;
box-sizing: border-box;
border: none;
border-radius: 0;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
outline-offset: -2px;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: none;
background: transparent;
}
button,
input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: none;
background: transparent;
padding: 0;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background: #5f5f5f;
}
select::-ms-expand {
display: none;
} @media screen and (max-width: 640px) {
.lt-sp {
display: none !important;
}
}
@media screen and (min-width: 641px) {
.st-sp {
display: none !important;
}
}
@media screen and (max-width: 970px) {
.lt-tblt {
display: none !important;
}
}
@media screen and (min-width: 971px) {
.st-tblt {
display: none !important;
}
}    @font-face {
src: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/css/fonts/icomoon.eot?4v8dhl);
src: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/css/fonts/icomoon.eot?4v8dhl#iefix) format("embedded-opentype"), url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/css/fonts/icomoon.ttf?4v8dhl) format("truetype"), url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/css/fonts/icomoon.woff?4v8dhl) format("woff"), url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/css/fonts/icomoon.svg?4v8dhl#icomoon) format("svg");
font-display: block;
font-family: 'icomoon';
font-style: normal;
font-weight: normal;
}
[class^="icon-"], [class*=" icon-"] {
speak: none;
-webkit-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-webkit-font-variant-ligatures: discretionary-ligatures; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; font-family: 'icomoon' !important;
font-feature-settings: "liga";
font-style: normal;
font-variant: normal;
font-variant-ligatures: discretionary-ligatures;
font-weight: normal; letter-spacing: 0;
line-height: 1;
text-transform: none;
}
.icon-cart_icon:before {
color: #fff;
content: "\e900";
}
.icon-more_arr:before {
color: #fff;
content: "\e901";
}
.icon-nav_cart_btn:before {
color: #fff;
content: "\e902";
}
.icon-phone:before {
content: "\e942";
} .slick-slider {
-webkit-box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
display: block;
position: relative;
box-sizing: border-box;
touch-action: pan-y;
user-select: none;
}
.slick-list {
display: block;
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
display: block;
position: relative;
top: 0;
left: 0;
margin-right: auto;
margin-left: auto;
}
.slick-track:before, .slick-track:after {
display: table;
content: "";
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
border: 1px solid transparent;
height: auto;
}
.slick-arrow.slick-hidden {
display: none;
} .slick-loading .slick-list {
background: #fff url(https://kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/css/ajax-loader.gif) center center no-repeat;
} @font-face {
src: url(https://kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/css/fonts/slick.eot);
src: url(https://kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/css/fonts/slick.eot?#iefix) format("embedded-opentype"), url(https://kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/css/fonts/slick.woff) format("woff"), url(https://kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/css/fonts/slick.ttf) format("truetype"), url(https://kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/css/fonts/slick.svg#slick) format("svg");
font-family: "slick";
font-style: normal;
font-weight: normal;
} .slick-prev,
.slick-next {
-webkit-transform: translate(0, -50%);
display: block;
position: absolute;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
outline: none;
border: none;
background: transparent;
padding: 0;
width: 20px;
height: 20px;
color: transparent;
font-size: 0px;
line-height: 0px;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
outline: none;
background: transparent;
color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: 0.75;
color: white;
font-family: "slick";
font-size: 20px;
line-height: 1;
}
.slick-prev {
left: -25px;
}
[dir="rtl"] .slick-prev {
right: -25px;
left: auto;
}
.slick-prev:before {
content: "←";
}
[dir="rtl"] .slick-prev:before {
content: "→";
}
.slick-next {
right: -25px;
}
[dir="rtl"] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
content: "→";
}
[dir="rtl"] .slick-next:before {
content: "←";
} .slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
display: block;
position: absolute;
bottom: -25px;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
}
.slick-dots li {
display: inline-block;
position: relative;
cursor: pointer;
margin: 0 5px;
padding: 0;
width: 20px;
height: 20px;
}
.slick-dots li button {
display: block;
cursor: pointer;
outline: none;
border: 0;
background: transparent;
padding: 5px;
width: 20px;
height: 20px;
color: transparent;
font-size: 0px;
line-height: 0px;
}
.slick-dots li button:hover, .slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
top: 0;
left: 0;
opacity: 0.25;
width: 20px;
height: 20px;
color: black;
font-family: "slick";
font-size: 6px;
line-height: 20px;
text-align: center;
content: "•";
}
.slick-dots li.slick-active button:before {
opacity: 0.75;
color: black;
} :root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: a-otf-ryumin-pr6n, serif;
font-style: normal;
font-weight: 300;
}
@media screen and (min-width: 971px) {
:root {
font-size: 10px;
}
}
@media screen and (max-width: 970px) {
:root {
font-size: calc(10px + 0.15625vw);
}
}
@media screen and (max-width: 640px) {
:root {
font-size: 2vw;
}
}
@media screen and (max-width: 320px) {
:root {
font-size: 2.35vw;
}
}
.ttl-cmn {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: calc( 100% - 40px);
max-width: 850px;
}
.ttl-cmn:before, .ttl-cmn:after {
display: block;
border-width: 1px 0 1px;
border-style: solid;
border-color: #000;
width: 50%;
height: 5px;
content: '';
}
.ttl-cmn span {
-ms-flex-negative: 0;
display: block;
flex-shrink: 0;
padding: 0 2rem;
}
.ttl-cmn span img {
display: block;
height: 32px;
}
@media screen and (max-width: 640px) {
.ttl-cmn span img {
height: 6vw;
}
}
.ttl-cmn.invert:before, .ttl-cmn.invert:after {
border-color: #fff;
}
.more-btn-cmn {
display: block;
position: relative;
margin: 0 auto;
border: 1px solid #000;
background-color: #000;
padding: 0 20px;
min-width: 100px;
color: #fff;
font-size: 1.2rem;
letter-spacing: .17em;
line-height: 23px;
text-align: center;
text-decoration: none;
}
@media screen and (max-width: 640px) {
.more-btn-cmn {
min-width: 24rem;
font-size: 1.6rem;
line-height: 4rem;
}
}
.more-btn-cmn [class^="icon-"] {
-webkit-transform: scale(0.5);
position: absolute;
right: 5px;
transform: scale(0.5);
line-height: 23px;
}
.more-btn-cmn__container {
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
}
@media screen and (min-width: 641px) {
.more-btn-cmn {
-webkit-transition: ease 400ms;
transition: ease 400ms;
}
.more-btn-cmn [class^="icon-"] {
-webkit-transition: ease 400ms;
transition: ease 400ms;
}
.more-btn-cmn [class^="icon-"]:before {
-webkit-transition: ease 400ms;
transition: ease 400ms;
}
.more-btn-cmn:hover {
background-color: #fff;
color: #000;
}
.more-btn-cmn:hover [class^="icon-"] {
-webkit-transform: translateX(3px) scale(0.5);
transform: translateX(3px) scale(0.5);
}
.more-btn-cmn:hover [class^="icon-"]:before {
color: #000 !important;
}
}
.waku {
-webkit-border-image: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/images/waku_border.png) 62;
-o-border-image: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/images/waku_border.png) 62;
margin: 0 auto;
border-width: 31px;
border-style: solid;
border-image: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/images/waku_border.png) 62;
width: calc( 100% - 40px);
max-width: 1050px;
}
.waku__inner {
background-color: #fff;
padding: 40px 0px;
}
.waku__inner .ttl-cmn {
width: 100%;
} #frame {
position: fixed;
top: 0;
right: 0;
z-index: 10000;
height: 100%;
pointer-events: none;
}
@media screen and (min-width: 641px) {
#frame {
width: calc( 100% - 75px);
}
}
@media screen and (max-width: 640px) {
#frame {
width: 100%;
}
}
#frame .border {
display: block;
position: absolute;
background-color: #000;
}
#frame .border:nth-child(even) {
width: 100%;
height: 3.5px;
}
#frame .border:nth-child(odd) {
right: 0;
width: 3.5px;
height: 100%;
}
#frame .border:nth-child(1) {
left: 0;
}
#frame .border:nth-child(2) {
top: 0;
}
#frame .border:nth-child(3) {
right: 0;
}
#frame .border:nth-child(4) {
bottom: 0;
} @media screen and (min-width: 641px) {
.header .nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: fixed;
top: 0;
left: 0;
flex-direction: column;
z-index: 10001;
background-color: #fff;
width: 75px;
height: 100%;
}
}
.header .nav__logo {
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
padding: 15px;
}
.header .nav__logo img {
width: 33px;
}
@media screen and (max-width: 640px) {
.header .nav__logo {
-webkit-transition: ease 400ms;
position: fixed;
top: 1rem;
left: 1rem;
opacity: 0;
z-index: 10001;
transition: ease 400ms;
}
.header .nav__logo.is-spactive {
opacity: 1;
}
.header .nav__logo img {
width: 4rem;
}
}
.header .nav__list {
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
width: 75px;
}
@media screen and (min-width: 641px) {
.header .nav__list {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
}
@media screen and (max-width: 640px) {
.header .nav__list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-transition: ease-out 400ms;
-webkit-transform: translate3d(-101%, 0, 0);
position: fixed;
top: 0;
left: 0;
flex-direction: column;
justify-content: center;
transform: translate3d(-101%, 0, 0);
z-index: 10000;
transition: ease-out 400ms;
background-color: #fff;
width: 200px;
height: 100%;
}
.nav-open .header .nav__list {
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.header .nav__list li {
padding: 1.25vh 0;
}
}
.header .nav__list a {
display: block;
color: #000;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 1rem;
font-style: normal;
font-weight: 600;
letter-spacing: .2em;
text-decoration: none;
}
@media screen and (min-width: 641px) {
.header .nav__list a {
-webkit-transition: ease 400ms;
transition: ease 400ms;
padding: 2vh 10px;
}
.header .nav__list a:hover {
opacity: .5;
}
}
@media screen and (max-width: 640px) {
.header .nav__list a {
padding: 2vh 1rem;
font-size: 2rem;
}
}
.header .nav__shop-btn {
position: absolute;
bottom: 0;
left: 0;
background-color: #8A2F24;
width: 75px;
height: 75px;
color: #fff;
font-size: 4.6rem;
line-height: 75px;
text-align: center;
text-decoration: none;
}
@media screen and (min-width: 641px) {
.header .nav__shop-btn {
-webkit-transition: background ease 400ms;
transition: background ease 400ms;
}
.header .nav__shop-btn i:before {
-webkit-transition: color 400ms;
transition: color 400ms;
}
.header .nav__shop-btn:hover {
background-color: #EDEDED;
}
.header .nav__shop-btn:hover i:before {
color: #000 !important;
}
}
@media screen and (max-width: 640px) {
.header .nav__shop-btn {
display: none;
}
}
@media screen and (min-width: 641px) {
.toggle-nav-sp {
display: none !important;
}
}
@media screen and (max-width: 640px) {
.toggle-nav-sp {
display: block;
position: fixed;
right: 0;
bottom: 0;
z-index: 10002;
background-color: #000;
width: 7rem;
height: 7rem;
}
.toggle-nav-sp span, .toggle-nav-sp:before, .toggle-nav-sp:after {
display: block;
position: absolute;
top: calc( 48% - 1.5px);
left: 20%;
border-radius: 3px;
background-color: #fff;
width: 60%;
height: 3px;
content: '';
}
.toggle-nav-sp span {
-webkit-transition: opacity ease 200ms 200ms;
transition: opacity ease 200ms 200ms;
}
.toggle-nav-sp:before {
-webkit-transition: top ease 200ms 200ms, -webkit-transform ease 200ms;
top: calc( 33% - 1.5px);
transition: top ease 200ms 200ms, -webkit-transform ease 200ms;
transition: top ease 200ms 200ms, transform ease 200ms;
transition: top ease 200ms 200ms, transform ease 200ms, -webkit-transform ease 200ms;
}
.toggle-nav-sp:after {
-webkit-transition: top ease 200ms 200ms, -webkit-transform ease 200ms;
top: calc( 63% - 1.5px);
transition: top ease 200ms 200ms, -webkit-transform ease 200ms;
transition: top ease 200ms 200ms, transform ease 200ms;
transition: top ease 200ms 200ms, transform ease 200ms, -webkit-transform ease 200ms;
}
.nav-open .toggle-nav-sp span {
-webkit-transition: opacity ease 200ms;
opacity: 0;
transition: opacity ease 200ms;
}
.nav-open .toggle-nav-sp:before {
-webkit-transform: rotate(135deg);
-webkit-transition: top ease 200ms , -webkit-transform ease 200ms 200ms;
top: calc( 48% - 1.5px);
transform: rotate(135deg);
transition: top ease 200ms , -webkit-transform ease 200ms 200ms;
transition: top ease 200ms , transform ease 200ms 200ms;
transition: top ease 200ms , transform ease 200ms 200ms , -webkit-transform ease 200ms 200ms;
}
.nav-open .toggle-nav-sp:after {
-webkit-transform: rotate(-135deg);
-webkit-transition: top ease 200ms , -webkit-transform ease 200ms 200ms;
top: calc( 48% - 1.5px);
transform: rotate(-135deg);
transition: top ease 200ms , -webkit-transform ease 200ms 200ms;
transition: top ease 200ms , transform ease 200ms 200ms;
transition: top ease 200ms , transform ease 200ms 200ms , -webkit-transform ease 200ms 200ms;
}
}
@media screen and (max-width: 640px) {
body:before {
display: none;
position: fixed;
top: 0;
left: 0;
opacity: 0;
z-index: 10000;
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
content: '';
}
body.nav-ready {
position: fixed;
width: 100%;
overflow: hidden;
}
body.nav-ready:before {
-webkit-transition: ease 400ms;
display: block;
transition: ease 400ms;
}
body.nav-ready #wrap {
-webkit-transition: ease 400ms;
transition: ease 400ms;
}
body.nav-ready.nav-open:before {
opacity: 1;
}
body.nav-ready.nav-open #wrap {
-webkit-transform: translate3d(100px, 0, 0);
transform: translate3d(100px, 0, 0);
}
} #wrap {
background-color: #EDEDED;
width: 100%;
overflow: hidden;
}
@media screen and (min-width: 641px) {
#wrap {
padding-left: 78.5px;
}
}
@media screen and (max-width: 640px) {
#wrap {
padding-bottom: 7rem;
}
} .kv {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
justify-content: space-between;
background: #ACACAC;
width: 100%;
overflow: hidden;
}
@media screen and (max-width: 640px) {
.kv {
display: block;
height: 161.8vw;
}
}
.kv:after {
-ms-flex-negative: .9;
-webkit-animation: fadeinKvTxtToRight ease 2000ms 1 both 200ms;
display: block;
flex-shrink: .9;
animation: fadeinKvTxtToRight ease 2000ms 1 both 200ms;
background-image: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/images/kv_large_pc.jpg);
background-position: center center;
background-size: cover;
width: 70%;
height: 100%;
min-height: 590px;
content: '';
}
@media screen and (max-width: 640px) {
.kv:after {
position: absolute;
top: 0;
left: 0;
background-image: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/images/kv_large_sp.jpg);
background-position: center center;
background-size: cover;
width: 100%;
height: 100%;
min-height: 0;
}
}
.kv__inner {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-ms-flex-negative: .1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
flex-shrink: .1;
align-items: center;
justify-content: center;
z-index: 1;
width: 30%;
min-height: 590px;
}
@media screen and (max-width: 640px) {
.kv__inner {
width: 100%;
height: 100%;
min-height: 0;
}
}
.kv__logo {
-webkit-transform: translate(50%, -50%);
-webkit-animation: fadeinCmn ease 1000ms 1 both 600ms;
position: absolute;
top: 48%;
right: 50%;
transform: translate(50%, -50%);
animation: fadeinCmn ease 1000ms 1 both 600ms;
height: 78%;
max-height: 480px;
}
@media screen and (min-width: 641px) and (max-width: 970px) {
.kv__logo {
height: 60%;
}
}
@media screen and (max-width: 640px) {
.kv__logo {
top: 52%;
height: 55%;
}
}
.kv__logo img {
width: auto;
height: 100%;
}
.kv__copy {
-webkit-animation: fadeinKvTxtToRight ease 2000ms 1 both 1200ms;
position: absolute;
top: 60px;
left: calc( 30% + 60px);
z-index: 100;
animation: fadeinKvTxtToRight ease 2000ms 1 both 1200ms;
width: 90px;
height: 90px;
}
@media screen and (max-width: 640px) {
.kv__copy {
top: 7rem;
left: 4rem;
width: 12rem;
height: 12rem;
}
}
@-webkit-keyframes fadeinCmn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeinCmn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeinKvTxtToLeft {
from {
-webkit-transform: translateX(5px);
transform: translateX(5px);
opacity: 0;
}
to {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}
@keyframes fadeinKvTxtToLeft {
from {
-webkit-transform: translateX(5px);
transform: translateX(5px);
opacity: 0;
}
to {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}
@-webkit-keyframes fadeinKvTxtToRight {
from {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
opacity: 0;
}
to {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}
@keyframes fadeinKvTxtToRight {
from {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
opacity: 0;
}
to {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
} .news {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
padding: 80px 0 140px;
}
.news__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
padding: 60px 0 40px;
width: calc( 100% - 40px);
max-width: 850px;
}
@media screen and (max-width: 640px) {
.news__list {
-webkit-transition: opacity ease 400ms;
transition: opacity ease 400ms;
width: 100%;
}
.news__list.slick-initialized {
opacity: 1;
}
}
.news__list__item {
position: relative;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (min-width: 641px) {
.news__list__item {
width: calc( ( 100% - 124px ) * .3333);
}
.news__list__item:not(:nth-child(3n)) {
margin-right: 62px;
}
}
@media screen and (max-width: 640px) {
.news__list__item {
-webkit-transform: scale(0.8);
-webkit-transition: -webkit-transform ease 400ms;
transform: scale(0.8);
transition: -webkit-transform ease 400ms;
transition: transform ease 400ms;
transition: transform ease 400ms, -webkit-transform ease 400ms;
will-change: all;
width: 80vw;
}
.news__list__item.slick-current {
-webkit-transform: scale(1);
transform: scale(1);
}
.news__list__item.slick-current a {
opacity: 1;
}
}
.news__list__item:before {
display: block;
padding-top: 100%;
content: '';
}
.news__list__item:after {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
background-image: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/images/news_waku.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
pointer-events: none;
content: '';
}
.news__list__item a {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-transition: opacity 400ms;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 0;
left: 0;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
opacity: 0;
z-index: 0;
transition: opacity 400ms;
background-color: rgba(86, 86, 86, 0.75);
padding: 30px 30px 15px;
width: 100%;
height: 100%;
color: #fff;
font-family: sans-serif;
text-decoration: none;
}
@media screen and (min-width: 641px) {
.news__list__item a:hover {
opacity: 1;
}
}
.news__list__item a .date {
font-size: 1.4rem;
letter-spacing: .12em;
}
@media screen and (max-width: 640px) {
.news__list__item a .date {
font-size: 1.6rem;
}
}
.news__list__item a .ttl {
font-size: 1.3rem;
letter-spacing: .24em;
line-height: 1.65;
}
@media screen and (max-width: 640px) {
.news__list__item a .ttl {
font-size: 1.6rem;
}
}
.news__list__item a .more {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
height: 13px;
} .about {
background-color: #66272B;
padding: 80px 0 90px;
}
.about__body {
margin: 0 auto;
width: calc( 100% - 40px);
max-width: 850px;
}
.about__body img {
display: block;
max-width: 100%;
}
@media screen and (min-width: 641px) {
.about__body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 35px 0 0;
}
.about__body__fig {
width: 50%;
}
.about__body__txt {
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
width: 50%;
color: #fff;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-style: normal;
font-weight: 600;
}
.about__body__txt__inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 0 20px 20px;
height: 100%;
}
.about__body__txt p {
font-size: 1.3rem;
letter-spacing: .28em;
line-height: 2.45;
}
.about__body__txt small {
font-size: 1.2rem;
letter-spacing: .38em;
line-height: 1.9;
}
}
@media screen and (max-width: 640px) {
.about__body__fig {
padding-top: 4rem;
}
.about__body__txt {
color: #fff;
}
.about__body__txt p {
padding-top: 2rem;
font-size: 2rem;
letter-spacing: .12em;
line-height: 2.45;
}
.about__body__txt small {
display: block;
padding-top: 2rem;
font-size: 1.4rem;
letter-spacing: .38em;
line-height: 1.9;
}
} .scene {
padding: 80px 0 6.5rem;
}
.scene01__ttl {
padding: 40px 20px;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 2rem;
font-style: normal;
font-weight: 600;
letter-spacing: .22em;
text-align: center;
}
@media screen and (max-width: 640px) {
.scene01__ttl {
font-size: 2.6rem;
line-height: 1.4;
}
}
.scene01__ttl span {
display: block;
margin-bottom: 1rem;
font-size: 1.5rem;
letter-spacing: .16em;
}
@media screen and (max-width: 640px) {
.scene01__ttl span {
font-size: 1.8rem;
}
}
.scene02 {
background-color: #F5F6F6;
padding: 10rem 0 4.5rem;
}
.scene03 {
padding: 10rem 0 0;
}
.scene-story {
margin: 0 auto;
width: calc( 100% - 40px);
max-width: 850px;
}
@media screen and (min-width: 641px) {
.scene-story {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
}
.scene-story.reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
.scene-story img {
display: block;
max-width: 100%;
}
.scene-story__ttl {
margin-bottom: 4rem;
}
.scene-story__ttl span {
display: inline-block;
margin-bottom: 16px;
border-bottom: 2px solid #000;
padding-bottom: .1em;
font-family: sans-serif;
font-size: 1.2rem;
font-weight: 400;
}
@media screen and (max-width: 640px) {
.scene-story__ttl span {
font-size: 1.6rem;
}
}
.scene-story__ttl img {
height: 32px;
}
.scene-story__image {
width: 52%;
}
@media screen and (min-width: 641px) and (max-width: 970px) {
.scene-story__image {
width: 32%;
}
}
@media screen and (max-width: 640px) {
.scene-story__image {
padding-bottom: 2rem;
width: 100%;
}
}
.scene-story__body {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
flex-direction: column;
z-index: 1;
width: 44%;
}
@media screen and (min-width: 641px) and (max-width: 970px) {
.scene-story__body {
width: 65%;
}
}
@media screen and (max-width: 640px) {
.scene-story__body {
width: 100%;
}
}
.scene-story__body .accent {
position: absolute;
top: -20px;
right: -20px;
z-index: -1;
width: 150px;
height: 150px;
}
@media screen and (max-width: 640px) {
.scene-story__body .accent {
top: 2vw;
right: 0;
width: 75px;
height: 75px;
}
}
.scene-story__body .copy {
margin-bottom: 20px;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
letter-spacing: .18em;
line-height: 1.7;
}
@media screen and (max-width: 640px) {
.scene-story__body .copy {
margin-bottom: 2rem;
font-size: 2.8rem;
letter-spacing: .1em;
}
}
.scene-story__body p:not(.copy) {
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
font-size: 1.35rem;
letter-spacing: .19em;
line-height: 1.78;
}
@media screen and (max-width: 640px) {
.scene-story__body p:not(.copy) {
font-size: 1.8rem;
letter-spacing: .1em;
}
}
.scene-recom {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 5.5rem 0;
width: calc( 100% - 40px);
max-width: 850px;
}
@media screen and (max-width: 640px) {
.scene-recom {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.scene-recom__image {
position: relative;
width: 200px;
}
@media screen and (min-width: 641px) {
.scene-recom__image img {
-webkit-transform: translateX(-50%);
position: absolute;
top: -10%;
left: 47%;
transform: translateX(-50%);
width: 140%;
}
}
@media screen and (max-width: 640px) {
.scene-recom__image {
width: 100%;
}
.scene-recom__image img {
-webkit-transform: translateX(-2rem);
display: block;
transform: translateX(-2rem);
margin: 0 auto 2rem;
max-width: 80%;
}
}
.scene-recom__btn {
display: block;
border: 1px solid #000;
width: 100%;
color: #000;
letter-spacing: .17em;
line-height: 3rem;
text-align: center;
text-decoration: none;
}
.scene-recom__btn [class^="icon-"] {
-webkit-transform: scale(0.6);
position: absolute;
top: 0;
right: 5px;
transform: scale(0.6);
line-height: 3rem;
}
.scene-recom__btn [class^="icon-"]:before {
color: #000 !important;
}
@media screen and (min-width: 641px) {
.scene-recom__btn {
-webkit-transition: ease 400ms;
position: absolute;
bottom: 0;
left: 0;
transition: ease 400ms;
font-size: 1.3rem;
}
.scene-recom__btn [class^="icon-"] {
-webkit-transition: ease 400ms;
transition: ease 400ms;
}
.scene-recom__btn [class^="icon-"]:before {
-webkit-transition: ease 400ms;
transition: ease 400ms;
}
.scene-recom__btn:hover {
background-color: #000;
color: #fff;
}
.scene-recom__btn:hover [class^="icon-"] {
-webkit-transform: scale(0.6) translateX(3px);
transform: scale(0.6) translateX(3px);
}
.scene-recom__btn:hover [class^="icon-"]:before {
color: #fff !important;
}
}
@media screen and (max-width: 640px) {
.scene-recom__btn {
position: relative;
font-size: 1.8rem;
line-height: 5rem;
}
.scene-recom__btn [class^="icon-"] {
line-height: 5rem;
}
}
.scene-recom .chu-kakko {
margin: 0 1rem;
width: 20px;
}
@media screen and (max-width: 640px) {
.scene-recom .chu-kakko {
display: none;
}
}
.scene-recom__body {
width: 64.7%;
}
@media screen and (max-width: 640px) {
.scene-recom__body {
width: 100%;
}
}
.scene-recom__ttl {
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
margin-bottom: 1rem;
font-size: 1.5rem;
letter-spacing: .12em;
line-height: 1.6;
}
@media screen and (max-width: 640px) {
.scene-recom__ttl {
-webkit-font-feature-settings: "palt";
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 2rem;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-feature-settings: "palt";
font-size: 2.4rem;
font-style: normal;
font-weight: 600;
}
}
.scene-recom__ttl img {
display: inline-block;
margin-right: 1rem;
width: 118px;
}
@media screen and (max-width: 640px) {
.scene-recom__ttl img {
margin: 0 0 .5rem;
width: 18rem;
}
}
.scene-recom__txt {
-webkit-font-feature-settings: "palt";
margin-bottom: 2rem;
font-feature-settings: "palt";
font-size: 1.2rem;
letter-spacing: .19em;
line-height: 1.82;
}
@media screen and (max-width: 640px) {
.scene-recom__txt {
font-size: 1.8rem;
}
}
.scene-recom__liquor__ttl {
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
border-bottom: 1px solid #000;
font-size: 1.5rem;
letter-spacing: .14em;
line-height: 2.4rem;
}
@media screen and (max-width: 640px) {
.scene-recom__liquor__ttl {
width: 100%;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: 2;
}
}
.scene-recom__liquor__ttl span {
margin-right: 1.5rem;
font-size: 1.1rem;
}
@media screen and (max-width: 640px) {
.scene-recom__liquor__ttl span {
margin-right: 2rem;
font-size: 1.6rem;
letter-spacing: .1em;
}
}
.scene-recom__liquor__ttl span img {
-webkit-transform: translateY(5%);
display: inline-block;
vertical-align: baseline;
transform: translateY(5%);
margin-right: .5rem;
height: 1.2rem;
}
@media screen and (max-width: 640px) {
.scene-recom__liquor__ttl span img {
height: 1.4rem;
}
}
.scene-recom__liquor__ttl__container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 1rem;
}
.scene-recom__liquor__list {
font-size: 1.2rem;
line-height: 1.8;
}
@media screen and (max-width: 640px) {
.scene-recom__liquor__list {
margin-bottom: 2rem;
padding-top: 1rem;
font-size: 1.6rem;
}
}
.scene-recom__liquor__list li {
padding-left: 2rem;
text-indent: -2rem;
}
@media screen and (max-width: 640px) {
.scene-recom__liquor__list li:not(:first-child) {
margin-top: 1rem;
}
}
.scene-recom__liquor__list li:before {
display: inline-block;
vertical-align: baseline;
margin-right: .2em;
background-image: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/images/check_mark.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 1.4em;
height: 1em;
content: '';
} .conversion {
background-color: #66272B;
}
@media screen and (min-width: 971px) {
.conversion {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.conversion:before {
display: block;
background-image: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/images/cv_img.jpg);
background-position: right center;
background-size: cover;
width: 50%;
height: 400px;
content: '';
}
@media screen and (max-width: 970px) {
.conversion:before {
width: 100%;
height: 80vw;
max-height: 300px;
}
}
.conversion__body {
width: 50%;
}
@media screen and (max-width: 970px) {
.conversion__body {
width: 100%;
}
}
.conversion__body__inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 6rem 2rem;
width: 100%;
height: 100%;
color: #fff;
}
@media screen and (min-width: 971px) {
.conversion__body__inner {
max-width: 680px;
}
}
.conversion__ttl {
margin-bottom: 3rem;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 2.6rem;
font-style: normal;
font-weight: 600;
letter-spacing: .34em;
}
@media screen and (min-width: 971px) and (max-width: 1050px) {
.conversion__ttl {
font-size: 2vw;
}
}
.conversion__txt {
margin-bottom: 5rem;
font-size: 1.2rem;
letter-spacing: .24em;
line-height: 1.75;
text-align: center;
}
@media screen and (max-width: 640px) {
.conversion__txt {
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
font-size: 1.8rem;
letter-spacing: .18em;
}
}
.conversion__link {
display: block;
background: #8C2F24;
width: 313px;
color: #fff;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 1.6rem;
font-style: normal;
font-weight: 600;
letter-spacing: .44em;
line-height: 45px;
text-align: center;
text-decoration: none;
}
.conversion__link [class^="icon-"]:before {
color: #fff !important;
}
@media screen and (min-width: 641px) {
.conversion__link {
-webkit-transition: ease 400ms;
transition: ease 400ms;
}
.conversion__link:hover {
background-color: #000;
}
}
@media screen and (max-width: 640px) {
.conversion__link {
line-height: 6rem;
}
}
.conversion__link__container {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
} .lineup {
padding: 12rem 0;
}
.lineup-item {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
margin: 0px auto 0;
padding-top: 80px;
max-width: 850px;
}
.lineup-item:not(:last-child) {
border-bottom: 1px dotted #ccc;
padding-bottom: 80px;
}
.lineup-item:last-child {
padding-bottom: 50px;
}
@media screen and (max-width: 970px) {
.lineup-item {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
width: 100%;
}
}
@media screen and (max-width: 640px) {
.lineup-item {
padding-top: 6rem;
}
.lineup-item:not(:last-child) {
padding-bottom: 6rem;
}
.lineup-item:last-child {
padding-bottom: 3rem;
}
}
.lineup-item__figure {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
flex-direction: column;
justify-content: flex-end;
width: 170px;
}
@media screen and (min-width: 971px) {
.lineup-item__figure:before {
display: block;
padding-top: 80%;
content: '';
}
}
@media screen and (max-width: 970px) {
.lineup-item__figure {
padding-top: 2rem;
width: 100%;
}
}
.lineup-item__figure img {
display: block;
}
@media screen and (min-width: 971px) {
.lineup-item__figure img {
-webkit-transform: translateX(-50%);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120%;
}
}
@media screen and (max-width: 970px) {
.lineup-item__figure img {
margin: 0 auto 1rem;
width: 80%;
max-width: 300px;
}
}
.lineup-item__name {
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 1.3rem;
font-style: normal;
font-weight: 600;
line-height: 1.35;
text-align: center;
}
@media screen and (max-width: 640px) {
.lineup-item__name {
font-size: 2rem;
letter-spacing: .1em;
line-height: 1.5;
}
}
.lineup-item__buy-btn {
position: relative;
margin: 1.5rem 0 0;
background-color: #8A2F24;
padding: 0 15px;
width: 100%;
color: #fff;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 1.3rem;
font-style: normal;
font-weight: 600;
letter-spacing: .17em;
line-height: 3rem;
text-align: center;
text-decoration: none;
}
.lineup-item__buy-btn [class="icon-cart_icon"] {
margin-left: .2em;
}
.lineup-item__buy-btn [class="icon-more_arr"] {
-webkit-transform: scale(0.6);
position: absolute;
top: 0;
right: 5px;
transform: scale(0.6);
line-height: 3rem;
}
@media screen and (min-width: 641px) {
.lineup-item__buy-btn {
-webkit-transition: ease 400ms;
transition: ease 400ms;
}
.lineup-item__buy-btn [class="icon-more_arr"] {
-webkit-transition: ease 400ms;
transition: ease 400ms;
}
.lineup-item__buy-btn:hover {
background: #000;
}
.lineup-item__buy-btn:hover [class="icon-more_arr"] {
-webkit-transform: translate(2px) scale(0.6);
transform: translate(2px) scale(0.6);
}
}
@media screen and (max-width: 970px) {
.lineup-item__buy-btn {
font-size: 2rem;
line-height: 6rem;
}
.lineup-item__buy-btn [class="icon-more_arr"] {
line-height: 6rem;
}
}
.lineup-item__detail {
width: calc( 100% - ( 170px + 40px ));
}
@media screen and (max-width: 970px) {
.lineup-item__detail {
width: 100%;
}
}
.lineup-item__ttl {
margin-bottom: 1.5rem;
color: #8C2F24;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 1.8rem;
font-style: normal;
font-weight: 600;
letter-spacing: .1em;
line-height: 1.66;
}
@media screen and (max-width: 640px) {
.lineup-item__ttl {
font-size: 2.4rem;
line-height: 1.5;
}
}
.lineup-item__desc {
-webkit-font-feature-settings: "palt";
margin-bottom: 2rem;
font-feature-settings: "palt";
font-size: 1.3rem;
letter-spacing: .18em;
line-height: 2.3;
}
@media screen and (max-width: 640px) {
.lineup-item__desc {
font-size: 1.8rem;
line-height: 1.8;
}
}
.lineup-item__datas {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
@media screen and (min-width: 641px) {
.lineup-item__datas {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
@media screen and (max-width: 640px) {
.lineup-item__datas {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
padding-top: 2rem;
}
}
.lineup-item__liquor {
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 200px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: flex-end;
transform-style: preserve-3d;
perspective: 200px;
width: 16rem;
}
.lineup-item__liquor .open-mariage { -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-box-shadow: none;
cursor: pointer;
outline: none;
box-shadow: none;
border: none;
border-radius: 0;
background: none;
}
.lineup-item__liquor .open-mariage img {
width: 15rem;
}
@media screen and (max-width: 640px) {
.lineup-item__liquor .open-mariage img {
width: 20rem;
}
}
@media screen and (min-width: 641px) {
.lineup-item__liquor .open-mariage {
-webkit-transition: ease 300ms;
-webkit-transform-origin: left top;
transform-origin: left top;
transition: ease 300ms;
}
.lineup-item__liquor .open-mariage:hover {
-webkit-transform: rotate3d(0, -0.5, -0.25, 5deg);
transform: rotate3d(0, -0.5, -0.25, 5deg);
opacity: .65;
}
}
@media screen and (min-width: 641px) {
.lineup-item__liquor {
padding-left: 1rem;
}
}
@media screen and (max-width: 640px) {
.lineup-item__liquor {
padding-top: 3rem;
width: 100%;
}
}
.lineup-item__ingredients {
font-size: 1rem;
letter-spacing: .15em;
line-height: 2;
}
@media screen and (min-width: 641px) {
.lineup-item__ingredients {
width: calc( 100% - 16rem);
}
}
@media screen and (max-width: 640px) {
.lineup-item__ingredients {
border-top: 1px solid;
padding-top: 2rem;
width: 100%;
letter-spacing: .08em;
line-height: 1.6;
}
}
.lineup-mariage {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
display: none;
position: fixed;
top: 0;
left: 0;
align-items: center;
justify-content: center;
opacity: 0;
z-index: 100000;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
}
.lineup-mariage.is-ready {
-webkit-transition: opacity ease 400ms;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
transition: opacity ease 400ms;
}
.lineup-mariage.is-ready.is-active {
opacity: 1;
}
.lineup-mariage__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
border-width: 1px 1px 1px 0;
border-style: solid;
background-color: #fff;
background-color: #fff;
max-width: 80%;
max-height: 80%;
}
@media screen and (max-width: 640px) {
.lineup-mariage__inner {
max-width: calc( 100% - 4rem);
}
}
.lineup-mariage__inner .gyoza-name {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
background-color: #000;
padding: 1.5rem 0;
color: #fff;
color: 0;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 1.3rem;
font-style: normal;
font-weight: 600;
letter-spacing: .24em;
line-height: 2.6;
writing-mode: vertical-rl;
}
@media screen and (max-width: 640px) {
.lineup-mariage__inner .gyoza-name {
font-size: 1.6rem;
}
}
.lineup-mariage__body {
padding: 6rem 8rem;
}
@media screen and (min-width: 641px) and (max-width: 970px) {
.lineup-mariage__body {
padding: 6rem;
}
}
@media screen and (max-width: 640px) {
.lineup-mariage__body {
padding: 6rem 3rem;
overflow-y: scroll;
}
}
.lineup-mariage__body .grape {
-webkit-box-align: start;
-ms-flex-align: start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: flex-start;
margin: 0 0 3rem;
border-bottom: 2px solid #66272B;
width: 100%;
color: #66272B;
font-size: 1.6rem;
letter-spacing: .06em;
line-height: 2rem;
}
@media screen and (max-width: 640px) {
.lineup-mariage__body .grape {
font-size: 2rem;
letter-spacing: .02em;
line-height: 1.5;
}
}
.lineup-mariage__body .grape span {
display: block;
margin-right: 1rem;
background-color: #66272B;
padding: 0 1rem;
color: #fff;
font-family: sans-serif;
font-size: 1rem;
line-height: 2.4rem;
text-align: center;
}
@media screen and (max-width: 640px) {
.lineup-mariage__body .grape span {
line-height: 3.2rem;
}
}
.lineup-mariage__body .wine-list {
margin-bottom: 6rem;
}
.lineup-mariage__body .wine-list__item {
position: relative;
padding: 0 0 0 2rem;
color: #66272B;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
letter-spacing: .06em;
line-height: 1.6;
}
.lineup-mariage__body .wine-list__item:not(:last-child) {
margin-bottom: 3rem;
}
@media screen and (max-width: 640px) {
.lineup-mariage__body .wine-list__item {
font-size: 1.8rem;
}
.lineup-mariage__body .wine-list__item br {
display: none;
}
}
.lineup-mariage__body .wine-list__item:before {
display: block;
position: absolute;
top: .3rem;
left: 0;
margin-right: 1rem;
border-left: 5px solid #66272B;
width: 0;
height: calc( 100% - .6rem);
content: '';
}
.lineup-mariage__body .wine-list__item span {
display: block;
font-family: sans-serif;
font-size: 1.2rem;
font-weight: 400;
}
.lineup-mariage__body .desc {
width: 100%;
max-width: 530px;
font-size: 1.3rem;
letter-spacing: .18em;
line-height: 2.23;
}
@media screen and (max-width: 640px) {
.lineup-mariage__body .desc {
font-size: 1.6rem;
letter-spacing: .06em;
}
}
.lineup-mariage__close { -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-box-shadow: none;
position: absolute;
right: 1.5rem;
bottom: 1rem;
z-index: 100;
outline: none;
box-shadow: none;
border: none;
border-radius: 0;
border-radius: 100%;
background: none;
width: 4rem;
height: 4rem;
}
@media screen and (max-width: 640px) {
.lineup-mariage__close {
width: 5rem;
height: 5rem;
}
}
.lineup-mariage__close:before, .lineup-mariage__close:after {
display: block;
position: absolute;
top: 50%;
left: 5%;
background-color: #000;
width: 90%;
height: 1px;
content: '';
}
.lineup-mariage__close:before {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.lineup-mariage__close:after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
@media screen and (min-width: 641px) {
.lineup-mariage__close {
-webkit-transition: ease 200ms;
transition: ease 200ms;
cursor: pointer;
}
.lineup-mariage__close:before, .lineup-mariage__close:after {
-webkit-transition: ease 200ms;
transition: ease 200ms;
}
.lineup-mariage__close:hover {
background-color: #ECECEC;
}
.lineup-mariage__close:hover:before {
-webkit-transform: rotate(135deg) scaleX(0.8);
transform: rotate(135deg) scaleX(0.8);
}
.lineup-mariage__close:hover:after {
-webkit-transform: rotate(-135deg) scaleX(0.8);
transform: rotate(-135deg) scaleX(0.8);
}
} .recommend {
background-color: #F5F6F6;
padding: 8rem 0;
}
.recommend .ttl-cmn {
max-width: 1050px;
}
.recommend__copy {
padding: 5rem 2rem 4rem;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: 1.6;
text-align: center;
}
.recommend__list {
-webkit-transition: opacity ease 200ms;
transition: opacity ease 200ms;
width: 100%;
}
.recommend__list:not(.slick-initialized) {
opacity: 0;
height: 380px;
}
.recommend__list__container {
position: relative;
margin: 0 auto;
padding-bottom: 4rem;
width: calc( 100% - 100px);
max-width: 1050px;
}
@media screen and (max-width: 640px) {
.recommend__list__container {
width: 100%;
}
}
.recommend__list__btn { -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-box-shadow: none;
display: block;
position: absolute;
top: calc( 50% - 1.4rem);
outline: none;
box-shadow: none;
border: none;
border-radius: 0;
background: none;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 2.8rem;
height: 2.8rem;
overflow: hidden;
text-indent: 200%;
white-space: nowrap;
}
.recommend__list__btn.prev {
left: -5rem;
background-image: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/images/slide_arr_left.svg);
}
@media screen and (max-width: 1250px) {
.recommend__list__btn.prev {
left: -3rem;
}
}
.recommend__list__btn.next {
right: -5rem;
background-image: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/images/slide_arr_right.svg);
}
@media screen and (max-width: 1250px) {
.recommend__list__btn.next {
right: -3rem;
}
}
@media screen and (min-width: 641px) {
.recommend__list__btn {
-webkit-transition: ease 300ms;
transition: ease 300ms;
}
.recommend__list__btn:hover {
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: .65;
}
}
.recommend__list__item {
position: relative;
padding: 0 20px 4.7rem;
}
.recommend__list__item .fig {
display: block;
max-width: 100%;
}
.recommend__list__item .fig__container {
-webkit-transform-style: preserve-3d;
display: block;
transform-style: preserve-3d;
background-color: #000;
width: 100%;
overflow: hidden;
}
.recommend__list__item .desc {
-webkit-transform: translateX(-50%);
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-font-feature-settings: "palt";
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
bottom: 0;
left: 50%;
align-items: center;
justify-content: center;
transform: translateX(-50%);
z-index: 1;
background-image: url(//kawatoann.jp/wp-content/themes/kawa_to_an/gyoza/images/recommend_copy_bg.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
padding: 20px 10px;
width: 266px;
max-width: calc( 100% - 60px);
height: 71px;
overflow: hidden;
color: #000;
font-feature-settings: "palt";
font-size: 1.2rem;
letter-spacing: .32em;
line-height: 1.66;
text-decoration: none;
}
@media screen and (max-width: 970px) {
.recommend__list__item .desc {
font-size: 1.4rem;
}
}
.recommend__list__item a {
display: block;
}
@media screen and (min-width: 641px) {
.recommend__list__item a .fig {
-webkit-transition: ease 400ms;
transition: ease 400ms;
}
.recommend__list__item a:hover .fig {
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: .65;
}
} .howtoeat {
padding: 12rem 0 9rem;
}
@media screen and (max-width: 640px) {
.howtoeat {
padding: 8rem 0;
}
}
.howtoeat__top {
margin: 0 auto;
margin-bottom: 3rem;
border-bottom: 1px solid #000;
padding: 0 0 .2em;
width: 12.5rem;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
letter-spacing: .16em;
text-align: center;
}
.howtoeat__ttl {
margin-bottom: 3rem;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 2.5rem;
font-style: normal;
font-weight: 600;
letter-spacing: .18em;
text-align: center;
}
@media screen and (max-width: 640px) {
.howtoeat__ttl {
line-height: 1.6;
}
}
.way {
margin: 0 auto;
max-width: 910px;
}
.way:not(:last-child) {
margin-bottom: 80px;
}
.way__ttl {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
width: 100%;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-style: normal;
font-weight: 600;
}
.way__ttl:before {
display: block;
position: absolute;
top: 50%;
left: 0;
z-index: 0;
background-color: #000;
width: 100%;
height: 1px;
content: '';
}
.way__ttl span {
-webkit-font-feature-settings: "palt";
position: relative;
z-index: 1;
border: 1px solid #000;
border-radius: 2rem;
background-color: #fff;
padding: 0 1em;
font-feature-settings: "palt";
font-size: 1.7rem;
letter-spacing: .36em;
line-height: 3.4rem;
text-align: center;
}
@media screen and (max-width: 640px) {
.way__ttl span {
font-size: 2rem;
letter-spacing: .24em;
}
}
.way__copy {
-webkit-font-feature-settings: "palt";
margin-bottom: 5rem;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-feature-settings: "palt";
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
letter-spacing: .24em;
line-height: 1.6;
text-align: center;
}
@media screen and (max-width: 640px) {
.way__copy {
font-size: 1.8rem;
text-align: left;
}
}
.way__steps {
counter-reset: step;
}
@media screen and (min-width: 641px) {
.way__steps {
-ms-flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
.way__steps img {
max-width: 100%;
}
.way__steps .step {
position: relative;
counter-increment: step;
}
@media screen and (max-width: 640px) {
.way__steps .step:not(:last-child) {
margin-bottom: 4rem;
border-bottom: 1px dotted #ccc;
padding-bottom: 4rem;
}
}
.way__steps .step:before {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 0;
left: 2rem;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: 3rem;
background-color: #000;
width: 3.8rem;
color: #fff;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: 3.8rem;
text-align: center;
content: counter(step);
}
@media screen and (max-width: 640px) {
.way__steps .step:before {
left: 0;
width: 5rem;
font-size: 2.4rem;
line-height: 5rem;
}
}
.way__steps .fig {
display: block;
margin-bottom: 1rem;
}
.way__steps .desc {
-webkit-font-feature-settings: "palt";
margin-bottom: 1rem;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-feature-settings: "palt";
font-size: 1.3rem;
font-style: normal;
font-weight: 600;
letter-spacing: .15em;
line-height: 1.76;
}
@media screen and (max-width: 640px) {
.way__steps .desc {
font-family: a-otf-ryumin-pr6n, serif;
font-size: 1.8rem;
font-style: normal;
font-weight: 300;
}
}
.way__steps .point {
display: block;
background-color: #E0E0E0;
padding: 1rem;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 1.1rem;
font-style: normal;
font-weight: 600;
line-height: 1.8;
}
@media screen and (max-width: 640px) {
.way__steps .point {
font-family: a-otf-ryumin-pr6n, serif;
font-size: 1.6rem;
font-style: normal;
font-weight: 300;
}
}
@media screen and (min-width: 641px) {
.way__steps.col3 .step:nth-child(3n-2) {
border-right: 1px dotted #ccc;
padding: 2rem 2.5rem 2rem 0;
width: calc( ( 100% - 8rem ) * .3333 + 2rem);
}
.way__steps.col3 .step:nth-child(3n-1) {
border-right: 1px dotted #ccc;
padding: 2rem 2.5rem;
width: calc( ( 100% - 8rem ) * .3333 + 4rem);
}
.way__steps.col3 .step:nth-child(3n) {
padding: 2rem 0 2rem 2.5rem;
width: calc( ( 100% - 8rem ) * .3333 + 2rem);
}
.way__steps.col3 .step:nth-child(n+4) {
border-top: 1px dotted #ccc;
padding-top: 4rem;
}
.way__steps.col3 .step:nth-child(n+4):before {
top: 2rem;
}
.way__steps.col3 .step:nth-child(n+4):not(:nth-child(3n)):after {
display: block;
position: absolute;
top: -2rem;
right: -2rem;
z-index: 100;
background-color: #fff;
width: 4rem;
height: 4rem;
content: '';
}
.way__steps.col2 .step {
position: relative;
width: 50%;
}
.way__steps.col2 .step:not(:nth-child(2n)) {
border-right: 1px dotted #ccc;
padding-right: 4rem;
}
.way__steps.col2 .step:nth-child(2n) {
padding-left: 4rem;
}
} .insta {
background-color: #F5F6F6;
padding: 7.5rem 0 13rem;
}
.insta__inner {
margin: 0 auto;
width: calc( 100% - 4rem);
max-width: 1050px;
}
.insta .ttl-cmn {
width: 100%;
max-width: 1050px;
}
.insta__list {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-ms-flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 7rem;
}
@media screen and (min-width: 641px) {
.insta__list li {
width: calc( ( 100% - 3rem ) * .25);
}
.insta__list li:not(:nth-child(4n)) {
margin-right: 1rem;
}
.insta__list li:not(:nth-child(-n+4)) {
margin-top: 1rem;
}
}
@media screen and (max-width: 640px) {
.insta__list li {
width: calc( ( 100% - 1rem ) * .5);
}
.insta__list li:not(:nth-child(2n)) {
margin-right: 1rem;
}
.insta__list li:not(:nth-child(-n+2)) {
margin-top: 1rem;
}
}
.insta__list li img {
max-width: 100%;
}
.insta__link {
display: block;
background-color: #66272B;
padding: 0 3rem;
color: #fff;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-size: 1.6rem;
font-style: normal;
font-weight: 600;
letter-spacing: .26em;
line-height: 4.7rem;
text-decoration: none;
white-space: nowrap;
}
@media screen and (min-width: 641px) {
.insta__link {
-webkit-transition: ease 400ms;
transition: ease 400ms;
}
.insta__link:hover {
background-color: #000;
}
}
.insta__link__container {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
padding: 5rem 0 0;
} .media {
padding: 9rem 0;
}
.media .ttl-cmn {
width: 100%;
max-width: 100%;
}
.media__inner {
margin: 0 auto;
width: calc( 100% - 4rem);
max-width: 1050px;
}
.media__list {
padding-top: 5rem;
}
.media__list__year:not(:last-child) {
margin-bottom: 5rem;
}
.media__list__year__ttl {
-webkit-font-feature-settings: "palt";
border-bottom: 1px solid;
padding-bottom: .75em;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-feature-settings: "palt";
font-size: 1.6rem;
font-style: normal;
font-weight: 600;
letter-spacing: .26em;
}
@media screen and (max-width: 640px) {
.media__list__year__ttl {
font-size: 2.4rem;
}
}
.media__event-table {
margin-top: 2rem;
}
.media__event-table th, .media__event-table td {
-webkit-font-feature-settings: "palt";
font-family: a-otf-ryumin-pr6n, serif;
font-feature-settings: "palt";
font-size: 1.3rem;
font-style: normal;
font-weight: 300;
letter-spacing: .2em;
line-height: 1.5;
}
@media screen and (max-width: 640px) {
.media__event-table th, .media__event-table td {
font-size: 1.6rem;
letter-spacing: .1em;
}
}
.media__event-table th {
padding: 1rem 1rem 1rem 0;
width: 6rem;
}
@media screen and (max-width: 640px) {
.media__event-table th {
width: 12%;
}
}
.media__event-table td {
padding-bottom: 1rem;
width: calc( 100% - 6rem);
}
@media screen and (max-width: 640px) {
.media__event-table td {
width: 88%;
}
} .shop {
padding: 12rem 0;
}
.shop .ttl-cmn {
max-width: 1050px;
}
.shop__subttl img {
display: block;
margin: 10rem auto 3rem;
height: 29px;
}
.shop__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 4rem auto 5rem;
width: calc( 100% - 4rem);
max-width: 1050px;
}
@media screen and (min-width: 641px) {
.shop__inner {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media screen and (min-width: 641px) {
.shop__inner.reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.shop__inner.reverse .shop__fig {
padding-right: 0;
padding-left: 1.5rem;
}
.shop__inner.reverse .shop__detail {
padding-right: 3rem;
padding-left: 0;
}
}
@media screen and (max-width: 640px) {
.shop__inner {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
@media screen and (min-width: 641px) {
.shop__fig {
padding-right: 1.5rem;
width: 50%;
}
}
.shop__fig img {
display: block;
max-width: 100%;
}
.shop__detail {
padding-left: 3rem;
width: 50%;
max-width: 425px;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-style: normal;
font-weight: 600;
}
@media screen and (max-width: 640px) {
.shop__detail {
padding: 0 0 4rem;
width: 100%;
}
}
.shop__name {
-webkit-font-feature-settings: "palt";
margin-bottom: 2rem;
font-feature-settings: "palt";
font-size: 4rem;
letter-spacing: .24em;
line-height: 1;
}
.shop__name span {
display: block;
margin-bottom: 1rem;
font-size: .5em;
}
@media screen and (max-width: 640px) {
.shop__name {
margin-bottom: 4rem;
text-align: center;
}
}
.shop__desc {
margin-bottom: 2rem;
font-family: a-otf-ryumin-pr6n, serif;
font-size: 1.4rem;
font-style: normal;
font-weight: 300;
letter-spacing: .18em;
line-height: 1.71;
}
@media screen and (max-width: 640px) {
.shop__desc {
font-size: 1.8rem;
letter-spacing: .1em;
}
}
.shop__address {
border-bottom: 1px solid #000;
padding-bottom: 5rem;
font-family: a-otf-ryumin-pr6n, serif;
font-size: 1.5rem;
font-style: normal;
font-weight: 300;
letter-spacing: .18em;
line-height: 1.53;
}
.shop__address__link {
display: block;
margin: 1.5rem 0 0;
width: 160px;
}
.shop__address__link img {
display: block;
max-width: 100%;
}
@media screen and (min-width: 641px) {
.shop__address__link {
-webkit-transition: opacity ease 400ms;
transition: opacity ease 400ms;
}
.shop__address__link:hover {
opacity: .5;
}
}
@media screen and (max-width: 640px) {
.shop__address__link {
margin: 3rem 0 0 auto;
}
}
.shop__msg {
padding-top: 3rem;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-style: normal;
font-weight: 600;
}
.shop__msg__ttl {
-webkit-font-feature-settings: "palt";
margin-bottom: 1.5rem;
font-feature-settings: "palt";
font-size: 2rem;
letter-spacing: .2em;
line-height: 1.5;
}
@media screen and (max-width: 640px) {
.shop__msg__ttl {
font-size: 2.4rem;
}
}
.shop__msg__txt {
font-family: a-otf-ryumin-pr6n, serif;
font-size: 1.4rem;
font-style: normal;
font-weight: 300;
line-height: 1.7;
}
@media screen and (max-width: 640px) {
.shop__msg__txt {
font-size: 1.8rem;
letter-spacing: .1em;
}
} .footer__logo {
display: block;
margin: 0 auto 6rem;
max-width: 55px;
}
.footer .copy {
display: block;
background-color: #000;
color: #fff;
font-family: sans-serif;
font-size: 1.2rem;
font-weight: 500;
letter-spacing: .2em;
line-height: 4.2rem;
text-align: center;
} .buy-btn {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
z-index: 9999;
background-color: #8A2F24;
color: #fff;
font-family: a-otf-midashi-mi-ma31-pr6n, serif;
font-style: normal;
font-weight: 600;
letter-spacing: .18em;
line-height: 1.4;
text-align: center;
text-decoration: none;
}
@media screen and (min-width: 641px) {
.buy-btn {
top: 2rem;
right: 2rem;
border-radius: 14.2rem;
width: 14.2rem;
height: 14.2rem;
font-size: 1.2rem;
}
}
@media screen and (min-width: 641px) and (max-width: 970px) {
.buy-btn {
width: 9rem;
height: 9rem;
font-size: 1rem;
}
}
@media screen and (max-width: 640px) {
.buy-btn {
bottom: 0;
left: 0;
padding-left: 3rem;
width: calc( 100% - 7rem);
height: 7rem;
font-size: 2.4rem;
line-height: 1.333;
}
.buy-btn br {
display: none;
}
}
@media screen and (min-width: 641px) {
.buy-btn__inner {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px solid #fff;
border-radius: 100%;
width: 95%;
height: 95%;
}
}
@media screen and (min-width: 641px) and (max-width: 970px) {
.buy-btn__inner {
width: 96%;
height: 96%;
}
}
@media screen and (max-width: 640px) {
.buy-btn__inner {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
}
}
.buy-btn__inner [class^="icon-"] {
display: block;
margin-top: .5rem;
margin-bottom: .5rem;
font-size: 4rem;
}
@media screen and (min-width: 641px) and (max-width: 970px) {
.buy-btn__inner [class^="icon-"] {
font-size: 3rem;
}
}
@media screen and (max-width: 640px) {
.buy-btn__inner [class^="icon-"] {
margin: 0 1.5rem 0 0;
font-size: 3rem;
}
}
@media screen and (min-width: 641px) {
.buy-btn {
-webkit-transition: ease opacity 200ms;
transition: ease opacity 200ms;
}
.buy-btn:hover {
opacity: .5;
}
}