@charset "Shift_JIS";

/*
VARIABLES
================================================ */
:root {
/*    --light-green: #d5edeb; */
/*    --light-green: #2d2a32; */
    --light-green: #78FF94;
    --green: #63dbd0;
    --brown: #403632;
    --light-grey: #eee;
    --white: #fff;
    --oswald-font: 'Oswald', sans-serif;
}

/*
GENERAL STYLING
================================================ */
body{
    color: var(--brown);
    background : url(../png/mainimg_6Ac.png) right bottom / cover no-repeat fixed padding-box border-box transparent;
      text-align : left;
/*      text-align: left; */

  position : static;
}

/*
COMMON
================================================ */
p{
    line-height: 1.7;
}
img{
    max-width: 100%;
}
.ihin_title{
    font-family: var(--oswald-font);
    font-size: min(10vw, 4rem);
    margin-bottom: 1rem;
}
.btn{
    color: var(--white);
    background: var(--brown);
    border: 1px solid var(--brown);
    text-decoration: none;
    padding: 1rem;
    display: inline-block;
    margin: 2rem 0;
    transition: .4s;
}
.fadein{
    opacity: 0;
}

/*
LAYOUT
================================================ */
.wrapper{
    max-width: 38rem;
/*    max-width:  150px; */
    margin: auto;
/*    margin: 0; */
    padding: 0 1rem;
}

/*
LOADING
================================================ */
#loading{
    background-color: var(--light-grey);
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
}
#loading-screen{
    background-color: var(--light-green);
    position: fixed;
    inset: 0;
    z-index: 9998;
    translate: 0 100vh;
}
#loading p{
    font-size: 2rem;
    font-family: var(--oswald-font);
}

/*
SLIDE MENU
================================================ */
/* 開閉ボタン*/
.btn-menu{
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 4;
    padding: .5rem 1rem;
    border: 1px solid var(--brown);
    border-radius: 50%;
    height: 4rem;
    width: 4rem;
    transition: .4s;
}
.btn-menu svg{
    fill: var(--brown);
/*    margin-top: .25rem; */
    margin-top: .3rem;
    height: 2rem;
    width: 2rem;
}

/* 閉じるボタン*/
#menu-close {
    border: 1px solid var(--light-green);
}
#menu-close svg {
    fill: var(--light-green);
}

/* スライドメニューパネル */

/*
HERO
================================================ */

/*
CONCEPT
================================================ */
.concept{
/*    margin: 8rem 0; */
    margin: 3rem 0;
/*
    background-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 20%,
        var(--light-grey) 20%,
        var(--light-grey) 100%
    );
*/

    background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("../png/mainimg_6Ac.png");

/*
    background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("../png/mainimg_6Ac.png");
*/
/*
    background-image: url("../png/mainimg_6Ac.png");
*/
}
.concept p{
    text-align: left;
    margin-bottom: 1rem;
}

/*
GALLERY
================================================ */

/*
SHOP INFO
================================================ */
.shop{
/*    background: url('../images/bg-shop.jpg') no-repeat center top / cover; */
/*    margin-top: 16rem; */
    margin-top: 3rem;
    position: relative;
/*    height: 40rem; */
    height: auto;
}
.shop-content{
    background: var(--white);
    padding: 3rem;
    position: absolute;
    top: -8rem;
    width: 90vw;
    left: 0;
    right: 0;
}
.shop h3{
    margin: 1rem 0;
    padding-top: 2rem;
    font-weight: normal;
    border-top: 1px solid var(--light-grey);
}

/*
DESKTOP SIZE
================================================ */
@media(min-width: 800px){
/* COMMON */
    .title{
        margin-bottom: 3rem;
    }
    .btn:hover {
        color: var(--brown);
        background: var(--light-green);
    }

/* SLIDE MENU */

/* CONCEPT*/
    .concept{
        display: flex;
/*        margin: 16rem 0; */
        margin: 3rem 0;
    }
    .concept p{
        text-align-last: left;
    }
/*ADD S*/
    .concept a{
        margin-bottom: 0.5rem;
    }
/*ADD E*/
    .concept img{
/*        margin: -6rem 0; */
        margin: 0rem;
/*        max-width: 38rem; */
        max-width: 190px;
    }

/* GALLERY */

/* SHOP */
    .shop{
/*        margin-top: 20rem; */
        margin-top: 3rem;
/*        height: 50rem; */
        height: auto;
    }
}
/**************************
*
*	タップで電話発信
*
**************************/
@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}

.btn-tel{
	position: relative;
	display: block;
	color: black;
	font-weight: normal;
	text-align: center;
	background-color: orange;
	padding: 5px 0px;
	margin: auto;
	max-width: 250px;
}

.btn-tel::after{
	content: "";
	width: 24px;
	height: 24px;
	left: 15px;
	position: relative;
}

.tel-fixed{
  position : fixed;
  right : 30px;
  bottom : 30px;
}