@charset "UTF-8";

/*  reset
-----------------------------------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
}
body {
  line-height: 1;
  color: #000;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
ul, li {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
ins {
  background-color: #ff9;
  color: #474747;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #474747;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
input, select {
  vertical-align: middle;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
::-ms-expand {
  display: none;
}
img {
  vertical-align: top;
  width:100%;
  height:auto;
}

/*  basic
-----------------------------------------------------------------------------*/
*,*::before,*::after {
    box-sizing: border-box;
}
a ,a:visited ,a:hover {
  color: #000;
  text-decoration: none;
}
.clearfix:after {
  height: 0;
  display: block;
  clear: both;
  content: " ";
}
/* style */
html,
body {
width: 100%;
}
/* support iOS */
html{
  height: -webkit-fill-available;
}
body{
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
}
body{
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
}
.myfont{
    font-family: "Noto Sans JP", sans-serif;
    font-weight:900;
}

@media only screen and (min-width:1000px) {
.brpc{display:inline;}
.brsp{display:none;}
}
@media only screen and (max-width:999px) {
.brpc{display:none;}
.brsp{display:inline;}
}

@media only screen and (min-width:1000px) {
    .hide-sp{display:block;}
    .hide-pc{display:none;}
}
@media only screen and (max-width:999px) {
    .hide-sp{display:none;}
    .hide-pc{display:block;}
}

/* common
-------------------------------------------------------------*/
body {
    font-size: 1.4rem;
    line-height: 1.5;
    color: #272727;
    font-family: "Noto Sans JP", 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
    background-color:transparent;
}
.wrapper {
    width: 100%;
    z-index:1;
    background-color:transparent;
    /*    overflow:hidden;*/
}
.container{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    position: relative;
    z-index:10;
}

@media only screen and (max-width:999px) {
}

/* contents
-------------------------------------------------------------*/
.section-green,.section-white,.section-brown{
    width:100%;
}

.content-firstview{
    width:100%;
    max-width:1000px;
    margin:0 auto;
}
.content-section{
    width:100%;
    max-width:500px;
    margin:0 auto;
}
#section-about .content-section{
    padding-top:160px;
    padding-bottom:140px;
}
@media only screen and (max-width:999px) {
}

/* fixed background
-------------------------------------------------------------*/
.fixed-bg{
    width:559px;
    height:411px;
    position:fixed;
    z-index: 5;
    top:0;
    left:50%;
    transform: translate( -389px, 220px);
}
.fixed-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    /*object-fit: cover;*/
    opacity: 0;
    transition: opacity 3s ease;
}
.fixed-bg img.active {
    opacity: 1;
    z-index: 1;
}
.fixed-bg img.first {
    transition: opacity 0.2s ease;
    opacity: 0;
}

@media only screen and (max-width:999px) {
    .fixed-bg{
        width:350px;
        height:257px;
        position:fixed;
        z-index: 5;
        top:50%;
        left:50%;
        transform: translate( -114px, -114px);
    }
    .content-section{
        width:84%;
    }
    #section-about .content-section{
        padding-top:92px;
        padding-bottom:220px;
    }
}

/* front page
-------------------------------------------------------------*/
.content-firstview{
    width:100%;
    height:100vh;
    height:100dvh;
}
#section-firstview{
    position: relative;
}
.logo-main{
    width:100%;
    padding-top:358px;
    padding-left:107px;
}
.logo-main>span{
    display: block;
    width:36%;
    max-width:360px;
}
.icon-scroll{
    position:absolute;
    bottom:0;
    left:50%;
    width:30px;
    transform: translate(-50%,-40px);
}
.title-about{
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 2.4rem;
    letter-spacing: -0.02em;
    line-height: 1.9;
    color: #272727;
    font-weight: 700;
    font-feature-settings: initial;
    margin-bottom:80px;
}
.title-about span{
    display: block;
    white-space: nowrap;
}
.text-about{
    display: flex;
    flex-wrap:nowrap;
    justify-content: flex-end;
}
.text-about .text-content{
    width:fit-content;
}
.text-content p{
    font-size:1.5rem;
    letter-spacing:.08em;
    line-height:2.4;
    color:#272727;
    font-weight:400;
}
.text-content p:nth-of-type(1),.text-content p:nth-of-type(5),.text-content p:nth-of-type(6){
    margin-bottom:1em;
}
.title-news,.title-shopinfo{
    position: relative;
    font-size: 4.3rem;
    letter-spacing: -0.02em;
    line-height: 1.6;
    color: #272727;
    font-weight: 300;
    font-family: "Montserrat", sans-serif;
    font-feature-settings: initial;
    padding-bottom:0.2em;
    margin-bottom:30px;
    /*border-bottom: 1px #272727 solid ;*/
}
.title-shopinfo{
    border-bottom: none;
}
.wrap-news{
    width:100%;
    max-width:500px;
    margin:0 auto;
}
.wrap-news article{
/*    border-bottom: 1px #272727 solid ;*/
    margin-bottom:30px;
    padding-bottom:30px;
    position:relative;
}
.js-linear::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #000000;
    bottom: -1px;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform 0.8s;
}
.js-linear.inSight::after{
    transform: scale(1, 1);
}

.wrap-news header{
    margin-bottom:15px;
}
.wrap-news header time{
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    line-height: 2;
    color: #272727;
    font-weight: 300;
    font-family: "Hiragino Kaku Gothic ProN";
    margin-bottom:15px;
}
.wrap-news h1{
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    line-height: 1.8;
    color: #272727;
    font-weight: 400;
}
.wrap-news article p{
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    line-height: 2;
    color: #272727;
    font-weight: 400;
}
.wrap-instagram{
    width:100%;
    max-width:500px;
    margin:0 auto;
}
.icon-instagram{
    width:100%;
    display: flex;
    flex-wrap:nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    height:48px;
}
.icon-instagram a{
    width:26px;
    display: block;
}
#section-news{
    position: relative;
    padding-bottom:225px;
}
#section-shopinfo{
    position: relative;
    padding-bottom:0px;
    z-index: 10;
}
.cell-gglmaps{
    width:100%;
    margin-bottom:34px;
    position: relative;
    z-index: 1;
}
.cell-gglmaps iframe{
    width:100%;
    aspect-ratio: 4/3;
    vertical-align: bottom;
}
.info-around{
    font-size:1.5rem;
    font-weight:400;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: #272727;
    padding-bottom:0.8em;
    padding-top:0.8em;
}
.info-around dt,.info-around dd,.info-around p{
    margin-bottom:0.4em;
}
.info-around h3{
    font-weight:600;
}
.wrap-footer{
    width:100%;
    height:100vh;
    height:100dvh;
    margin:0 auto;
    background-color: transparent;
    position:relative;
}
.content-lastview{
    width:100%;
    height:100vh;
    height:100dvh;
    max-height:768px;
    max-height:100vh;
}
#section-lastview{
    position: relative;
}
.logo-main{
    width:100%;
    padding-top:358px;
    padding-left:107px;
}
.logo-main>span{
    display: block;
    width:36%;
    max-width:360px;
}
.icon-scroll{
    position:absolute;
    bottom:0;
    left:50%;
    width:30px;
    transform: translate(-50%,-40px);
}
.copyright{
    width:100%;
    padding:40px 0;
    text-align: center;
    font-size:1.0rem;
    letter-spacing:0;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    line-height:1.2;
    color:#272727;
    white-space: nowrap;
    transform: translate(0,-100%);
}



.google-map iframe {
    pointer-events: none;
}

.google-map.active iframe {
    pointer-events: auto; /* 必要時のみ操作可能に */
}
/*
// 例：クリックしたら地図を操作できるようにする
$('.google-map').on('click', function () {
  $(this).addClass('active');
});
*/

@media only screen and (max-width:999px) {
    .logo-main{
        width:100%;
        height:100%;
        padding:0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .logo-main>span{
        display: block;
        width:100%;
        max-width:225px;
    }
    .icon-scroll{
        position:absolute;
        bottom:0;
        left:50%;
        width:30px;
        transform: translate(-50%,-40px);
    }
    .title-about{
        margin-bottom:200px;
        margin-left:48%;
    }
    .title-about span{
    }
    .text-about{
        justify-content: flex-start;
    }
    .wrap-news{
        margin-bottom:86px;
    }
    #section-news{
        padding-bottom:200px;
    }
    .copyright{
        padding:56px 0;
        font-size:1.1rem;
    }
}

/* page
-------------------------------------------------------------*/

@media (hover: hover) and (pointer: fine) {
}
@media only screen and (min-width:1000px) {

}
@media only screen and (max-width:999px) {

}

/* fixed contents
-------------------------------------------------------------*/
.logo-fixed{
    position: fixed;
    top: 22px;
    left: 35px;
    width: 44px;
    height:34px;
    z-index: 30;
}
.logo-fixed:after{
    width: 81px;
    height:34px;
    display: inline-block;
    content: "";
    background-image: url(../images/logo_organic.svg);
    background-position:0 0;
    background-size: contain;
    background-repeat:no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index:4;
    transition: transform ease 0.8s;
}
.logo-fixed:after{
    transform: translate(46px, 0);
}
.logo-fixed.orbital01:after{
    transform: translate(46px, 0);
}
.logo-fixed.orbital02:after{
    transform: translate(0, 37px);
}
.logo-fixed.orbital03:after{
    transform: translate(27px, 25px);
}
.logo-fixed.orbital04:after{
    transform: translate(32px, 8px) rotate(-24deg);
}
.logo-fixed.orbital04 img{
    transform: rotate(-22deg);
}
#frontpage .logo-fixed {
    transition: opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
    opacity:0;
    pointer-events: none;
}
#frontpage .logo-fixed.fadein {
    opacity:1;
    pointer-events: auto;
    cursor: pointer;
}
.logo-fixed img{
    transition: transform 0.8s cubic-bezier(0.42, 0, 0.58, 1);
}
@media (hover: hover) and (pointer: fine) {
    .logo-fixed a:hover img{
        transform: rotate(-22deg);
    }
    .logo-fixed.orbital04 a:hover img{
        transform: rotate(-0deg);
    }
}

@media only screen and (max-width:999px) {
    .logo-fixed {
        top: 24px;
        left: 24px;
    }
}

/*  drawer
-------------------------------------------------------------*/
@media only screen and (max-width:999px) {
    .nav-drawer {
        display:block;
        width: 100%;
        height: 100%;
        /*  height: auto;*/
        padding: 0;
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40;
        opacity:0;
        transform: translateY(-100%);
        transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1) , opacity 0.8s cubic-bezier(0.42, 0, 0.58, 1) ;
    }
    .nav-drawer{
        background-position:50% 50%;
        background-size: cover;
        background-repeat:no-repeat;
    }
    .bg-1 .nav-drawer{
        background-image: url(../images/bg_01.jpg);
    }
    .bg-2 .nav-drawer{
        background-image: url(../images/bg_02.jpg);
    }
    .bg-3 .nav-drawer{
        background-image: url(../images/bg_03.jpg);
    }
    .bg-4 .nav-drawer{
        background-image: url(../images/bg_01.jpg);
    }
    .bg-5 .nav-drawer{
        background-image: url(../images/bg_02.jpg);
    }
    .bg-6 .nav-drawer{
        background-image: url(../images/bg_03.jpg);
    }
    .bg-7 .nav-drawer{
        background-image: url(../images/bg_01.jpg);
    }
    .bg-8 .nav-drawer{
        background-image: url(../images/bg_02.jpg);
    }
    .bg-9 .nav-drawer{
        background-image: url(../images/bg_03.jpg);
    }

    .drawerOverlay .nav-drawer{
        transform: translateY(0);
        opacity:1;
    }
    .nav-drawer{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .nav-drawer ul{
        width:62.58%;
    }
    .nav-drawer li{
        padding-bottom:60px;
    }
    .nav-drawer li:last-of-type{
        padding-bottom:0;
    }
    .nav-drawer li a{
        font-size:3.7rem;
        font-family: "Montserrat", sans-serif;
        letter-spacing:.01em;
        line-height:1.33;
        color:#272727;
        font-weight:300;
    }
    .li-instagram{
        width:100%;
        height:34px;
    }
    .li-instagram a{
        width:34px;
        display: block;
    }
}

@media only screen and (min-width:1000px) {
    .nav-drawer {
        display:block;
        width: 40px;
        height: 100%;
        /*  height: auto;*/
        padding: 0;
        background-color: rgba(255, 255, 255, 0.8);
        position: fixed;
        top: 0;
        right: calc(50% - 500px);
        z-index: 30;
    }
    .nav-drawer ul{
        padding-top:80px;
        padding-bottom:80px;
    }
    .nav-drawer li{
        padding-bottom:36px;
    }
    .nav-drawer li:last-of-type{
        padding-bottom:0;
    }
    .nav-drawer li a{
        font-size:2rem;
        font-family: "Montserrat", sans-serif;
        letter-spacing:.01em;
        line-height:1.33;
        color:#272727;
        font-weight:300;
        writing-mode: vertical-rl;
        text-orientation: sideways;
    }
    .li-instagram{
        width:100%;
        height:34px;
    }
    .li-instagram a{
        width:34px;
        display: block;
    }
}
@media (hover: hover) and (pointer: fine) {
    .nav-drawer li a,.link-nav-drawer a strong,.link-nav-drawer a span{
        transition: color cubic-bezier(0.42, 0, 0.58, 1) 0.4s;
    }
    .nav-drawer li a:hover,.link-nav-drawer a:hover strong,.link-nav-drawer a:hover span{
        color: #63aa40;
    }
    .li-instagram a img{
        transition: transform 0.4s;
    }
    .li-instagram a:hover img{
        transform: scale(1.07);
    }
}

.nav-drawer li:nth-of-type(3){
    display: none;
}

/* trigger-overlay
------------------------------------------------------------------*/
.trigger-overlay {
    position: fixed;
    top: 11px;
    right: 8px;
    width: 60px;
    height: 60px;
    display: block;
    cursor: pointer;
    z-index: 80;
    background-color: transparent;
}

.trigger-overlay span {
    display: block;
    position:relative;
    width: 30px;
    left:50%;
    width:30px;
    transform: translate(-50%,-40px);
}
.trigger-overlay img{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:30px;
    opacity:0;
    transition: opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
.trigger-overlay img:nth-of-type(1){
    opacity:1;
}
.trigger-overlay img:nth-of-type(2){
    opacity:0;
}
.trigger-overlay.is-pulled img:nth-of-type(1){
    opacity:0;
}
.trigger-overlay.is-pulled img:nth-of-type(2){
    opacity:1;
}
@media only screen and (min-width:1000px) {
    .trigger-overlay{
        display:none;
    }
}

.js-effect {
    opacity: 0;
    -webkit-transition: 1.2s cubic-bezier(0.39, 0.575, 0.565, 1);
    -moz-transition: 1.2s cubic-bezier(0.39, 0.575, 0.565, 1);
    -o-transition: 1.2s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: 1.2s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.js-effect.inSight {
    opacity: 1
}

.js-chain>span {
    opacity: 0;
    transition: 1.2s cubic-bezier(0.39, 0.575, 0.565, 1);
    transform: translateY(-40px);
}
.js-chain.inSight>span{
    opacity: 1;
    transform: translateY(0);
    will-change: transform;
}
.js-chain.inSight>span:nth-child(1) {
    transition-delay: .4s;
}
.js-chain.inSight>span:nth-child(2) {
    transition-delay: .8s;
}
.js-chain.inSight>span:nth-child(3) {
    transition-delay: 1.2s;
}

.js-chain>p {
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.js-chain.inSight>p{
    opacity: 1;
    will-change: transform;
}
.js-chain.inSight>p:nth-child(1) {
    transition-delay: .4s;
}
.js-chain.inSight>p:nth-child(2) {
    transition-delay: .8s;
}
.js-chain.inSight>p:nth-child(3) {
    transition-delay: 1.2s;
}
.js-chain.inSight>p:nth-child(4) {
    transition-delay: 1.6s;
}
.js-chain.inSight>p:nth-child(5) {
    transition-delay: 2.0s;
}
.js-chain.inSight>p:nth-child(6) {
    transition-delay: 2.4s;
}
.js-chain.inSight>p:nth-child(7) {
    transition-delay: 2.8s;
}
.js-chain.inSight>p:nth-child(8) {
    transition-delay: 3.2s;
}
.js-chain.inSight>p:nth-child(9) {
    transition-delay: 3.6s;
}

.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-of-type(5){}

.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4 .eapps-instagram-feed-posts-item-visible.eapps-instagram-feed-posts-item-loaded {
    opacity: 0;
    visibility: visible;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-visible.eapps-instagram-feed-posts-item-loaded {
    opacity: 1;
    visibility: visible;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4 .eapps-instagram-feed-posts-item-template-tile {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-child(1) {
    transition-delay: .0s;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-child(2) {
    transition-delay: .4s;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-child(3) {
    transition-delay: .8s;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-child(4) {
    transition-delay: 1.2s;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-child(5) {
    transition-delay: 1.6s;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-child(6) {
    transition-delay: 2.0s;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-child(7) {
    transition-delay: 2.4s;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-child(8) {
    transition-delay: 2.8s;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-child(9) {
    transition-delay: 3.2s;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-child(10) {
    transition-delay: 3.6s;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-child(11) {
    transition-delay: 4.0s;
}
.elfsight-app-b45b4800-f9d3-4e61-89ae-7afa124b9cb4.inSight .eapps-instagram-feed-posts-item-template-tile:nth-child(12) {
    transition-delay: 4.4s;
}

.eapps-instagram-feed-posts-grid-load-more-container .eapps-instagram-feed-posts-grid-load-more{
    display:none !important;
}

/*  canvas
-------------------------------------------------------------*/
canvas{
    position: fixed;
    top:0;
    left: 0;
    z-index: 3;
}

/*  hover effect
-------------------------------------------------------------*/
@media (hover: hover) and (pointer: fine) {
}

/*  responsive style
-------------------------------------------------------------*/
@media only screen and (max-width:999px) {
}
@media only screen and (min-width:1000px) {
}
@media only screen and (min-width:1280px) {
}