@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');


/*
font-family: "Noto Serif JP", serif;
Thin 100
ExtraLight 200
Light 300
Regular 400
Medium 500
Semi-bold 600
Bold 700
Extra-bold 800
Black 900
*/




/* CSS Document */

html {
font-size: 10px;
}
body {
position: relative;
font-size: 1rem;
line-height: 1.8;
font-family: "Noto Serif JP", serif;
color: #333333;
background: #f8f4e6;
-webkit-font-feature-settings: "palt";
-moz-font-feature-settings: "palt";
-ms-font-feature-settings: "palt";
-o-font-feature-settings: "palt";
font-feature-settings: "palt";
/*-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;*/
}
body.sub {
padding-top: 90px;
}
@media screen and (max-width: 940px) {
}
@media screen and (max-width: 767px) {
html {
font-size: calc(1.282vw * 2);/*10px*/
}
body.sub {
padding-top: 0;
}
}
@media screen and (max-width: 600px) {
html {
/*font-size: 1.667vw;*//*10px*/
}

}
@media screen and (max-width: 440px) {
html {
font-size: calc(2.2727vw * 1.0);
}
}
@media screen and (max-width: 400px) {
html {
font-size: calc(2.5vw * 1.2);
}
}
@media screen and (max-width: 360px) {
html {
font-size: calc(2.777vw * 1.2);
}
}

* {
font-style: normal;
font-weight: 500;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

a {
color: #333333;
text-decoration: none;
transition: .5s;
}
a:hover {
color: #999999;
text-decoration: none;
transition: .5s;
opacity: 0.65;
}
main a {
color: #333333;
text-decoration: none;
transition: .5s;
}
main a:hover {
color: #999999;
text-decoration: none;
transition: .5s;
opacity: 0.65;
}
a:hover img,
a.opacity:hover,
footer footer_in .f_contents section dl a:hover {
text-decoration: none;
opacity: 0.65;
zoom: 1;
}
header h2 a:hover img,
footer dl dt a:hover img {
opacity: 1.0;
zoom: 1;
}
a:before,
a:after,
a:hover:before,
a:hover:after {
text-decoration: none !important;
display: inline-block;
}
img {
width: 100%;
height: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
image-rendering: -webkit-optimize-contrast;
}
/*共通*/
.sp,
.sp_img {
display: none;
}
@media screen and (max-width: 767px) {
img {
max-width: none;
width: 100%;
height: auto;
}

.pc {
display: none;
}

.sp,
.sp_img {
display: block;
}
}




/* -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
behavior: url("/css/PIE.htc");*/

/*
:after {
content: " ";
font-size: 0.1rem;
display: block;
clear: both;
line-height: 0;
height: 0;
visibility: hidden;
}
span:before {
font-family: "FontAwesome";
content: "\f090";
}
span:before {
font-family: "Font Awesome 5 Free";
content: "\f0c8";
}
span:before {
font-family: "Font Awesome 6 Brands";
font-family: "Font Awesome 6 Free";
content: "\f0c8";
font-weight: 400;
font-weight: 900（Solid）
font-weight: 400（Regular、Brands）
}
.child {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.child {
position: relative;
left: 50%;
transform: translateX(-50%);
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
左から
.vertical-rl {
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
右から
.vertical-rl {
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
writing-mode: vertical-lr;
}
.vertical-tb {
-ms-writing-mode: lr-tb;
-webkit-writing-mode: horizontal-tb;
-o-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
}
body {
counter-reset: number;
}
h1:before {
counter-increment: number;
content: counter(number)'';
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<p><picture>
<source media="(max-width: 767px)" srcset="">
<img src="" alt="">
</picture></p>

*/






/*header*/
h1 {
display: none;
}
.header_main_img header {
position: fixed;
top: 0;
right: 0;
z-index: 10;
order: 2;
width: 420px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: rgba(248, 244, 230, 1);
}
.nav-hidden .header_main_img header {
background: rgba(248, 244, 230, 0);
transition: .5s;
}
body.sub .header_main_img header {
position: fixed;
top: 90px;
height: calc(100vh - 90px);
transition: .5s;
}
body.sub .header_main_img header.fixed {
top: 0;
height: 100vh;
transition: .5s;
padding-top: 5vh;
}
.header_main_img header h2 {
width: 145px;
margin-bottom: 20px;
}
.header_main_img header nav {
margin-top: auto;
transition: .5s;
}
.nav-hidden .header_main_img header nav {
opacity: 0;
visibility: hidden;
transition: .5s;
}
.header_main_img header nav ul {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.header_main_img header nav ul li {
width: 200px;
}
.header_main_img header nav ul li:not(:last-of-type) {
border-bottom: solid 1px #333333;
}
.header_main_img header nav ul li a {
display: block;
text-align: center;
font-size: 1.6rem;
letter-spacing: .25em;
text-indent: .25em;
/*padding: 2.7em 0;*/
padding: 3vh 0;
}
.header_main_img header nav p {
width: 130px;
margin: 0 auto;
padding-bottom: 100px;
}
.header_main_img {
display: flex;
}
.header_main_img .main_img {
order: 1;
width: calc(100% - 420px);
/*height: 900px;*/
height: 100vh;
overflow: hidden;
}
.header_main_img .main_img p {
width: 100%;
/*height: 900px;*/
height: 100vh;
}
.header_main_img .main_img picture {
display: block;
width: 100%;
/*height: 900px;*/
height: 100vh;
}
.header_main_img .main_img p img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-height: 800px) {
.header_main_img header h2 {
width: 100px;
}
.header_main_img header nav ul li a {
padding: 2vh 0;
}

}
@media screen and (max-height: 600px) {
.header_main_img header h2 {
width: 80px;
margin-bottom: 10px;
}
.header_main_img header nav p {
width: 100px;
padding-bottom: 50px;
}

}
@media screen and (max-width: 1960px) {
.header_main_img header {
width: 300px;
}
.header_main_img .main_img {
width: calc(100% - 300px);
}

}
@media screen and (max-width: 1140px) {
.header_main_img header {
width: 240px;
}
.header_main_img .main_img {
width: calc(100% - 240px);
}
}
@media screen and (max-width: 940px) {
.header_main_img header {
width: 200px;
}
.header_main_img header h2 {
width: 145px;
margin-bottom: 0;
margin-top: auto;
padding-bottom: 5vh;
}
.header_main_img header nav {
display: none;
}
.header_main_img .main_img {
width: calc(100% - 200px);
}
}
@media screen and (max-width: 767px) {
.sub .header_main_img {
flex-direction: column;
justify-content: flex-start;
}
.header_main_img header {
position: relative;
top: inherit;
right: inherit;
width: 28vw;
}
body.sub .header_main_img header.fixed {
top: inherit;
padding-top: 0;
}
body.sub .header_main_img header {
position: relative;
top: 0;
left: 0;
display: flex;
align-items: flex-start;
width: 100%;
height: 21vw !important;
order: -1;
}
.header_main_img header h2 {
width: 20vw;
}
.sub .header_main_img header h2 {
width: 40vw;
margin: inherit !important;
padding: inherit !important;
margin-left: 6.5vw !important;
}
.header_main_img .main_img {
width: calc(100% - 28vw);
}
.sub .header_main_img .main_img {
width: 100%;
height: 120vw;
}
.sub .header_main_img .main_img p {
height: 120vw;
}
.sub .header_main_img .main_img picture {
height: 120vw;
}

}





/*footer*/
footer {
background: #d2be58;
padding-top: 50px;
padding-bottom: 50px;
}
footer .footer_in .box {
display: flex;
margin-bottom: 30px;
}
footer .footer_in .box .box_l {
margin-right: 20px;
}
footer .footer_in .box .box_l .f_logo {
width: 145px;
margin-bottom: 40px;
}
footer .footer_in .box .box_l address {
display: block;
font-size: 1.8rem;
letter-spacing: .15em;
}
footer .footer_in .box .box_l .insta {
padding-top: 20px;
width: 115px;
}
footer .footer_in .box .box_r {
position: relative;
z-index: 20;
margin-left: auto;
display: flex;
}
footer .footer_in .box .box_r ul {
width: 200px;
}
footer .footer_in .box .box_r ul:nth-of-type(1) {
margin-right: 50px;
}
footer .footer_in .box .box_r ul li {
border-bottom: solid 1px #333333;
}
footer .footer_in .box .box_r ul li.insta {
border-bottom: none;
}
footer .footer_in .box .box_r ul li a {
display: block;
text-align: center;
font-size: 1.6rem;
letter-spacing: .25em;
text-indent: .25em;
padding-top: 2.2em;
padding-bottom: 2.2em;
}
footer .footer_in .box .box_r ul li a:hover {
color: #FFF;
}
footer .footer_in .box .box_r ul li.insta a {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
height: calc(1.6rem * 1.7 + (2.2em * 2));
}
footer .footer_in .box .box_r ul li.insta a img {
width: auto;
height: 55px;
}
footer .footer_in .copy {
display: block;
text-align: center;
font-size: 1.6rem;
letter-spacing: .15em;
}
@media screen and (max-width: 1740px) {
footer {
padding-right: 0;
}
}
@media screen and (max-width: 767px) {
footer {
padding-top: 10vw;
padding-bottom: 10vw;
padding-right: 0;
}
footer .footer_in {
padding-left: 10vw;
padding-right: 10vw;
}
footer .footer_in .box {
flex-direction: column;
margin-bottom: 10vw;
}
footer .footer_in .box .box_l {
display: flex;
flex-wrap: wrap;
margin-right: 0;
margin-bottom: 10vw;
}
footer .footer_in .box .box_l .f_logo {
width: 20vw;
margin-bottom: 0;
margin-right: 10vw;
}
footer .footer_in .box .box_l .box_in {
width: calc(100% - (20vw + 10vw));
}
footer .footer_in .box .box_l address {
font-size: 1.15rem;
letter-spacing: .15em;
}
footer .footer_in .box .box_l .insta {
padding-top: 5vw;
width: 15vw;
}
footer .footer_in .box .box_r {
margin-left: 0;
display: flex;
justify-content: center;
width: 100%;
}
footer .footer_in .box .box_r ul {
width: 26vw;
}
footer .footer_in .box .box_r ul:nth-of-type(1) {
margin-right: 6.5vw;
}
footer .footer_in .box .box_r ul li a {
font-size: 1.25rem;
letter-spacing: .1em;
text-indent: .1em;
padding-top: 1.2em;
padding-bottom: 1.2em;
}
footer .footer_in .box .box_r ul li.insta a {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
height: calc(1.25rem * 1.7 + (1.2em * 2));
}
footer .footer_in .box .box_r ul li.insta a img {
width: auto;
height: 7.3vw;
}
footer .footer_in .copy {
font-size: .9rem;
}

}
@media screen and (max-width: 400px) {
footer .footer_in .box .box_r ul {
width: 35vw;
}
footer .footer_in .copy {
font-size: 1.0rem;
white-space: nowrap;
}
}
@media screen and (max-width: 360px) {
footer .footer_in .copy {
font-size: .9rem;
white-space: nowrap;
}
}



/*sp_menu*/
.openSidebarMenu {
display: none;
transition: all 0.3s;
}
.sp_menu {
position: fixed;
top: 0;
right: 0;
z-index: 100;
width: 200px;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: translateX(200px);
transition: transform 500ms ease-in-out;
background: #f8f4e6;
padding: 5vh 50px;
padding-top: 0;
overflow: auto;
}
@media screen and (max-width: 940px) {
.sidebarIconToggle {
transition: all 0.3s;
cursor: pointer;
position: fixed;
display: block;
z-index: 200;
top: 3vh;
right: 20px;
height: 43px;
width: 30px;
background: url(../img/common/menu_off.svg) no-repeat center center;
background-size: cover;
}
input.openSidebarMenu[type=checkbox]:checked ~ .sidebarIconToggle {
background: url(../img/common/menu_on.svg) no-repeat center center;
background-size: cover;
}
input.openSidebarMenu[type="checkbox"]:checked ~ .sp_menu {
transform: translateX(0);
}
.sp_menu h2 {
width: 120px;
padding-top: 5vh;
margin-bottom: 20px;
}
.sp_menu nav {
margin-top: auto;
}
.sp_menu nav ul {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.sp_menu nav ul li {
width: 180px;
}
.sp_menu nav ul li:not(:last-of-type) {
border-bottom: solid 1px #333333;
}
.sp_menu nav ul li a {
display: block;
text-align: center;
font-size: 1.6rem;
letter-spacing: .25em;
text-indent: .25em;
/*padding: 2.7em 0;*/
padding: 2vh 0;
}
.sp_menu nav p {
width: 100px;
margin: 0 auto;
padding-bottom: 2vh;
}
}
@media screen and (max-height: 800px) {
.sp_menu h2 {
width: 100px;
}

}
@media screen and (max-height: 600px) {
.sp_menu h2 {
width: 80px;
}
.sp_menu nav p {
padding-bottom: 50px;
}

}
@media screen and (max-width: 767px) {
.sidebarIconToggle {
top: calc((21vw - (5.606vw * 1.0)) / 2);
right: 5vw;
height: calc(5.606vw * 1.0);
width: calc(3.911vw * 1.0);
}
.sp_menu {
width: 40vw;
transform: translateX(40vw);
padding: 5vh 5vw;
}
.sp_menu h2 {
width: 20vw;
padding-top: 5vh;
margin-bottom: 5vh;
}
.sp_menu nav {
width: 100%;
}
.sp_menu nav ul {
width: 100%;
}
.sp_menu nav ul li {
width: 100%;
}
.sp_menu nav ul li a {
font-size: 1.0rem;
letter-spacing: .25em;
text-indent: .25em;
padding: 3vh 0;
}
.sp_menu nav p {
width: 16vw;
padding-bottom: 2vh;
}

}





/*ずれ*/
.anc:before {
position: relative;
z-index: -1;
padding-top: 150px;
margin-top: -150px;
display: block;
content: '';
}
@media screen and (max-width: 767px) {
.anc:before {
padding-top: 30vw;
margin-top: -30vw;
content: '';
}
}



/*main*/
main {
position: relative;
font-size: 1.6rem;
padding-top: 100px;
padding-bottom: 300px;
}
@media screen and (max-width: 767px) {
main {
overflow: hidden;
padding-top: 0;
padding-bottom: 20vw;
padding-right: 0 !important;
}
}


/*共通*/
.ttl_img {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 110px;
}
.ttl_img-mb30 {
margin-bottom: 30px;
}
.ttl_img-mb40 {
margin-bottom: 40px;
}
.ttl_img-mb60 {
margin-bottom: 60px;
}
.ttl_img span {
display: block;
}
.ttl_img span img {
width: auto;
max-width: 100%;
}
.ttl_border {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 50px;
}
.ttl_border span {
display: block;
text-align: center;
width: 350px;
font-size: 3.0rem;
font-weight: 600;
letter-spacing: .5em;
text-indent: .5em;
padding: .4em 0;
border-top: solid 1px #333333;
border-bottom: solid 1px #333333;
}
.contact_link01 {
display: flex;
align-items: center;
justify-content: center;
}
.contact_link01-left {
justify-content: flex-start;
}
.contact_link01 p {
display: flex;
align-items: center;
justify-content: center;
}
.contact_link01 p a {
position: relative;
display: block;
border: solid 3px #d2be58;
font-size: 1.8rem;
padding: 1em 7em;
transition: .6s linear;
}
.contact_link02 p a {
padding: 1em 6em;
}
.contact_link01 p a::before {
position: absolute;
top: 0;
bottom: 0;
left:0;
width: 0;
display: block;
background: #d2be58;
transition: .6s;
content: '';
}
.contact_link01 p a::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1em;
width: 1.88em;
height: .55em;
background: url(../img/common/contact_arrow.svg) no-repeat center center;
background-size: cover;
transition: .6s;
content: '';
}
.contact_link01 p a:hover {
color: #FFF;
}
.contact_link01 p a:hover::before {
width: 100%;
z-index: -1;
}
.contact_link01 p a:hover::after {
background: url(../img/common/contact_arrow_white.svg) no-repeat center center;
background-size: cover;
transition: .6s .6s;
content: '';
}
.contact_link01 p a span {
display: block;
letter-spacing: .35em;
text-indent: -.35em;
}
@media screen and (max-width: 767px) {
.ttl_img {
margin-bottom: 10vw;
}
.ttl_img-mb30 {
margin-bottom: 6vw;
}
.ttl_img-mb40 {
margin-bottom: 8vw;
}
.ttl_img-mb60 {
margin-bottom: 8vw;
}
.ttl_img span {
width: 60vw;
}
.ttl_img span img {
width: 100%;
max-width: inherit;
}
.ttl_border {
margin-bottom: 6.5vw;
}
.ttl_border span {
width: 45vw;
font-size: 1.5rem;
letter-spacing: .5em;
text-indent: .5em;
padding: .8em 0;
}
.contact_link01 p a {
width: 52vw;
border: solid 2px #d2be58;
background: #d2be58;
font-size: 1.25rem;
padding: 1.6em 0;
text-align: center;
}
.contact_link02 p a {
padding: 1.6em 0;
}
.contact_link01 p a::before {
background: #f8f4e6;
}
.contact_link01 p a::after {
right: .5em;
width: 1.36em;
height: .4em;
background: url(../img/common/contact_arrow_white.svg) no-repeat center center;
background-size: cover;
}
.contact_link01 p a:hover {
color: #503333;
}
.contact_link01 p a:hover::after {
background: url(../img/common/contact_arrow.svg) no-repeat center center;
background-size: cover;
}
.contact_link01 p a span {
letter-spacing: .15em;
text-indent: -.15em;
}
}
@media screen and (max-width: 360px) {
.ttl_border span {
width: 55vw;
}
.contact_link01 p a {
width: 60vw;
}
}


/*width*/
.mw1080 {
max-width: 1120px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
.w1080 {
width: 1120px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
@media screen and (max-width: 1960px) {
}
@media screen and (max-width: 1320px) {
}
@media screen and (max-width: 1260px) {
}
@media screen and (max-width: 1120px) {
.w1080 {
width: 100%;
}
}
@media screen and (max-width: 767px) {
.mw1080 {
max-width: 100%;
padding-left: 4%;
padding-right: 4%;
}
.w1080 {
width: 100%;
padding-left: 4%;
padding-right: 4%;
}
}