@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;900&family=Roboto+Slab:wght@300;400&display=swap');


@charset "UTF-8";

@keyframes fadein{
0%{opacity:0;}
100%{opacity:1;}
}

@keyframes fadeout{
0%{opacity:1;}
100%{opacity:0;}
}

*{
font-style:normal;
font-weight:400;
list-style:none;
margin:0;
padding:0;
}
figure,nav{display:block;}
html{font-size:12px;}

body{
background:#fff;
color:#555;
font-family:"Noto Sans JP","ヒラギノ角ゴ Pro",Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,sans-serif;
font-size:11px;
text-align:center;
-webkit-text-size-adjust:100%;
}

section img,
.fadein_js img{border-radius: 10px !important;}

.anchor{
height:0;
display:block;
font-size:0;
line-height:0;
}

img{vertical-align:top;}
svg{pointer-events:none;}
a{color:#555;}
a:hover{text-decoration:none; opacity: 0.7;}

@media screen and (min-width:810px){
a[href^=tel]{
pointer-events:none;
text-decoration:none!important;
color:#555 !important;
}
}

.wrapper{min-height:600px;}

@media screen and (max-width:809px){
.wrapper{
width:100%;
min-width:320px;
overflow:hidden;
}
}


.header_block{
display:none;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:100;
-ms-flex-pack:center;
justify-content:center;
-ms-flex-align:center;
align-items:center;
-ms-flex-direction:column;
flex-direction:column;
background:rgba(255,255,255,.95);
}
.header_block[data-menu=show]{
animation:fadein .5s ease 0s 1 forwards;
display:-ms-flexbox;
display:flex;
pointer-events:auto;
}
.header_block[data-menu=hide]{
animation:fadeout .5s ease 0s 1 forwards;
display:-ms-flexbox;
display:flex;
pointer-events:none;
}
.header_logo{
width:210px;
margin:0 auto 3em;
}

@media screen and (max-width:810px){
.header_logo{margin:0 auto 1em;}
}
.header_logo img{
width:100%;
height:150px;
}
.header_nav{
-ms-flex-align:center;
align-items:center;
display:-ms-flexbox;
display:flex;
-ms-flex-direction:column;
flex-direction:column;
height:30vh;
-ms-flex-pack:justify;
justify-content:space-between;
}
@media screen and (max-width:810px){
.header_nav{
height:auto;
max-height:none;
min-height:0;
}
}
.header_nav a{
width:auto;
-ms-flex-align:center;
align-items:center;
display:-ms-flexbox;
display:flex;
font-family: 'Roboto Slab', serif;
font-weight: 300;
font-size:1.5em;
line-height: 2;
-ms-flex-pack:center;
justify-content:center;
margin:0 auto;
text-decoration:none;
text-decoration:none;
transition:all 250ms ease;
color:#555;
}
.header_nav a i{
font-size: 220%;
color:#555 !important;
font-size: 200%;
}

.header_nav li.icons a{display: inline-block !important; margin-left:1em ; margin-right: 1em;
}
#header a i.fa-brands,
.header_nav a i.fa-brands{font-family: "Font Awesome 5 Brands";}
.header_nav a:hover{opacity:.7;}

.header_nav li.icons i{margin-right: 0;
}

.header_sns{
width: auto;
margin:1em auto 0;
}
}
.header_sns a{
display:block;
text-decoration:none;
transition:all 250ms ease;
}
.header_sns a:hover{opacity:.7;}
.header_sns a img{
width:30px;
height:auto;
}

.header_btn{
cursor:pointer;
width:60px;
height:30px;
top:35px;
right:25px;
position:fixed;
z-index:999;
vertical-align: middle;
}

.header_btn span,
.header_btn::after,
.header_btn::before{
width:60px;
height:5px;
content:"";
position:absolute;
left:0;
background:#fff;
transition:all 250ms ease;
box-shadow:2px 2px 6px rgba(0,0,0,.3);
}
.header_btn::before{top:30px;}
.header_btn::after{top:15px;}

.header_btn[data-menu=show]::before{
top:14px;
transform:rotate(-315deg);
}
.header_btn[data-menu=show]::after{
bottom:11px;
transform:rotate(315deg);
}
.header_btn[data-menu=show] span{
background: transparent !important;
box-shadow:none !important;
}

.header_btn[data-menu=show]::after{background:#D44953!important;}
.header_btn[data-menu=show]::before{background:#009141!important;}
.header_btn[data-color=black]::after,
.header_btn[data-color=black]::before{background:#fff;}
.header_btn[data-color=white]::after,
.header_btn[data-color=white]::before{background:#fff;}


.footer{
height:auto;
background:#009141;
box-sizing:border-box;
padding:5% 0;
position:relative;
color: #fff;
font-size:1.25rem;
}
@media screen and (max-width:810px){
.footer{
height:auto;
padding:50px 25px 25px;
}
}

.footer_logo{text-align:left;}
@media screen and (min-width:781px){
.footer_logo{margin:0 45px;}
}
@media screen and (max-width:810px){
.footer_logo{margin:0 0 50px;}
}
.footer_logo img{
width:20%;
height:auto;
}
@media screen and (max-width:810px){
.footer_logo img{
width:25%;
height:auto;
}
}
.footer_address{
width:585px;
-ms-flex-align:start;
align-items:flex-start;
-ms-flex-pack:justify;
justify-content:space-between;
line-height:20px;
margin:-20px auto 60px;
padding:0 0 0 210px;
text-align:left;
}
@media screen and (max-width:980px){
.footer_address{
width:500px;
margin:-21px 0 60px auto;
padding:0;
}
}
@media screen and (max-width:810px){
.footer_address{
width:auto;
display:block;
margin:0 0 90px 0;
}
}
.footer_address a{
color:#ddd;
font-family: 'Roboto Slab', serif;
font-weight: 300;
}
.footer_address div{
font-family: 'Roboto Slab', serif;
font-weight: 300;
line-height:20px;
margin:25px 0 0;
}
.footer_address div a{text-decoration:none;}
.footer_sns{
display:-ms-flexbox;
display:flex;
-ms-flex-pack:start;
justify-content:flex-start;
}
.footer_sns a{color: #fff !important;}

#Access i{
font-size: 100%;
margin: 0 0.5em 0 0 !important;
}
@media screen and (max-width:810px){
.footer_sns{margin:0 0 50px;}
}
@media screen and (min-width:781px){
.footer_sns{
left:45px;
position:absolute;
top:160px;
}
}
.footer_sns li{

margin:0 15px 0 0;
}
.footer_sns a{
text-decoration:none;
transition:all 250ms ease;
}
.footer_sns a:hover{opacity:.7;}
.footer_sns img{
width:30px;
height:auto;
}
.footer_copy{
display:block;
font-family: 'Roboto Slab', serif;
font-weight: 300;
font-size:1rem;
line-height:15px;
text-align:right;
margin-bottom: 1.5em;
}
@media screen and (min-width:781px){
.footer_copy{margin:0 45px;}
}

.GoogleMaps:before{
font-family:"Font Awesome 5 Free" !important;
font-weight:900 !important;
content:"\f3c5" !important;
color:#fff ;
display: inline-block;
margin:0.5em0.5em 0 0;
}



.Heading_title{
width:80%;
color:#555;
font-family: 'Roboto Slab', serif;
font-weight: 400;
font-size:2rem;
line-height:25px;
margin:0 auto 5em;
position:relative;
text-align:center;
color:transparent;
}
.Heading_title span{
display: block;
font-size: 75%;
font-weight: 50 !important;
margin-top: 0.5em;
}
@media screen and (max-width:809px){
.Heading_title{
width:auto;
margin:0 25px 7%;
}
}

.Heading_title[data-status=show]{
color:#555;
transition:all 1s ease .5s;
}

.Heading_title::after,
.Heading_title::before{transform:scale(0,1);}
.Heading_title::before{transform-origin:left center;}
.Heading_title::after{transform-origin:right center;}
.Heading_title[data-status=show]::after,
.Heading_title[data-status=show]::before{
transition:all 750ms cubic-bezier(.700,.150,.15,.80);
transform:scale(1,1);
}

.Heading_title::after,
.Heading_title::before{
width:35%;
height:1px;
top:0;
bottom:0;
content:"";
display:block;
margin:auto;
position:absolute;
background:#009141;
}
.Heading_title::before{
background:#D44953;
}

@media screen and (max-width:809px){
.Heading_title::after,
.Heading_title::before{width:23%;}
}

.Heading_title::before{left:0;}
.Heading_title::after{right:0;}

.lead_txt{
color:#555;
font-size:1.5rem;
line-height:25px;
margin:-50px 0 5%;
opacity:0;
transform:translateY(10px);
}

@media screen and (max-width:809px){
.lead_txt{margin:0 0 50px;}
}

.lead_txt[data-status=show]{
opacity:1;
transition:all 1s ease;
transform:translateY(0);
}

.main_imgs{
width:100%;
height:100vh;
position:relative;
}

.main_imgs_area{
width:100% !important;
height:50px;
-ms-flex-align:center;
align-items:center;
display:-ms-flexbox;
display:flex;
-ms-flex-direction:column;
flex-direction:column;
-ms-flex-pack:justify;
justify-content:space-between;
margin:auto;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:10;
filter:blur(10px);
opacity:0;
}
.main_imgs_area img{
width:35%;
height:auto;
margin-top: -15.25%;
filter: drop-shadow(0 0 5px rgba(255,255,255,.5));
}

.main_imgs[data-status=show] .main_imgs_area{
filter:blur(0);
opacity:1;
transition:all 1s ease 150ms;
}
@media screen and (max-width:810px){
.main_imgs_area{height:47.5px;}
.main_imgs_area img{
width:55%;
margin-top: -23%;
}
}
.main_imgs_logo{
width:100%;
height:auto;
}
.main_imgs::before{
width:100%;
height:100%;
content:"";
top:0;
left:0;
position:absolute;
z-index:1;
background:rgba(255,255,255,.3);
}
.main_img01,
.main_img02,
.main_img03,
.main_img04{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.main_img01{
background:url(../img/slide01.jpg) no-repeat center;
background-size:cover;
}
.main_img02{
animation:mv 20s linear -14.4s infinite;
background:url(../img/slide02.jpg) no-repeat center;
background-size:cover;
opacity:0;
}
.main_img03{
animation:mv 20s linear -9.9s infinite;
background:url(../img/slide03.jpg) no-repeat center;
background-size:cover;
opacity:0;
}
.main_img04{
animation:mv 20s linear -5.4s infinite;
background:url(../img/slide04.jpg) no-repeat center;
background-size:cover;
opacity:0;
}
@keyframes mv{
0%{opacity:1;}
30%{opacity:1;}
40%{opacity:0;}
90%{opacity:0;}
100%{opacity:1;}
}

.lead_txt{
width: 95%;
margin-right:auto;
margin-left:auto;
}

.about{
padding:10% 0;
background:#fff;
}
.about h3{
margin:0 0 25px;
text-align:left;
font-size:1.2rem;
line-height:25px;
opacity:0;
transform:translateY(10px);
}
.about h4{
margin:1em 0 0;
text-align:center;
font-size:1.2rem;
line-height:25px;
opacity:0;
transform:translateY(10px);
}
@media screen and (max-width:809px){
.about h3{font-size:1.1rem;}
}
.about h3[data-status=show]{
opacity:1;
transition:all 1s ease;
transform:translateY(0);
}
@media screen and (max-width:809px){
.about h3{margin:0 0 15px;}
}
.about div p{
text-align:left;
font-size:1.2rem;
line-height:25px;
opacity:0;
transform:translateY(10px);
}
@media screen and (max-width:809px){
.about div p{font-size:1.1rem;}
}
.about div p[data-status=show]{
opacity:1;
transition:all 1s ease;
transform:translateY(0);
}

@media screen and (min-width:810px){
.about01{
width: 90%;
-ms-flex-align:center;
align-items:center;
box-sizing:border-box;
display:-ms-flexbox;
display:flex;
-ms-flex-direction:row-reverse;
flex-direction:row-reverse;
-ms-flex-pack:justify;
justify-content:space-between;
margin:0 auto 125px;
padding:0 0 0 11.5%;
}
}
.about01_txt{
width:40%;
box-sizing:border-box;
padding:0 50px 0 0;
}
.about01_img{
overflow:hidden;
width:55%;
margin-right: 3%;
}

.about02{
width:75%;
-ms-flex-align:start;
align-items:flex-start;
display:-ms-flexbox;
display:flex;
-ms-flex-direction:row-reverse;
flex-direction:row-reverse;
-ms-flex-pack:justify;
justify-content:space-between;
margin:0 auto 125px;
}
.about02_txt{
width:40%;
padding:125px 0 0;
}
.about02_img{
width:48%;
overflow:hidden;
}

.about03{
width:90%;
-ms-flex-align:start;
align-items:flex-start;
display:-ms-flexbox;
display:flex;
-ms-flex-pack:justify;
justify-content:space-between;
margin:0 auto 125px;
}
.about03_txt{
width:40%;
padding:100px 0 0;
}
.about03_img{
width:55%;
overflow:hidden;
}

.about01_img img,
.about02_img img,
.about03_img img{
width:100%;
opacity:0;
transform:scale(1.05);
}
.about01_img img[data-status=show],
.about02_img img[data-status=show],
.about03_img img[data-status=show]{
opacity:1;
transition:opacity 1s ease,transform 5s ease;
transform:scale(1);
}

@media screen and (max-width:960px){
.about02_txt,
.about03_txt{padding:50px 0 0;}
}

@media screen and (max-width:809px){
.about01,
.about02,
.about03{
width:auto;
-ms-flex-direction:column-reverse;
flex-direction:column-reverse;
margin:0 5% 5em;
}
.about01_txt,
.about02_txt,
.about03_txt{
width:100%;
box-sizing:border-box;
padding:2em 0 0 0;
}
.about01_img,
.about02_img,
.about03_img{
width:100%;
-ms-flex-item-align:start;
align-self:flex-start;
}
.about03_img{
-ms-flex-item-align:end;
align-self:flex-end;
}
}


.feature,
.profile{
padding:10% 0;
background:#f6fcea;
}
.profile{background:#fff;}
.feature h3,
.profile h3{
margin:0 0 25px;
text-align:left;
font-size:1.2rem;
line-height:25px;
opacity:0;
transform:translateY(10px);
}
.feature h4,
.profile h4{
margin:1em 0 0;
text-align:center;
font-size:1.2rem;
line-height:25px;
opacity:0;
transform:translateY(10px);
}
.feature h3,
.profile h3[data-status=show]{
opacity:1;
transition:all 1s ease;
transform:translateY(0);
}
.feature div p,
.profile div p{
text-align:left;
font-size:1.2rem;
line-height:25px;
opacity:0;
transform:translateY(10px);
}
.feature div p,
.profile div p[data-status=show]{
opacity:1;
transition:all 1s ease;
transform:translateY(0);
}
@media screen and (min-width:810px){
.feature01,
.profile01,
.feature02,
.profile02{
width:90%;
-ms-flex-align:center;
align-items:center;
box-sizing:border-box;
display:-ms-flexbox;
display:flex;
-ms-flex-direction:row-reverse;
flex-direction:row-reverse;
-ms-flex-pack:justify;
justify-content:space-between;
margin:0 auto 125px;
}
}

.feature01_txt,
.profile01_txt{
width:40%;
box-sizing:border-box;
padding:0 50px 0 0;
}
.feature02_txt,
.profile02_txt{
width:40%;
padding:3% 0 0;
}
.feature01_img,
.profile01_img,
.feature02_img,
.profile02_img{
overflow:hidden;
width:55%;
margin-right: 3%;
}
.feature01_img img,
.profile01_img img,
.feature02_img img,
.profile02_img img{
width:100%;
opacity:0;
transform:scale(1.05);
}
.feature01_img img[data-status=show],
.profile01_img img[data-status=show],
.feature02_img img[data-status=show],
.profile02_img img[data-status=show]{
opacity:1;
transition:opacity 1s ease,transform 5s ease;
transform:scale(1);
}

@media screen and (max-width:960px){
.feature02_txt,
.profile02_txt{padding:50px 0 0;}
}
@media screen and (max-width:809px){
.feature01,
.profile01,
.feature02,
.profile02{
width:auto;
-ms-flex-direction:column-reverse;
flex-direction:column-reverse;
margin:0 5% 5em;
}
.feature h3,
.profile h3{font-size:1.1rem;}
.feature h3,
.profile h3{margin:0 0 15px;}
.feature div p,
.profile div p{font-size:1.1rem;}
.feature01_txt,
.profile01_txt,
.feature02_txt,
.profile02_txt{
width:100%;
box-sizing:border-box;
padding:2em 0 0 0;
}
.shop_img,
.feature01_img,
.profile01_img,
.feature02_img,
.profile02_img{
width:100%;
-ms-flex-item-align:start;
align-self:flex-start;
}
}


.shop{
background:#eee;
padding:10% 0;
}
.shop_wrap a{text-decoration: none;}
.shop_wrap div{overflow:hidden;}

@media screen and (min-width:810px){
.shop_wrap{
width:80%;
-ms-flex-align:start;
align-items:flex-start;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-ms-flex-pack:justify;
justify-content:space-between;
margin:0 auto 0;
}
.shop_wrap div{
width:calc((100% - 45px) * .5);
margin:0 0 100px;
}
}

.shop_wrap img{
width:100%;
opacity:0;
transform:scale(1.05);
}
.shop_wrap img[data-status=show]{
opacity:1;
transition:opacity 1s ease,transform 5s ease;
transform:scale(1);
}
.shop_wrap div{
-ms-flex-item-align:center;
-ms-grid-row-align:center;
align-self:center;
text-align:left;
font-size:1.4rem;
line-height:25px;
}
.shop_wrap div h3{
color:#555;
opacity:0;
transform:translateY(10px);
}
.shop_wrap div h3[data-status=show]{
opacity:1;
transition:all 1s ease;
transform:translateY(0);
}
.shop_wrap div p{
opacity:0;
transform:translateY(10px);
}
.shop_wrap div p[data-status=show]{
opacity:1;
transition:all 1s ease;
transform:translateY(0);
}
.shop_txt_en{
font-family: 'Roboto Slab', serif;
font-weight: 300;
margin:0 0 10px;
}
.shop_txt_en:before{
content: "──";
margin-right: 0.5em;
color: #D44953;
}
.shop_link{
width:40%;
margin:0 auto;
opacity:0;
transform:translateY(10px);
}
.shop_link[data-status=show]{
opacity:1;
transition:all 1s ease;
transform:translateY(0);
}
.shop_link a{
-ms-flex-align:center;
align-items:center;
border:1px solid #D44953;
border-radius: 5px;
box-sizing:border-box;
display:-ms-flexbox;
display:flex;
font-family: 'Roboto Slab', serif;
font-weight: 300;
font-size:1.3rem;
height:50px;
-ms-flex-pack:center;
justify-content:center;
text-decoration:none;
transition:all 250ms ease;
}
.shop_link a:before,
.shop_link a:after{
font-family:"Font Awesome 5 Free" !important;
font-weight:900 !important;
content:"\f105" !important;
margin:0 1em !important;
}
.shop_link a:hover{opacity:.7; background: #D44953; color: #fff;}

@media screen and (max-width:809px){
.shop_link{width:80%;}
.shop_wrap{
width:auto;
-ms-flex-direction:column-reverse;
flex-direction:column-reverse;
margin:0 5% 5em;
}
.shop_wrap div{
width:100%;
padding-top: ;
margin:0 0 50px;
}
.shop_wrap div{margin:0 0 50px;}
}


.news{
padding:10% 0;
background: #faffed;
}
.news_wrap{
width:80%;
margin:0 auto;
opacity:0;
transform:translateY(10px);
}
.news_wrap[data-status=show]{
opacity:1;
transition:all 1s ease;
transform:translateY(0);
}
.news_wrap img{width:100%;}

@media screen and (max-width:809px){
.news_wrap{
width:93%;
}
}


@media screen and (min-width:810px){
.access_objet{
width:80%;
display:-ms-flexbox;
display:flex;
-ms-flex-pack:justify;
justify-content:space-between;
margin:0 auto;
}
.access_map{width:48.1%;}
.access_info{width:45.5%;}
}

.access{
padding:10% 0;
background:#ebf2fb;
box-sizing:border-box;
position:relative;
}
.access_map {
height: 0;
overflow: hidden;
padding-bottom: 45%;
position: relative;
}
.access_map iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.access_info{
opacity:0;
transform:translateY(10px);
}
.access_info[data-status=show]{
opacity:1;
transition:all 1s ease;
transform:translateY(0);
}
.access_info {
height:100%;
-ms-flex-align:start;
align-items:flex-start;
box-sizing:border-box;
display:-ms-flexbox;
display:flex;
-ms-flex-direction:column;
flex-direction:column;
-ms-flex-pack:justify;
justify-content:space-between;
text-align:left;
text-decoration:none;
text-decoration:none;
transition:all 250ms ease;
}
.access_info a:hover p{color:#ccc;}
.access_info_txt{font-size:1.5rem;}

@media screen and (max-width:809px){
.access_map iframe{height: 75%;}
.access_objet{
width: 90%;
margin: 0 auto;
}
.access_info_txt{white-space:nowrap;}
}



/*========= スクロール途中でヘッダーが表示＆非表示するためのCSS ===============*/



#header{
position: fixed;
height: auto;
width:100%;
z-index: 99;
display: flex;
border: 1px solid #ccc;
/*========= justify-content: space-between; ===============*/
align-items: center;
background-color:rgba(255,255,255, 0.65);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.05);
text-align: center;
padding: 10px 20px;
}
#header img.id_header_img{height: 80px;}

@media screen and (max-width:809px){
#header nav ul{display: none;}
}

#header.UpMove{animation: UpAnime 0.5s forwards;}
@keyframes UpAnime{
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100px);
}
}
#header.DownMove{animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
nav ul{
list-style: none;
justify-content: center;
margin-left: 3em;
padding:10px 10px 10px 0;
float: left;
}
nav ul#tel{
float: right !important;
}
nav ul li {
display: inline-block;
}
nav ul li a{
display: block;
text-decoration: none;
transition:all 0.3s;
font-family: 'Roboto Slab', serif;
font-weight: 400;
font-size:1.7em;
margin-right: 1em;
display: inline-block;
}
nav ul li a:before{
font-family:"Font Awesome 5 Free";
font-weight:900;
margin-right:0.5em;
color: #D44953;
content:"\f105";
display: inline-block;
}
nav ul li a.tel{
float: right !important;
}
nav ul li a.tel:before{
content:none !important;
}
nav ul li.current a,
nav ul li a:hover,
nav ul li a:active{
color:#fff;
}

@media screen and (max-width:810px){
.header_btn{transform: scale(0.5, 0.5);
top:20px;
right:10px;}
#header img.id_header_img{height: 55px;}
}