@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;
}
address {
font-style: inherit;
} @media screen and (max-width: 641px) {
.lt-sp {
display: none !important;
}
}
@media screen and (min-width: 642px) {
.st-sp {
display: none !important;
}
}
@media screen and (max-width: 1024px) {
.lt-tblt {
display: none !important;
}
}
@media screen and (min-width: 1025px) {
.st-tblt {
display: none !important;
}
}          html,
body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
font-family: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight: 600;
letter-spacing: 0.12em;
}
@media screen and (min-width: 1025px) {
html {
font-size: 10px;
}
}
@media screen and (max-width: 1024px) {
html {
font-size: calc(10px + 0.15601vw);
}
}
@media screen and (max-width: 641px) {
html {
font-size: 2vw;
}
}
@media screen and (max-width: 320px) {
html {
font-size: 2.35vw;
}
}
body {
background: #FFF;
color: #000;
font-size: 1.45rem;
letter-spacing: 0.07em;
}
body.fixed {
position: fixed;
left: 0;
width: 100%;
height: 100%;
}
img {
max-width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: #000;
text-decoration: none;
}
p {
word-wrap: break-word;
}
p img {
vertical-align: bottom;
max-width: 100%;
} @media screen and (min-width: 769px) {
.lt-tbminNone {
display: none !important;
}
}
@media screen and (max-width: 768px) {
.st-tbminNone {
display: none !important;
}
}
@media screen and (min-width: 1025px) {
.lt-tbltNone {
display: none !important;
}
}
@media screen and (max-width: 1024px) {
.st-tbltNone {
display: none !important;
}
}
@media screen and (min-width: 642px) {
.lt-spNone {
display: none !important;
}
}
@media screen and (max-width: 641px) {
.st-spNone {
display: none !important;
}
}
@media screen and (min-width: 642px) and (max-width: 1024px) {
.tbltNone {
display: none !important;
}
}
[class$="_ttl"],
[class*="_ttl "] {
position: relative;
z-index: 1;
}
@media screen and (min-width: 1025px) {
img[src$="_sp.svg"],
img[src$="_sp.jpg"],
img[src$="_sp.png"] {
display: none;
}
}
@media screen and (max-width: 1024px) {
img[src$="_pc.svg"],
img[src$="_pc.jpg"],
img[src$="_pc.png"] {
display: none;
}
}
@media screen and (min-width: 642px) and (max-width: 1024px) and (max-width: 1024px) {
img[src$="_pc.svg"]:not(.tbon),
img[src$="_pc.jpg"]:not(.tbon),
img[src$="_pc.png"]:not(.tbon) {
display: none;
}
}
@media screen and (min-width: 642px) and (max-width: 1024px) and (max-width: 1024px) {
img[src$="_sp.svg"].tbnone,
img[src$="_sp.jpg"].tbnone,
img[src$="_sp.png"].tbnone {
display: none;
}
}
body {
position: relative;
}
@media screen and (min-width: 1025px) {
main {
margin: 8rem auto 0;
max-width: 1300px;
}
}
.cmn_ttl01 {
border-bottom: 1px solid #000;
padding-bottom: 1rem;
width: 80%;
max-width: 32.5rem;
font-size: 2.4rem;
font-weight: 600;
letter-spacing: 0.07em;
text-align: right;
}
@media screen and (max-width: 1024px) {
.cmn_ttl01 {
margin-bottom: 6rem;
width: 50%;
}
}
.cmn_btn01 a {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-transition: ease 0.3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
align-items: center;
align-items: center;
transition: ease 0.3s;
border-radius: 1.5rem;
background: #000;
padding: 0 1.5rem;
height: 3rem;
color: #FFF;
font-size: 1.6rem;
font-weight: 600;
line-height: 3rem;
white-space: nowrap;
}
.cmn_btn01 a:after {
display: block;
margin-left: .75rem;
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/icon-arrow.svg) center bottom no-repeat;
width: .5rem;
height: 1.2rem;
content: "";
}
.cmn_btn01 a:hover {
opacity: 0.6;
}
.cmn_btn01-p a {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-transition: ease 0.3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
align-items: center;
align-items: center;
transition: ease 0.3s;
border-radius: 1.5rem;
background: #000;
padding: 0 1.5rem;
height: 3rem;
color: #FFF;
font-size: 1.6rem;
font-weight: 600;
line-height: 3rem;
white-space: nowrap;
}
.cmn_btn01-p a:after {
display: block;
margin-left: .75rem;
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/icon-arrow.svg) center bottom no-repeat;
width: .5rem;
height: 1.2rem;
content: "";
}
.cmn_btn01-p a:hover {
opacity: 0.6;
}
.cmn_btn01-p a {
background: #ba5449;
}
.cmn_btn02-o a {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-transition: ease 0.3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
align-items: center;
transition: ease 0.3s;
border: 1px solid #be7333;
background: #f0e0d2;
padding: 1rem 1.25rem;
color: #be7333;
font-size: 1.6rem;
}
.cmn_btn02-o a:after {
display: block;
margin-left: .75rem;
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/icon-link-o.svg) center bottom no-repeat;
width: 1.8rem;
height: 1.4rem;
content: "";
}
.cmn_btn02-o a:hover {
opacity: 0.6;
}
.cmn_btn02-g a {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-transition: ease 0.3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
align-items: center;
transition: ease 0.3s;
border: 1px solid #526b2a;
background: #c0d3b1;
padding: 1rem 1.25rem;
color: #526b2a;
font-size: 1.6rem;
}
.cmn_btn02-g a:after {
display: block;
margin-left: .75rem;
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/icon-link-g.svg) center bottom no-repeat;
width: 1.8rem;
height: 1.4rem;
content: "";
}
.cmn_btn02-g a:hover {
opacity: 0.6;
}
article {
position: relative;
}  .topKv {
position: relative;
}
@media screen and (min-width: 642px) {
.topKv {
margin-bottom: 11rem;
}
}
@media screen and (max-width: 1024px) {
.topKv {
margin-bottom: calc(11rem * .85);
}
}
@media screen and (max-width: 641px) {
.topKv {
margin-bottom: calc(11rem * .5);
}
}
@media screen and (min-width: 1025px) {
.topKv {
height: calc(100vh - 8rem);
min-height: 630px;
}
}
@media screen and (max-width: 1024px) {
.topKv {
min-height: 500px;
}
}
.topKv-wrap {
position: relative;
height: 100%;
overflow: hidden;
}
@media screen and (min-width: 642px) {
.topKv-wrap {
margin-bottom: 11rem;
}
}
@media screen and (max-width: 1024px) {
.topKv-wrap {
margin-bottom: calc(11rem * .85);
}
}
@media screen and (max-width: 641px) {
.topKv-wrap {
margin-bottom: calc(11rem * .5);
}
}
@media screen and (min-width: 1025px) {
.topKv-wrap {
height: calc(100vh - 8rem);
min-height: 630px;
}
}
@media screen and (max-width: 1024px) {
.topKv-wrap {
min-height: 500px;
}
}
.topKv-inner {
position: relative;
height: 100%;
}
@media screen and (max-width: 1024px) {
.topKv-inner {
overflow: hidden;
}
}
.topKv_ttl {
position: absolute;
bottom: 7rem;
left: 6rem;
z-index: 1;
}
@media screen and (min-width: 1025px) {
.topKv_ttl {
max-width: 40%;
}
}
@media screen and (max-width: 1024px) {
.topKv_ttl {
bottom: 10vw;
left: 3vw;
width: 63vw;
}
}
.topKv_copy {
position: absolute;
}
.topKv_copy span {
display: block;
}
.topKv01 .inner::before {
position: absolute;
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/top-kv.jpg) center top no-repeat;
background-size: contain;
width: 100%;
height: calc(100% - 6rem);
content: "";
}
@media screen and (max-width: 1024px) {
.topKv01 .inner::before {
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/top-kv_sp.jpg) center top no-repeat;
background-size: contain;
}
}
@media screen and (min-width: 1025px) {
.topKv01 .copy {
right: 14.5rem;
bottom: 5.5rem;
}
}
@media screen and (max-width: 1024px) {
.topKv01 .copy {
top: 70vw;
right: 6vw;
width: 20vw;
}
}
.topKv02 .inner::before {
position: absolute;
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/top-kv02.jpg) center top no-repeat;
background-size: contain;
width: 100%;
height: calc(100% - 6rem);
content: "";
}
@media screen and (max-width: 1024px) {
.topKv02 .inner::before {
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/top-kv02_sp.jpg) center top no-repeat;
background-size: contain;
}
}
@media screen and (min-width: 1025px) {
.topKv02 .copy {
right: 14.5rem;
bottom: 7.5rem;
}
}
@media screen and (max-width: 1024px) {
.topKv02 .copy {
top: 78vw;
right: 6vw;
width: 20vw;
}
}
img {
vertical-align: bottom;
}
.cmn-anchor {
margin-top: -8rem;
padding-top: 8rem;
}
@media screen and (max-width: 641px) {
.cmn-anchor {
margin-top: -5rem;
padding-top: 5rem;
}
} @media screen and (min-width: 642px) {
.topNews {
margin-bottom: 17.5rem;
}
}
@media screen and (max-width: 1024px) {
.topNews {
margin-bottom: calc(17.5rem * .85);
}
}
@media screen and (max-width: 641px) {
.topNews {
margin-bottom: calc(17.5rem * .5);
}
}
@media screen and (min-width: 1025px) {
.topNews_ttl {
margin-bottom: 6rem;
}
}
.topNews-cont {
margin-right: auto;
margin-left: auto;
padding: 0 3rem;
max-width: calc(880px + 6rem);
}
@media screen and (max-width: 1024px) {
.topNews-cont {
padding: 0 2rem;
max-width: calc(880px + 4rem);
}
}
.topNews-list {
-ms-flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
margin-bottom: 3rem;
}
@media screen and (min-width: 1025px) {
.topNews-list li {
width: calc(33.333% - ((7rem * 2) / 3));
}
.topNews-list li:not(:nth-of-type(3n)) {
margin-right: 7rem;
}
.topNews-list li:nth-of-type(n+4) {
margin-top: 3rem;
}
}
@media screen and (max-width: 1024px) {
.topNews-list li {
width: calc(50% - (7rem / 2));
}
.topNews-list li:nth-of-type(odd) {
margin-right: 7rem;
}
.topNews-list li:nth-of-type(n+3) {
margin-top: 3rem;
}
}
@media screen and (max-width: 641px) {
.topNews-list {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
@media screen and (max-width: 641px) {
.topNews-list li {
width: calc(50% - (1rem / 2));
}
.topNews-list li:nth-of-type(odd) {
margin-right: 1rem;
}
.topNews-list li:nth-of-type(n+3) {
margin-top: 1rem;
}
}
.topNews-list a {
display: block;
width: 100%;
height: 100%;
}
@media screen and (min-width: 642px) {
.topNews-list a {
-webkit-transition: ease 300ms;
transition: ease 300ms;
}
.topNews-list a:hover {
opacity: .65;
}
}
.topNews-list_img {
position: relative;
margin-bottom: 2.5rem;
background: #000;
width: 100%;
overflow: hidden;
}
.topNews-list_img img {
-webkit-transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.topNews-list_img img {
width: auto;
max-width: initial;
max-width: none;
height: 101%;
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
.topNews-list_img img {
-o-object-fit: cover;
width: 101%;
height: 101%;
object-fit: cover;
}
}
.topNews-list_img::after {
display: block;
padding-top: 60%;
content: "";
}
.topNews-list-cont_cat {
display: inline-block;
margin-bottom: 1rem;
background: black;
padding: .5rem 1rem;
color: #FFF;
font-size: 1.3rem;
font-weight: 600;
}
.topNews-list-cont_day {
margin-bottom: 1rem;
width: 100%;
font-size: 1.2rem;
}
.topNews-list-cont_ttl {
line-height: 2;
}
.topNews li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
} @media screen and (min-width: 642px) {
.topConcept {
margin-bottom: 14rem;
}
}
@media screen and (max-width: 1024px) {
.topConcept {
margin-bottom: calc(14rem * .85);
}
}
@media screen and (max-width: 641px) {
.topConcept {
margin-bottom: calc(14rem * .5);
}
}
.topConcept-inner {
position: relative;
}
@media screen and (min-width: 1025px) {
.topConcept-inner {
-webkit-box-align: start;
-ms-flex-align: start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: flex-start;
}
}
@media screen and (max-width: 1024px) {
.topConcept-inner {
display: block;
}
}
.topConcept-cont {
-webkit-box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.25);
box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.25);
background: #eaeaec;
width: calc(42% + 6rem);
}
@media screen and (min-width: 642px) {
.topConcept-cont {
padding-top: 6rem;
}
}
@media screen and (max-width: 1024px) {
.topConcept-cont {
padding-top: calc(6rem * .85);
}
}
@media screen and (max-width: 641px) {
.topConcept-cont {
padding-top: calc(6rem * .5);
}
}
@media screen and (min-width: 642px) {
.topConcept-cont {
padding-bottom: 10rem;
}
}
@media screen and (max-width: 1024px) {
.topConcept-cont {
padding-bottom: calc(10rem * .85);
}
}
@media screen and (max-width: 641px) {
.topConcept-cont {
padding-bottom: calc(10rem * .5);
}
}
@media screen and (min-width: 1025px) {
.topConcept-cont {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
margin-right: -6rem;
}
}
@media screen and (max-width: 1024px) {
.topConcept-cont {
margin-top: -4rem;
padding-top: 6rem;
padding-right: 3rem;
width: calc(100% - 2rem);
}
}
@media screen and (min-width: 1025px) {
.topConcept-cont_ttl {
margin-bottom: 4rem;
max-width: 36rem;
}
}
.topConcept-cont-inner {
margin: 0 auto;
}
@media screen and (min-width: 1025px) {
.topConcept-cont-inner {
padding-left: 18rem;
max-width: calc(30rem + 18rem);
}
}
@media screen and (max-width: 1024px) {
.topConcept-cont-inner {
padding-left: calc(20vw + 2rem);
}
}
.topConcept-cont_copy {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
max-height: 25rem;
font-size: 3rem;
font-weight: 500;
letter-spacing: 0.12em;
line-height: 1.8;
writing-mode: vertical-rl;
}
@media screen and (min-width: 642px) {
.topConcept-cont_copy {
margin-bottom: 8rem;
}
}
@media screen and (max-width: 1024px) {
.topConcept-cont_copy {
margin-bottom: calc(8rem * .85);
}
}
@media screen and (max-width: 641px) {
.topConcept-cont_copy {
margin-bottom: calc(8rem * .5);
}
}
.topConcept-cont_txt {
margin-bottom: 3rem;
line-height: 2;
}
@media screen and (min-width: 1025px) {
.topConcept_img {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
max-width: 58%;
}
}
@media screen and (max-width: 1024px) {
.topConcept_img {
margin: 0 0 0 auto;
width: calc(100% - 2rem);
}
}
.topConcept_img img {
width: 100%;
}
.topConcept-parts01 {
position: absolute;
bottom: -3rem;
left: 0;
}
@media screen and (max-width: 1024px) {
.topConcept-parts01 {
bottom: -6vw;
width: 20vw;
}
} @media screen and (min-width: 642px) {
.topAlt {
margin-bottom: 14rem;
}
}
@media screen and (max-width: 1024px) {
.topAlt {
margin-bottom: calc(14rem * .85);
}
}
@media screen and (max-width: 641px) {
.topAlt {
margin-bottom: calc(14rem * .5);
}
}
.topAlt-inner {
overflow: hidden;
}
@media screen and (min-width: 1025px) {
.topAlt_ttl {
margin-bottom: 8rem;
}
}
@media screen and (min-width: 1025px) {
.topAlt-cont {
margin-right: auto;
margin-right: -220px;
margin-left: auto;
padding: 0 3rem;
max-width: calc(1335px + 6rem);
}
}
@media screen and (min-width: 1025px) and (max-width: 1024px) {
.topAlt-cont {
padding: 0 2rem;
max-width: calc(1335px + 4rem);
}
}
.topAlt-cont_ttl {
margin-bottom: 3.5rem;
font-size: 2.5rem;
font-weight: 600;
letter-spacing: .22em;
}
@media screen and (max-width: 1024px) {
.topAlt-cont_ttl {
padding: 0 2rem;
}
}
.topAlt-cont-list {
margin-bottom: 4.5rem;
}
.topAlt-cont-list li {
margin-right: 4.5rem;
}
@media screen and (max-width: 1024px) {
.topAlt-cont-list li {
margin: 0 2rem;
}
}
.topAlt-cont-list_img {
position: relative;
margin-bottom: 2rem;
background: #000;
width: 100%;
overflow: hidden;
}
.topAlt-cont-list_img img {
-webkit-transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.topAlt-cont-list_img img {
width: 101%;
max-width: 101%;
height: auto;
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
.topAlt-cont-list_img img {
-o-object-fit: cover;
width: 101%;
height: 101%;
object-fit: cover;
}
}
.topAlt-cont-list_img::after {
display: block;
padding-top: 100%;
content: "";
}
.topAlt-cont-list_ttl {
letter-spacing: 0.12em;
line-height: 1.5;
}
@media screen and (max-width: 1024px) {
.topAlt-cont_more {
padding: 0 2rem;
}
} @media screen and (min-width: 642px) {
.topStory {
margin-bottom: 14rem;
}
}
@media screen and (max-width: 1024px) {
.topStory {
margin-bottom: calc(14rem * .85);
}
}
@media screen and (max-width: 641px) {
.topStory {
margin-bottom: calc(14rem * .5);
}
}
.topStory-inner {
position: relative;
}
@media screen and (min-width: 1025px) {
.topStory-inner {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
}
.topStory-cont {
width: 35%;
}
@media screen and (min-width: 642px) {
.topStory-cont {
padding-top: 6rem;
}
}
@media screen and (max-width: 1024px) {
.topStory-cont {
padding-top: calc(6rem * .85);
}
}
@media screen and (max-width: 641px) {
.topStory-cont {
padding-top: calc(6rem * .5);
}
}
@media screen and (min-width: 642px) {
.topStory-cont {
padding-bottom: 10rem;
}
}
@media screen and (max-width: 1024px) {
.topStory-cont {
padding-bottom: calc(10rem * .85);
}
}
@media screen and (max-width: 641px) {
.topStory-cont {
padding-bottom: calc(10rem * .5);
}
}
@media screen and (max-width: 1024px) {
.topStory-cont {
margin: 0 0 0 auto;
width: calc(100% - 2rem);
}
}
.topStory-cont-inner {
margin: 0 auto 0 0;
padding-left: 4.5rem;
}
@media screen and (min-width: 1025px) {
.topStory-cont-inner {
max-width: calc(30rem + 4.5rem);
}
}
.topStory-cont_ttl {
margin-left: auto;
text-align: left;
}
@media screen and (min-width: 1025px) {
.topStory-cont_ttl {
margin-bottom: 7rem;
width: 100%;
max-width: 45rem;
}
}
.topStory-cont_copy {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
max-height: 25rem;
font-size: 3rem;
font-weight: 500;
letter-spacing: 0.12em;
line-height: 1.8;
writing-mode: vertical-rl;
}
@media screen and (min-width: 642px) {
.topStory-cont_copy {
margin-bottom: 8rem;
}
}
@media screen and (max-width: 1024px) {
.topStory-cont_copy {
margin-bottom: calc(8rem * .85);
}
}
@media screen and (max-width: 641px) {
.topStory-cont_copy {
margin-bottom: calc(8rem * .5);
}
}
.topStory-cont_txt {
margin-bottom: 3rem;
line-height: 2;
}
.topStory_img {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 65%;
}
@media screen and (max-width: 1024px) {
.topStory_img {
width: calc(100% - 2rem);
}
}
.topStory_img img {
width: 100%;
}
.topStory-parts01 {
position: absolute;
right: 0;
}
@media screen and (min-width: 1025px) {
.topStory-parts01 {
top: 23rem;
}
}
@media screen and (max-width: 1024px) {
.topStory-parts01 {
bottom: -10vw;
z-index: -1;
width: 40vw;
}
} @media screen and (min-width: 642px) {
.topCompany {
margin-bottom: 20rem;
}
}
@media screen and (max-width: 1024px) {
.topCompany {
margin-bottom: calc(20rem * .85);
}
}
@media screen and (max-width: 641px) {
.topCompany {
margin-bottom: calc(20rem * .5);
}
}
.topCompany-inner {
position: relative;
}
@media screen and (min-width: 1025px) {
.topCompany-inner {
-webkit-box-align: start;
-ms-flex-align: start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: flex-start;
}
}
.topCompany-cont {
-webkit-box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.25);
box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.25);
background: #eaeaec;
width: calc(44% + 3rem);
}
@media screen and (min-width: 642px) {
.topCompany-cont {
padding-top: 8rem;
}
}
@media screen and (max-width: 1024px) {
.topCompany-cont {
padding-top: calc(8rem * .85);
}
}
@media screen and (max-width: 641px) {
.topCompany-cont {
padding-top: calc(8rem * .5);
}
}
@media screen and (min-width: 642px) {
.topCompany-cont {
padding-bottom: 9rem;
}
}
@media screen and (max-width: 1024px) {
.topCompany-cont {
padding-bottom: calc(9rem * .85);
}
}
@media screen and (max-width: 641px) {
.topCompany-cont {
padding-bottom: calc(9rem * .5);
}
}
@media screen and (min-width: 1025px) {
.topCompany-cont {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
margin-top: 5rem;
margin-right: -3rem;
}
}
@media screen and (max-width: 1024px) {
.topCompany-cont {
position: relative;
z-index: 1;
margin-top: -2rem;
width: calc(100% - 2rem);
}
}
.topCompany-cont_ttl {
margin-bottom: 4rem;
max-width: 36rem;
}
.topCompany-cont-inner {
margin: 0 auto;
}
@media screen and (min-width: 1025px) {
.topCompany-cont-inner {
padding-left: 18rem;
max-width: calc(30rem + 18rem);
}
}
@media screen and (max-width: 1024px) {
.topCompany-cont-inner {
padding-right: 4.5rem;
padding-left: 4.5rem;
}
}
.topCompany-cont_copy {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: inherit;
-ms-writing-mode: inherit;
margin-bottom: 1rem;
max-height: 25rem;
font-size: 3rem;
font-weight: 500;
letter-spacing: 0.12em;
line-height: 1.8;
writing-mode: vertical-rl;
writing-mode: inherit;
}
.topCompany-cont_txt {
margin-bottom: 4rem;
line-height: 2;
}
.topCompany_img {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 56%;
}
@media screen and (max-width: 1024px) {
.topCompany_img {
width: 100%;
}
}
.topCompany_img img {
width: 100%;
}
.topCompany-parts01 {
position: absolute;
bottom: -3rem;
left: 0;
} @media screen and (min-width: 642px) {
.topBrands {
margin-bottom: 17rem;
}
}
@media screen and (max-width: 1024px) {
.topBrands {
margin-bottom: calc(17rem * .85);
}
}
@media screen and (max-width: 641px) {
.topBrands {
margin-bottom: calc(17rem * .5);
}
}
@media screen and (min-width: 1025px) {
.topBrands_ttl {
margin-bottom: 6rem;
}
}
@media screen and (min-width: 1025px) {
.topBrands .brandsBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.topBrands .brandsBox:not(:last-of-type) {
margin-bottom: 9rem;
}
.topBrands .brandsBox-cont {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 0 4rem;
width: 29rem;
}
@media screen and (max-width: 1024px) {
.topBrands .brandsBox-cont {
width: 60%;
}
}
@media screen and (max-width: 1024px) {
.topBrands .brandsBox_img {
margin-bottom: 3rem;
width: calc(100% - 2rem);
}
}
@media screen and (min-width: 1025px) {
.topBrands .brandsBox-rl {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
@media screen and (min-width: 1025px) {
.topBrands .brandsBox-rl .brandsBox-cont {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
@media screen and (max-width: 1024px) {
.topBrands .brandsBox-rl .brandsBox_img {
margin-left: auto;
}
}
.topBrands .brandsBox-cont_ttl {
margin-bottom: 3rem;
font-size: 3rem;
font-weight: 500;
line-height: 1.25;
}
.topBrands .brandsBox-cont_txt {
margin-bottom: 4rem;
line-height: 2;
} .topContact {
background: #eaeaec;
padding: 5rem 0 0;
}
@media screen and (min-width: 642px) {
.topContact {
padding-bottom: 13rem;
}
}
@media screen and (max-width: 1024px) {
.topContact {
padding-bottom: calc(13rem * .85);
}
}
@media screen and (max-width: 641px) {
.topContact {
padding-bottom: calc(13rem * .5);
}
}
@media screen and (min-width: 1301px) {
.topContact {
margin-right: calc( ( 100% - 100vw ) * .5);
margin-left: calc( ( 100% - 100vw ) * .5);
width: 100vw;
}
}
.topContact_ttl {
margin-bottom: 7rem;
}
.topContact-list {
-ms-flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
margin-right: auto;
margin-left: auto;
padding: 0 3rem;
max-width: calc(880px + 6rem);
}
@media screen and (max-width: 1024px) {
.topContact-list {
padding: 0 2rem;
max-width: calc(880px + 4rem);
}
}
@media screen and (max-width: 641px) {
.topContact-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media screen and (min-width: 642px) {
.topContact-list li {
width: calc(50% - (6rem / 2));
}
.topContact-list li:nth-of-type(odd) {
margin-right: 6rem;
}
.topContact-list li:nth-of-type(n+3) {
margin-top: 3rem;
}
}
@media screen and (max-width: 641px) {
.topContact-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media screen and (max-width: 641px) {
.topContact-list li {
width: 100%;
}
.topContact-list li:nth-of-type(odd) {
margin-right: 0;
}
.topContact-list li:not(:first-of-type) {
margin-top: 1rem;
}
}
@media screen and (max-width: 1024px) {
.topContact-list {
width: 80%;
}
}
.topContact-list a {
-webkit-transition: ease 0.3s;
display: block;
transition: ease 0.3s;
border-top: 5px solid #000;
border-bottom: 5px solid #000;
}
.topContact-list a:hover {
opacity: 0.6;
}
.topContact-list img {
vertical-align: bottom;
width: 100%;
} .foot-top {
background: #000;
}
.foot-top-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: auto;
margin-left: auto;
padding: 0 3rem;
padding-top: 5rem;
padding-bottom: 5rem;
max-width: calc(1240px + 6rem);
}
@media screen and (max-width: 1024px) {
.foot-top-inner {
padding: 0 2rem;
max-width: calc(1240px + 4rem);
}
}
@media screen and (max-width: 1024px) {
.foot-top-inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-top: 3rem;
padding-bottom: 3rem;
}
}
@media screen and (min-width: 1025px) {
.foot-top-inner > div {
padding-top: 1rem;
padding-bottom: 1rem;
width: 50%;
}
}
@media screen and (min-width: 1025px) {
.foot-l {
border-right: 1px solid #FFF;
}
}
@media screen and (max-width: 1024px) {
.foot-l {
margin-bottom: 4rem;
}
}
@media screen and (min-width: 1025px) {
.foot-r {
padding-left: 6%;
}
}
.foot-add {
color: #FFF;
}
.foot-add a {
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
color: #FFF;
}
.foot-add a:hover {
opacity: 0.6;
}
.foot-add:not(:last-of-type) {
margin-bottom: 6rem;
}
@media screen and (max-width: 1024px) {
.foot-add:not(:last-of-type) {
margin-bottom: 3rem;
}
}
.foot-add_ttl {
margin-bottom: 1rem;
font-size: 2rem;
font-weight: 700;
}
.foot-add_ttl span {
display: block;
margin-top: 1.5rem;
font-size: 1.3rem;
line-height: 1.5;
}
@media screen and (max-width: 1024px) {
.foot-add_ttl span {
font-size: 1.4rem;
}
}
.foot-add_add {
margin-bottom: 1rem;
line-height: 1.5;
}
.foot-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.foot-nav ul {
width: 45%;
}
.foot-nav li {
font-size: 1.6rem;
}
@media screen and (min-width: 1025px) {
.foot-nav li:not(:last-of-type) {
margin-bottom: 3rem;
}
}
.foot-nav li a {
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
color: #FFF;
font-weight: 600;
}
.foot-nav li a:hover {
opacity: 0.6;
}
@media screen and (max-width: 1024px) {
.foot-nav li a {
display: block;
padding: 1rem 0;
}
}
.foot-bottom {
position: relative;
padding-bottom: 5rem;
}
@media screen and (max-width: 1024px) {
.foot-bottom {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
padding-top: 1.5rem;
padding-bottom: 2rem;
}
}
.foot-credit {
margin: 0 auto;
padding: 0 20rem;
}
@media screen and (max-width: 1024px) {
.foot-credit {
padding: 0 3rem;
}
}
.foot-logo {
padding: 2.5rem 0 1.5rem;
text-align: center;
}
@media screen and (max-width: 1024px) {
.foot-logo {
margin: 0 auto;
padding: 3rem 0 2rem;
width: 18rem;
}
}
.foot-logo a {
-webkit-transition: ease 0.3s;
display: inline-block;
transition: ease 0.3s;
}
.foot-logo a:hover {
opacity: 0.6;
}
.foot-copy {
font-size: 1.1rem;
font-weight: 400;
letter-spacing: 0.2em;
text-align: center;
}
@media screen and (min-width: 1025px) {
.foot-sns {
position: absolute;
top: 6rem;
right: 2rem;
}
}
@media screen and (max-width: 1024px) {
.foot-sns {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
.foot-sns-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media screen and (max-width: 1024px) {
.foot-sns-list {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
.foot-sns-list li {
margin-right: 3rem;
}
@media screen and (max-width: 1024px) {
.foot-sns-list li {
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
margin: 0 1rem;
}
}
.foot-sns-list a {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-transition: ease 0.3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
transition: ease 0.3s;
width: 1.6rem;
height: 100%;
}
.foot-sns-list a:hover {
opacity: 0.6;
}
@media screen and (max-width: 1024px) {
.foot-sns-list a {
width: 2rem;
}
}
.foot-bnr {
padding: 0 2rem;
}
@media screen and (min-width: 642px) {
.foot-bnr {
margin-top: 7.5rem;
}
}
@media screen and (max-width: 1024px) {
.foot-bnr {
margin-top: calc(7.5rem * .85);
}
}
@media screen and (max-width: 641px) {
.foot-bnr {
margin-top: calc(7.5rem * .5);
}
}
@media screen and (min-width: 642px) {
.foot-bnr {
margin-bottom: 12rem;
}
}
@media screen and (max-width: 1024px) {
.foot-bnr {
margin-bottom: calc(12rem * .85);
}
}
@media screen and (max-width: 641px) {
.foot-bnr {
margin-bottom: calc(12rem * .5);
}
}
.foot-bnr p {
text-align: center;
}
.foot-bnr p:not(:last-of-type) {
margin-bottom: 6rem;
}
@media screen and (max-width: 1024px) {
.foot-bnr p:not(:last-of-type) {
margin-bottom: 3rem;
}
}
.foot-bnr a {
-webkit-box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.37);
-webkit-transition: ease 0.3s;
display: inline-block;
transition: ease 0.3s;
box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.37);
}
.foot-bnr a:hover {
opacity: 0.6;
}
@media screen and (max-width: 1024px) {
.foot-bnr a {
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.37);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.37);
}
}
.foot-fixed-bnr {
-webkit-transition: 0.3s;
position: fixed;
bottom: 0;
left: 0;
visibility: hidden;
opacity: 0;
z-index: 999;
transition: 0.3s;
background: #000;
padding: 10px;
width: 100%;
}
.foot-fixed-bnr.is-active {
visibility: visible;
opacity: 1;
}
.foot-fixed-bnr p {
text-align: center;
}
@media screen and (max-width: 641px) {
.foot-fixed-bnr img {
width: 100%;
}
} .lowerKv {
-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;
min-height: 350px;
}
@media screen and (min-width: 1025px) {
.lowerKv {
height: calc(70vh - 8rem);
}
}
@media screen and (min-width: 1025px) and (min-width: 642px) {
.lowerKv {
margin-bottom: 14rem;
}
}
@media screen and (min-width: 1025px) and (max-width: 1024px) {
.lowerKv {
margin-bottom: calc(14rem * .85);
}
}
@media screen and (min-width: 1025px) and (max-width: 641px) {
.lowerKv {
margin-bottom: calc(14rem * .5);
}
}
@media screen and (max-width: 1024px) {
.lowerKv {
margin-right: auto;
margin-bottom: 6rem;
margin-left: auto;
width: calc(100% - 2rem);
height: 200px;
min-height: 200px;
}
}
.lowerKv_ttl {
padding-top: 2rem;
color: #FFF;
font-size: 6rem;
font-weight: 400;
letter-spacing: 0.12em;
}
@media screen and (max-width: 1024px) {
.lowerKv_ttl {
font-size: 7vw;
}
}
.conceptKv {
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/lower-kv01.png) center center no-repeat;
background-size: contain;
}
.conceptKv_copy {
position: absolute;
right: 27rem;
bottom: 0rem;
z-index: 1;
}
.brandsKv {
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/lower-kv01.png) center center no-repeat;
background-size: contain;
}
@media screen and (min-width: 1025px) {
.brandsKv {
margin-bottom: 10rem;
}
}
.restKv {
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/lower-kv02.png) center center no-repeat;
background-size: contain;
}
@media screen and (min-width: 1025px) {
.restKv {
margin-bottom: 10rem;
}
}
.companyKv {
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/lower-kv03.png) center center no-repeat;
background-size: contain;
}
@media screen and (min-width: 1025px) {
.companyKv {
margin-bottom: 10rem;
}
}
.storyKv {
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/lower-kv02.png) center center no-repeat;
background-size: contain;
}
@media screen and (min-width: 1025px) {
.storyKv {
margin-bottom: 13.5rem;
}
}
.alterKv {
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/lower-kv03.png) center center no-repeat;
background-size: contain;
}
@media screen and (min-width: 1025px) {
.alterKv {
margin-bottom: 10rem;
}
}
.contactKv {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/contact-kv.jpg) center center no-repeat;
background-size: cover;
}
@media screen and (min-width: 1025px) {
.contactKv {
margin-bottom: 10rem;
}
}
@media screen and (max-width: 1024px) {
.contactKv {
width: 100%;
height: 30vh;
min-height: 250px;
}
}
.contactKv::after, .newsKv::after {
position: absolute;
top: 0;
right: 0;
z-index: 1;
background: #FFF;
width: 4.6rem;
height: 100%;
content: "";
}
@media screen and (max-width: 1024px) {
.contactKv::after, .newsKv::after {
display: none;
}
}
.contactKv_txt {
position: absolute;
bottom: 6rem;
left: 0;
background: rgba(0, 0, 0, 0.8);
padding: 3.5rem 13% 3.5rem 19%;
color: #FFF;
font-size: 1.6rem;
line-height: 2;
}
@media screen and (max-width: 1024px) {
.contactKv_txt {
padding: 1.5rem 5% 1.5rem 10%;
}
}
.contactKv_ttl, .newsKv_ttl {
padding-top: 0;
padding-bottom: 15rem;
padding-left: 19%;
width: 100%;
}
@media screen and (max-width: 1024px) {
.contactKv_ttl, .newsKv_ttl {
padding-bottom: 13rem;
padding-left: 10%;
font-size: 4rem;
}
}
.contactKv_ttl span, .newsKv_ttl span {
display: block;
margin-top: 5rem;
font-size: 3rem;
}
@media screen and (max-width: 1024px) {
.contactKv_ttl span, .newsKv_ttl span {
margin-top: 2rem;
font-size: 2rem;
}
}
.newsKv {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/news-kv.jpg) center center no-repeat;
background-size: cover;
}
@media screen and (min-width: 1025px) {
.newsKv {
margin-bottom: 9rem;
}
}
@media screen and (max-width: 1024px) {
.newsKv {
width: 100%;
height: 30vh;
min-height: 250px;
}
}
.newsKv_ttl span {
display: block;
margin-top: 5rem;
font-size: 3rem;
}
@media screen and (max-width: 1024px) {
.newsKv_ttl span {
margin-top: 2rem;
font-size: 2rem;
}
}
@media screen and (max-width: 1024px) {
.newsKv_ttl {
padding-bottom: 0;
}
} .conceptKv {
margin-bottom: calc(20vw - 6rem);
}
@media screen and (max-width: 1024px) {
.conceptKv_copy {
right: 6.5vw;
bottom: -20vw;
width: 20vw;
}
}
@media screen and (min-width: 1025px) {
.conceptMain-inner {
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/concept-bg-l.png) left top 12rem no-repeat, url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/concept-bg-r.png) top 3.5rem right no-repeat;
background-size: 382px auto, 228px auto;
}
}
@media screen and (min-width: 1025px) and (min-width: 642px) {
.conceptMain-inner {
padding-bottom: 19rem;
}
}
@media screen and (min-width: 1025px) and (max-width: 1024px) {
.conceptMain-inner {
padding-bottom: calc(19rem * .85);
}
}
@media screen and (min-width: 1025px) and (max-width: 641px) {
.conceptMain-inner {
padding-bottom: calc(19rem * .5);
}
}
.conceptBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media screen and (min-width: 1025px) {
.conceptBox {
margin-right: auto;
margin-left: auto;
padding: 0 3rem;
max-width: calc(50% + 6rem);
}
}
@media screen and (min-width: 1025px) and (max-width: 1024px) {
.conceptBox {
padding: 0 2rem;
max-width: calc(50% + 4rem);
}
}
@media screen and (max-width: 1024px) {
.conceptBox {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0 4rem;
}
}
.conceptBox-inner {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
align-items: flex-start;
justify-content: space-between;
}
.conceptBox-cont {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
z-index: 1;
}
.conceptBox-cont_ttl {
margin: 0 0 5rem auto;
max-width: 45rem;
font-size: 5rem;
font-weight: 500;
text-align: left;
}
@media screen and (min-width: 1025px) {
.conceptBox-cont_ttl {
width: 100%;
}
}
.conceptBox-cont_copy {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: inherit;
-ms-writing-mode: inherit;
margin-bottom: 2.5rem;
margin-left: 0;
max-height: 25rem;
font-size: 3rem;
font-size: 2rem;
font-weight: 500;
letter-spacing: 0.12em;
line-height: 1.8;
writing-mode: vertical-rl;
writing-mode: inherit;
}
.conceptBox-cont_txt {
margin-bottom: 3rem;
line-height: 2;
}
.conceptBox_img {
z-index: -1;
width: 100%;
}
@media screen and (max-width: 1024px) {
.conceptBox_img {
margin: 0 auto 3rem;
width: 80%;
}
}
.conceptBox_img img {
width: 100%;
}
@media screen and (min-width: 1025px) {
.conceptBox01 {
margin-bottom: 15rem;
}
}
@media screen and (max-width: 1024px) {
.conceptBox01 {
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/concept-parts01.png) left top no-repeat, url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/concept-parts02.png) right bottom no-repeat;
background-size: 6rem auto, 12rem auto;
padding-top: 10rem;
padding-bottom: 15rem;
}
}
@media screen and (min-width: 1025px) {
.conceptBox01 .conceptBox-cont {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
padding-top: 3rem;
padding-left: 5%;
width: 45%;
}
}
@media screen and (min-width: 1025px) {
.conceptBox01 .conceptBox_img {
margin-left: -10%;
}
}
@media screen and (min-width: 1025px) {
.conceptBox02 {
margin-bottom: 12rem;
}
}
@media screen and (max-width: 1024px) {
.conceptBox02 {
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/concept-parts03.png) left bottom 1rem no-repeat;
background-size: 10rem auto;
padding-bottom: 15rem;
}
}
.conceptBox02 .conceptBox-cont {
position: relative;
padding-right: 5rem;
}
@media screen and (min-width: 1025px) {
.conceptBox02 .conceptBox-cont {
margin-top: 8rem;
}
}
.conceptBox02 .conceptBox-cont_ttl {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
position: absolute;
top: 0;
right: -1rem;
writing-mode: vertical-rl;
}
@media screen and (max-width: 1024px) {
.conceptBox02 .conceptBox-cont_ttl {
right: 1rem;
}
}
.conceptBox02 .conceptBox-cont_copy {
padding-top: 8rem;
}
@media screen and (max-width: 1024px) {
.conceptBox02 .conceptBox-cont_copy {
padding-top: 3rem;
}
}
@media screen and (min-width: 1025px) {
.conceptBox02 .conceptBox_img {
margin-right: 3%;
margin-left: -5%;
}
}
@media screen and (min-width: 1025px) {
.conceptBox03 {
margin-bottom: 12rem;
}
}
@media screen and (max-width: 1024px) {
.conceptBox03 {
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/concept-parts04.png) right bottom 1rem no-repeat;
background-size: 15rem auto;
padding-bottom: 12rem;
}
}
@media screen and (min-width: 1025px) {
.conceptBox03 .conceptBox-cont {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
padding-top: 3rem;
padding-left: 3%;
width: 45%;
}
}
@media screen and (min-width: 1025px) {
.conceptBox03 .conceptBox_img {
margin-right: -5%;
margin-left: -15%;
padding-top: 3rem;
}
}
.conceptBox04 .conceptBox {
position: relative;
}
@media screen and (min-width: 1025px) {
.conceptBox04 .conceptBox-cont {
margin-right: -3%;
padding-top: 1rem;
padding-left: 3%;
}
}
@media screen and (min-width: 1025px) {
.conceptBox04 .conceptBox_img {
margin-left: -7%;
}
}
@media screen and (max-width: 1024px) {
.conceptBox04 .conceptBox_img {
margin-left: -1%;
}
} .brands .brandsBox-head img {
width: 92%;
}
@media screen and (max-width: 1024px) {
.brands .brandsBox-head img {
width: 100%;
}
}
.brands .brandsBox-main {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-box-align: start;
-ms-flex-align: start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
@media screen and (max-width: 1024px) {
.brands .brandsBox-main {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.brands .brandsBox-main figure {
-webkit-box-shadow: -15px 20px 30px rgba(0, 0, 0, 0.3);
margin-top: -7rem;
box-shadow: -15px 20px 30px rgba(0, 0, 0, 0.3);
width: 46%;
}
@media screen and (max-width: 1024px) {
.brands .brandsBox-main figure {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
-webkit-box-shadow: -7px 10px 15px rgba(0, 0, 0, 0.3);
order: -1;
z-index: 1;
box-shadow: -7px 10px 15px rgba(0, 0, 0, 0.3);
width: 50%;
}
}
.brands .brandsBox-main figure img {
vertical-align: bottom;
}
.brands .brandsBox-cont {
background: #f6f3ee;
padding: 5rem 18% 17rem 8%;
width: 50%;
}
@media screen and (max-width: 1024px) {
.brands .brandsBox-cont {
position: relative;
margin-top: -3rem;
padding: 5rem 10% 13rem 10%;
width: 100%;
}
}
.brands .brandsBox-cont_ttl {
margin-bottom: 3.5rem;
font-size: 4rem;
line-height: 1.2;
}
@media screen and (max-width: 1024px) {
.brands .brandsBox-cont_ttl {
margin-top: 4rem;
}
}
.brands .brandsBox-cont_txt {
margin-bottom: 3rem;
line-height: 2;
}
.brands .brandsBox:nth-of-type(even) .brandsBox-head {
text-align: right;
}
.brands .brandsBox:nth-of-type(even) .brandsBox-main figure {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.brands .brandsBox:nth-of-type(odd) .brandsBox-main figure {
-webkit-box-shadow: 15px 20px 30px rgba(0, 0, 0, 0.3);
box-shadow: 15px 20px 30px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 1024px) {
.brands .brandsBox:nth-of-type(odd) .brandsBox-main figure {
-webkit-box-shadow: 7px 10px 15px rgba(0, 0, 0, 0.3);
box-shadow: 7px 10px 15px rgba(0, 0, 0, 0.3);
}
}
@media screen and (min-width: 1025px) {
.brands .brandsBox:nth-of-type(odd) .brandsBox-cont {
padding-right: 8%;
padding-left: 18%;
}
} .rest .restBox-head img {
width: 92%;
}
@media screen and (max-width: 1024px) {
.rest .restBox-head img {
width: 100%;
}
}
.rest .restBox-main {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-box-align: start;
-ms-flex-align: start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
@media screen and (max-width: 1024px) {
.rest .restBox-main {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.rest .restBox-main figure {
-webkit-box-shadow: -15px 20px 30px rgba(0, 0, 0, 0.3);
margin-top: -7rem;
box-shadow: -15px 20px 30px rgba(0, 0, 0, 0.3);
width: 46%;
}
@media screen and (max-width: 1024px) {
.rest .restBox-main figure {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
-webkit-box-shadow: -7px 10px 15px rgba(0, 0, 0, 0.3);
order: -1;
z-index: 1;
box-shadow: -7px 10px 15px rgba(0, 0, 0, 0.3);
width: 50%;
}
}
.rest .restBox-main figure img {
vertical-align: bottom;
}
.rest .restBox-cont {
background: #f6f3ee;
padding: 5rem 18% 17rem 8%;
width: 50%;
}
@media screen and (max-width: 1024px) {
.rest .restBox-cont {
position: relative;
margin-top: -3rem;
padding: 5rem 10% 13rem 10%;
width: 100%;
}
}
.rest .restBox-cont_ttl {
margin-bottom: 3.5rem;
font-size: 4rem;
line-height: 1.2;
}
@media screen and (max-width: 1024px) {
.rest .restBox-cont_ttl {
margin-top: 4rem;
}
}
.rest .restBox-cont_txt {
margin-bottom: 3rem;
line-height: 2;
}
.rest .restBox:nth-of-type(even) .restBox-head {
text-align: right;
}
.rest .restBox:nth-of-type(even) .restBox-main figure {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.rest .restBox:nth-of-type(odd) .restBox-main figure {
-webkit-box-shadow: 15px 20px 30px rgba(0, 0, 0, 0.3);
box-shadow: 15px 20px 30px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 1024px) {
.rest .restBox:nth-of-type(odd) .restBox-main figure {
-webkit-box-shadow: 7px 10px 15px rgba(0, 0, 0, 0.3);
box-shadow: 7px 10px 15px rgba(0, 0, 0, 0.3);
}
}
@media screen and (min-width: 1025px) {
.rest .restBox:nth-of-type(odd) .restBox-cont {
padding-right: 8%;
padding-left: 18%;
}
}
@media screen and (min-width: 642px) {
.rest .restBox {
margin-bottom: 27rem;
}
}
@media screen and (max-width: 1024px) {
.rest .restBox {
margin-bottom: calc(27rem * .85);
}
}
@media screen and (max-width: 641px) {
.rest .restBox {
margin-bottom: calc(27rem * .5);
}
}
.rest .restBox_ttl {
margin-bottom: 5rem;
padding-left: 6rem;
font-size: 3rem;
font-weight: 600;
letter-spacing: 0.12em;
text-align: center;
}
@media screen and (max-width: 1024px) {
.rest .restBox_ttl {
padding-left: 0;
}
}
.rest .restBox-main {
position: relative;
z-index: 1;
}
@media screen and (min-width: 642px) {
.rest .restBox-main {
margin-bottom: 9rem;
}
}
@media screen and (max-width: 1024px) {
.rest .restBox-main {
margin-bottom: calc(9rem * .85);
}
}
@media screen and (max-width: 641px) {
.rest .restBox-main {
margin-bottom: calc(9rem * .5);
}
}
.rest .restBox-head {
position: relative;
text-align: right;
}
.rest .restBox-head .txt {
position: absolute;
top: 4rem;
right: 4rem;
font-size: 1.8rem;
letter-spacing: .12em;
line-height: 1.2;
text-align: left;
}
@media screen and (max-width: 1024px) {
.rest .restBox-head .txt {
top: 1.5rem;
right: calc(1.5rem + 5px);
font-size: 3vw;
}
}
.rest .restBox-head .thumb {
position: absolute;
right: 4rem;
bottom: 3rem;
width: 16.2rem;
}
@media screen and (max-width: 1024px) {
.rest .restBox-head .thumb {
right: calc(1rem + 5px);
bottom: 1rem;
width: 20vw;
max-width: 16.2rem;
}
}
.rest .restBox-head .line {
position: absolute;
top: 0;
right: 0;
background: #000;
width: 15px;
height: 100%;
}
@media screen and (max-width: 1024px) {
.rest .restBox-head .line {
width: 5px;
}
}
@media screen and (min-width: 1025px) {
.rest .restBox-cont {
padding-top: 10rem;
padding-bottom: 5rem;
}
}
@media screen and (max-width: 1024px) {
.rest .restBox-cont {
position: relative;
margin-top: -3rem;
padding: 5rem 10%;
width: 100%;
}
}
.rest .restBox-cont_ttl span {
display: block;
margin-bottom: 1rem;
font-size: 2rem;
}
.rest .restBox-cont_txt {
margin-bottom: 3.5rem;
font-size: 1.4rem;
}
.rest .restBox-cont_add {
margin-bottom: 2rem;
font-size: 1.5rem;
line-height: 1.75;
}
.rest .restBox:nth-of-type(odd) .restBox-head .txt {
color: #7e2618;
}
.rest .restBox:nth-of-type(odd) .restBox-head .line {
background: #7e2618;
}
@media screen and (min-width: 1025px) {
.rest .restBox:nth-of-type(odd) .restBox-head .thumb {
bottom: 10rem;
}
}
.rest .restBox:nth-of-type(odd) .restBox-head_img {
background: #f6f3ee;
}
.rest .restBox:nth-of-type(even) .restBox-head .txt {
color: #435318;
}
.rest .restBox:nth-of-type(even) .restBox-head .line {
background: #435318;
}
.rest .restBox:nth-of-type(even) .restBox-main figure {
-webkit-box-shadow: 15px 20px 30px rgba(0, 0, 0, 0.3);
box-shadow: 15px 20px 30px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 1024px) {
.rest .restBox:nth-of-type(even) .restBox-main figure {
-webkit-box-shadow: 7px 10px 15px rgba(0, 0, 0, 0.3);
box-shadow: 7px 10px 15px rgba(0, 0, 0, 0.3);
}
}
@media screen and (min-width: 642px) {
.rest .restBox02 .restBox-main {
margin-bottom: 14rem;
}
}
@media screen and (max-width: 1024px) {
.rest .restBox02 .restBox-main {
margin-bottom: calc(14rem * .85);
}
}
@media screen and (max-width: 641px) {
.rest .restBox02 .restBox-main {
margin-bottom: calc(14rem * .5);
}
}
.rest .restInfo {
margin-right: auto;
margin-left: auto;
padding: 0 3rem;
max-width: calc(880px + 6rem);
}
@media screen and (max-width: 1024px) {
.rest .restInfo {
padding: 0 2rem;
max-width: calc(880px + 4rem);
}
}
.rest .restInfo_ttl {
margin-bottom: 6rem;
font-size: 2rem;
font-weight: 700;
text-align: center;
}
@media screen and (max-width: 1024px) {
.rest .restInfo_ttl {
margin-bottom: 3rem;
}
}
.rest .restInfo_txt {
margin-top: -2rem;
margin-bottom: 6rem;
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 1024px) {
.rest .restInfo_txt {
margin-top: -1rem;
margin-bottom: 3rem;
}
}
.rest .restInfo-list {
-ms-flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 641px) {
.rest .restInfo-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media screen and (min-width: 642px) {
.rest .restInfo-list li {
width: calc(50% - (4rem / 2));
}
.rest .restInfo-list li:nth-of-type(odd) {
margin-right: 4rem;
}
.rest .restInfo-list li:nth-of-type(n+3) {
margin-top: 10rem;
}
}
@media screen and (max-width: 641px) {
.rest .restInfo-list {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
@media screen and (max-width: 641px) {
.rest .restInfo-list li {
width: calc(50% - (1rem / 2));
}
.rest .restInfo-list li:nth-of-type(odd) {
margin-right: 1rem;
}
.rest .restInfo-list li:nth-of-type(n+3) {
margin-top: 2rem;
}
}
@media screen and (min-width: 642px) {
.rest .restInfo-list + .restInfo_ttl {
margin-top: 20rem;
}
}
@media screen and (max-width: 1024px) {
.rest .restInfo-list + .restInfo_ttl {
margin-top: calc(20rem * .85);
}
}
@media screen and (max-width: 641px) {
.rest .restInfo-list + .restInfo_ttl {
margin-top: calc(20rem * .5);
}
}
.rest .restInfo-list li {
text-align: center;
}
.rest .restInfo-list_ttl {
margin-top: 1rem;
font-size: 2rem;
line-height: 2;
}
.rest .restInfo-list_ttl.bento {
font-size: 1.5rem;
}
.rest .restInfo-list_txt {
margin-top: 2rem;
line-height: 2;
}
.rest .restInfo-list_txt.bento {
font-size: 1.25rem;
}
.rest .restInfo-gyoza {
-ms-flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 1025px) {
.rest .restInfo-gyoza li {
width: calc(25% - ((3.5rem * 3) / 4));
}
.rest .restInfo-gyoza li:not(:nth-of-type(4n)) {
margin-right: 3.5rem;
}
.rest .restInfo-gyoza li:nth-of-type(n+5) {
margin-top: 8rem;
}
}
@media screen and (max-width: 1024px) {
.rest .restInfo-gyoza li {
width: calc(50% - (3.5rem / 2));
}
.rest .restInfo-gyoza li:nth-of-type(odd) {
margin-right: 3.5rem;
}
.rest .restInfo-gyoza li:nth-of-type(n+3) {
margin-top: 8rem;
}
}
@media screen and (max-width: 641px) {
.rest .restInfo-gyoza li {
width: calc(50% - (1rem / 2));
}
.rest .restInfo-gyoza li:nth-of-type(odd) {
margin-right: 1rem;
}
.rest .restInfo-gyoza li:nth-of-type(n+3) {
margin-top: 1rem;
}
}
@media screen and (min-width: 642px) {
.rest .restInfo-gyoza + .restInfo_ttl {
margin-top: 15rem;
}
}
@media screen and (max-width: 1024px) {
.rest .restInfo-gyoza + .restInfo_ttl {
margin-top: calc(15rem * .85);
}
}
@media screen and (max-width: 641px) {
.rest .restInfo-gyoza + .restInfo_ttl {
margin-top: calc(15rem * .5);
}
}
.rest .restInfo-gyoza li {
text-align: center;
}
.rest .restInfo-gyoza_ttl {
margin-top: 2rem;
font-size: 1.5rem;
line-height: 2;
}
@media screen and (max-width: 1024px) {
.rest .restInfo-gyoza_ttl {
margin-top: 1rem;
}
}
.rest .restInfo-gyoza_txt {
margin-top: 2rem;
font-size: 1.25rem;
line-height: 2;
}
@media screen and (max-width: 1024px) {
.rest .restInfo-gyoza_txt {
margin-top: 1rem;
}
}
.rest .restInfo-souzai {
margin-right: auto;
margin-left: auto;
max-width: 880px;
}
@media screen and (min-width: 642px) {
.rest .restInfo-souzai {
margin-top: 15rem;
}
}
@media screen and (max-width: 1024px) {
.rest .restInfo-souzai {
margin-top: calc(15rem * .85);
}
}
@media screen and (max-width: 641px) {
.rest .restInfo-souzai {
margin-top: calc(15rem * .5);
}
}
.rest .restInfo-souzai-list {
margin-bottom: 5rem;
}
@media screen and (min-width: 1025px) {
.rest .restInfo-souzai-list {
-ms-flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
}
@media screen and (min-width: 1025px) and (min-width: 1025px) {
.rest .restInfo-souzai-list li {
width: calc(33.333% - ((4.5rem * 2) / 3));
}
.rest .restInfo-souzai-list li:not(:nth-of-type(3n)) {
margin-right: 4.5rem;
}
.rest .restInfo-souzai-list li:nth-of-type(n+4) {
margin-top: 3rem;
}
}
@media screen and (min-width: 1025px) and (max-width: 1024px) {
.rest .restInfo-souzai-list li {
width: calc(50% - (4.5rem / 2));
}
.rest .restInfo-souzai-list li:nth-of-type(odd) {
margin-right: 4.5rem;
}
.rest .restInfo-souzai-list li:nth-of-type(n+3) {
margin-top: 3rem;
}
}
@media screen and (min-width: 1025px) and (max-width: 641px) {
.rest .restInfo-souzai-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media screen and (min-width: 1025px) and (max-width: 641px) {
.rest .restInfo-souzai-list li {
width: 100%;
}
.rest .restInfo-souzai-list li:nth-of-type(odd) {
margin-right: 0;
}
.rest .restInfo-souzai-list li:not(:first-of-type) {
margin-top: 1rem;
}
}
@media screen and (max-width: 1024px) {
.rest .restInfo-souzai-list {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
}
}
@media screen and (max-width: 1024px) {
.rest .restInfo-souzai-list li {
width: calc(33.333% - (2rem / 3));
}
.rest .restInfo-souzai-list li img {
width: 100%;
}
}
.rest .restInfo-souzai .txt {
letter-spacing: .12em;
line-height: 2;
text-align: center;
}
@media screen and (min-width: 642px) {
.rest .restInfo-orde {
margin-top: 10rem;
}
}
@media screen and (max-width: 1024px) {
.rest .restInfo-orde {
margin-top: calc(10rem * .85);
}
}
@media screen and (max-width: 641px) {
.rest .restInfo-orde {
margin-top: calc(10rem * .5);
}
}
.rest .restInfo-orde-img {
margin-bottom: 5rem;
text-align: center;
}
@media screen and (max-width: 1024px) {
.rest .restInfo-orde-img {
margin-bottom: 2rem;
}
}
.rest .restInfo-orde-img img {
vertical-align: bottom;
}
.rest .restInfo-orde .txt {
letter-spacing: .12em;
line-height: 2;
text-align: center;
} .company .companyHead {
position: relative;
}
@media screen and (min-width: 642px) {
.company .companyHead {
padding-bottom: 11rem;
}
}
@media screen and (max-width: 1024px) {
.company .companyHead {
padding-bottom: calc(11rem * .85);
}
}
@media screen and (max-width: 641px) {
.company .companyHead {
padding-bottom: calc(11rem * .5);
}
}
.company .companyHead_ttl {
position: absolute;
top: 5rem;
right: 7%;
font-weight: 600;
letter-spacing: .24em;
line-height: 2;
white-space: nowrap;
}
@media screen and (min-width: 1025px) {
.company .companyHead_ttl {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
}
@media screen and (max-width: 1024px) {
.company .companyHead_ttl {
position: relative;
top: 0;
right: 0;
margin-top: 1rem;
margin-bottom: 3rem;
width: 100%;
text-align: center;
}
}
.company .companyHead-cont {
position: relative;
width: 81%;
}
@media screen and (max-width: 1024px) {
.company .companyHead-cont {
width: 100%;
}
}
@media screen and (max-width: 1024px) {
.company .companyHead-cont_img {
width: 100%;
}
}
.company .companyHead-cont_txt {
position: absolute;
right: 0;
bottom: 0;
background: #FFF;
padding: 4rem 5rem 0;
width: 38rem;
line-height: 2.5;
}
@media screen and (max-width: 1024px) {
.company .companyHead-cont_txt {
-webkit-box-pack: center;
-ms-flex-pack: center;
position: relative;
justify-content: center;
margin: 0 auto;
margin-top: -2.5rem;
padding: 2.5rem 3rem;
width: 80%;
}
}
.company .companyMain {
margin-right: auto;
margin-left: auto;
padding: 0 3rem;
max-width: calc(880px + 6rem);
}
@media screen and (max-width: 1024px) {
.company .companyMain {
padding: 0 2rem;
max-width: calc(880px + 4rem);
}
}
.company .companyMain_ttl {
margin-bottom: 5rem;
font-size: 5rem;
font-weight: 600;
letter-spacing: .1em;
}
@media screen and (max-width: 1024px) {
.company .companyMain_ttl {
text-align: center;
}
}
@media screen and (min-width: 642px) {
.company .companyInfo {
margin-bottom: 14rem;
}
}
@media screen and (max-width: 1024px) {
.company .companyInfo {
margin-bottom: calc(14rem * .85);
}
}
@media screen and (max-width: 641px) {
.company .companyInfo {
margin-bottom: calc(14rem * .5);
}
}
.company .companyInfo_ttl, .company .companyContact_ttl {
margin-bottom: 3rem;
font-size: 3rem;
font-weight: 600;
letter-spacing: 0.12em;
}
@media screen and (max-width: 1024px) {
.company .companyInfo_ttl, .company .companyContact_ttl {
text-align: center;
}
}
.company .companyInfo-list div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid #000;
padding: 3rem 0;
font-size: 1.5rem;
line-height: 1.5;
}
.company .companyInfo-list dt {
width: 16rem;
}
@media screen and (max-width: 1024px) {
.company .companyInfo-list dt {
width: 9rem;
}
}
@media screen and (max-width: 1024px) {
.company .companyInfo-list dd {
margin-left: 2rem;
text-align: left;
}
}
.company .companyContact {
padding-bottom: 6rem;
}
@media screen and (max-width: 1024px) {
.company .companyContact {
padding-bottom: 3rem;
}
}
.company .companyContact_txt {
margin-bottom: 6rem;
max-width: 57rem;
line-height: 2;
}
@media screen and (max-width: 1024px) {
.company .companyContact_txt {
margin-bottom: 4rem;
text-align: center;
}
}
.company .companyContact-list {
-ms-flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 641px) {
.company .companyContact-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media screen and (min-width: 642px) {
.company .companyContact-list li {
width: calc(50% - (6rem / 2));
}
.company .companyContact-list li:nth-of-type(odd) {
margin-right: 6rem;
}
.company .companyContact-list li:nth-of-type(n+3) {
margin-top: 3rem;
}
}
@media screen and (max-width: 641px) {
.company .companyContact-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media screen and (max-width: 641px) {
.company .companyContact-list li {
width: 100%;
}
.company .companyContact-list li:nth-of-type(odd) {
margin-right: 0;
}
.company .companyContact-list li:not(:first-of-type) {
margin-top: 1rem;
}
}
@media screen and (max-width: 1024px) {
.company .companyContact-list {
margin: 0 auto;
width: 80%;
}
}
.company .companyContact-list a {
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
.company .companyContact-list a:hover {
opacity: 0.6;
} .contactMain {
margin-right: auto;
margin-left: auto;
padding: 0 3rem;
max-width: calc(880px + 6rem);
}
@media screen and (max-width: 1024px) {
.contactMain {
padding: 0 2rem;
max-width: calc(880px + 4rem);
}
}
.contactMain-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media screen and (max-width: 1024px) {
.contactMain-inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.contactInfo {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 5%;
width: 50%;
}
@media screen and (max-width: 1024px) {
.contactInfo {
padding-left: 15%;
width: 90%;
}
}
.contactInfo-shop {
margin-bottom: 8rem;
}
@media screen and (max-width: 1024px) {
.contactInfo-shop {
text-align: center;
}
}
.contactInfo-shop_ttl, .contactInfo-recruit_ttl {
margin-bottom: 7.5rem;
font-size: 3rem;
letter-spacing: 0.2em;
}
@media screen and (max-width: 1024px) {
.contactInfo-shop_ttl, .contactInfo-recruit_ttl {
margin-bottom: 4rem;
}
}
.contactInfo-shop-add:not(:last-of-type) {
margin-bottom: 6rem;
}
@media screen and (max-width: 1024px) {
.contactInfo-shop-add:not(:last-of-type) {
margin-bottom: 4rem;
}
}
.contactInfo-shop-add_ttl {
margin-bottom: 1.5rem;
font-size: 2rem;
}
.contactInfo-shop-add_ttl span {
display: block;
margin-top: 2rem;
font-size: 1.4rem;
letter-spacing: 0em;
}
.contactInfo-shop-add_add {
margin-bottom: .5rem;
line-height: 1.5;
}
@media screen and (max-width: 1024px) {
.contactInfo-recruit {
margin-bottom: 4rem;
}
}
.contactInfo-recruit_ttl {
margin-bottom: 6rem;
}
@media screen and (max-width: 1024px) {
.contactInfo-recruit_ttl {
margin-bottom: 4rem;
text-align: center;
}
}
.contactInfo-recruit li {
margin-bottom: 2.5rem;
}
@media screen and (max-width: 1024px) {
.contactInfo-recruit li {
text-align: center;
}
}
.contactInfo-recruit a {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-width: 18rem;
}
.contactInfo-recruit .ttl {
margin-bottom: 1.5rem;
}
.contactForm {
width: 100%;
}
@media screen and (max-width: 1024px) {
.contactForm {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
margin-bottom: 5rem;
}
}
.contactForm dl {
margin-bottom: 3.5rem;
}
.contactForm input[type="text"],
.contactForm input[type="email"],
.contactForm textarea,
.contactForm select {
padding: 2.75rem 0;
width: 100%;
font-family: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 1.45rem;
font-style: normal;
font-weight: 600;
line-height: 1.5;
}
@media screen and (max-width: 1024px) {
.contactForm input[type="text"],
.contactForm input[type="email"],
.contactForm textarea,
.contactForm select {
font-size: 16px;
}
}
.contactForm input[type="text"]::-webkit-input-placeholder,
.contactForm input[type="email"]::-webkit-input-placeholder,
.contactForm textarea::-webkit-input-placeholder {
color: #000;
}
.contactForm input[type="text"]:-ms-input-placeholder,
.contactForm input[type="email"]:-ms-input-placeholder,
.contactForm textarea:-ms-input-placeholder {
color: #000;
}
.contactForm input[type="text"]::-ms-input-placeholder,
.contactForm input[type="email"]::-ms-input-placeholder,
.contactForm textarea::-ms-input-placeholder {
color: #000;
}
.contactForm input[type="text"]::placeholder,
.contactForm input[type="email"]::placeholder,
.contactForm textarea::placeholder {
color: #000;
}
.contactForm select {
display: block;
}
.contactForm .box:first-of-type {
position: relative;
margin-top: .5rem;
border-top: 1px solid #000;
}
.contactForm .box:first-of-type::after {
-webkit-transform: translateY(-50%);
display: block;
position: absolute;
top: 50%;
right: 15px; transform: translateY(-50%);
border-width: 12px 7px 0 7px;
border-style: solid;
border-color: #333333 transparent transparent transparent;
width: 0;
height: 0;
content: "";
}
.contactForm .box {
border-bottom: 1px solid #000;
}
.contactForm input[type="submit"] {
border-radius: 1rem;
background: #000;
padding: 3rem 0;
width: 100%;
color: #FFF;
font-family: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 1.6rem;
font-style: normal;
font-weight: 600;
font-weight: 700;
letter-spacing: 0.12em;
text-align: center;
}
.contactForm .send-box {
margin-bottom: 4rem;
}
.contactForm_note {
margin-bottom: 3rem;
font-size: 1.2rem;
} .story .storyMain_ttl {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
-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: 0 0 auto;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.story .storyMain_ttl::before, .story .storyMain_ttl::after {
display: block;
margin-top: 2rem;
background: #000;
width: 1px;
height: 16px;
content: "";
}
.story .storyMain_ttl-wrap {
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.story .storyMain_ttl-wrap::before, .story .storyMain_ttl-wrap::after {
display: block;
margin-top: 2rem;
background: #000;
width: 100%;
height: 1px;
content: "";
}
.story .storyMain_ttl span {
padding: 0 4.5rem;
letter-spacing: 0.2em;
text-align: center;
}
.story .storyMain_ttl strong {
display: block;
margin-top: 0.5rem;
font-size: 4.5rem;
font-weight: 500;
}
@media screen and (max-width: 1024px) {
.story .storyMain_ttl strong {
font-size: 3rem;
}
}
@media screen and (min-width: 642px) {
.story .storyBox {
padding-bottom: 12.5rem;
}
}
@media screen and (max-width: 1024px) {
.story .storyBox {
padding-bottom: calc(12.5rem * .85);
}
}
@media screen and (max-width: 641px) {
.story .storyBox {
padding-bottom: calc(12.5rem * .5);
}
}
@media screen and (max-width: 1024px) {
.story .storyBox:first-of-type {
margin-top: -12px;
}
}
@media screen and (min-width: 1025px) {
.story .storyBox:first-of-type {
margin-top: -2.2rem;
padding-top: 9.5rem;
}
}
.story .storyBox:nth-of-type(n+2) {
padding-top: 4rem;
}
.story .storyBox-head {
position: relative;
}
@media screen and (min-width: 642px) {
.story .storyBox-head {
margin-bottom: 10rem;
}
}
@media screen and (max-width: 1024px) {
.story .storyBox-head {
margin-bottom: calc(10rem * .85);
}
}
@media screen and (max-width: 641px) {
.story .storyBox-head {
margin-bottom: calc(10rem * .5);
}
}
.story .storyBox-head_copy {
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
font-size: 2rem;
font-weight: 600;
letter-spacing: .24em;
line-height: 2;
}
@media screen and (min-width: 1025px) {
.story .storyBox-head_copy {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
position: absolute;
top: 6rem;
right: 6%;
writing-mode: vertical-rl;
white-space: nowrap;
}
}
@media screen and (max-width: 1024px) {
.story .storyBox-head_copy {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
position: relative;
right: 0%;
flex-direction: column;
order: 1;
margin-bottom: 6rem;
text-align: center;
}
}
.story .storyBox-head_copy i {
margin-bottom: 3rem;
}
@media screen and (max-width: 1024px) {
.story .storyBox-head_copy i {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
margin-bottom: 2rem;
width: 9rem;
}
}
.story .storyBox-head_img {
position: relative;
width: 81%;
}
@media screen and (max-width: 1024px) {
.story .storyBox-head_img {
margin-bottom: 3rem;
width: 100%;
}
}
.story .storyBox-cont {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: auto;
margin-left: auto;
padding: 0 3rem;
max-width: calc(880px + 6rem);
}
@media screen and (max-width: 1024px) {
.story .storyBox-cont {
padding: 0 2rem;
max-width: calc(880px + 4rem);
}
}
@media screen and (max-width: 1024px) {
.story .storyBox-cont {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
margin-left: 0rem;
}
}
@media screen and (min-width: 1025px) {
.story .storyBox-cont-inner:first-of-type {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 44%;
}
}
@media screen and (max-width: 1024px) {
.story .storyBox-cont-inner:first-of-type {
width: 100%;
}
}
.story .storyBox-cont_ttl {
margin-bottom: 2rem;
font-size: 1.3rem;
}
.story .storyBox-cont_copy {
font-size: 2.5rem;
letter-spacing: .025em;
line-height: 1.7;
}
@media screen and (max-width: 1024px) {
.story .storyBox-cont_copy {
margin-bottom: 3rem;
}
}
.story .storyBox-cont_copy span {
display: block;
margin-top: 1rem;
font-size: 1.3rem;
line-height: 1.8;
}
.story .storyBox-cont_txtbox {
margin-bottom: 4rem;
}
.story .storyBox-cont_txtbox p {
line-height: 2.2;
}
.story .storyBox-cont_txtbox p:not(:last-of-type) {
margin-bottom: 4rem;
}
.story .storyBox-cont_poem {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex: 0 0 auto;
align-items: flex-start;
font-weight: 600;
line-height: 2.2;
}
@media screen and (min-width: 1025px) {
.story .storyBox-cont_poem {
white-space: nowrap;
}
}
.story .storyBox-cont_poem::before {
display: block;
margin-top: 1em;
margin-right: 1rem;
background: #000;
width: 5rem;
height: 1px;
content: "";
}
.story .storyBox-cont_more {
margin-top: 5rem;
}
@media screen and (min-width: 1025px) {
.story .storyBox:nth-of-type(odd) .storyBox-head_img {
margin: 0 0 0 auto;
}
}
@media screen and (min-width: 1025px) {
.story .storyBox:nth-of-type(odd) .storyBox-head_copy {
right: inherit;
left: 6%;
}
}
.story .storyBox-o {
background: #fdfaf8;
background: -webkit-linear-gradient(-45deg, #fdfaf8 0%, #d5a47a 100%);
background: -webkit-linear-gradient(315deg, #fdfaf8 0%, #d5a47a 100%);
background: linear-gradient(135deg, #fdfaf8 0%, #d5a47a 100%);
}
.story .storyBox-p {
background: #ffffff;
background: -webkit-linear-gradient(-45deg, #ffffff 10%, #cd837b 100%);
background: -webkit-linear-gradient(315deg, #ffffff 10%, #cd837b 100%);
background: linear-gradient(135deg, #ffffff 10%, #cd837b 100%);
}
.story .storyBox-g {
background: #ffffff;
background: -webkit-linear-gradient(left, #ffffff 1%, #b9c8aa 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #ffffff), to(#b9c8aa));
background: linear-gradient(to right, #ffffff 1%, #b9c8aa 100%);
}
@media screen and (max-width: 1024px) {
.story .storyBox-g {
padding-top: 7rem;
}
} @media screen and (min-width: 642px) {
.arcMain {
margin-bottom: 10rem;
}
}
@media screen and (max-width: 1024px) {
.arcMain {
margin-bottom: calc(10rem * .85);
}
}
@media screen and (max-width: 641px) {
.arcMain {
margin-bottom: calc(10rem * .5);
}
}
.arcMain-list {
-ms-flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
margin-right: auto;
margin-left: auto;
padding: 0 3rem;
max-width: calc(880px + 6rem);
}
@media screen and (max-width: 1024px) {
.arcMain-list {
padding: 0 2rem;
max-width: calc(880px + 4rem);
}
}
@media screen and (min-width: 642px) {
.arcMain-list {
margin-bottom: 15rem;
}
}
@media screen and (max-width: 1024px) {
.arcMain-list {
margin-bottom: calc(15rem * .85);
}
}
@media screen and (max-width: 641px) {
.arcMain-list {
margin-bottom: calc(15rem * .5);
}
}
@media screen and (max-width: 641px) {
.arcMain-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media screen and (min-width: 642px) {
.arcMain-list li {
width: calc(50% - (6rem / 2));
}
.arcMain-list li:nth-of-type(odd) {
margin-right: 6rem;
}
.arcMain-list li:nth-of-type(n+3) {
margin-top: 10rem;
}
}
@media screen and (max-width: 641px) {
.arcMain-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media screen and (max-width: 641px) {
.arcMain-list li {
width: 100%;
}
.arcMain-list li:nth-of-type(odd) {
margin-right: 0;
}
.arcMain-list li:not(:first-of-type) {
margin-top: 3rem;
}
}
.arcMain-list figure {
position: relative;
background: #000;
background: #FFF;
width: 100%;
overflow: hidden;
overflow: hidden;
}
.arcMain-list figure img {
-webkit-transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.arcMain-list figure img {
width: 101%;
max-width: 101%;
height: auto;
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
.arcMain-list figure img {
-o-object-fit: cover;
width: 101%;
height: 101%;
object-fit: cover;
}
}
.arcMain-list figure::after {
display: block;
padding-top: 58%;
content: "";
}
.arcMain-list a {
-webkit-transition: ease 0.3s;
display: block;
transition: ease 0.3s;
width: 100%;
height: 100%;
}
.arcMain-list a:hover {
opacity: 0.6;
}
.arcMain-list span {
display: block;
}
.arcMain-list-cont {
-webkit-box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.3);
position: relative;
margin: 0 -1rem 0 auto;
margin-top: -3rem;
box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.3);
background: #FFF;
padding: 4rem 3.5rem 3.5rem;
width: 75%;
}
.arcMain-list-cont_cat {
position: absolute;
top: 0;
left: 0;
background: #000;
padding: .5rem 1.25rem;
color: #FFF;
font-size: 1.5rem;
letter-spacing: .2em;
}
.arcMain-list-cont_cat.cat-info, .arcMain-list-cont_cat.cat-wine {
background: #BA5349;
}
.arcMain-list-cont_cat.cat-event, .arcMain-list-cont_cat.cat-party {
background: #526B2A;
}
.arcMain-list-cont_cat.cat-dinner {
background: #be7333;
}
.arcMain-list-cont_ttl {
font-size: 1.6rem;
line-height: 1.5;
}
.arcMain-list-cont_day {
margin-top: 1.5rem;
font-size: 1.3rem;
}
.arcMain .pager .nav-links {
-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;
}
.arcMain .pager .nav-links a,
.arcMain .pager .nav-links span {
margin: 0 1.25rem;
padding: 0 0 .5rem;
}
.arcMain .pager .nav-links .current {
border-bottom: 1px solid #000;
}
.arcMain .pager .nav-links a {
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
.arcMain .pager .nav-links a:hover {
opacity: 0.6;
}
@media screen and (min-width: 1025px) {
.newsMain_ttl {
margin-bottom: 8rem;
}
}
.alterMain_ttl {
font-size: 3rem;
font-weight: 500;
text-align: center;
}
@media screen and (min-width: 642px) {
.alterMain_ttl {
margin-bottom: 10rem;
}
}
@media screen and (max-width: 1024px) {
.alterMain_ttl {
margin-bottom: calc(10rem * .85);
}
}
@media screen and (max-width: 641px) {
.alterMain_ttl {
margin-bottom: calc(10rem * .5);
}
}
.alterMain-cat-list {
-ms-flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
margin-right: auto;
margin-left: auto;
padding: 0 3rem;
max-width: calc(705px + 6rem);
}
@media screen and (max-width: 1024px) {
.alterMain-cat-list {
padding: 0 2rem;
max-width: calc(705px + 4rem);
}
}
@media screen and (min-width: 642px) {
.alterMain-cat-list {
margin-bottom: 8rem;
}
}
@media screen and (max-width: 1024px) {
.alterMain-cat-list {
margin-bottom: calc(8rem * .85);
}
}
@media screen and (max-width: 641px) {
.alterMain-cat-list {
margin-bottom: calc(8rem * .5);
}
}
@media screen and (min-width: 1025px) {
.alterMain-cat-list li {
width: calc(25% - ((3.5rem * 3) / 4));
}
.alterMain-cat-list li:not(:nth-of-type(4n)) {
margin-right: 3.5rem;
}
.alterMain-cat-list li:nth-of-type(n+5) {
margin-top: 3rem;
}
}
@media screen and (max-width: 1024px) {
.alterMain-cat-list li {
width: calc(50% - (3.5rem / 2));
}
.alterMain-cat-list li:nth-of-type(odd) {
margin-right: 3.5rem;
}
.alterMain-cat-list li:nth-of-type(n+3) {
margin-top: 3rem;
}
}
@media screen and (max-width: 641px) {
.alterMain-cat-list li {
width: calc(50% - (1rem / 2));
}
.alterMain-cat-list li:nth-of-type(odd) {
margin-right: 1rem;
}
.alterMain-cat-list li:nth-of-type(n+3) {
margin-top: 1rem;
}
}
.alterMain-cat-list li {
min-width: 15rem;
}
.alterMain-cat-list li a {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-transition: ease 0.3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
align-items: center;
align-items: center;
transition: ease 0.3s;
border-radius: 1.5rem;
background: #000;
padding: 0 1.5rem;
height: 3rem;
color: #FFF;
font-size: 1.6rem;
font-weight: 600;
line-height: 3rem;
white-space: nowrap;
}
.alterMain-cat-list li a:after {
display: block;
margin-left: .75rem;
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/icon-arrow.svg) center bottom no-repeat;
width: .5rem;
height: 1.2rem;
content: "";
}
.alterMain-cat-list li a:hover {
opacity: 0.6;
}
.alterMain-cat-list li a {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
text-align: center;
}
.alterMain-cat-list li a::after {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.alterMain-cat-list li span {
display: block;
width: 100%;
text-align: center;
}
.alterMain-cat-list li.is-active a {
opacity: 0.4;
pointer-events: none;
}
.alterMain .arcMain-list-cont_ttl {
padding-top: 1rem;
font-size: 1.4rem;
} .singleMain {
margin-right: auto;
margin-left: auto;
padding: 0 3rem;
max-width: calc(880px + 6rem);
}
@media screen and (max-width: 1024px) {
.singleMain {
padding: 0 2rem;
max-width: calc(880px + 4rem);
}
}
@media screen and (min-width: 642px) {
.singleMain {
margin-bottom: 8rem;
}
}
@media screen and (max-width: 1024px) {
.singleMain {
margin-bottom: calc(8rem * .85);
}
}
@media screen and (max-width: 641px) {
.singleMain {
margin-bottom: calc(8rem * .5);
}
}
.singleMain .pankuzu {
margin-bottom: 4.5rem;
}
.singleMain_cat {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin-bottom: 3rem;
background: #000;
padding: .5rem 1.25rem;
color: #FFF;
font-size: 1.5rem;
letter-spacing: .2em;
}
.singleMain_cat.cat-info, .singleMain_cat.cat-wine {
background: #BA5349;
}
.singleMain_cat.cat-event, .singleMain_cat.cat-party {
background: #526B2A;
}
.singleMain_cat.cat-dinner {
background: #be7333;
}
.singleMain_day {
margin-bottom: 1.5rem;
font-size: 1.3rem;
}
.singleMain_ttl {
margin-bottom: 5rem;
font-size: 3rem;
line-height: 1.5;
}
@media screen and (min-width: 642px) {
.singleMain-cont {
margin-bottom: 8rem;
}
}
@media screen and (max-width: 1024px) {
.singleMain-cont {
margin-bottom: calc(8rem * .85);
}
}
@media screen and (max-width: 641px) {
.singleMain-cont {
margin-bottom: calc(8rem * .5);
}
}
@media screen and (max-width: 1024px) {
.singleMain-cont {
margin-bottom: 6rem;
}
}
.singleMain-cont a {
text-decoration: underline;
}
.singleMain-cont strong,
.singleMain-cont b {
font-weight: 900;
}
.singleMain-cont > img {
display: block;
width: 100%;
}
.singleMain-cont > img + h3,
.singleMain-cont > img + div,
.singleMain-cont > img + ul,
.singleMain-cont > img + img,
.singleMain-cont > ul + h3,
.singleMain-cont > ul + div,
.singleMain-cont > ul + ul,
.singleMain-cont > ul + img,
.singleMain-cont > div:not(.info) + h3,
.singleMain-cont > div:not(.info) + div,
.singleMain-cont > div:not(.info) + ul,
.singleMain-cont > div:not(.info) + img {
margin-top: 5rem;
}
@media screen and (max-width: 1024px) {
.singleMain-cont > img + h3,
.singleMain-cont > img + div,
.singleMain-cont > img + ul,
.singleMain-cont > img + img,
.singleMain-cont > ul + h3,
.singleMain-cont > ul + div,
.singleMain-cont > ul + ul,
.singleMain-cont > ul + img,
.singleMain-cont > div:not(.info) + h3,
.singleMain-cont > div:not(.info) + div,
.singleMain-cont > div:not(.info) + ul,
.singleMain-cont > div:not(.info) + img {
margin-top: 3rem;
}
}
.singleMain-cont .flow {
margin-right: auto;
margin-left: auto;
border: 1px solid #000;
padding: 4.5rem;
max-width: 840px;
}
@media screen and (max-width: 1024px) {
.singleMain-cont .flow {
padding: 2rem;
}
}
.singleMain-cont .flow-ttl {
margin-bottom: 1.75rem;
border-bottom: 1px solid #000;
padding-bottom: 0.25rem;
line-height: 1.5;
}
.singleMain-cont .flow ul {
display: block;
}
.singleMain-cont .flow li {
line-height: 1.5;
}
.singleMain-cont .flow li:not(:last-of-type) {
margin-bottom: 1.5rem;
}
.singleMain-cont .ttl {
margin-bottom: 3rem;
font-size: 2rem;
line-height: 2.25;
}
.singleMain-cont div {
line-height: 2.25;
}
.singleMain-cont ul:not(.flow-list) {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
}
.singleMain-cont ul:not(.flow-list) li {
width: 48.5%;
}
.singleMain-cont .info {
background: #f6ebe2;
padding: 3rem;
}
.singleMain-cont .info h3 {
color: #be7333;
font-size: 1.2rem;
}
.singleMain-postbtn {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
padding: 0 3rem;
max-width: calc(750px + 6rem);
}
@media screen and (max-width: 1024px) {
.singleMain-postbtn {
padding: 0 2rem;
max-width: calc(750px + 4rem);
}
}
@media screen and (max-width: 1024px) {
.singleMain-postbtn {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
flex-direction: column;
align-items: center;
}
}
@media screen and (max-width: 1024px) {
.singleMain-postbtn_prev, .singleMain-postbtn_next {
margin-bottom: 1.5rem;
}
}
.singleMain-postbtn_prev a, .singleMain-postbtn_next a {
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
width: 200px;
}
@media screen and (max-width: 1024px) {
.singleMain-postbtn_prev a, .singleMain-postbtn_next a {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
min-height: 2.3rem;
}
}
.singleMain-postbtn_prev i, .singleMain-postbtn_next i {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
display: block;
flex: 0 0 auto;
width: 2.3rem;
height: 2.3rem;
}
@media screen and (max-width: 1024px) {
.singleMain-postbtn_prev {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
}
.singleMain-postbtn_prev i {
margin-right: 0.5rem;
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/icon-prev.svg) center center no-repeat;
background-size: 2.3rem auto;
}
@media screen and (min-width: 1025px) {
.singleMain-postbtn_prev span {
display: block;
width: 200px;
}
}
@media screen and (max-width: 1024px) {
.singleMain-postbtn_next {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
}
.singleMain-postbtn_next a {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.singleMain-postbtn_next i {
margin-left: 0.5em;
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/icon-next.svg) center center no-repeat;
background-size: 2.3rem auto;
}
.singleMain-postbtn_back a {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-transition: ease 0.3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
align-items: center;
align-items: center;
transition: ease 0.3s;
border-radius: 1.5rem;
background: #000;
padding: 0 1.5rem;
height: 3rem;
color: #FFF;
font-size: 1.6rem;
font-weight: 600;
line-height: 3rem;
white-space: nowrap;
}
.singleMain-postbtn_back a:after {
display: block;
margin-left: .75rem;
background: url(//kawatoann.jp/wp-content/themes/kawa_to_an/img/icon-arrow.svg) center bottom no-repeat;
width: .5rem;
height: 1.2rem;
content: "";
}
.singleMain-postbtn_back a:hover {
opacity: 0.6;
}
@media screen and (max-width: 1024px) {
.singleMain-postbtn_back {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin-top: 2rem;
}
}
.singleMain-postbtn_back a {
border: 1px solid #000;
background: #FFF;
color: #000;
}
.singleMain-postbtn_back a::after {
display: none;
} @media screen and (min-width: 1025px) {
.vbox-container img {
max-height: calc(90vh - 40px);
}
}
.vbox-close {
right: inherit;
left: 0;
} .f01 {
-webkit-transition: all 0.5s cubic-bezier(0.43, 0.13, 0.56, 0.72);
-webkit-transform: scale(0.5);
-webkit-transform: translateY(1rem);
transform: scale(0.5);
transform: translateY(1rem);
opacity: 0;
transition: all 0.5s cubic-bezier(0.43, 0.13, 0.56, 0.72);
text-align: center;
}
.f01.frame-in {
-webkit-transform: scale(1);
-webkit-transform: translateY(0);
transform: scale(1);
transform: translateY(0);
opacity: 1;
}
.f02 {
position: relative;
}
.f02::after {
-webkit-transition: all 0.75s cubic-bezier(0.43, 0.13, 0.56, 0.72);
-webkit-transform-origin: left bottom;
-webkit-transform: scaleX(1);
display: block;
position: absolute;
top: 0;
left: 0;
transform: scaleX(1);
transform-origin: left bottom;
transition: all 0.75s cubic-bezier(0.43, 0.13, 0.56, 0.72);
background: #fefdf8;
width: 100%;
height: 100%;
content: "";
}
.f02.frame-in::after {
-webkit-transform: scaleX(0);
transform: scaleX(0);
width: 0;
}
.f05 {
-webkit-transition: all 1.75s cubic-bezier(0.43, 0.13, 0.56, 0.72);
position: relative;
opacity: 0;
transition: all 1.75s cubic-bezier(0.43, 0.13, 0.56, 0.72);
}
.f05::after {
-webkit-transition: all 1.5s ease-out;
-webkit-transform-origin: left bottom;
-webkit-transform: scaleX(1);
display: block;
position: absolute;
top: 0;
left: 0;
transform: scaleX(1);
transform-origin: left bottom;
transition: all 1.5s ease-out;
background: #fefdf8;
width: 100%;
height: 100%;
content: "";
}
.f05.frame-in {
opacity: 1;
}
.f05.frame-in::after {
-webkit-transform: scaleX(0);
transform: scaleX(0);
width: 0;
}
.f03 {
-webkit-transition: opacity 0.5s cubic-bezier(0.43, 0.13, 0.56, 0.72);
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.43, 0.13, 0.56, 0.72);
}
.f03.frame-in {
opacity: 1;
}
.f03-2 {
-webkit-transition: opacity 0.5s cubic-bezier(0.43, 0.13, 0.56, 0.72) 0.5s;
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.43, 0.13, 0.56, 0.72) 0.5s;
}
.f03-2.frame-in {
opacity: 1;
}
.f04 {
position: relative;
}
.f04::after {
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.43, 0.13, 0.56, 0.72);
-webkit-transform-origin: left bottom;
-webkit-transform: scaleX(1);
display: block;
position: absolute;
top: 0;
left: 0;
transform: scaleX(1);
transform-origin: left bottom;
transition: -webkit-transform 0.5s cubic-bezier(0.43, 0.13, 0.56, 0.72);
transition: transform 0.5s cubic-bezier(0.43, 0.13, 0.56, 0.72);
transition: transform 0.5s cubic-bezier(0.43, 0.13, 0.56, 0.72), -webkit-transform 0.5s cubic-bezier(0.43, 0.13, 0.56, 0.72);
background: #f3e645;
width: 100%;
height: 100%;
content: "";
}
.f04 p {
-webkit-transition: opacity .5s ease .5s;
opacity: 0;
transition: opacity .5s ease .5s;
}
.f04.frame-in::after {
-webkit-transform: scaleX(0);
transform: scaleX(0);
width: 0;
}
.f04.frame-in p {
opacity: 1;
} .head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #FFF;
width: 100%;
}
@media screen and (min-width: 1025px) {
.head {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0 6rem;
height: 8rem;
}
}
@media screen and (min-width: 1025px) and (max-width: 1160px) {
.head {
padding: 0 2rem;
}
}
@media screen and (max-width: 1024px) {
.head {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 1rem;
height: 80px;
}
}
@media screen and (max-width: 641px) {
.head {
height: 50px;
}
}
@media screen and (min-width: 1025px) {
.head-logo {
padding-top: 1rem;
}
.head-logo.is-loaded {
opacity: 1;
}
.head-logo a {
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
.head-logo a:hover {
opacity: 0.6;
}
}
@media screen and (max-width: 1024px) {
.head-logo img {
width: 20rem;
}
}
.menu-main {
font-family: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-style: normal;
font-weight: 600;
}
@media screen and (min-width: 1025px) {
.menu-main {
padding-right: 11rem;
height: 4.5rem;
}
}
@media screen and (min-width: 1025px) and (max-width: 1160px) {
.menu-main {
padding-right: 13rem;
}
}
@media screen and (min-width: 1025px) {
.menu-main .menu-inner,
.menu-main nav {
height: 100%;
}
.menu-main ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
}
.menu-main li {
-webkit-box-align: end;
-ms-flex-align: end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: flex-end;
padding: 0 2rem;
height: 100%;
}
.menu-main li:not(:last-of-type) {
border-right: 1px solid #000;
}
.menu-main li:last-of-type {
padding-right: 0;
}
}
@media screen and (min-width: 1025px) and (max-width: 1399px) {
.menu-main li {
padding: 0 1rem;
}
}
@media screen and (min-width: 1025px) {
.menu-main a:not(.bnr) {
font-size: 1.6rem;
letter-spacing: 0.12em;
}
}
@media screen and (min-width: 1025px) and (max-width: 1399px) {
.menu-main a:not(.bnr) {
font-size: 1.3rem;
}
}
@media screen and (min-width: 1025px) {
.menu-main a:not(.bnr)::after {
-webkit-transition: 0.3s;
display: block;
transition: 0.3s;
background: #000;
width: 0;
height: 1px;
content: "";
}
.menu-main a:not(.bnr):hover::after {
width: 100%;
}
}
@media screen and (max-width: 1024px) {
.menu-main {
-webkit-transition: ease .3s;
display: none;
opacity: 0;
z-index: 90002;
transition: ease .3s;
}
.menu.is-open .menu-main {
-webkit-overflow-scrolling: touch;
display: block;
position: fixed;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.95);
width: 100%;
height: 100%;
overflow-y: scroll;
font-size: 2rem;
}
.menu.is-open .menu-main nav > ul li:not(:last-of-type) {
margin-bottom: 3rem;
}
.menu.is-open .menu-main nav > ul a {
display: block;
border-bottom: 1px solid #1a1a1a;
padding: .5rem 0 1.5rem;
width: 100%;
color: #000;
font-size: 2rem;
line-height: 1;
}
.menu.is-open .menu-main .menu-inner,
.menu.is-open .menu-main nav {
width: 100%;
}
.menu.is-open .menu-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;
padding: 6.5rem;
min-height: 100%;
}
.menu.is-open.is-active .menu-main {
opacity: 1;
}
.menu.is-open.is-active .menu-inner {
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.head-menu_btn {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
-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;
top: 0;
right: 0;
flex: 0 0 auto;
align-items: center;
justify-content: center;
z-index: 99999;
cursor: pointer;
background: #1a1a1a;
width: 80px;
height: 80px;
}
}
@media screen and (max-width: 1024px) and (max-width: 641px) {
.head-menu_btn {
width: 50px;
height: 50px;
}
}
@media screen and (max-width: 1024px) {
.head-menu_btn i {
width: 42px;
}
}
@media screen and (max-width: 1024px) and (max-width: 641px) {
.head-menu_btn i {
width: 24px;
}
}
@media screen and (max-width: 1024px) {
.head-menu_btn span {
-webkit-transition: 0.3s;
display: block;
transition: 0.3s;
background: #FFF;
height: 1px;
}
.head-menu_btn span:first-of-type {
margin-bottom: 12px;
width: 100%;
}
}
@media screen and (max-width: 1024px) and (max-width: 641px) {
.head-menu_btn span:first-of-type {
margin-bottom: 6px;
}
}
@media screen and (max-width: 1024px) {
.head-menu_btn span:nth-of-type(2) {
margin-bottom: 12px;
width: 100%;
}
}
@media screen and (max-width: 1024px) and (max-width: 641px) {
.head-menu_btn span:nth-of-type(2) {
margin-bottom: 6px;
}
}
@media screen and (max-width: 1024px) {
.head-menu_btn.menu-open span {
margin: 0;
}
.head-menu_btn.menu-open span:first-of-type {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 0;
}
.head-menu_btn.menu-open span:nth-of-type(2) {
display: none;
}
.head-menu_btn.menu-open span:last-of-type {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin: -1px 0 0 0px;
width: 100%;
}
}
@media screen and (min-width: 1025px) {
.menu-sns {
position: fixed;
top: 16.5rem;
right: 1.4rem;
}
}
@media screen and (max-width: 1024px) {
.menu-sns {
margin-top: 4rem;
}
}
@media screen and (max-width: 1024px) {
.menu-sns-list {
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
}
}
.menu-sns-list li {
margin-bottom: 2.5rem;
}
@media screen and (max-width: 1024px) {
.menu-sns-list li {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-transform: scale(1.25);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
transform: scale(1.25);
margin: 0 1.5rem;
}
}
.menu-sns-list a {
-webkit-transition: ease 0.3s;
display: block;
transition: ease 0.3s;
width: 1.6rem;
text-align: center;
}
.menu-sns-list a:hover {
opacity: 0.6;
}
@media screen and (max-width: 1024px) {
.menu-sns-list a {
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
width: 2rem;
}
}
@media screen and (min-width: 1025px) {
.menu-bnr {
position: absolute;
top: 0;
right: 0;
}
}
@media screen and (max-width: 1024px) {
.menu-bnr {
margin-top: 5rem;
}
}
@media screen and (min-width: 1025px) {
.menu-bnr a {
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
.menu-bnr a:hover {
opacity: 0.6;
}
}
@media screen and (min-width: 1025px) {
.menu-bnr img {
width: 14rem;
}
}