:root {
--icon-arrow-right: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22m11.8%208-5-5-1.5%201.5L8.8%208l-3.5%203.5L6.8%2013z%22%2F%3E%3C%2Fsvg%3E");
--color-white: #fff;
--color-black: #333;
--color-brown: #523C41;
--color-brown-b: #AF9578;
--color-brown-light: #F8F3EE;
--color-gray: #999;
--color-gray-light: #F4F3F2;
--color-gray-pale: #f6f6f6;
--color-red: #BB4630;  
--color-red-b: #ac183b;  
--color-red-light: #FCF5F4;
--color-red-light-b: #FAEEEC;
--color-yellow: #F5EA8D;
--font-sans: century-gothic, 'Noto Serif JP', serif;
--font-sans-b: "fot-tsukuardgothic-std", sans-serif;
--font-sans-c: 'Noto Sans JP', sans-serif;
--font-en: "quicksand", sans-serif;
--transition-duration: 0.15s;
--transition-opacity: 0.65;
--font-10: 10px;
--font-11: clamp(11px, 0.9197324415vw, 11px);
--font-12: clamp(11px, 1.0033444816vw, 12px);
--font-13: clamp(12px, 1.0869565217vw, 13px);
--font-14: clamp(12px, 1.1705685619vw, 14px);
--font-15: clamp(13px, 1.254180602vw, 15px);
--font-16: clamp(13px, 1.3377926421vw, 16px);
--font-17: clamp(14px, 1.4214046823vw, 17px);
--font-18: clamp(14px, 1.5050167224vw, 18px);
--font-19: clamp(15px, 1.5886287625vw, 19px);
--font-20: clamp(15px, 1.6722408027vw, 20px);
--font-21: clamp(16px, 1.7558528428vw, 21px);
--font-22: clamp(16px, 1.8394648829vw, 22px);
--font-23: clamp(17px, 1.9230769231vw, 23px);
--font-24: clamp(17px, 2.0066889632vw, 24px);
--font-25: clamp(18px, 2.0903010033vw, 25px);
--font-26: clamp(18px, 2.1739130435vw, 26px);
--font-27: clamp(19px, 2.2575250836vw, 27px);
--font-28: clamp(19px, 2.3411371237vw, 28px);
--font-29: clamp(20px, 2.4247491639vw, 29px);
--font-30: clamp(20px, 2.508361204vw, 30px);
--font-31: clamp(21px, 2.5919732441vw, 31px);
--font-32: clamp(21px, 2.6755852843vw, 32px);
--font-33: clamp(22px, 2.7591973244vw, 33px);
--font-34: clamp(22px, 2.8428093645vw, 34px);
--font-35: clamp(23px, 2.9264214047vw, 35px);
--font-36: clamp(23px, 3.0100334448vw, 36px);
--font-37: clamp(24px, 3.0936454849vw, 37px);
--font-38: clamp(24px, 3.1772575251vw, 38px);
--font-39: clamp(25px, 3.2608695652vw, 39px);
--font-40: clamp(25px, 3.3444816054vw, 40px);
--font-41: clamp(26px, 3.4280936455vw, 41px);
--font-42: clamp(26px, 3.5117056856vw, 42px);
--font-43: clamp(27px, 3.5953177258vw, 43px);
--font-44: clamp(27px, 3.6789297659vw, 44px);
--font-45: clamp(28px, 3.762541806vw, 45px);
--font-46: clamp(28px, 3.8461538462vw, 46px);
--font-47: clamp(29px, 3.9297658863vw, 47px);
--font-48: clamp(29px, 4.0133779264vw, 48px);
--font-49: clamp(30px, 4.0969899666vw, 49px);
--font-50: clamp(30px, 4.1806020067vw, 50px);
--font-51: clamp(31px, 4.2642140468vw, 51px);
--font-52: clamp(31px, 4.347826087vw, 52px);
--font-53: clamp(32px, 4.4314381271vw, 53px);
--font-54: clamp(32px, 4.5150501672vw, 54px);
--font-55: clamp(33px, 4.5986622074vw, 55px);
--font-56: clamp(33px, 4.6822742475vw, 56px);
--font-57: clamp(34px, 4.7658862876vw, 57px);
--font-58: clamp(34px, 4.8494983278vw, 58px);
--font-59: clamp(35px, 4.9331103679vw, 59px);
--font-60: clamp(35px, 5.016722408vw, 60px);
--font-70: clamp(40px, 5.8528428094vw, 70px);
--content-size-small: clamp(0px, 53.6764705882vw, 730px);
--content-size-medium: clamp(0px, 83.4558823529vw, 1135px);
--content-size-large: min(92vw, 1470px);
--content-size-fluid: 92vw;
}
@media (max-width: 768px) {
:root {
--content-size-small: 90vw;
--content-size-medium: 90vw;
--content-size-large: 90vw;
--content-size-xlarge: 90vw;
}
}  *,
::before,
::after {
box-sizing: border-box;
} ::before,
::after {
text-decoration: inherit; vertical-align: inherit; } html {
-moz-tab-size: 4; -o-tab-size: 4;
tab-size: 4; -webkit-tap-highlight-color: transparent;
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; word-break: break-word; }  body {
margin: 0;
font-size: 16px;
}     hr {
height: 0; overflow: visible; } main {
display: block;
} nav ol,
nav ul {
list-style: none;
padding: 0;
} pre {
font-family: monospace, monospace; font-size: 1em; }  a {
background-color: transparent;
} abbr[title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
} b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace; font-size: 1em; } small {
font-size: 80%;
}  audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
} audio,
video {
display: inline-block;
} audio:not([controls]) {
display: none;
height: 0;
} iframe {
border-style: none;
} img {
border-style: none;
} svg:not([fill]) {
fill: currentColor;
} svg:not(:root) {
overflow: hidden;
}  table {
border-collapse: collapse;
}  button,
input,
select {
margin: 0;
} button {
overflow: visible; text-transform: none; } button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
} fieldset {
border: 1px solid #a0a0a0; padding: 0.35em 0.75em 0.625em; } input {
overflow: visible;
} legend {
color: inherit; display: table; max-width: 100%; white-space: normal; } progress {
display: inline-block; vertical-align: baseline; } select {
text-transform: none;
} textarea {
margin: 0; overflow: auto; resize: vertical; } [type=checkbox],
[type=radio] {
padding: 0;
} [type=search] {
-webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
} ::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
} ::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; } ::-moz-focus-inner {
border-style: none;
padding: 0;
} :-moz-focusring {
outline: 1px dotted ButtonText;
} :-moz-ui-invalid {
box-shadow: none;
}  details {
display: block;
} dialog {
background-color: white;
border: solid;
color: black;
display: block;
height: -moz-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: fit-content;
}
dialog:not([open]) {
display: none;
} summary {
display: list-item;
}  canvas {
display: inline-block;
} template {
display: none;
}  a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] { touch-action: manipulation; } [hidden] {
display: none;
}  [aria-busy=true] {
cursor: progress;
} [aria-controls] {
cursor: pointer;
} [aria-disabled=true],
[disabled] {
cursor: not-allowed;
} [aria-hidden=false][hidden] {
display: initial;
}
[aria-hidden=false][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
html {
cursor: auto;
line-height: 1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
p {
margin: 0;
}
blockquote {
margin: 0;
}
ul,
ol {
margin: 0;
padding-left: 0;
list-style: none;
}
dl,
dd {
margin: 0;
}
hr {
margin: 0;
border: none;
border-top: 1px solid currentColor;
}
pre {
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
rt {
letter-spacing: 0;
}
figure {
max-width: 100%;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
table {
width: 100%;
table-layout: fixed;
}
tbody,
thead {
vertical-align: inherit;
}
th {
margin: 0;
text-align: inherit;
text-align: -webkit-match-parent;
}
td {
padding: 0;
}
label {
display: inline-block;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: inherit;
}
button {
border-radius: 0;
}
button:not(:disabled),
[role=button],
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
cursor: pointer;
}
body {
background: var(--color-white);
font-family: var(--font-sans-b);
line-height: 2.2;
font-weight: 400;
letter-spacing: 0.025em;
color: var(--color-brown);
}
a,
button,
[type=button],
[type=reset],
[type=submit] {
transition-property: opacity;
transition-duration: var(--transition-duration);
transition-timing-function: ease;
cursor: pointer;
}
:not(.-is-ios) a:hover,
:not(.-is-ios) button:hover,
:not(.-is-ios) [type=button]:hover,
:not(.-is-ios) [type=reset]:hover,
:not(.-is-ios) [type=submit]:hover {
opacity: var(--transition-opacity);
}
@media (max-width:767px) {
a:hover{
opacity: 1 !important;
}
}
.sp{
display: none;
}
.sp_no{
display: block;
}
.sp_img{
display: none;
}
.pc_img{
display: block;
}
@media (max-width:767px) {
.sp_img{
display: block;
}
.pc_img{
display: none;
}
}
@media (max-width:560px) {
.sp{
display: block;
}
.sp_no{
display: none;
}
} #loading{
background-color: var(--color-brown-light);
position: fixed;
inset: 0;
z-index: 999999;
display: grid;
place-items: center;
} .header{
z-index: 1;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: clamp(80px, 6.976744186vw, 120px);
padding: 0 clamp(0px, 1.1627906977vw, 20px);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}
@media (max-width:1251px) {
.header{
padding: 0 5px 0 0;
}
}
@media (max-width:990px){
.header{
display: none;
}
}
.header  > .brand{
flex: 0 0 auto;
}
.header  > .brand > a{
display: flex;
align-items: center;
}
.header > .brand > a:hover{
opacity: 1;
}
.header  > .brand > a > h1{
font-size: var(--font-30);
font-weight: bold;
padding-right: 1em;
}
.header > nav{
flex: 1 1 0%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: clamp(0px, 1.7441860465vw, 30px);
}
.nav{
display: flex;
margin: 0;
padding: 0;
line-height: 1;
list-style: none;
gap: clamp(14px, 1.9230769231vw, 23px);
font: 700 var(--font-15)/1 var(--font-sans-b);
letter-spacing: 0;
}
.nav_li{ margin: 0;
}
.nav_li.-typeA{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
line-height: 1.25;
position: relative;
}
.nav_li.-typeA::after{
content: attr(data-text);
color: var(--color-brown);
font-family: var(--font-en);
opacity: 0.6;
font-size: var(--font-12);
padding-top: 5px;
width: 100%;
transition: all .4s;
}
.nav_li.-typeA:hover:after{
transition: all .4s;
color: var(--color-red-b);
}
.header > nav > .nav > a{
display: flex;
justify-content: center;
text-decoration: none;
color: inherit;
white-space: nowrap;
font-size: var(--font-15);
transition: all .4s;
}
@media (max-width:1251px) {
.header > nav > .nav > a{
font-size: var(--font-13);
}
}
.header > nav > .nav > a:hover{
color: var(--color-red-b);
opacity: 1;
transition: all .4s;
}
.header_tel > p{
font-size: var(--font-12);
}
.header_tel > p > a{
font-size: var(--font-20);
font-weight: bold;
}
.header_tel > p > a:hover{
color: var(--color-red-b);
opacity: 1;
}
.tel_icon::before{
content: url(//kanon.rest/wp-content/themes/kanon/assets/img/tel_icon.svg);
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
width: 1em;
position: relative;
top: 3px;
margin-right: 5px;
}
.tel_icon::before:hover{
color: var(--color-red-b);
opacity: 1;
}
.header_contact > a{
background: #523C41;
border-radius: 0 0 10px 10px;
color: #fff;
padding: 20px 10px 15px;
display: block;
position: relative;
top: -10px;
transition: all .4s;
}
.header_contact > a:hover{
opacity: 1;
background: var(--color-red-b);
transition: all .4s;
}
.header_contact > a > p{
font-size: var(--font-12);
text-align: center;
}
.header_contact > a > img{
margin: 0 auto;
padding: 5px 0;
} .g_nav{
display: none;
}
@media (max-width:990px) {
.g_nav{
display: block;
}
}
#g-nav{
position:fixed;
z-index: -1000;
opacity: 0;
top:0;
left: 0;
width:100%;
height: 100vh;
background: var(--color-gray-light);
transition: all 0.3s;
}
.g_nav--container{
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1980px;
margin: 0 auto 5em;
padding: 0 0 0 15px;
}
_::-webkit-full-page-media, _:future, :root .g_nav--container{
margin: 0 auto 5em;
}
#g-nav.panelactive{
opacity: 1;
z-index: 999;
}
#g-nav.panelactive #g-nav-list{
position: fixed;
z-index: 999; 
width:100vw;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#g-nav ul.g-nav-ul {
display: none;  position: absolute;
width: 100%;
z-index: 999;
top:40%;
left:50%;
transform: translate(-50%,-50%);
font-size: 18px;
}
#g-nav ul.g-nav-ul h1{
display: flex;
justify-content: center;
}
#g-nav.panelactive ul {
display: block;
}
#g-nav li{
list-style: none;
text-align: center; 
line-height: 1.5;
}
#g-nav li a{
color: #333;
text-decoration: none;
padding:10px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}
#g-nav-list > .inner > ul.sns_icon{
position: absolute;
z-index: 999;
top: 75%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
}
.openbtn{
position: fixed;
top: 0;
right: 0;
z-index: 9999;
background:var(--color-brown);
cursor: pointer;
width: 70px;
height:70px;
}
.openbtn span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 27%;
height: 2px;
border-radius: 5px;
background: var(--color-white);
width: 45%;
}
.openbtn span:nth-of-type(1) {
top:15px;	
}
.openbtn span:nth-of-type(2) {
top:21px;
}
.openbtn span:nth-of-type(3) {
top:28px;
}
.openbtn span:nth-of-type(3)::after {
content:"Menu";
position: absolute;
top:15px;
left:0;
color: var(--color-white);
font-size: 0.6rem;
text-transform: uppercase;
width: 35px;
}
.openbtn.active span.line:nth-of-type(1) {
top: 20px;
left: 24px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
.openbtn.active span.line:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span.line:nth-of-type(3){
top: 32px;
left: 24px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
.openbtn.active span.line:nth-of-type(3)::after {
content:"Close";
transform: translateY(0) rotate(-45deg);
top:10px;
left:10px;
width: 40px;
}
.header_logo{
width: 100%;
position: absolute;
top: 7px;
right: 0;
}
.header_logo > .brand{
font-size: 25px;
font-weight: bold;
}
.header_logo > .brand >a{
display: flex;
align-items: center;
transition: all .4s;
}
@media (max-width:1365px) {
.header > .brand > a > h1{
font-size: var(--font-25);
}
.header > nav > .nav > .nav_li > a{
font-size: var(--font-12);
}
.nav_li.-typeA::after{
font-size: var(--font-10);
}
.header_tel > p{
font-size: var(--font-10);
}
.header_tel > p > a{
font-size: var(--font-15);
}
.header_contact > a > p{
font-size: var(--font-10);
}
.header_contact > a > img{
width: 20px;
}
.header > nav{
gap: 15px;
}
}
@media (max-width:1101px) {
.header > nav{
gap: 10px;
}
}
@media (max-width:1090px) {
.header > .brand > a > h1{
font-size: var(--font-20);
}
.header > .brand > a > img{
width: 50px;
}
} .home_intro{
margin-top: 5px;
}
.kv_sp{
display: none !important;
}
@media (max-width:690px) {
.home_intro{
height: clamp(336px, 98.4057971014vw, 679px);
max-height: 100%;
}
.kv_sp{
display: block !important;
}
.kv_pc{
display: none !important;
}
.top_slider > .slick-list > .slick-track{
height: clamp(336px, 98.4057971014vw, 679px);
max-height: 100%;
}
} .home_intro .kv_slider {
width:100%;
margin:0 auto;
}
.home_intro .kv_slider img {
width:100%;
height:auto;
}
.home_intro .kv_slider .slick-slide {
margin:0 10px;
}
.home_intro .kv_slick-prev, 
.home_intro .kv_slick-next {
position: absolute;
top: 42%;
cursor: pointer;
outline: none;
border-top: 3px solid var(--color-brown);
border-right: 3px solid var(--color-brown);
height: 15px;
width: 15px;
z-index: 10;
}
.home_intro .kv_slick-prev {
left: 9.5%;
transform: rotate(-135deg);
}
.home_intro .kv_slick-next {
right: 9.5%;
transform: rotate(45deg);
}
.home_intro .slick-dots {
margin: 0 auto;
display: none !important;
}
.home_intro .slick-dots li {
display:inline-block;
margin:0 5px;
}
.home_intro .slick-dots button {
color: transparent;
outline: none;
width:0px;
height:10px;
display:block;
border-radius:50%;
background:#ccc;
border: none;
}
.home_intro .slick-dots .slick-active button{
background: var(--color-brown);
}
@media (max-width:690px) {
.home_intro .kv_slider .slick-slide{
margin: 0 5px;
}
.home_intro .kv_slick-prev, .home_intro .kv_slick-next{
display: none !important;
}
} .home_worries{
background: var(--color-brown-light);
margin-top: clamp(30px, 4.6511627907vw, 80px);
padding: 0 clamp(0px, 4.6511627907vw, 80px);
max-height: 564px;
}
.worries_wrap{
display: flex;
justify-content: space-around;
gap: 2em;
}
.worries_txt{
margin-top: clamp(30px, 6.976744186vw, 120px);
text-align: center;
margin-bottom: 30px;
}
.worries_txt > h2{
text-align: center;
font-size: var(--font-25);
font-weight: bold;
}
.worries_txt > h2::before{
content: "";
transform: rotate(45deg);
width: clamp(20px, 2.3255813953vw, 40px);
display: inline-block;
border-top: 1px solid var(--color-brown);
vertical-align: middle;
}
.worries_txt > h2::after{
content: "";
transform: rotate(-45deg);
width: clamp(20px, 2.3255813953vw, 40px);
display: inline-block;
border-top: 1px solid var(--color-brown);
vertical-align: middle;
}
.worries_txt > p{
margin-top: clamp(20px, 2.9069767442vw, 50px);
display: flex;
justify-content: center;
text-align: left;
font-size: var(--font-18);
}
.worries_txt > p:first-of-type{
padding: 0 1em;
}
.action{
margin-top: clamp(20px, 3.3139534884vw, 57px);
}
.action > a{
background: var(--color-white);
border: 1px solid var(--color-brown);
padding: 15px clamp(30px, 5.4069767442vw, 93px);
border-radius: 10px;
display: inline-flex;
align-items: center;
}
.worries_img > img{
margin-top:clamp(20px, 2.3255813953vw, 40px);
margin-bottom: 1em;
width: clamp(300px, 51.3372093023vw, 883px);
border-radius: 10px;
}
@media (max-width:960px) {
.worries_wrap{
flex-direction: column-reverse;
}
.home_worries{
max-height: 100%;
}
.worries_img > img{
width: 80%;
margin: 1em auto 0;
}
.worries_txt{
margin-top: 0;
}
.action > a{
padding: 13px 80px;
}
.worries_txt > p{
font-size: 18px;
}
}
@media (max-width:768px) {
.worries_img > img{
width: 90%;
}
.worries_txt > h2{
font-size: var(--font-28);
}
}
@media (max-width:560px){
.home_worries{
padding: 0;
}
.action > a:hover{
opacity: 1;
}
} .home_about{
margin: clamp(80px, 6.976744186vw, 120px) 0;
padding: 0 clamp(0px, 10.4651162791vw, 180px);
}
.top_tlt{
text-align: center;
}
.top_tlt > p > img{
margin: 0 auto;
max-width: 64px;
width: 64px;
}
.top_tlt > p::after{
content: attr(data-text);
color: var(--color-brown);
font-family: var(--font-en);
opacity: 0.6;
font-size: var(--font-15);
position: relative;
bottom: 10px;
}
.top_tlt > h2{
font-size: 30px;
font-weight: bold;
display: inline-block;
position: relative;
z-index: 1;
}
.top_tlt > h2::after{
content: "";
border-bottom: 10px solid var(--color-yellow);
width: 100%;
display: block;
position: relative;
bottom: 25px;
z-index: -10;
border-radius: 10px;
}
.about_list{
display: flex;
justify-content: space-around;
margin-top: clamp(30px, 4.0697674419vw, 70px);
gap: 1em;
}
.about_list--content > img{
border-radius: 10px;
}
.about_list--content > p{
text-align: center;
margin-top: clamp(10px, 1.1627906977vw, 20px);
}
.about > .action{
text-align: center;
margin-top: clamp(30px, 3.488372093vw, 60px);
}
.about > .action > a{
background: var(--color-brown);
color: var(--color-white);
}
@media (max-width:960px) {
.home_about{
padding: 1em;
}
}
@media (max-width:767px) {
.home_about{
margin: 50px 0;
}
.about_list{
flex-direction: column;
}
.about_list--content > img{
width: 90%;
margin: 0 auto;
}
.home_about{
padding: 0 clamp(0px, 4.6511627907vw, 80px);
}
.top_tlt > h2{
font-size: var(--font-40);
}
}
@media (max-width:560px){
.home_about{
padding: 0;
}
} .home_feature{
background: url(//kanon.rest/wp-content/themes/kanon/assets/img/feature.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.feature{
max-width:var(--content-size-medium);
margin: clamp(30px, 3.488372093vw, 60px) auto 0;
padding: clamp(30px, 3.488372093vw, 60px) 0 clamp(80px, 6.976744186vw, 120px);
}
.feature_tlt{
text-align: center;
}
.feature_tlt > p > img{
margin: 0 auto;
}
.feature_tlt > p::after{
content: attr(data-text);
color: var(--color-white);
font-family: var(--font-en);
font-size: var(--font-15);
position: relative;
bottom: 10px;
}
.feature_tlt > h2{
font-size: var(--font-30);
font-weight: bold;
display: inline-block;
position: relative;
z-index: 10;
}
.feature_tlt > h2::after{
content: "";
border-bottom: 10px solid var(--color-yellow);
width: 100%;
display: block;
position: relative;
bottom: 25px;
z-index: -10;
}
.feature_body{
margin-top: 70px;
}
.feature_body .c_row{
--c_row-gutter-x: 30px;
--c_row-gutter-y: 80px;
display: flex;
flex-wrap: wrap;
margin: calc(var(--c_row-gutter-y) / 2 * -1) calc(var(--c_row-gutter-x) / 2 * -1);
padding: 0;
list-style: none;
}
.feature_body .col{
flex: 1 1 0%;
display: flex;
flex-direction: column;
padding: calc(var(--c_row-gutter-y, 0) / 2) calc(var(--c_row-gutter-x, 0) / 2);
flex-basis: 50%;
max-width: 50%;
align-items: center;
}
.feature_body .c_card{
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 100%;
word-wrap: break-word;
padding: 0 clamp(22px, 2.5735294118vw, 35px) clamp(31px, 3.6764705882vw, 50px);
background: var(--color-white);
border-radius: 10px;
align-items: center;
}
.feature_body .c_card > img{
position: relative;
bottom: 3em;
}
.feature_body .c_card > h2{
font-size: var(--font-24);
font-weight: bold;
margin-bottom: 3em;
margin-top: -1em;
z-index: 1;
}
.feature_body .c_card > h2::after{
content: "";
border-bottom: 10px solid var(--color-yellow);
width: 100%;
display: block;
position: relative;
bottom: 25px;
z-index: -1;
}
.feature_body .c_card > p{
font-size: var(--font-16);
}
.feature_body .c_card > .action > a{
background: var(--color-brown);
color: var(--color-white);
}
@media (max-width:767px) {
.feature_body .col{
flex-basis: 100%;
max-width: 100%;
}
.feature_body .c_card > h2{
font-size: var(--font-30);
}
.feature_body .feature_tlt > h2{
font-size: var(--font-40);
}
.feature_body .c_card > p{
font-size: 16px;
}
} .page-container > .title > .heading.-news::after{
content: "NEWS";
display: block;
font-size: 18px;
color: var(--color-white);
font-family: var(--font-en);
position: relative;
bottom: 4em;
}
.home_news{
padding:  0 clamp(0px, 10.4651162791vw, 180px);
margin: clamp(80px, 6.976744186vw, 120px) 0;
}
.news_body{
flex-direction: column;
display: flex;
align-items: center;
}
.c_archiveList{
width: 80%;
}
@media (max-width:767px) {
.c_archiveList{
width: 100%;
}
}
.c_archiveList >li{
border-bottom: 1px solid var(--color-brown);
}
.c_archiveList > li > a{
display: flex;
padding: clamp(19px, 2.2058823529vw, 30px) clamp(50px, 5.8823529412vw, 80px);
}
.c_archiveList > li > a > .date{
flex: 0 0 9em;
max-width: 9em;
}
.c_archiveList > li > a > .title{
font-weight: 700;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
flex: 1 1 0%;
margin-top: 0;
}
@media (max-width:767px) {
.home_news{
padding: 0 clamp(0px, 4.6511627907vw, 80px);
}
.c_archiveList > li > a{
padding: clamp(19px, 2.2058823529vw, 30px) 0;
}
}
@media (max-width:560px) {
.c_archiveList > li > a{
display: block;
}
} .service{
display: flex;
}
.service_item{
position: relative;
}
.service_item > a:hover{
opacity: 1;
}
.btnarrow4{
position: relative;
display: inline-block;
color: #fff;
text-decoration: none;
outline: none;
}
.btnarrow4::before{
content: '';
position: absolute;
bottom: clamp(20px, 2.3255813953vw, 40px);
right: 8%;
width: 15%;
height: 1px;
background: #fff;
transition: all .3s;
}
.btnarrow4::after{
content: '';
position: absolute;
bottom:clamp(25px, 2.9069767442vw, 50px);
right: 7.5%;
width: 6%;
height: 1px;
background: #fff;
transform: rotate(35deg);
transition: all .3s;
}
.btnarrow4:hover::before{
right: 5%;
}
.btnarrow4:hover::after{
right: 4%;
}
.service_tlt{
position: absolute;
top: 40%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
font-size: var(--font-38);
color: var(--color-white);
text-align: center;
text-shadow: 3px 2px 4px #00000073;
}
.service_tlt::before{
content: attr(data-text);
color: var(--color-white);
font-size: var(--font-15);
display: flex;
position: relative;
justify-content: center;
top: 2em;
margin-bottom: 1em;
}
@media (max-width:767px) {
.service_tlt{
font-size: var(--font-25);
}
.service_tlt::before{
font-size: var(--font-12);
}
.btnarrow4:hover::before{
right: 8%;
}
.btnarrow4:hover::after{
right: 7.5%;
}
}
@media (max-width:560px) {
.service{
flex-direction: column;
}
.service_tlt {
font-size: 30px;
}
.service_tlt::before{
font-size: 16px;
}
.btnarrow4::before{
width: 25%;
bottom: 50px;
right: 10%;
}
.btnarrow4::after{
bottom: clamp(60px, 3.7790697674vw, 65px);
right: 9%;
width: 10%;
}
.btnarrow4:hover::before{
right: 10%;
}
.btnarrow4:hover::after{
right: 9%;
}
} .home_voice{
max-width: clamp(0px, 75.5813953488vw, 1300px);
margin: 0 auto;
padding: clamp(30px, 3.488372093vw, 60px) 0;
}
@media (max-width:1300px) {
.home_voice{
max-width: var(--content-size-large);
}
} .voice > .c_row{
--c_row-gutter-x: 30px;
--c_row-gutter-y: 80px;
display: flex;
flex-wrap: wrap; list-style: none;
}
.col.-voice{
flex: 1 1 0%;
display: flex;
flex-direction: column;
padding: calc(var(--c_row-gutter-y, 0) / 2) 0;
flex-basis: 33.333333%;
max-width: 33.333333%;
align-items: center;
}
.c_card.-voice{
position: relative;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
word-wrap: break-word;
padding: clamp(31px, 3.6764705882vw, 50px) clamp(10px, 1.7441860465vw, 30px) clamp(31px, 3.6764705882vw, 50px);
background: var(--color-white);
border-radius: 10px;
align-items: flex-start;
box-shadow: 2px 8px 15px 0px rgb(35 37 38 / 18%), -10px -10px 30px rgba(248, 253, 255, 0.9), inset 10px 10px 30px transparent, inset -10px -10px 30px transparent;
}
.c_card.-voice > h3{
font-family: var(--font-sans);
font-size: var(--font-14);
font-weight: bold;
border: 1px solid var(--color-brown);
padding: 0 5px;
margin-bottom: 15px;
}
.voice_content{
font-size: var(--font-16);
font-family: var(--font-sans);
text-decoration: dotted 1px;
text-decoration-line: underline;
text-decoration-color: var(--color-brown);
text-underline-offset: 12px;
line-height: 2.5;
}
@media (max-width:767px) {
.voice_content{
font-size: 16px;
}
}
.voice_age{
margin-top: 1em;
text-align: right;
font-family: var(--font-sans);
} .home_voice .slider { width:100%;
margin:0 auto;
}
.home_voice .slider img {
width:100%; height:auto;
} .home_voice .slider .slick-slide {
margin:0 10px;
}  .home_voice .slick-prev, 
.home_voice .slick-next {
position: absolute; top: 42%;
cursor: pointer; outline: none; border-top: 2px solid #666; border-right: 2px solid #666; height: 15px;
width: 15px;
}
.home_voice .slick-prev { left: -2.5%;
transform: rotate(-135deg);
}
.home_voice .slick-next { right: -2.5%;
transform: rotate(45deg);
} .home_voice .slick-dots {
margin: 0 auto;
}
.home_voice .slick-dots li {
display:inline-block;
margin:0 5px;
}
.home_voice .slick-dots button {
color: transparent;
outline: none;
width:11px; height: 11px; display:block;
border-radius:50%;
background:#ccc; border: none;
}
@media (max-width:767px) {
.home_voice .slick-dots button{
width:100%;
height:11px;
max-width: 8px;
}
}
.home_voice .slick-dots .slick-active button{
background: var(--color-brown); } .home_column{
background: var(--color-brown-light);
}
.column{
max-width: var(--content-size-large);
margin: 0 auto clamp(80px, 6.976744186vw, 120px);
padding: clamp(30px, 3.488372093vw, 60px) 0 clamp(40px, 4.6511627907vw, 80px);
}
.list {
display: flex;
flex-wrap: wrap;
margin: -20px;
padding: clamp(30px, 3.488372093vw, 60px) 0;
}
.list > .item {
width: 25%;
padding: 20px;
z-index: 20;
}
@media (max-width: 768px) {
.list > .item {
width: 50%;
padding: clamp(50px, 13.037809648vw, 100px) 5px;
}
}
@media (max-width: 450px) {
.list > .item {
width: 100%;
}
}
.list > .item > .article {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
}
.list > .item > .article::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
background: #fff;
transform: translate(-50%, -50%);
z-index: -20;
}
.list > .item > .article > .title {
display: flex;
align-items: center;
height: 30px;
font-size: var(--font-20);
line-height: 1.5;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-bottom: 0.5em;
}
.list > .item > .article > .media {
width: 80%;
max-width: 120px;
aspect-ratio: 1/1;
}
@media (max-width:930px) {
.list > .item > .article > .media{
max-width: 100px;
}
.list > .item > .article > .title{
margin-bottom: 0;
font-size: 20px;
}
}
@media (max-width: 768px) {
.list > .item > .article > .media{
max-width: 120px;
}
.list > .item > .article::before {
width: clamp(200px, 39.1134289439vw, 300px);
}
}
@media (max-width: 450px) {
.list > .item > .article::before{
width: 240px;
}
}
.list > .item > .article > .media > img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
} #map_canvas{
height: 450px !important;
} .footer_reserve{
display: flex;
justify-content: center;
align-items: center;
background: var(--color-brown-light);
padding: clamp(20px, 2.3255813953vw, 40px) 1em;
}
.reserve_txt{
margin-right: clamp(80px, 6.976744186vw, 120px);
}
.reserve_txt > p{
font-size: var(--font-25);
font-weight: bold;
}
.reserve_txt > p::before{
content: attr(data-text);
font-size: var(--font-15);
font-weight: bold;
display: flex;
justify-content: center;
position: relative;
top: 1em;
}
.reserve_tel > p > .reserve_tel-icon{
font-size: 30px;
font-weight: bold;
}
.reserve_tel > p > .reserve_tel-icon::before{
content: url(//kanon.rest/wp-content/themes/kanon/assets/img/footer_telicon.svg);
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
width: 1em;
vertical-align: middle;
}
.reserve_tel > p{
font-size: var(--font-20);
font-weight: bold;
}
.reserve_tel > p:last-of-type{
font-size: var(--font-16);
}
@media (max-width:767px) {
.footer_reserve{
flex-direction: column;
}
.reserve_txt{
margin-right: 0;
}
.reserve_tel{
text-align: center;
}
.reserve_tel > p{
font-size: 13px;
}  
}
.footer{
background: url(//kanon.rest/wp-content/themes/kanon/assets/img/footer_img.jpg);
background-repeat: no-repeat;
background-size: cover;
padding: clamp(80px, 6.976744186vw, 120px) 1em clamp(50px, 5.8139534884vw, 100px);
color: var(--color-white);
display: flex;
justify-content: center;
}
.footer_content{
margin-right: clamp(0px, 6.976744186vw, 120px);
}
.footer_content > p{
font-size: var(--font-15);
margin-left: 2em;
}
.footer_content > .sns_icon{
display: flex;
margin-top: 13px;
margin-left: 2em;
gap: 1em;
}
.footer > .footer_content > .brand{
flex: 0 0 auto;
}
.footer > .footer_content > .brand > a{
display: flex;
align-items: center;
}
.footer > .footer_content > .brand > a:hover{
opacity: 1;
}
.footer > .footer_content  > .brand > a > h1{
font-size: var(--font-30);
font-weight: bold;
}
.footer_menu{
margin-top: clamp(10px, 1.7441860465vw, 30px);
}
.footer_menu > .nav{
display: flex;
font-size: 16px;
line-height: 2.2;
}
.footer_menu > .nav > ul:first-of-type{
margin-right: clamp(30px, 4.0697674419vw, 70px);
}
.footer_menu > .nav > ul > li > a{
transition: all .4s;
}
.footer_menu > .nav > ul > li > a:hover{
opacity: 1;
color: #ff6989;
transition: all .4s;
}
.footer_menu > .nav > ul > li > a::before{
--icon-width: 2px;
--icon-color: #fff;
content: "";
display: inline-block;
box-sizing: border-box;
width: 10px;
height: 10px;
border-style: solid;
border-width: var(--icon-width) var(--icon-width) 0 0;
border-color: var(--icon-color);
transform: rotate(45deg);
margin-right: 20px;
transition: all .4s;
}
.footer_menu > .nav > ul > li > a:hover:before{
transform: rotate(46deg) translateX(3px) translateY(-3px);
transition: all .5s;
}
.sp_footer{
display: none;
}
.copy{
padding: 18px 1em;
}
.copy > p{
font-size: 12px;
font-family: var(--font-sans);
text-align: center;
}
@media (max-width:767px) {
footer{
padding-bottom: 60px;
}
.footer{
display: none;
}
.sp_footer{
display: block;
position: fixed;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 72px;
z-index: 100000;
align-items: flex-end;
}
.sp_footer-contact{
background-color: var(--color-brown);
width: 50%;
padding: 10px 0;
color: #fff;
text-align: center;
}
.sp_footer-contact > a{
color: #fff;
font-size: var(--font-20);
font-weight: bold;
position: relative;
padding-left: 40px;
}
.sp_footer-contact > a > img{
position: absolute;
width: 30px;
height: auto;
left: 0;
top: 2px;
}
.sp_footer-tel{
background: var(--color-brown-light);
width: 50%;
padding: 10px 0;
color: #fff;
text-align: center;
}
.sp_footer-tel > a{
color: var(--color-brown);
font-size: var(--font-20);
font-weight: bold;
position: relative;
padding-left: 40px;
}
.sp_footer-tel > a > img{
position: absolute;
width: 20px;
height: auto;
left: 10px;
top: 0;
}
} .page-container > .title { position: relative;
}
.page-container > .title > img{
height: clamp(300px, 20.3488372093vw, 350px);
width: 100%;
object-fit: cover;
}
.page-container > .title > .heading {
max-width: var(--content-size-large);
margin: 0 auto;
font: 700 var(--font-30)/1.375 var(--font-sans-b);
font-size: 35px;
color: var(--color-white);
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
text-shadow: 0px 4px 2px #00000073;
}
.page-container > .title > .heading::before {
content: url(//kanon.rest/wp-content/themes/kanon/assets/img/logo.svg);
display: block;
position: relative;
bottom: 0.3em;
transform: scale(0.7);
}
.page-container > .title > .heading.-about::after{
content: "ABOUT US";
display: block;
font-size: 18px;
color: var(--color-white);
font-family: var(--font-en);
position: relative;
bottom: 4em;
}
@media (max-width:767px) {
.page-container > .title > .heading{
font-size: 26px;
width: 100%;
}
}
.page-container > .breadcrumb {
max-width: var(--content-size-large);
margin: 0 auto;
padding-top: 25px;
}
.page-container > .body {
padding: clamp(80px, 6.976744186vw, 120px) 0 clamp(80px, 8.7209302326vw, 150px);
}
.archive-container {
max-width: var(--content-size-medium);
margin: 0 auto;
}
.archive-container > .archive-category {
margin-bottom: clamp(25px, 2.9411764706vw, 40px);
}
.archive-container > .pagination {
margin-top: clamp(47px, 5.5147058824vw, 75px);
text-align: center;
}
.archive-container > .pagination > .wp-pagenavi > .current{
border: 1px solid var(--color-brown);
color: var(--color-white);
background-color: var(--color-brown);
padding: 5px 8px;
margin-right: 5px;
}
.archive-container > .pagination > .wp-pagenavi > .page{
border: 1px solid var(--color-brown);
color: var(--color-brown);
padding: 5px 8px;
margin-right: 5px;
}
.archive-category {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
font-size: var(--font-13);
line-height: 1.25;
}
.archive-category > li > a {
display: block;
padding: 0.375em 1em;
border: 2px solid var(--color-brown);
color: var(--color-brown);
}
.archive-category > li > a.-current {
background: var(--color-brown);
color: var(--color-white);
}
.single-container {
max-width: var(--content-size-medium);
margin: 0 auto;
}
.single-article {
padding: 0 clamp(63px, 7.3529411765vw, 100px) 0;
background: var(--color-white);
color: var(--color-black);
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(38px, 4.4117647059vw, 60px)), calc(100% - clamp(38px, 4.4117647059vw, 60px)) 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(38px, 4.4117647059vw, 60px)), calc(100% - clamp(38px, 4.4117647059vw, 60px)) 100%, 0 100%);
}
@media (max-width: 768px) {
.single-article {
padding: 0;
}
}
.single-article > .single-header {
padding-bottom: clamp(16px, 1.8382352941vw, 25px);
border-bottom: 1px dotted var(--color-red-b);
}
.single-article > .single-header > .heading {
font: 700 var(--font-27)/1.5 var(--font-sans-b);
font-size: 27px;
text-align: justify;
word-break: break-all;
}
.single-article > .single-header > .single-headerData {
margin-top: clamp(9px, 1.1029411765vw, 15px);
}
.single-article > .body {
margin-top: clamp(38px, 4.4117647059vw, 60px);
}
.single-article > .single-footer {
margin-top: clamp(44px, 5.1470588235vw, 70px);
}
.single-article > .single-footer > .c-pager {
margin-top: clamp(16px, 1.8382352941vw, 25px);
}
.single-headerData {
display: flex;
flex-wrap: wrap;
font-size: 14px;
line-height: 1.25;
color: var(--color-brown);
}
.single-headerData > li:not(:last-child)::after {
content: "/";
margin: 0 0.75em;
}
.single-headerCategory {
display: flex;
flex-wrap: wrap;
}
.single-headerCategory > li:not(:last-child)::after {
margin: 0 0.25em 0 0.125em;
content: ",";
}
.single-footerShare {
padding: clamp(19px, 2.2058823529vw, 30px);
background: var(--color-brown-light);
text-align: center;
}
.single-footerShare > .heading {
margin-bottom: 0.75em;
font-weight: 700;
font-size: var(--font-15);
}
.c-pager {
--c-pager-gap: 2em;
--c-pager-font-weight: 500;
--c-pager-font-size: var(--font-13);
--c-pager-font-family: var(--font-sans);
--c-pager-line-height: 1.5;
--c-pager-color: var(--color-black-light);
--c-pager-a-text-decoration: underline;
}
.c-pager {
display: flex;
justify-content: center;
align-items: center;
gap: var(--c-pager-gap);
line-height: var(--c-pager-line-height);
font-weight: var(--c-pager-font-weight);
font-size: var(--c-pager-font-size);
font-family: var(--c-pager-font-family);
color: var(--c-pager-color);
}
.c-pager > .prev,
.c-pager > .next {
flex: 1 1 0%;
}
.c-pager > .next {
text-align: right;
}
.c-pager > .back {
flex: 0 0 auto;
}
.c-pager > .prev a,
.c-pager > .next a {
display: inline-flex;
align-items: center;
-webkit-text-decoration: var(--c-pager-a-text-decoration);
text-decoration: var(--c-pager-a-text-decoration);
}
.c-pager > .prev a::before {
flex: 0 0 auto;
}
.c-pager > .back a {
text-align: center;
}
.c-pager > .next a {
text-align: right;
}
.c-pager > .next a::after {
flex: 0 0 auto;
}
.c-pager .prev > a,
.c-pager .next > a {
gap: 0.5em;
}
.c-pager .prev > a::before,
.c-pager .next > a::after {
content: "";
width: 1em;
height: 1em;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) no-repeat center/cover;
mask: var(--icon-arrow-right) no-repeat center/cover;
}
.c-pager .prev > a::before {
transform: rotate(180deg);
} .c-breadcrumb {
--c-breadcrumb-font-size: var(--font-16);
--c-breadcrumb-line-height: 1.375;
--c-breadcrumb-color: var(--color-brown);
--c-breadcrumb-divider-size: .875em;
--c-breadcrumb-divider-margin-x: .75em;
--c-breadcrumb-divider-color: currentColor;
--c-breadcrumb-divider-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-miterlimit='10' d='M6 3.5l5 4.5-5 4.5'/%3e%3c/svg%3e");
}
.c-breadcrumb {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
line-height: var(--c-breadcrumb-line-height);
font-size: var(--c-breadcrumb-font-size);
color: var(--c-breadcrumb-color);
}
@media (max-width:767px) {
.c-breadcrumb{
font-size: 15px;
line-height: 2;
}
}
.c-breadcrumb > li {
display: flex;
align-items: center;
padding-right: var(--c-breadcrumb-divider-margin-x);
}
.c-breadcrumb > li:not(:last-child)::after {
content: "";
flex: 0 0 auto;
width: var(--c-breadcrumb-divider-size);
height: var(--c-breadcrumb-divider-size);
background-color: var(--c-breadcrumb-divider-color);
margin-left: var(--c-breadcrumb-divider-margin-x);
-webkit-mask: var(--c-breadcrumb-divider-image) no-repeat center center/contain;
mask: var(--c-breadcrumb-divider-image) no-repeat center center/contain;
}
.c-breadcrumb > li > a {
text-decoration: underline;
}
.c-row.-archive-list {
--c-row-gutter-x: clamp(41px, 4.7794117647vw, 65px);
--c-row-gutter-y: clamp(50px, 5.8823529412vw, 80px);
}
.c-row {
display: flex;
flex-wrap: wrap; padding: 0;
list-style: none;
}
.c-row.-one > .col {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
@media (max-width: 768px){
.c-row.-md-three > .col {
flex-basis: 50%;
max-width: 50%;
}
}
@media (max-width: 560px){
.c-row.-sm-two > .col {
flex-basis: 100%;
max-width: 100%;
}
}
.c-row > .col {
flex: 1 1 0%;
display: flex;
flex-direction: column;
padding: calc(var(--c-row-gutter-y, 0) / 2) calc(var(--c-row-gutter-x, 0) / 2);
}
.c-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
line-height: 1;
color: inherit;
word-wrap: break-word;
}
.c-card.-home-works > .media,.c-card.-archive-list > .media {
aspect-ratio: 335/250;
}
.c-card > .media {
overflow: hidden;
position: relative;
flex: 0 0 auto;
width: 100%;
margin: 0;
}
.c-card > .media > img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.c-card > .body {
flex: 1 1 0%;
}
.c-card.-archive-list > .body > .title{
margin-top: 0.625em;
font: 700 var(--font-16)/1.625 var(--font-sans-b);
text-align: justify;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.archive_category{
display: flex;
margin-top: 10px;
}
.archive_category > li{
border: 1px solid var(--color-brown);
color: var(--color-brown);
font-size: var(--font-15);
padding: 0.375em 1em;
}
.archive_category > li + li{
margin-left: 5px;
}
.archive_category > li:first-of-type{
display: none;
}
.c-card.-archive-list > .body > .date{
margin-top: 10px;
} .aboutus{
padding: 0 clamp(0px, 10.4651162791vw, 180px);
}
.aboutus_wrap{
display: flex;
justify-content: center;
gap: 3em;
margin-bottom: clamp(30px, 6.976744186vw, 120px);
}
.aboutus_img > img{
border-radius: 10px;
}
.aboutus_wrap > .aboutus_profile{
width: 60%;
}
.aboutus_profile > h2{
font-size: var(--font-24);
}
.aboutus_profile > .h2_after{
font-size: var(--font-14);
line-height: 1;
margin-bottom: 30px;
}
.aboutus_list{
display: flex;
gap: 1em;
margin-top: 40px;
font-size: var(--font-15);
}
.aboutus_list > .profile{
width: 50%;
background: var(--color-brown-light);
border-radius: 10px;
padding: 0  clamp(0px, 1.1627906977vw, 20px) clamp(0px, 1.7441860465vw, 30px);
}
.aboutus_list > .profile > h3{
font-size: var(--font-16);
text-align: center;
font-weight: bold;
position: relative;
bottom: 1em;
}
.aboutus_list > .profile th{
width: 30%;
}
.aboutus_list > .qualification{
width: 50%;
background: var(--color-brown-light);
border-radius: 10px;
padding: 0  clamp(0px, 1.1627906977vw, 20px) clamp(0px, 1.7441860465vw, 30px);
}
.aboutus_list > .qualification > h3{
font-size: var(--font-16);
text-align: center;
font-weight: bold;
position: relative;
bottom: 1em;
}
@media (max-width:1350px) {
.aboutus_wrap > .aboutus_profile{
width: 100%;
}
}
@media (max-width:1096px) {
.aboutus_wrap{
gap: 1.5em;
}
}
@media (max-width:995px) {
.aboutus_wrap{
flex-wrap: wrap;
}
.aboutus_list > .profile{
padding: 0 30px 30px;
}
.aboutus_list > .qualification{
padding: 0 30px 30px;
}
.aboutus_list{
font-size: 16px;
}
}
@media (max-width:900px) {
.aboutus_list{
flex-wrap: wrap;
justify-content: center;
font-size: var(--font-20);
gap: 3em;
}
.aboutus_list > .profile{
width: 90%;
padding: 0 clamp(0px, 11.1111111111vw, 100px) 30px clamp(0px, 11.1111111111vw, 100px);
}
.aboutus_list > .profile > h3{
font-size: var(--font-30);
}
.aboutus_list > .qualification{
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 clamp(0px, 11.1111111111vw, 100px) 30px clamp(0px, 11.1111111111vw, 100px);
}
.aboutus_list > .profile th{
text-align: right;
padding-right: 2em;
}
.aboutus_list > .qualification > h3{
font-size: var(--font-30);
}
}
@media (max-width:767px) {
.aboutus{
padding: 0 clamp(0px, 4.6511627907vw, 80px);
}
.aboutus_list{
font-size: 16px;
}
.aboutus_list > .profile{
padding: 0 .5em 2em;
}
.aboutus_list > .profile th{
padding-right: 1em;
}
.aboutus_list > .qualification{
padding: 0 1em 30px;
}
}
.leaves-container{
padding-top: clamp(30px, 4.6511627907vw, 80px);
background: var(--color-brown-light);
position: relative;
width: 100%; }
.thought_txt{
text-align: center;
}
.thought_txt > h2{
font-size: var(--font-30);
font-weight: bold;
display: inline-block;
position: relative;
z-index: 1;
}
@media (max-width:767px) {
.thought_txt > h2{
font-size: var(--font-40);
}
}
.thought_txt > h2::after{
content: "";
border-bottom: 10px solid var(--color-yellow);
width: 100%;
display: block;
position: relative;
bottom: 25px;
z-index: -1;
}
.thought_txt > h2::before{
content: attr(data-text);
display: block;
font-size: var(--font-18);
position: relative;
top: 0.7em;
opacity: .6;
}
.thought_txt > p{
font-size: var(--font-20);
}
.thought_item{
display: flex;
justify-content: center;
gap: 2em;
position: relative;
top: clamp(30px, 3.488372093vw, 60px);
}
.thought_img > img{
border-radius: 10px;
} .leaf {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
animation: animate-leaf 8s linear;
}
.leaf_01 {
background-image: url(https://kanon.rest/wp-content/themes/kanon/assets/img/leaf_01.svg); 
} @keyframes animate-leaf {
0% {
opacity: 0;
top: 0;
transform: rotate(0);
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
top: 100vh;
transform: rotate(1080deg);
}
}
@media (max-width:560px) {
.thought_item{
gap: .5em;
}
.thought_txt > p{
font-size: 16px;
text-align: left;
}
}
.facility{
padding-top: clamp(80px, 11.6279069767vw, 200px);
margin-bottom: clamp(30px, 6.976744186vw, 120px);
}
.facility_content{
margin-top: clamp(30px, 3.488372093vw, 60px);
}
.facility_item{
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 3.488372093vw, 60px);
}
.facility_item.-reverse{
flex-direction:row-reverse;
margin-top: 50px;
}
.facility_item > img{
border-radius: 10px;
width: 50%;
}
.facility_item--txt{
display: flex;
flex-direction: column;
align-items: center;
width: 45%;
}
.facility_item--txt> h2{
font-size: 25px;
font-weight: bold;
}
@media (max-width:590px) {
.facility_item,
.facility_item.-reverse{
flex-direction: column;
}
.facility_item > img{
width: 100%;
}
.facility_item--txt{
width: 100%;
}
}
.guidance{
padding-top: clamp(30px, 6.976744186vw, 120px);
background: var(--color-brown-light);
}
.guidance_img{
display: flex;
justify-content: center;
gap: clamp(10px, 1.7441860465vw, 30px);
}
.guidance_img.-sp{
display: none;
}
.guidance_img--item > h3{
text-align: center;
font-size: 20px;
font-weight: bold;
}
.guidance_img--item > img{
border-radius: 10px;
}
.guidance_img--content{
display: flex;
justify-content: center;
gap: 10px;
position: relative;
top: 40px;
max-width: 1290px;
margin: 0 auto;
}
.guidance_img--content > img{
width: 25%;
object-fit: cover;
border-radius: 10px;
}
@media (max-width:560px) {
.guidance_img.-pc{
display: none;
}
.guidance_img.-sp{
display: block;
}
.guidance_img.-sp > .guidance_img--item >img{
margin-bottom: 1em;
}
.guidance_img--content.-pc{
display: none;
}
.guidance_img--item.-topMarg{
margin-top: 3em;
}
}
.overview{
padding-top: clamp(30px, 6.976744186vw, 120px);
}
.overview_list{
max-width: 680px;
margin: 0 auto;
}
.overview_list table tr{
border-bottom: 1.5px dotted var(--color-brown);
}
.overview_list table th{
width: 20%;
font-weight: normal;
padding: 10px 0 10px 1em;
}
.overview_list table td{
padding: 10px 0 10px 1em;
line-height: 1.6;
}
.overview_list > p{
margin-top: clamp(10px, 1.7441860465vw, 30px); }
.overview_btn{
display: flex;
justify-content: center;
gap: clamp(30px, 3.488372093vw, 60px);
margin-top: clamp(30px, 3.488372093vw, 60px);
}
.overview_tel--action,
.overview_map--action{
margin-top: 0;
}
.overview_tel--action > a{
background: var(--color-brown);
color: var(--color-white);
border-radius: 50px;
padding: 15px 80px;
font-weight: 700;
transition: all .3s;
}
.overview_tel--action > a:hover{
opacity: 1;
transform: translateY(2px);
}
.overview_map--action > a{
border-radius: 50px;
padding: 15px 28px;
font-weight: 700;
transition: all .3s;
}
.overview_map--action > a:hover{
opacity: 1;
transform: translateY(2px);
}
@media (max-width:560px) {
.overview_btn{
flex-direction: column;
align-items: center;
}
}
.about_bnr{
padding-top: 50px;
}
.bnr_wrap{
text-align: center;
}
.bnr_wrap--item{
position: relative;
}
.btn_anim > img{
position: absolute;
display: inline-block;
bottom: 0;
left: 65%;
z-index: 10;
}
.bnr_wrap--item.-column > .btn_anim > img{
left: 69%;
}
@media (max-width:767px) {
.btn_anim > img{
left: 58;
}
.bnr_wrap--item.-column > .btn_anim > img{
left: 63%;
}
}
.bnr_wrap--item > a{
padding: 49px clamp(168px, 11.9186046512vw, 205px) 49px clamp(60px, 10.8720930233vw, 187px);
font-size: var(--font-20);
font-weight: bold;
}
.bnr_wrap--item > a.btn_anim{
position: relative;
z-index: 1;
overflow: hidden;
transition: .3s;
}
.bnr_wrap--item > a.btn_anim::before{
content: "";
width: 120%;
height: 200%;
position: absolute;
top: -50%;
right: 0;
z-index: -1;
background: #f2eeed; transform: translateX(-100%);
transition: transform ease .4s;
}
.bnr_wrap--item > a.btn_anim:hover{
opacity: 1;
}
.bnr_wrap--item > a.btn_anim:hover:before{
transform: translateX(10%);
}
.bnr_wrap--item.-column > a{
padding: 49px clamp(166px, 11.2790697674vw, 194px) 49px clamp(50px, 10.1162790698vw, 174px);
} @media (max-width:767px) {
.overview_tel--action > a:hover{
opacity: 1;
transform: translateY(0px);
}
.overview_map--action > a:hover{
opacity: 1;
transform: translateY(0px);
}
.bnr_wrap--item > a.btn_anim:hover{
opacity: 1;
}
.bnr_wrap--item > a.btn_anim:hover:before{
transform: translateX(-100%);
}
.sns_icon li > a> img:hover{
width: 38px;
}
} .c-fadein {
--c-fadein-transform-translate-length: clamp(10px, 1.2121212121vw, 16px);
--c-fadein-transition-duration: 1s;
--c-fadein-transition-timing-function: ease;
--c-fadein-transition-delay: 0s;
}
.c-fadein {
opacity: 0;
transition-property: opacity, transform;
transition-duration: var(--c-fadein-transition-duration);
transition-timing-function: var(--c-fadein-transition-timing-function);
transition-delay: var(--c-fadein-transition-delay);
animation-duration: var(--c-fadein-transition-duration);
}
.c-fadein.-toLeft {
transform: translateX(var(--c-fadein-transform-translate-length));
}
.c-fadein.-toRight {
transform: translateX(calc(var(--c-fadein-transform-translate-length) * -1));
}
.c-fadein.-up {
transform: translateY(var(--c-fadein-transform-translate-length));
}
.c-fadein.-down {
transform: translateY(calc(var(--c-fadein-transform-translate-length) * -1));
}
.c-fadein.-is-active {
opacity: 1;
transform: translateX(0);
}
.c-fadein.-delay-1 {
--c-fadein-transition-delay: .3s;
}
.c-fadein.-delay-2 {
--c-fadein-transition-delay: .6s;
}
.c-fadein.-delay-3 {
--c-fadein-transition-delay: .9s;
}
.c-fadein.-bounce.-is-active {
animation-name: c-fadein-bounce;
}
@keyframes c-fadein-bounce {
0% {
transform: scale3d(0, 0, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.1, 0.9, 1);
}
65% {
transform: scale3d(0.9, 1.05, 1);
}
75% {
transform: scale3d(1.05, 0.95, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@media (max-width: 959px) {
.c-fadein.-home-items.-delay-1, .c-fadein.-home-items.-delay-2, .c-fadein.-home-items.-delay-3 {
--c-fadein-transition-delay: 0s;
}
} .page-container > .title > .heading.-service::after{
content: "SERVICE";
display: block;
font-size: 18px;
color: var(--color-white);
font-family: var(--font-en);
position: relative;
bottom: 4em;
}
.service_price{
padding: 0 1em;
}
.price_item{
text-align: center;
border: 1px dotted #707070;
max-width: 500px;
width: 100%;
margin: 1em auto 0;
padding: 40px 0;
}
.price_item > p{
font-size: 20px;
}
.price_item > p > span{
font-size: 24px;
font-weight: bold;
}
.service_acupuncture{
position: relative;
}
.service_acupuncture::before{
position: absolute;
content: "";
left: 0;
top: 250px;
background: var(--color-brown-light);
width: 100%;
height: 85%;
z-index: -1;
}
.service_acupuncture.-content02{
position: relative;
}
.service_acupuncture.-content02::before{
position: absolute;
content: "";
left: 0;
top: 250px;
background: var(--color-brown-light);
width: 100%;
height: 80%;
z-index: -1;
}
.service_acupuncture.-content03{
position: relative;
}
.service_acupuncture.-content03::before{
position: absolute;
content: "";
left: 0;
top: 250px;
background: var(--color-brown-light);
width: 100%;
height: 80%;
z-index: -1;
}
.service_acupuncture--imgCenter{
margin: 1em auto 0;
max-width: 100%;
object-fit: cover;
}
.acupuncture_content{
text-align: center;
padding: 0 1em;
margin-top: 30px;
}
.service_acupuncture--wrap{
margin-top: 80px;
}
.service_acupuncture--wrap.-content02{
margin-top: 180px;
}
.acupuncture_item{
max-width: 760px;
width: 100%;
background: var(--color-white);
padding: clamp(20px, 1.7441860465vw, 30px) 1em clamp(25px, 2.9069767442vw, 50px);
margin: 30px auto 0;
}
.acupuncture_item > h2{
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.acupuncture_item > p{
text-align: center;
margin-bottom: clamp(10px, 1.7441860465vw, 30px);
line-height: 1.5;
}
.acupuncture_item > p > span{
display: inline-block;
position: relative;
z-index: 1;
}
.acupuncture_item > p > span::after{
content: "";
border-bottom: 10px solid var(--color-yellow);
width: 100%;
display: block;
position: relative;
bottom: 10px;
z-index: -1;
border-radius: 10px;
}
.acupuncture_item--list > li{
list-style: none;
margin: 0;
padding: 0;
}
.acupuncture_item--list > li::before{
content: "";
width: 10px;
height: 10px;
display: inline-block;
background: var(--color-yellow);
border-radius: 50%;
margin-right: 10px;
}
.acupuncture_item--list > li span{
padding-left: 60px;
}
.acupuncture_item--list > li span.price_marg{
padding-left: 50px;
}
.acupuncture_item--list > li span.price_marg02{
padding-left: 40px;
}
.acupuncture_item--txt{
margin-top: 30px;
}
.acupuncture_item--txt > p{
text-align: left;
line-height: 1.7;
margin-left:1em;
text-indent:-1em;
}
.acupuncture_item--txt > p + p {
padding-top: 10px;
}
.acupuncture_item--txt > p > span{
display: inline-block;
position: relative;
z-index: 1;
left: 1em;
margin-right: 1em;
}
.acupuncture_item--txt > p > span::after{
content: "";
border-bottom: 10px solid var(--color-yellow);
width: 100%;
display: block;
position: relative;
bottom: 10px;
z-index: -1;
border-radius: 10px;
}
@media (max-width:767px) {
.acupuncture_item > p{
text-align: left;
}
.service_acupuncture--imgCenter{
height: 30vh;
}
.service_acupuncture--imgCenter.-height_img{
height: 50vh;
}
.service_acupuncture::before{
height: 80%;
}
.service_acupuncture--wrap.-content02{
margin-top: 90px;
}
.service_acupuncture.-content02::before{
height: 70%;
}
.service_acupuncture.-content03::before{
height: 75%;
}
.service_acupuncture.-content02{
position: relative;
}
.acupuncture_content > p{
text-align: left;
}
}
.service_menu{
margin-top: 180px;
padding: 0 1em;
}
.service_menu--list{
width: 960px;
max-width: 100%;
margin: 0 auto;
}
.service_menu--list.-commission{
margin-top: clamp(50px, 6.976744186vw, 120px);
}
.service_menu--list.-commission > h2{
background-color: var(--color-brown);
}
.service_menu--list > h2{
text-align: center;
background-color: var(--color-brown-b);
color: var(--color-white);
font-size: 30px;
}
.service_menu--list > .menu_txt > p:first-of-type{
padding-top: 30px;
}
.service_menu--list > .menu_txt > p:last-of-type{
padding-bottom: 30px;
}
.service_menu--list > .menu_txt > p{
background-color: var(--color-gray-light);
padding: 0 clamp(10px, 6.976744186vw, 120px);
}
.service_menu--list > .menu_txt > p > span{
display: inline-block;
position: relative;
z-index: 1;
}
.service_menu--list > .menu_txt > p > span::after{
content: "";
border-bottom: 10px solid var(--color-yellow);
width: 100%;
display: block;
position: relative;
bottom: 15px;
z-index: -1;
border-radius: 10px;
}
.service_menu--list.-commission > .menu_txt > p:first-of-type{
text-decoration: underline 10px;
text-decoration-color: var(--color-yellow);
text-underline-offset: -3px;
text-decoration-skip-ink: none;
}
@media (max-width:767px) {
.service_menu--list > .menu_txt > p{
padding: 0 1em;
}
.service_menu{
margin-top: 120px;
}
} .page-container > .title > .heading.-faq::after{
content: "Q&A";
display: block;
font-size: 18px;
color: var(--color-white);
font-family: var(--font-en);
position: relative;
bottom: 4em;
}
.accordion-area{
list-style: none;
width: 95%;
max-width: 960px;
margin:0 auto;
}
.accordion-area p.faq_txt{
text-align: center;
margin-bottom: 80px;
font-size: 20px;
}
@media (max-width:767px) {
.accordion-area p.faq_txt{
font-size: 18px;
text-align: left;
margin-bottom: 50px;
}
}
.accordion-area li{
margin: 10px 0;
}
.accordion-area section {
border: 1px solid var(--color-brown);
} .faq_title {
position: relative; cursor: pointer;
font-size:1rem;
font-weight: normal;
padding: 3% 3% 3% 50px;
transition: all .5s ease;
font-size: 18px;
font-weight: bold;
} .faq_title::before,
.faq_title::after{
position: absolute;
content:'';
width: 15px;
height: 2px;
background-color: #c97488;
}
.faq_title::before{
top:48%;
left: 15px;
transform: rotate(0deg);
}
.faq_title::after{    
top:48%;
left: 15px;
transform: rotate(90deg);
} .faq_title.close::before{
transform: rotate(45deg);
}
.faq_title.close::after{
transform: rotate(-45deg);
} .faq_box {
display: none; background: var(--color-brown-light);
margin:0 3% 3% 3%;
padding: 3%;
color: #333;
} .page-container > .title > .heading.-notfound::after{
content: "NOT FOUND";
display: block;
font-size: 18px;
color: var(--color-white);
font-family: var(--font-en);
position: relative;
bottom: 4em;
}
.notfound-container {
max-width: var(--content-size-medium);
margin: 0 auto;
}
.notfound-container > .text {
font-size: var(--font-16);
line-height: 2.25;
text-align: justify;
word-break: break-all;
}
@media (min-width: 560px) {
.notfound-container > .text {
text-align: center;
}
}
.notfound-container > .action {
margin-top: clamp(31px, 3.6764705882vw, 50px);
text-align: center;
}
@media (max-width:368px) {
.action > .btn{
padding: 10px 70px !important;
}
} .page-container > .title > .heading.-contact::after{
content: "CONTACT";
display: block;
font-size: 18px;
color: var(--color-white);
font-family: var(--font-en);
position: relative;
bottom: 4em;
}
div.contact_guidance .frame{
width:80%;
max-width:1000px;
margin: 0 auto 60px;
border:1px solid var(--color-red-b);
border-radius:10px;
padding:36px 10px 32px 10px;
box-sizing:border-box;
text-align:center;		
}
@media screen and (max-width:1000px){
div.contact_guidance .frame{
width:94%;
}
}
@media screen and (max-width:768px){
div.contact_guidance .frame{
width:96%;
padding: 30px 1em;
text-align:left;		
}
}	
div.contact_guidance .question span{
font-weight:600;		
}
div.contact_guidance .tel{
text-align:center;
}
div.contact_guidance .tel a{
font-weight: bold;
font-size: 42px;
color:#4A390F;
}
div.contact_guidance .tel a:before{
content: url(//kanon.rest/wp-content/themes/kanon/assets/img/footer_telicon.svg);
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
width: 1em;
}
@media screen and (max-width:560px){
div.contact_guidance .tel a{
font-size:32px;
}
}
div.contact_guidance .tel:hover,
div.contact_guidance .tel:hover::before{
color:#EEB73A;
}	
div.contact_guidance .reception{
font-size:15px;
margin:10px auto;
line-height:1.7;
text-align:center;	
}	
div.page-content{
width:100%;
margin:0 auto;
margin-bottom:100px;
}
div.mes{
box-sizing:border-box;
margin-bottom:40px;
}
div.mes h3{
color:#c36;
font-size:18px;
font-weight:bold;
}	
#contact{
max-width:var(--content-size-medium);
background-color:#fff;
padding:60px 80px;
box-sizing:border-box;
border:2px solid var(--color-brown-b);
border-radius:10px;
margin: 0 auto;
}
@media screen and (max-width:1380px){
#contact{
max-width: 95%;
padding: 60px 2em;
}
}	
@media screen and (max-width:767px){
#contact{
padding: 60px 1em;
}
}	
#contact .contact-flow {
max-width: 400px;
position: relative;
box-sizing: border-box;
margin: 10px auto 40px auto;
}
#contact .contact-flow:before {
content: "";
width: calc(100% - 50px);
height: 2px;
background-color: #d5cdcd;
position: absolute;
top: 7px;
left: 25px;
z-index: 0;
}
#contact .contact-flow ul.flow-list {
width: 100%;
position: relative;
z-index: 1;
display: flex;
margin: 0;
justify-content: space-between;
align-items: center;
padding: 0;
}
#contact .contact-flow ul.flow-list li {
list-style: none;
}
#contact .contact-flow ul.flow-list > li.flow-list-item {
width: 60px;
position: relative;
top: 3px;
z-index: 1;
font-size: 14px;
font-weight: bold;
line-height: 1.4;
text-align: center;
color: var(--color-brown);
}
#contact .contact-flow ul.flow-list > li.flow-list-item.active {
color: var(--color-brown);
}
#contact .contact-flow ul.flow-list > li.flow-list-item:before {
position: static;
content: "";
width: 10px;
height: 10px;
margin: 0 auto;
margin-bottom: 20px;
display: block;
background-color: #d5cdcd;
border-radius: 50%;
box-shadow: none;
}
#contact .contact-flow ul.flow-list > li.flow-list-item.active:before {
background-color: #3b2929;
}	
.contact-form {
margin-top: clamp(47px, 6.27090301vw, 75px);
}
.contact-form > div + div {
margin-top: clamp(19px, 2.508361204vw, 30px);
}
.contact-form > div > dt {
font-size: 16px;
line-height: 1.625;
}
.contact-form > div > dd {
flex: 1 1 0%;
margin-top: clamp(5px, 0.6688963211vw, 8px);
font-size: 15px;
line-height: 1.5;
}
.contact-form > .privacy {
margin-top: clamp(38px, 5.016722408vw, 60px);
text-align: center;
}
@media (max-width:767px) {
.contact-form > .privacy{
text-align: left;
}
}
.mw_wp_form_confirm .contact-form > .privacy > dd, .mw_wp_form_preview .contact-form > .privacy > dd {
display: none;
}
.contact-form > .submit > dd {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
}
@media (min-width: 560px) {
.contact-form > .submit > dd {
flex-direction: row-reverse;
gap: clamp(13px, 1.6722408027vw, 20px);
}
}
.contact-form a {
color: var(--color-red);
text-decoration: underline;
}
.contact-form .required {
margin-left: 0.25em;
color: var(--color-red);
}
.c-form-control {
--c-form-control-border: 1px solid var(--color-gray-light);
--c-form-control-border-radius: 5px;
--c-form-control-padding: .75em 1em;
--c-form-control-background: var(--color-gray-pale);
--c-form-control-line-height: 1.625;
--c-form-control-font-size: 16px;
--c-form-control-font-color: inherit;
--c-form-control-textarea-padding: 1em;
}
@media (min-width: 768px) {
.c-form-control {
--c-form-control-padding: 1.125em;
--c-form-control-font-size: 17px;
}
}
.c-form-control {
box-sizing: border-box;
display: block;
width: 100%;
margin: 0;
padding: var(--c-form-control-padding, 0);
border: var(--c-form-control-border, none);
border-radius: var(--c-form-control-border-radius, 0);
background: var(--c-form-control-background, transparent);
font: inherit;
font-size: var(--c-form-control-font-size, inherit);
line-height: var(--c-form-control-line-height, inherit);
color: var(--c-form-control-font-color, inherit);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c-form-control:disabled {
cursor: not-allowed;
}
textarea.c-form-control {
padding: var(--c-form-control-textarea-padding, 0);
resize: vertical;
}
select.c-form-control {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22'%3e%3cpath fill='%23343a40' d='M15 22L0 0h30z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: calc(100% - 0.75em) 50%;
background-size: 0.5em auto;
}
select.c-form-control[multiple], select.c-form-control[size]:not([size="1"]) {
background-image: none;
}
.c-form-control.-auto {
display: inline-block;
width: auto;
}
.c-btn.-contactAction {
justify-content: center;
min-width: clamp(175px, 23.4113712375vw, 280px);
padding: 1.125em 3.25em;
font-size: 16px;
text-align: center;
}
.c-btn.-contactAction.-submit {
background: var(--color-red-b);
border: 3px solid var(--color-red-b);
color: var(--color-white);
transition: all .4s;
}
.c-btn.-contactAction.-submit:hover{
transition: all .4s;
background: var(--color-white);
border: 3px solid var(--color-red-b);
color: var(--color-red-b);
}
.c-btn.-contactAction.-back {
background: var(--color-brown);
border: 3px solid var(--color-brown);
color: var(--color-white);
transition: all .4s;
}
.c-btn.-contactAction.-back:hover{
transition: all .4s;
background: var(--color-white);
border: 3px solid var(--color-brown);
color: var(--color-brown);
}
@media (max-width:767px) {
.c-btn.-contactAction.-submit:hover{
opacity: 1;
}
.c-btn.-contactAction.-back:hover{
opacity: 1;
}
}
.contact-captcha{
text-align: center;
margin: 30px 0;
font-size: 15px;
}
.contact-captcha > img{
margin: 0 auto;
}
.contact-captcha > input{
padding: 2px 16px;
} .page-container > .title > .heading.-contact_err::after{
content: "CONTACT ERR";
display: block;
font-size: 18px;
color: var(--color-white);
font-family: var(--font-en);
position: relative;
bottom: 4em;
} .page-container > .title > .heading.-contact_confirm::after{
content: "CONTACT CONFIRM";
display: block;
font-size: 18px;
color: var(--color-white);
font-family: var(--font-en);
position: relative;
bottom: 4em;
} .page-container > .title > .heading.-contact_complete::after{
content: "CONTACT COMPLETE";
display: block;
font-size: 18px;
color: var(--color-white);
font-family: var(--font-en);
position: relative;
bottom: 4em;
}
.contact_action{
text-align: center;
} .privacy_container {
max-width: var(--content-size-medium);
margin: 0 auto;
padding: 0 10px 0;
font-size: 16px;
text-align: justify;
word-break: break-all;
}
@media (max-width:767px) {
.privacy_container {
padding: 0;
}
}
.privacy_container--h2{
margin: 2.25em 0 0.75em;
}
.privacy_container p,
.privacy_container ol {
margin-bottom: 1em;
}
.privacy_container--h2{
position: relative;
font: inherit;
line-height: 1;
}
.privacy_container--h2.-bb {
padding-bottom: 0.25em;
border-bottom: 0.25em solid var(--color-red-b);
font-size: 25px;
font-weight: bold;
text-align: justify;
word-break: break-all;
line-height: 1.5;
} .c-typography {
--c-typography-font-size: 16px;
--c-typography-font-family: inherit;
--c-typography-font-weight: inherit;
--c-typography-line-height: 2.125;
--c-typography-color: inherit;
--c-typography-space: 1.75em;
--c-typography-h-margin-top: 2.5em;
--c-typography-h-margin-bottom: 0;
--c-typography-h-font-weight: bold;
--c-typography-h-font-family: inherit;
--c-typography-h-line-height: 1.5;
--c-typography-h-color: inherit;
--c-typography-h1-font-size: 1em;
--c-typography-h2-font-size: 1.5em;
--c-typography-h3-font-size: 1.25em;
--c-typography-h4-font-size: 1.125em;
--c-typography-h5-font-size: 1em;
--c-typography-h6-font-size: 1em;
--c-typography-table-line-height: 1.75;
--c-typography-table-font-size: .9em;
--c-typography-list-line-height: 1.75;
--c-typography-list-li-margin-bottom: .375em;
--c-typography-dt-font-weight: inherit;
--c-typography-dt-font-family: inherit;
--c-typography-strong-font-weight: bold;
--c-typography-strong-font-family: inherit;
--c-typography-a-color: var(--color-red);
}
.c-typography {
font-size: var(--c-typography-font-size);
font-family: var(--c-typography-font-family);
font-weight: var(--c-typography-font-weight);
line-height: var(--c-typography-line-height);
color: var(--c-typography-color);
text-align: justify;
word-break: break-all;
}
.c-typography h1,
.c-typography h2,
.c-typography h3,
.c-typography h4,
.c-typography h5,
.c-typography h6 {
margin: var(--c-typography-h-margin-top) 0 var(--c-typography-h-margin-bottom);
font-weight: var(--c-typography-h-font-weight);
font-family: var(--c-typography-h-font-family);
line-height: var(--c-typography-h-line-height);
}
.c-typography h1:first-child,
.c-typography h2:first-child,
.c-typography h3:first-child,
.c-typography h4:first-child,
.c-typography h5:first-child,
.c-typography h6:first-child {
margin-top: 0;
}
.c-typography h1:last-child,
.c-typography h2:last-child,
.c-typography h3:last-child,
.c-typography h4:last-child,
.c-typography h5:last-child,
.c-typography h6:last-child {
margin-bottom: 0;
}
.c-typography :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
margin-top: 0;
}
.c-typography h1 {
font-size: var(--c-typography-h1-font-size);
}
.c-typography h2 {
font-size: var(--c-typography-h2-font-size);
}
.c-typography h3 {
font-size: var(--c-typography-h3-font-size);
}
.c-typography h4 {
font-size: var(--c-typography-h4-font-size);
}
.c-typography h5 {
font-size: var(--c-typography-h5-font-size);
}
.c-typography h6 {
font-size: var(--c-typography-h6-font-size);
}
.c-typography p,
.c-typography dl,
.c-typography ol,
.c-typography ul,
.c-typography blockquote,
.c-typography pre,
.c-typography table,
.c-typography figure,
.c-typography hr,
.c-typography .c-embed,
.c-typography .wp-block-image,
.c-typography .wp-block-embed {
margin-top: var(--c-typography-space);
}
.c-typography p:first-child,
.c-typography dl:first-child,
.c-typography ol:first-child,
.c-typography ul:first-child,
.c-typography blockquote:first-child,
.c-typography pre:first-child,
.c-typography table:first-child,
.c-typography figure:first-child,
.c-typography hr:first-child,
.c-typography .c-embed:first-child,
.c-typography .wp-block-image:first-child,
.c-typography .wp-block-embed:first-child {
margin-top: 0;
}
.c-typography ol:first-of-type, .c-typography ul:first-of-type {
margin-top: var(--c-typography-list-li-margin-bottom);
}
.c-typography :is(ol, ul) + :is(ol, ul) {
margin: 0;
}
.c-typography table {
line-height: var(--c-typography-table-line-height);
font-size: var(--c-typography-table-font-size);
}
.c-typography dt {
font-weight: var(--c-typography-dt-font-weight);
font-family: var(--c-typography-dt-font-family);
}
.c-typography dd {
line-height: var(--c-typography-list-line-height);
}
.c-typography ul, .c-typography ol {
padding-left: 1.25em;
line-height: var(--c-typography-list-line-height);
}
.c-typography ul {
list-style: disc;
}
.c-typography ol {
list-style: decimal;
}
.c-typography li {
margin: 0 0 var(--c-typography-list-li-margin-bottom);
}
.c-typography strong {
font-weight: var(--c-typography-strong-font-weight);
font-family: var(--c-typography-strong-font-family);
}
.c-typography a:not(.c-btn) {
text-decoration: underline;
color: blue;
}