@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}

.spbtn {
    display: none;
}

img {
    width: 100%;
}

header {
    margin: 0 0 10% 0;
}

header nav {
    margin-right: 3%;
}

.gnavi {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: wrap;

    color: darkgray;
    font-weight: bold;
    /* padding: 10px; */
}

.gnavi li {
    padding: 0px 20px 15px 20px;    
    background-color: white;
    font-size: 3vw;
}

header img {
    display: block;
    width: 100%;
    /* text-align: right; */
    margin: 0 0 0 auto;
}


.topparent {
    position:relative;
    padding: 0;
    width: 65%;
    margin: 0 0 0 auto;
}

.topparent h1 {
    font-family: 'Chonburi', cursive;
    /* font-size: 4.5em; */
    font-size: 5vw;
    color: white;
    line-height: 0.9;

    position:absolute;
    top:40%;
    left:-40%;
}

.topparent h1::before {
    position:absolute;
    top: 10%;
    left: -10%;
    content: "";
    display: inline-block;
    width: 200px;
    height: 1px;
    background-color: white;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.topparent:before {
    position: absolute;
    content: "";
    /* aspect-ratio: 1 / 1 ; */
    background: linear-gradient(135deg, #333333 0%, #a9a9a9 100%);
    top: -20%;
    left: -60%;
    z-index: -1;
    
    width: 100%;
    height: 100%;
}

/* 
.topparent:after {
    position: absolute;
    content: "";
    background-color:rgba(100, 100, 100, 0.7);

    bottom: -10%;
    right: 0px;
    z-index: 3;
    
    width: 60%;
    height: 20%;
}
*/

.newsbox {
    display: flex;
    position: absolute;
    background-color:rgba(100, 100, 100, 0.8);
    color: white;

    bottom: -10%;
    right: 0px;
    z-index: 3;
    
    width: 60%;
    height: 20%;

    align-items: center;
    justify-content: center;
    /* padding: 20px; */
}

.newsbox p {
    padding: 20px;
    font-weight: bolder;
}

.newsbox ul {
    border-left: 1px solid white;
    padding-left: 10px;
}

/****** ABOUT ******/



.aboutbox {
    position: relative;
    display: flex;
    margin-bottom: 10%;
    margin-top: 15%;
}

.aboutbox img {
    width: 70%;
    height: 100%;
    display: block;
    /* position: relative; */
}

.aboutbox h2 {
    font-family: 'Chonburi', cursive;
    font-size: 10vw;
    color:rgba(191, 154, 120, 0.5) ;
    display: inline-block;

    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);

    position: absolute;
    right: -10%;
    top: 32%;

    z-index: -1;
}

.abouttxt {
    margin: 3%;
    margin-left: -15%;
    color: #333333;
}

.abouttxt h3 {
    padding-top: 40%;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;;
    font-size: 2vw;
    padding-bottom: 10%;
}

/****** CONTENTS ******/

.contentscontnainer p{
    padding: 20px 0% 20px 0%;
    /* padding:5% auto; */
    /* margin-left: 5%; */
}

.contentscontnainer h2 {
    font-family:  'Chonburi', cursive;
    font-size: 4vw;
    line-height: 0.9;
    padding: 5% 0% 3% 0%;
}

.contentscontnainer h3 {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;;
    font-size: 1.5vw;
    padding: 5% 0% 0% 0%;
    /* padding: 5% 0% 0% 10%; */
}

.contentstxt {
    margin: 3%;
}

.contents2 > .contentstxt {
    margin: 2%;
}

.count {
    margin: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10vw;
    position: relative;
}

.count::before {
    position:absolute;
    top: 65%;
    right: -30%;
    content: "";
    display: inline-block;
    width: 200px;
    height: 1px;
    background-color: white;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


.contents2 .count::before {
    background-color:rgb(191, 154, 120);
}

.moreinfobox {
    display: inline-block;
    border: 1px solid;
    padding: 0 3%;
    /* padding: 5%; */
    /* margin-left: 15%;
    margin-bottom: 5%; */
    font-size: 1vw;
}

.contents2 .moreinfobox {
    margin-right: 3%;
    padding-right: 0%;
}

.contents1, .contents3 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px;
    background-color: lightgray;   
    position: relative;
}

.contents1 .count {
    position: absolute;
    top: -5%;
    left: 15%;
}

.box {
    display: block;
}

.contents1 img, .contents3 img {
    text-align: right;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20% 5% 10% 20%;
}

.contents1 .count, .contents1 h2,.contents1 .moreinfobox, .contents3 .count, .contents3 h2,.contents3 .moreinfobox {
    color: white;
}

.contents2 {
    text-align: right;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    height: 700px;
    background-color: white;   
    position: relative;
    margin: 5% auto;
}

.contents2 .count {
    color: rgba(191, 154, 120, 1);
    position: absolute;
    top: -8%;
    right: 10%;
    text-align: center;
}

.contents2 p, .contents2 h3 {
    margin-right: 20px;
}

.contents2 h2 {
    margin-right: 50px;
}

.bgtxt {
    /* background-color: #bf9a78; */
    background: linear-gradient(135deg, #7b5544 0%, #bf9a78 100%);
    color: white;
    width: 700px;
    height: 300px;
    z-index: -1;
    margin-left: -5%;
}

.contents2 h2 {
    margin-left: 0%;
    color: rgba(191, 154, 120, 1);
}

.contents2 img {
    width: 80%;
    height: 100%;
    object-fit: contain;
    margin-right: 20%;
}

.contents3 .count {
    position: absolute;
    top: -5%;
    left: 15%;
}

/* CONTENTS4&5 */

.contantscontainer2 {
    background: linear-gradient(180deg, white 0%, white 40%, #bf9a71 40%, #7b5544 100%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    padding: 10% 0% 2% 20%;
}

.contantscontainer2 .contentstxt {
    color: white;
}

.contents4, .contents5 {
    position: relative;
    padding-right: 3%;
}

.contents4 .count {
    color: #bf9a78;
    position: absolute;
    top: -25%;
    left: -20%;
}

.contents4 .count::before, .contents5 .count::before {
    background-color:rgb(191, 154, 120);
}

.contents4 img {
    width: 70%;
    object-fit: contain;
}

.contents5 .count {
    color: rgba(191, 154, 120, 1);
    position: absolute;
    top: -10%;
    left: -20%;
}

.contents5 img {
    width: 70%;
    object-fit: contain;
}


/* お問い合わせフォーム */

.contacth2, .accessmap {
    font-family:  'Chonburi', cursive;
    font-size: 4vw;
    line-height: 0.9;
    padding: 5% 0% 0% 0%;
    text-align: center;
    color: #333333;
}

.contacth2, .contacth2 span, .accessmap, .accessmap span {
    display: block; 
}

.contactbox {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
    background-image: url(../img/contactimg.png);
    background-size:cover;
    /* object-fit: contain; */
    background-repeat: no-repeat;
    padding: 10%;
    margin: 15% 0% 0% 0%;

    position: relative;
}

.tel, .mail {
    display: block;
    width: 30%;
    margin: 2% auto;
    padding: 2%;
    background-color: rgba(170, 170, 170, 0.6);
    text-align: center;
    color: #333333;
}

.tel h3, .mail h3 {
    font-weight: bold;
}

.contacth2 {
    position: absolute;
    top: -20%;
}

.telnum {
    font-weight: bolder;
    font-size: 2em;
    line-height: 2;
}

.mailform {
    font-weight: bolder;
    font-size: 1.2em;
    line-height: 1.5;
    color: white;
    background-color: #333333;
    padding: 7% 5%;
    margin-top: 5%;
}


/* アクセス */

.accessbox {
    margin: 10% auto;
}

.googlemap {
    text-align: center;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 1% 5% 0% 5%;
}

.maptxt {
    width: 1000px;
    display: inline-block;
    text-align: center;
    background-color: rgba(211, 211, 211, 0.5);
    color:#333 ;
    padding: 1% 0%;
    font-size: 0.9em;
}

/* フッター */

.footerbox {
    margin-top: 5%;
    padding: 5%;
    background-color: #333;
    color: white;
}

.footertxt {
    display: flex; 
}

.footleft {
    margin-right: 5%;
}

.footleft, .footright {
    border-left: 1px solid white;
    padding-left: 1%;
}

.footright {
    line-height: 2;
}

/* のちのち */

.snsbox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
}

.snsbox img {
    display: block;
    width: 60%;
    margin: 3%;
}

.copy {
    margin-top: 3%;
    font-size: 0.8em;
    text-align: right;
}

    /*========= ページトップのためのCSS ===============*/

    #footer {
        position: relative;
    }

    /*リンクの形状*/
    #page-top a{
        display: flex;
        justify-content:center;
        align-items:center;
        background:#942D2F;
        border-radius: 5px;
        width: 60px;
        height: 60px;
        color: #fff;
        text-align: center;
        text-transform: uppercase; 
        text-decoration: none;
        font-size:0.6rem;
        transition:all 0.3s;
    }
    
    #page-top a:hover{
        background: #777;
    }
    
    /*リンクを右下に固定*/
    #page-top {
        position: fixed;
        right: 10px;
        bottom:10px;
        z-index: 2;
        /*はじめは非表示*/
        opacity: 0;
        transform: translateY(100px);
    }
    
    /*　上に上がる動き　*/
    
    #page-top.UpMove{
        animation: UpAnime 0.5s forwards;
    }
    @keyframes UpAnime{
        from {
        opacity: 0;
        transform: translateY(100px);
        }
        to {
        opacity: 1;
        transform: translateY(0);
        }
    }
    
    /*　下に下がる動き　*/
    
    #page-top.DownMove{
        animation: DownAnime 0.5s forwards;
    }
    @keyframes DownAnime{
        from {
        opacity: 1;
        transform: translateY(0);
        }
        to {
        opacity: 1;
        transform: translateY(100px);
        }
    }


/**** スマホ ****/

@media screen and (max-width: 960px){

    .topparent {
        width: 100%;
    }

    header img {
        object-fit: contain;
    }

    .topparent > h1 {
        font-size: 6vw;    
        left: 10%;
    }

    .newsbox {
        position: static;       
        width: 90%;
        padding: 20px;
        margin: 5px auto;
    }

    .newsbox  a{
        font-size: 2.5vw;
}

    .aboutbox{
        flex-direction: column;
        margin-bottom: 4%;
    }

    .aboutbox > img {
        width: 70%;
        height: 100%;
    }

    .aboutbox > h2 {
        top: 10%;
    }

    .abouttxt {
        margin-left: 3%;
    }

    .abouttxt > h3 {
        padding-top: 5%;
        font-size: 3vw;
        padding-bottom: 5%;
    }
    
    .count{
        display: none;
    }

    .contents1, .contents3 {
        flex-direction: column;
        position: static;
        height: 110%;
    }

    .contents1 img, .contents3 img {
        width: 70%;
        /* padding-top: 3%; */
        text-align: center;
        padding: 5%;
        margin-left: 10%;
    }

    .contentscontnainer h2 {
        font-size: 6vw;
        line-height: 0.9;
        padding: 0;
    }
    
    .contentscontnainer h3 {
        font-size: 3vw;
        padding: 5% 0% 0% 0%;
    }

    .contents2 {
        /* display: block; */
        text-align: left;
        flex-direction: column;
        justify-content: center;
        /* background-color: white;    */
        height: 110%;
        position: static;
    }

    .bgtxt {
        position: static;
        width: 100%;
        align-items: center;
        height: 250px;
        background: none;

    }
    
    .contents2 h2 {
        color: #946c45;
    }
    
    .contents2 h3, .contents2 p {
        color: #946c45;
    }

    .contents2 img {
        width: 65%;
        text-align: center;
        margin-left: 15%;
        padding-top: 3%;
        /* height: 100%;
        object-fit: contain;
        margin-right: 20%; */
    }
    
    .contents3 .count {
        position: absolute;
        top: -5%;
        left: 15%;
    }

    .contents2 .moreinfobox {
        color: rgba(191, 154, 120, 1);
    }

    .contantscontainer2 {
        /* background: linear-gradient(180deg, white 0%, white 50%, #bf9a71 50%, #7b5544 100%); */
        background: none;
        color: #946c45;
        flex-direction: column;
        justify-content: center;
        position: static;
        padding: 3% 0 3% 0;
    }

    .contantscontainer2 img {
        width: 100%;
    }

    .contantscontainer2 .contentstxt {
        color: #946c45;
    }

    .contents4, .contents5 {
        position: static;
        display: flex;
        padding-right: 0;
        padding: 3% auto;
        margin-top: 10%;
    }

    .contents4 .flex .delayScroll, .contents5 .flex .delayScroll{
        width: 50%;
}

    .contents5 img {
        margin-right:0 ;
        padding-right:0 ;
    }

    .contents5 {
        flex-direction: row-reverse;
    }

    .contactbox {
        flex-direction: column;
        padding: 5%;
        position: static;
    }

    .contactbox h3 {
        font-size: 2.5vw;
    }

    .mailform {
        font-size: 3vw; 
    }

    .holiday {
        font-size: 2.5vw; 
    }

    .tel, .mail {
        width: 60%;
    }

    .aboutbox {
        margin-top: 10%;
    }

    .accessmap h2, .contacth2 h2 {
        font-size: 7vw;
        color: #333;
        z-index: 10;
    }

    .accessmap span,  .contacth2 span {
        font-size: 2vw;
        padding: 1%;
    }

    .googlemap {
        position: relative;
        padding-bottom: 75%;
        height: 0;
        overflow: hidden;
    }

    .googlemap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .telnum {
        font-size: 1.5em;
    }    

    .snsbox {
        padding-top: 5%;
        width: 40%;
    }
    .snsbox img {
        width: 60%;
        margin: 0;
    }

    .contentscontnainer p, .abouttxt p, .footertxt p, .footertxt a {
        font-size: 2.5vw;
    }

    .contentscontnainer h3, .abouttxt h3{
        font-size: 3.5vw;
    }
    
}


/**** アニメーション ****/

@media screen and (min-width: 960px){


/*==================================================
　5-3-1 中心から外に線が伸びる（下部）
===================================*/

.gnavi li a{
    /*線の基点とするためrelativeを指定*/
    position: relative;
}

.gnavi li.current a,
.gnavi li a:hover{
    color:grey;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:grey;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

/*==================================================
ホバー
===================================*/

.newsbox li:hover, .footright li:hover {
    color: rgba(211, 211, 211, 0.8);
    transition: all .3s;
}

/* .moreinfobox:hover {
    transition: all .3s;
} */

/*== ボタン共通設定 */
.moreinfobox{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
    overflow: hidden;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    border: 1px solid #fff;/* ボーダーの色と太さ */
    padding: 3px 20px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.moreinfobox p {
    position: relative;
    z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
    color:#fff;
}

.moreinfobox:hover p{
    color:white;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
    content: '';
    /*絶対配置で位置を指定*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    /*色や形状*/
    background:rgba(255, 255, 255, 0.2);/*背景色*/
    width: 100%;
    height: 100%;
    /*アニメーション*/
    transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
    transform-origin:left top;
    transform:scale(1, 1);
}

/* お問い合わせフォームホバー */

.mail a:hover {
    opacity: 0.7;
    transition: all .3s;
}

/* SNSホバー */

.snsbox a:hover {
    opacity: 0.5;
    transition: all .3s;
}
}

/*==================================================
ハンバーガーメニュー
===================================*/

@media screen and (max-width: 960px){

    .spbtn {
        display: flex;
    }

    .gnavi {
        position: fixed;
        right: -70%;

        z-index: 100;
        width: 70%;
        height: 100vh;
        margin-left: auto;
        /* メニューを縦に */
        justify-content: center;
        flex-direction: column;
        color: #fff;
        background-color: rgba(90, 90, 90, 0.9);
        transition: .3s;
    }

    .gnavi li {
        background-color: rgba(128, 128, 128, 0);
        padding: 20px 20px 15px 20px;
    }

    .btn {
        /* ボタンの配置位置  */
        position: fixed;
        top: 10px;
        right: 10px;
        /* ボタンの大きさ  */
        width: 40px;
        height: 40px;
        /* 最前面に */
        z-index: 200;
    }

    .btn-line {
        z-index: 300;
        display: block;
        position: relative;  /* バーガー線の位置基準として設定 */
        width: 100%;  /* 線の長さと高さ */
        height: 4px;
        background-color: #d6d5d5;  /* バーガー線の色 */
        transition: .2s;
    }

        /****** 上下のバーガー線 *****/
    .btn-line::before,
    .btn-line::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #d6d5d5;
    transition: .5s;
    }
    .btn-line::before {
    /* 上の線の位置 */
    transform: translateY(-16px);
    }
    .btn-line::after {
    /* 下の線の位置 */
    transform: translateY(16px);
    }

    .gnavi.open {
        right: 0;
    }

    /***** メニューオープン時 *****/
    .btn-line.open {
        background-color: transparent;  	/* 真ん中の線を透明に */
    }
    .btn-line.open::before ,
    .btn-line.open::after {
        content: "";
        background-color: #fff;  /* 上下の線の色を変える */
        transition: .2s;
    }
    .btn-line.open::before {
        transform: rotate(45deg);  /* 上の線を傾ける */
    }
    .btn-line.open::after {
        transform: rotate(-45deg);  /* 下の線を傾ける */
    }

}

/*==================================================
視差
===================================*/

/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
    from {
        filter: blur(10px);
        transform: scale(1.02);
    }

    to {
        filter: blur(0);
        transform: scale(1);
    }
    }