/******************************************************************/
/* index.html                                                     */
/******************************************************************/
/******************************************************************/
/* 共通エリア                                                      */
/******************************************************************/
html{
    scroll-snap-type:y proximity;/*ページ内リンク少し上に着地調整*/
    scroll-padding-top:100px;/*ページ内リンク少し上に着地調整*/
    scroll-behavior:smooth;/*上に戻る挙動スムーズに*/
}
.container {
    /*max-width:1920px;*/
    max-width:100%;
    width:100%;
    margin: 0 auto;
    position:relative;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .container {
        max-width:400px;
        width:100%;
    }
}
/******************************************************************/
/* body                                                           */
/******************************************************************/
/*スマホ左右に動かなくする対応*/
body {
    overflow-x: hidden;
    /* box-sizing : border-box;*/
}
/******************************************************************/
/* ヘッダーエリア                                                  */
/******************************************************************/
header {
    background-color:#ffffff;
    height:80px;
    max-height:8vw;
    width:100%;/*追記*/
    max-width:100%;/*追記*/
    position:fixed;
    top:0;
    left:0;
    z-index:100;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    header {
        height:50px;
        max-height:14vw;
        width:100%;/*追記*/
        max-width:400px;/*追記*/
    }
}
.header_area{
    display:flex;
    height:65px;
    max-height:6.5vw;
    width:100%;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .header_area{
        height:50px;
        max-height:13vw;
    }
}
/******************************************************************/
/* ヘッダーメニュー（会社概要・アクセス・プライベートポリシー）         */
/******************************************************************/
.header_menu_top{
    display:flex;
    margin-top:0px;
    margin-right:min(1vw, 20px);
    margin-left:auto;
    margin-bottom:0px;
    justify-content:right;
    padding-top:min(0.5vw, 5px);
    height:15px;
    max-height:1.5vw;
    /*width:360px;*/
    width:240px;
    /*max-width:25vw;*/
}
@media screen and (max-width: 480px) {
    .header_menu_top{
        display:none;
    }
}
.header_menu_top_item{
    font-size:min(0.7vw, 10px);
    width:120px;
    max-width:7vw;
    text-align:center;
}
/******************************************************************/
/* ヘッダーロゴ                                                    */
/******************************************************************/
.header_logo{
    display:flex;
    justify-content:center;
    align-items:center;
    width:300px;
    max-width:25vw;
}
@media screen and (max-width: 480px) {
    .header_logo{
        /*width:auto;*/
        width:200px;
        max-width:50vw;
        margin:0px auto 0px 0px;
    }
}
.header_logo a{
    display:flex;
    justify-content:center;
    align-items:center;
}
.header_logo img{
    height:60px;
    max-height:4vw;
    /*margin-top:10px;*/
    /*margin-left:10px;*/
}
/*@media screen and (max-width: 900px) {
    .header_logo img{
        height:30px;
    }
}*/
@media screen and (max-width: 480px) {
    .header_logo img{
        height:35px;
        max-height:10vw;
        /*margin-top:5px;*/
        /*margin-left:0px;*/
        width:100%;
    }
}
/******************************************************************/
/* ヘッダーメニュー                                                */
/******************************************************************/
.header_menu{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
    display:flex;
    align-items:center;
    margin:0 0 0 auto;
    height:65px;
    max-height:6.5vw;
}
.header_menu_item{
    font-size:min(1vw, 13px);
    font-weight:bold;
    width:120px;
    max-width:7vw;
    text-align:center;
    color:#696969;
}
/* 拡大対応 */
/*@media screen and (max-width: 900px) {
    .header_menu_item{
        font-size:7px;
        width:50px;
    }
}*/
.header_menu_item:hover{
    background-color:#9b7a6c;
    color:white;
}
.header_menu_item a{
    display:flex;
    justify-content:center;
    flex-direction:column;
}

.header_menu_item span{
    font-family:"Roboto", sans-serif;
    font-weight:bold;
    color:#e0d5d1;
    /*display:inline-block;*/
    width:100%;
}
.header_sns{
    display:flex;
    align-items:center;
    text-align:center;
    margin-top:0px;
    margin-right:0px;
    margin-left:min(2.9vw, 50px);
    margin-bottom:0px;
    /*width:210px;*/
    width:auto;
    max-width:20vw;
}
/*@media screen and (max-width: 900px) {
    .header_sns{
        width:130px;
        margin: 0px 0px 0px 10px;
    }
}*/
/*スマホ対応*/
@media screen and (max-width: 480px) {
    .header_sns{
        /*margin:0px 0px 0px auto;*/
        /*width:auto;*/
        display:none;
    }
}
.header_sns_item{
    width:70px;
    max-width:5vw;
}
@media screen and (max-width: 480px) {
    .header_sns_item{
        width:40px;
    }
}
@media screen and (max-width: 480px) {
    .header_sns_item i{
        font-size:25px;
    }
}
@media screen and (max-width: 480px) {
    .header_menu{
        display:none;
    }
}

/*header_menu_tb　処理移動*/

/******************************************************************/
/* ヘッダーメニュー  ドロップメニュー用                              */
/******************************************************************/
.drop_proc:hover .drop_area{
    opacity:1;
    transition:opacity .3s,visibility .3s;
    visibility:visible;
}
.drop_proc{
    position:relative;
}
.drop_area{
    background-color:#696969;
    opacity:0;
    position:absolute;
    left:0;
    top:100%;/*ヘッダーメニューの下から表示*/
    transition: opacity .3s, visibility .3s;
    visibility:hidden;
    width:max-content;
    z-index:12;
}
.drop_item{
    font-size:15px;
    text-align:left;
    font-weight:bold;
}
.drop_link{
    display:block;
    padding:10px;
    margin:0px;
    color:#696969;
    background-color:#FCF3F3;
}
.drop_link:hover{
    color:white;
    background-color:#9b7a6c;
}
/******************************************************************/
/* スマホ向けメニュー　ハンバーガーメニュー                           */
/******************************************************************/ 
.header_menu_tb{
    display:none;
    position:relative;
    width:55px;
    margin:0 0 0 auto;
    z-index:101;
}
@media screen and (max-width: 480px) {
    .header_menu_tb{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        margin:0 0 0 10px;
        width:auto;
        
    }
}
/*ボタン外側*/.header_menu_lines{
    position: relative;/*ボタン内側を基点とする*/
    background:#997768;
    cursor: pointer;
    width: 40px;
    height:40px;
    border-radius: 5px;
}
/*ボタン内側*/
.header_menu_lines span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 5px;
    height: 4px;
    border-radius: 5px;
    background: #fff;
    width: 75%;
}
.header_menu_lines span:nth-of-type(1) {
    top:10px; 
}
  
.header_menu_lines span:nth-of-type(2) {
    top:18px;
}
  
.header_menu_lines span:nth-of-type(3) {
    top:26px;
}
/*.header_menu_lines span:nth-of-type(3)::after {
    content:"Menu";
    position: absolute;
    top:3px;
    left:-4px;
    color: #fff;
    font-size: 0.6rem;
    text-transform: uppercase;1 
}MENU文言非表示*/
.header_menu_lines.active span:nth-of-type(1) {
    top: 12px;
    left:10px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}
  
.header_menu_lines.active span:nth-of-type(2) {
    opacity: 0;
}
  
.header_menu_lines.active span:nth-of-type(3){
    top: 24px;
    left: 10px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}
  
.header_menu_lines.active span:nth-of-type(3)::after {
    /*content:"Close";MENU文言非表示*/
    transform: translateY(0) rotate(-45deg);
    top:5px;
    left:4px;
}
.header_slide_menu_area{
    display:none;/*PC非表示*/
    background-color: #f4e3dd;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height:100%;
    padding:10px;
    transform: translateX(100%); /* ハンバーガーメニューOFF時右側へスライドさせておく */
    z-index:99;
    transition: 0.4s;
    overflow-y:scroll;/*メニュー縦スクロール許可*/
}
@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    .header_slide_menu_area{
        display:block;
    }
}
.header_slide_menu_area li{
    color: #696969;
    text-align: left;
}
.header_slide_menu_top{
    display:flex;
    justify-content:center;
    width:55%;
}
.header_slide_sns{
    display:flex;
    justify-content:center;
    width:100%;
}
.header_slide_sns li{
    padding:5px 10px;
}
.header_slide_sns li:first-child{
    padding-top:7px;
}
.header_slide_sns li:last-child{
    padding:7px;
}
.header_slide_menu_area.active{
    transform: translateX(0); /*ハンバーガーメニューON時、左にスライドさせて画面表示する*/
}
.header_slide_sub_menu{
    display:flex;
    justify-content:center;
    flex-direction:column;
    margin-top:50px;
}
.header_slide_sub_menu li{
    width:50%;
    color:#9b7a6c;
    font-size:12px;
    font-weight:bold;   
    border-radius:50px;

    padding:1px 10px;
    margin-bottom:5px;
}

/******************************************************************/
/* スマホ向けメニュー画面デザイン                                    */
/******************************************************************/ 
/* メニューのデザイン*/
.nav_content {
    width: 100%;
    height: 100%;
    padding:20px 10px 10px 10px;
    /*position: fixed;*/
    position:absolute;
    top: 0;
    left: 100%; /* メニューを画面の外に飛ばす */
    z-index: 99;
    background:snow;
    transition: .5s;
}
.nav_header{
    display:flex;
    margin-bottom:20px;
}
.nav_logo{
    height:70px;
    width:30%;
    text-align:center;
}
.nav_title{
    width:70%;
    display:flex;
    align-items:center;
    font-weight:bold;
    color:#696969;
}
/* メニュー黒ポチを消す */
.nav_list {
    list-style: none;
}
.nav_item{
    border-bottom:2px solid #997768;
    font-weight:bold;
    padding-top:10px;
    padding-bottom:10px;
}
.nav_item_title{
    display:block;
    padding-left:20px;
    padding-right:20px;
    letter-spacing:0.1em;
    color:#9b7a6c;
}
.nav_item_title span{
    display:inline-block;
    width:100px;
    font-size:13px;
    padding-right:10px;
    color:#c1a69c;
}
.nav_item_title_none{
    display:block;
    padding-left:20px;
    padding-right:20px;
    letter-spacing:0.1em;
    color:#9b7a6c;
}
.nav_item_title_none span{
    display:inline-block;
    width:100px;
    font-size:13px;
    padding-right:10px;
    color:#c1a69c;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
    left: 0;/* メニューを画面に入れる */

}
.nav_Reserv{
    margin-top:20px;
    display:flex;
    justify-content:center;
    display:none;
}
.nav_Reserv_btn{
    width:80%;
    background-color:peachpuff;
    box-shadow: 0 3px 0 #ffc41d;
    border-radius:20px;
    padding:5px;
    color:#696969;  
    text-align:center;
    font-weight:bold;
    letter-spacing:0.1em;
}
/******************************************/
/*アコーディオンパネルの開閉ボタン（＋＆－）  */
/******************************************/
.nav_item_title{
    position:relative;
}
.nav_item_title::before,
.nav_item_title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #997768;
    
}
.nav_item_title::before{
    top:50%;
    right: 20px;
    transform: rotate(0deg);
    
}
.nav_item_title::after{    
    top:50%;
    right: 20px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.nav_item_title.close::before{
    transform: rotate(0deg);
}  
.nav_item_title.close::after{
    transform: rotate(0deg);
}
/*アコーディオンで現れるエリア*/
.nav_panel_box {
  display: none;/*はじめは非表示*/
  background-color: rgb(250, 242, 245);
  margin:5px;
  padding: 0px 20px;
  border-radius:10px;
}
.nav_panel{
    padding-top:10px;
    padding-bottom:10px;
    border-bottom:1px dashed #997768;

}
.nav_panel a{
    color:#9b7a6c;
    font-size:12px;
}
.nav_panel:last-child{
    border-bottom:none;
}
/******************************************************************/
/* メインエリア                                                    */
/******************************************************************/
main {
    background-color:#ffffff;
    /*margin-top:80px;*/
    margin-top:min(2vw, 80px);
}
@media screen and (max-width: 480px) {
    main {
        margin-top:50px;
    }
}
/******************************************************************/
/* メインビジュアル　セクション                                      */
/******************************************************************/
.mainvisual{
    /*height:40vw;*/
    /*height:50vw;*/
    /*max-height:950px;*/
    position:relative;
    padding-bottom:10vw;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual{
        height:110vw;
    }
}    
.mainvisual_area{
    border-radius:0 0 0 0;
    background-color:#f4e3dd;
    position:relative;
    overflow:hidden;
    margin-left:15vw;
    margin-right:0;
    margin-top:0;
    margin-bottom:0;
    padding:0;
    width:100% -10vw; /*margin-left分をサイズ調整*/
    /*height:35vw;*/
    height:38vw;
    max-height:950px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_area{
        margin-left:0;
        height:110vw;
        width:100%;/*追記*/
    }
}
/*メインビジュアル スライドショーエリア*/
.mainvisual_slide_area{
    width: 100%;
    height: 50vw;
    max-height:950px;
    overflow: hidden;
    position: relative;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_slide_area{
        height: 110vw;
    } 
}
/*メインビジュアル画像DIV*/
.mainvisual_slide_area div{
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 50vw;
    max-height:950px;
    background-position: 100% 100%;/*画像のポジション調整*/
    background-size: cover; /*画像のポジション調整*/
    background-repeat: no-repeat;
    z-index: 10;
    opacity: 0;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_slide_area div{
        height: 110vw;
    } 
}
.mainvisual_char1{
    width:max-content;
    color:#d7c9c4;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.5em;
    font-family:"ヒラギノ角ゴシック", "Hiragino Sans", sans-serif;
    background-color:white;
    padding:0px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_char1{
        font-size:10px;
    } 
}
.mainvisual_char2{
    color:#696969;
    font-size:16px;
    font-weight:600;
    letter-spacing:0.3em;
    font-family:"ヒラギノ角ゴシック", "Hiragino Sans", sans-serif;
    background-color:white;
    padding:0px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_char2{
        font-size:13px;
    } 
}
.mainvisual_char3{
    color:#696969;
    font-size:25px;
    font-weight:600;
    letter-spacing:0.3em;
    font-family:"ヒラギノ角ゴシック", "Hiragino Sans", sans-serif;
    background-color:white;
    padding:0px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_char3{
        font-size:25px;
    }
}
.mainvisual_char_img{
    display:none;/*一時的に非表示対応*/
    position:absolute;
    left:0vw;
    bottom:5vw;
    z-index:15;/*メインビジュアル画像より手前表示*/
    width:100%;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_char_img{
        left:3vw;
        bottom:5vw;
        width:100%;
    }
}
.mainvisual_char_img2{
    position:absolute;
    left:-9vw;
    bottom:-3vw;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_char_img2{
        left:-19vw;
        bottom:-5vw;
    }
}
.mainvisual_title_area{
    position:absolute;
    bottom:10vw;
    left:17vw;
    z-index:11;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_title_area{
        position:absolute;
        bottom:10vw;
        left:1vw;
    }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_title_area1{
        width:50vw;
    }
}
.mainvisual_title_area2{
    display:flex;
    justify-content:center;
    padding:0.5vw 1vw;
    background-color:#997768;
    border-radius:30px;
    position:absolute;
    left:1vw;
    top:-4vw;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_title_area2{
        /*padding:2px 30px;*/
        width:auto;
        padding:1vw 2vw;
        position:absolute;
        left:1vw;
        top:-10vw;
    }
}
.mainvisual_title_area2 img{
    width:400px;
    max-width:30vw;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_title_area2 img{
        /*width:200px;*/
        display:flex;
        width:300px;
        max-width:100vw;
    }
}
.mainvisual_title_area3{
    width:50vw;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_title_area3{
        width:93vw;
    }
}
.mainvisual_back_area{
    position:absolute;
    top:0vw;
    left:25vw;
    height:43vw;
    max-height:990px;
    width:75vw;
    background-color:#f4e3dd;

}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_back_area{
        left:10vw;
        height:120vw;
        width:90vw;
    }
}
/******************************************************************/
/* メインエリア  スライドショー アニメーション処理                    */
/******************************************************************/
.slide_anime div{
    animation-name: fade;
    animation-duration: 36s;
    animation-iteration-count: infinite;
}
@keyframes fade {
    0%{
        opacity: 0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 0;
        transform: scale(1.2);
    }
    100%{
        opacity: 0;
        z-index: 0;
    }
}
/* 1枚目のスライド */
.mainvisual_slide_area div:first-of-type{
    /*background-image: url(/public/img/exterior.jpg);*/
    background-image: url(/public/img/mainvisual1.jpg);
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_slide_area div:first-of-type{
        background-position:0px 0px;
        /*background-image: url(/public/img/exterior_sm.jpg);*/
        background-image: url(/public/img/mainvisual1sm.jpg);
    }
}
/* 2枚目のスライド */
.mainvisual_slide_area div:nth-of-type(2){
    /*background-image: url(/public/img/main_photo1.jpeg);*/
    background-image: url(/public/img/mainvisual2.jpg);
    animation-delay: 12s;/*2枚目開始秒数*/
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_slide_area div:nth-of-type(2){
        /*background-image: url(/public/img/main_photo1_sm.jpeg);*/
        background-image: url(/public/img/mainvisual2sm.jpg);
        background-position:0px 0px;
        animation-delay: 12s;/*2枚目開始秒数*/
    }
}
/* 3枚目のスライド */
.mainvisual_slide_area div:last-of-type{
    /*background-image: url(/public/img/main_photo4.jpeg);*/
    background-image: url(/public/img/mainvisual3.jpg);
    animation-delay: 24s;/*3枚目開始秒数*/
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .mainvisual_slide_area div:last-of-type{
        /*background-image: url(/public/img/main_photo2_sm.jpeg);*/
        background-image: url(/public/img/mainvisual3sm.jpg);
        background-position:0px 0px;
        animation-delay: 24s;/*3枚目開始秒数*/
    }
}
/******************************************************************/
/* Instagramバナーエリア                                           */
/******************************************************************/
.instagram_banner{
    position:relative;
}
.instagram_banner_area{
    width:100%;
    padding-top:50px;
    display:flex;
    justify-content:center;
    position:relative;
}
.instagram_banner_img_area{
    display:flex;
    width:900px;
    position:relative;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .instagram_banner_img_area{
        display:none;
    }
}
.instagram_banner_img_sm_area{
    display:none;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .instagram_banner_img_sm_area{
        display:flex;
        width:100%;
        position:relative;
        margin-top:50px;
    }
}
.instagram_banner_btn_area{
    position:absolute;
    width: fit-content;
    bottom:40px;
    left:36%;
    display:flex;
    justify-content:center;
    flex-direction:column;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .instagram_banner_btn_area{
        position:absolute;
        bottom:35px;
        left:57%;
    }
}
.instagram_dogsaronrip_btn{
    color:#9a6f64;
    font-size:25px;
    font-weight:bold;
    width:250px;
    text-align:center;
    border:2px solid #b39595;
    border-radius:30px;
    background-color:#f2d9d9;
    padding:2px 10px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .instagram_dogsaronrip_btn{
        font-size:12px;
        padding:4px 10px;
        width:130px;
    }
}
.instagram_dogsaronrip_btn span{
    padding-left:10px;
}
.instagram_hugkume_btn{
    color:#9a6f64;
    font-size:25px;
    font-weight:bold;
    letter-spacing:0.13em;
    width:250px;
    text-align:center;
    border:2px solid #b39595;
    border-radius:30px;
    background-color:#f2d9d9;
    margin-top:20px;
    padding:2px 10px;

}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .instagram_hugkume_btn{
        font-size:12px;
        padding:4px 10px;
        width:130px;
        margin-top:10px;
    }
}
.instagram_hugkume_btn i{
    vertical-align:middle;
}
.instagram_hugkume_btn span{
    padding-left:10px;
}
/******************************************************************/
/* 重要なお知らせエリア                                             */
/******************************************************************/
.important{
    margin-top:50px;
}
.important_area{
    text-align:center;
    font-size:20px;
    font-weight:bold;
    color:white;
    background-color:#EB3535;
    padding:10px 0px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .important_area{
        font-size:15px;
    }
}
.important_area p{
    text-decoration:underline;
}
/******************************************************************/
/* 新着のお知らせエリア                                             */
/******************************************************************/
.announce{
    margin-top:100px;
    position:relative;
}
.announce_box{
    width:100%;
    background-color:white;
    padding:10px 0px;
}
.announce_box h2{
    color:#9a6f64;
    font-size:23px;
    font-weight:bold;
    text-align:center;
    margin-bottom:50px;
}
.announce_box_list{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    /*width:1000px;*/
    width:100%;
    max-width:100%;
    margin:0 auto;
}
@media screen and (max-width: 480px) {
    .announce_box_list{
        flex-direction:column;
    }
}
.announce_box_item{
    position:relative;
    margin-left:30px;
    margin-right:30px;
    margin-bottom:10px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}
.announce_box_item:hover{
    cursor:pointer;
}
@media screen and (max-width: 480px) {
    .announce_box_item{
        margin-bottom:50px;
    }
}
@media screen and (max-width: 480px) {
    .announce_box_item:last-child{
        margin-bottom:0px;
    }
}
.announce_box_item_area{
    border:1px solid #f4e3dd;
    width:300px;
    height:300px;
    overflow:hidden;
}
@media screen and (max-width: 480px) {
    .announce_box_item_area{
        width:100%;
    }
}
.announce_box_item_img{
    display:flex;/*flexbox配下余白対策*/
    /*width:100%;*/
    object-fit:contain;

}
.announce_box_item_text_area{
    position:absolute;
    /*background-color: rgba(255,255,255,0.5);*/
    background-color: white;
    border:1px solid #f4e3dd;
    padding:5px;
    width:100%;
    height:100px;
    bottom:0px;
    left:0px;
}
.announce_box_item_text_area .date{
    font-size:15px;
    font-weight:bold;
    color:#997768;
    margin-bottom:5px;
}
.announce_box_item_text_area p{
    display:block;
    font-size:15px;
    font-weight:bold;
    /*color:#583236;*/
    color:#997768;
}
.announce_box_item_text_area span{
    display:block;
    font-size:17px;
}
/******************************************************************/
/* リップの想いエリア                                              */
/******************************************************************/
.about{
    position:relative;
    margin-top:100px;
}

@media screen and (max-width: 480px) {
    .about{
        margin-top:30px;
    }
}
.about_area{
    width:100%;
    padding-top:150px;
    padding-bottom:100px;
}
@media screen and (max-width: 480px) {
    .about_area{
        padding-top:30px;
        margin-top:0px;
        flex-direction:column;
    }
}
/*左側タイトル*/
.about_area::before{
    content:"about";
    width:30px;
    height:100px;
    top:10px;
    left:10px;
    position:absolute;
    writing-mode:vertical-rl;
    text-align:right;
    border-left:2px solid #9b7a6c;
    color:#9b7a6c;
    font-size:20px;
}
@media screen and (max-width: 480px) {
    .about_area::before{
        position:absolute;
        top:20px;
        left:10px;
        font-size:20px;
    }
}
.about_box{
    display:flex;
    justify-content:center;
    flex-direction:column;
    text-align:center;
}
.about_message_title_area{
    /*font-size:25px;*/
    font-size:28px;
    font-weight:bold;
    padding-bottom:100px;
}
@media screen and (max-width: 480px) {
    .about_message_title_area{
        font-size:15px;
        padding-top:50px;
        padding-bottom:50px;
    }
}
@media screen and (max-width: 480px) {
    .about_message_title_area span{
        display:block;
    }

}
.about_message_content_area{
    display:flex;
}
@media screen and (max-width: 480px) {
    .about_message_content_area{
        flex-direction:column-reverse;
    }
}
.about_message_main_area{
    width:50%;
    font-size:min(1vw, 15px);
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}
@media screen and (max-width: 480px) {
    .about_message_main_area{
        width:100%;
        font-size:12px;
    }
}
.about_message_main{
    position:relative;
}
.about_message_main::before{
    content:"";
    background-image:url(/public/img/about_illust_dog.png);
    background-repeat:no-repeat;
    background-size:contain;
    width:100px;
    max-width:8vw;
    height:100px;
    max-height:8vw;
    position:absolute;
    top:-8vw;
    left:-8vw;
    /*anime*/
    animation: SwayAnime 3s ease-in-out infinite alternate;/*当行のみ追加でもアニメーション利用可*/
    transition: 1.5s ease-in-out;
}
@media screen and (max-width: 480px) {
    .about_message_main::before{
        width:50px;
        height:50px;
        top:-50px;
        left:10px;
    }
}
.about_message_main::after{
    content:"";
    background-image:url(/public/img/about_illust_footprints.png);
    background-repeat:no-repeat;
    background-size:contain;
    width:100px;
    max-width:8vw;
    height:100px;
    max-height:8vw;
    position:absolute;
    bottom:-8vw;
    right:-8vw;
    /*anime*/
    animation: SwayAnime 3s ease-in-out infinite alternate;/*当行のみ追加でもアニメーション利用可*/
    transition: 1.5s ease-in-out;
}
@media screen and (max-width: 480px) {
    .about_message_main::after{
        width:50px;
        height:50px;
        bottom:-50px;
        right:10px;
    }
}
.about_message_image_area{
    width:50%;
}
@media screen and (max-width: 480px) {
    .about_message_image_area{
        width:100%;
        padding-bottom:90px;
    }
}
/******************************************************************/
/* 写真（スライド）エリア                                          */
/******************************************************************/
.photo{
    position:relative;
}
.photo::before{
    content:"";
    display:inline-block;
    background-image:url(/public/img/slider_back2.png);
    background-repeat:repeat-x;
    background-size:auto;
    width:100%;
    height:100%;
    position:absolute;
    top:-1vw;
    left:0vw;
    z-index:2;
    display:none;/*一時的に非表示*/
}
.photo_slider_area{
    background:url(/public/img/wallpaper_board.png);
    background-repeat:repeat;/*横方向のみリピート許可*/
    width:100%;
}
@media screen and (max-width: 480px) {
    .photo_slider_area{
        width:100%;
        background:url(/public/img/wallpaper_board.png);
        background-repeat:repeat;
        padding-top:40px;
    }
}
.photo_slider_nav{
    padding-top:50px;
    margin:0px 50px;
}
@media screen and (max-width: 480px) {
    .photo_slider_nav{
        padding-top:10px;
        margin:0px 50px;
    }
}
.photo_slider_img{
    margin-left:20px;
}
.photo_slider_img img{
    border-radius:20px;
}
.photo_slider_for{
    display:none;
    padding-bottom:10px;
}
@media screen and (max-width: 480px) {
    .photo_slider_for{
        margin:0 auto;
        width:60%;
        display:block; 
    }
}
.slick-prev:before, .slick-next:before{
    color:#111111;
}
.photo_slider_btn_area{
    display:flex;
    justify-content:center;
    padding-top:20px;
    padding-bottom:40px;
}
.photo_slider_btn{
	display: block;
	text-align: center;
	text-decoration: none;
	width: 300px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #9b7a6c;
	color: #9b7a6c;
    background-color:white;
	transition: 0.5s;
}
@media screen and (max-width: 480px) {
    .photo_slider_btn{
        width: 200px;
        margin: auto;
        padding: 1rem 1rem;
    }
}
.photo_slider_btn:hover{
    color: #fff;
	background: #9b7a6c;
}
.photo_slider_btn_area i{
    margin-left:10px;
}
/******************************************************************/
/* 料金表エリア                                                    */
/******************************************************************/
.price{
    position:relative;
}
.price::before{
    content:"Price";
    width:30px;
    height:100px;
    top:10px;
    left:10px;
    position:absolute;
    writing-mode:vertical-rl;
    text-align:right;
    border-left:2px solid #9b7a6c;
    color:#9b7a6c;
    font-size:20px;
    z-index:1;
}
@media screen and (max-width: 480px) {
    .price::before{
        width:30px;
        height:100px;
        top:10px;
        left:10px;
        position:absolute;
        font-size:20px;
    }

}
.price_area{
    width:100%;
    display:flex;
    justify-content:center;
    padding-top:50px;
    padding-bottom:50px;
    background-color:#f4e3dd;
}
.price_box_area{
    width:1000px;
    max-width:100%;
    display:flex;
    justify-content:center;
    flex-direction:column;
    text-align:center;
}
.price_area h2{
    font-size:25px;
    line-height:1.05em;
}
.price_area h2 span{
    font-size:20px;
    font-family:"Roboto", sans-serif;
    color:#c1a69c;
    display:inline-block;
    width:100%;
}
.price_list_area{
    margin-top:50px;
    text-align:center;
    display:flex;
    justify-content:center;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .price_list_area{
        flex-direction:column;
        margin-top:0px;
        padding:20px 20px;
    }
}
.price_type_cut{
    width:33%;
    padding:20px;
    display:flex;/*price_type_cut_comment高さ統一*/
    flex-direction:column;/*price_type_cut_comment高さ統一*/
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .price_type_cut{
        width:100%;
    }
}
.price_type_cut_img img{
    width:270px;
    border:1px solid #997768;
    border-radius:50%;
}
@media screen and (max-width: 480px) {
    .price_type_cut_img img{
        width:230px;
    }
}
.price_type_cut_comment{
    flex-grow:1;/*price_type_cut_comment高さ統一*/
}
.price_type_cut_comment p{
    text-align:left;
    padding:10px;
    font-size:15px;
    line-height:1.5em;
}
.price_type_cut_title{
    display:flex;
    background-color:white;
    height:40px;
    margin:10px 10px 0 10px;
    align-items:center;
    position:relative;
    margin-bottom:30px;
}
.price_type_cut_title::after {
    content:"";
    display:block;
    width:20px;
    height:10px;
    background:white;
    margin-bottom:30px;
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(0 0,100% 0,50% 100%);
    position:absolute;
    top:100%;
    left:48%;
}
.price_type_cut_title p{
    margin:0 auto;
}
.price_type_cut_detail_list{
    padding:10px;
}
.price_type_cut_detail_list li{
    border-bottom:1px dotted #9b7a6c;
    line-height:2em;
    color:#9b7a6c;
}
.cut_name{
    text-align:left;
    float:left;
}
.cut_price{
    text-align:right;
}
.price_detail{
    display:flex;
    justify-content:center;
    margin-top:50px;
    margin-bottom:10px;
}
@media screen and (max-width: 480px) {
    .price_detail{
        margin-top:0px;
        margin-bottom:30px;
    }
}
.price_detail_btn{
	display: block;
	text-align: center;
	text-decoration: none;
	width: 300px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #9b7a6c;
	color: #9b7a6c;
    background-color:white;
	transition: 0.5s;
}
@media screen and (max-width: 480px) {
    .price_detail_btn{
        width: 250px;
        padding: 1rem 2rem;
    }
}
.price_detail_btn:hover{
    color: #fff;
	background: #9b7a6c;
}
.price_detail i{
    margin-left:10px;
}
/******************************************************************/
/* スタッフ紹介                                                   */
/******************************************************************/
.staff{
    position:relative;
}
.staff::after{
    content:"Staff";
    width:30px;
    height:100px;
    position:absolute;
    top:10px;
    left:10px;
    writing-mode:vertical-rl;
    text-align:right;
    border-left:2px solid white;
    color:white;
    font-size:20px;
}
@media screen and (max-width: 480px) {
    .staff::after{
        position:absolute;
        top:10px;
        left:10px;
        border-left:2px solid white;
        color:white;
    }
}
.staff_area{
    width:100%;
    display:flex;
    justify-content:center;
}
@media screen and (max-width: 480px) {
    .staff_area{
        flex-direction:column;
    }
}
.staff_img_area{
    display:flex;
    flex-direction:column;
    width:40%;
}
@media screen and (max-width: 480px) {
    .staff_img_area{
        width:100%;
    }
}
.staff_img_upper_area{
    /*display:inline-block;*/
    display:flex;
    width:100%;
    /*height:500px;*/
    position:relative;
    overflow:hidden;
}
@media screen and (max-width: 480px) {
    .staff_img_upper_area{
        height:auto;
    }
}
.staff_img_1{
    width:100%;
    height:auto;
}
.staff_img_2{
    width:100%;
    object-fit:cover;
}
.staff_img_3{
    width:100%;
    object-fit:cover;
}
.staff_img_under_area{
    width:100%;
    display:flex;
}
@media screen and (max-width: 480px) {
    .staff_img_under_area{
        height:250px;
    }
}
.staff_img_left{
    /*display:inline-block;*/
    display:flex;
    width:50%;
    height:100%;
    position:relative;
    overflow:hidden;
    
}
.staff_img_right{
    /*display:inline-block;*/
    display:flex;
    width:50%;
    height:100%;
    position:relative;
    overflow:hidden;
    object-fit:cover;
}

/****メッセージ部****/
.staff_message_area{
    /*width:50%;*/
    width:60%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
}
@media screen and (max-width: 480px) {
    .staff_message_area{
        width:100%;
        padding:50px 30px;
    }
}
.staff_message_content{
    width:500px;
    text-align:center;
}
.staff_header h2{
    font-size:20px;
    position:relative;
    text-align:left;
}
/***拡大対応***/
@media screen and (max-width: 900px) {
    .staff_header h2{
        font-size:13px;
    }

}
.staff_header h2 span{
    display:block;
}
.staff_message{
    margin-top:50px;
    text-align:left;
    font-size:18px;
}
/***拡大対応***/
@media screen and (max-width: 900px) {
    .staff_message{
        font-size:12px;
    }
}
.staff_message_btn_area{
    margin-top:100px;
}
@media screen and (max-width: 480px) {
    .staff_message_btn_area{
        margin-top:50px;
    }

}
.staff_message_btn_area i{
    margin-left:10px;
}
.staff_message_btn{
	display: block;
	text-align: center;
	text-decoration: none;
	width: 250px;
	margin: auto;
	padding: 1rem 2rem;
	font-weight: bold;
	border: 2px solid #9b7a6c;
	color: #9b7a6c;
    background-color:white;
	transition: 0.5s;
}
@media screen and (max-width: 480px) {
    .staff_message_btn{
        padding: 1rem 0px;
    }
}
.staff_message_btn:hover{
    color: #fff;
	background: #9b7a6c;
}/******************************************************************/
/* LINEセクション                                                  */
/******************************************************************/
.line{
    background-color:white;
    text-align:center;
}
.line_area{
    display:flex;
    justify-content:center;
    padding-top:200px;
    padding-bottom:100px;
    position:relative;
}
@media screen and (max-width: 480px) {
    .line_area{
        padding-top:100px;
    }
}
.line_box_area{
    display:flex;
    width:1000px;
    max-width:100%;
    padding:50px;
    color:#696969;
    background:#f4e3dd;
    border-radius:20px;
    position:relative;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .line_box_area{
        flex-direction:column;
        width:90%;
        /*height:850px;*/
        height:auto;
        padding:20px;
    }
}
.line_box_area::after{
    position:absolute;
    top: -90px;
    left:30px;
    background:url(/public/img/sample_dog2.png);
    background-size:contain;
    background-repeat:no-repeat;
    content:"";
    width:130px;
    height:130px;
}
@media screen and (max-width: 480px) {
    .line_box_area::after{
        position:absolute;
        top:-75px;
        left:0px;
        width:100px;
    }
}
.line_area_box_left{
    width:40%;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .line_area_box_left{
        width:100%;
    }
}
.line_area_box_upper{
    font-size:25px;
    font-weight:600;
    text-align:left;
    line-height:1.7em;
    border-bottom:1px solid white;
    padding-bottom:20px;
}
/***拡大対応***/
@media screen and (max-width: 900px) {
    .line_area_box_upper{
        font-size:15px;
    }
}
.line_area_box_under{
    text-align:left;
    padding-top:20px;
    line-height:1.2em;
}
.line_area_box_under1{
    font-size:15px;
    padding-bottom:10px;
}
/***拡大対応***/
@media screen and (max-width: 900px) {
    .line_area_box_under1{
        font-size:12px;
    }
}
.line_area_box_under2{
    font-size:13px;
}
/***拡大対応***/
@media screen and (max-width: 900px) {
    .line_area_box_under2{
        font-size:10px;
    }
}
.line_area_box_under3{
    padding-top:10px;
    font-size:13px;
}
/***拡大対応***/
@media screen and (max-width: 900px) {
    .line_area_box_under3{
        font-size:10px;
    }
}
.line_area_box_under3 .line_cancel_link_btn{
    margin-left:5px;
    margin-right:5px;
    text-decoration:underline;
}
.line_area_box_right{
    position:relative;
    width:60%;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .line_area_box_right{
        width:100%;
    }
}
.line_area_box_circle{
    /*position:absolute;
    top:0px;
    left:0px;*/
    display:inline-block;
    width:250px;
    height:250px;
    border-radius:50%;
    background:white;
    padding:30px;
    text-align:center;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .line_area_box_circle{
        top:280px;
    }
}
.line_area_box_right1{
    position:absolute;
    top:-170px;
    left:190px;
    z-index:1;
}
.line_area_box_right1 img{
    width:320px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .line_area_box_right1{
        display:none;
    }
}
.line_area_box_right2{
    text-align:left;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .line_area_box_right2{
        text-align:center;
    }
}
.line_area_box_right2 img{
    width:50px;
}
.line_area_box_right2_text1{
    color:limegreen;
    font-weight:600;
    text-align:center;
}
.line_area_box_right2 img{
    margin:15px;
    filter: brightness(0) saturate(100%) invert(66%) sepia(86%) saturate(371%) hue-rotate(60deg) brightness(101%) contrast(87%);
}
.line_area_box_right2_text2{
    color:limegreen;
    font-size:13px;
    font-weight:600;
    text-align:center;
}
.line_area_box_sm{
    display:none;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .line_area_box_sm{
        display:block;
    }
}
/******************************************************************/
/* 活動セクション                                                  */
/******************************************************************/
.activity{
    position:relative;
    background-color:#f4e3dd;
}
.activity::after{
    content:"Activity";
    width:30px;
    height:100px;
    position:absolute;
    top:10px;
    left:10px;
    writing-mode:vertical-rl;
    text-align:right;
    border-left:2px solid #e37263;
    color:#e37263;
    font-size:20px;
}
@media screen and (max-width: 480px) {
    .activity::after{
        position:absolute;
        top:10px;
        left:10px;
    }
}
.activity_area{
    width:100%;
    display:flex;
    justify-content:center;
}

.activity_box_area{
    width:1000px;
    max-width:100%;
    display:flex;
    justify-content:center;
    margin-top:50px;
    margin-bottom:20px;
}
@media screen and (max-width: 480px) {
    .activity_box_area{
        flex-direction:column-reverse;
        margin-top:100px;
    }
}
.activity_explanation_area{
    width:50%;
    padding-top:30px;
}
@media screen and (max-width: 480px) {
    .activity_explanation_area{
        width:100%;
        padding:30px 10px 10px 10px;
    }
}
.activity_design_area{
    height:100px;
    width:100%;
    display:flex;
    justify-content:center;
    position:relative;
}
/***拡大対応***/
@media screen and (max-width: 900px) {
    .activity_design_area{
        height:50px;
    }
}
@media screen and (max-width: 480px) {
    .activity_design_area{
        height:90px;
        width:100%;
        margin-top:10px;
    }
}
.activity_design_area::before{
    content:"";
    background-image:url(/public/img/activity_design1.png);
    background-repeat:no-repeat;
    background-size:cover;
    width:90px;
    height:90px;
    position:absolute;
    top:-20px;
    left:-10px;
    z-index:2;
}
@media screen and (max-width: 480px) {
    .activity_design_area::before{
        width:55px;
        height:55px;
        top:20px;
        left:-5px;
    }
}

.activity_design_img_area{
    display:inline-block;
    width:25%;
    height:100%;
    position:relative;
    overflow:hidden;/*staff_img3枠外非表示*/

}
@media screen and (max-width: 480px) {
    .activity_desgin_img_area{
        display:inline-block;
        width:20%;
        height:100%;
        position:relative;
        overflow:hidden;/*staff_img3枠外非表示*/
    
    }
}
.activity_design_img{
    background-image:url(/public/img/activity_design3.jpeg);
    background-size:cover;
    background-repeat:no-repeat;
    width:100%;
    height:300px;
    position:absolute;
    top:0px;
    left:0px;
}
.activity_header_area{
    padding:0px 10px;
    width:80%;
}
@media screen and (max-width: 480px) {
    .activity_header_area{
        padding:20px 0px;
        width:100%;
    }
}
.activity_header_area h2{
    font-size:18px;
    font-weight:bold;
    color:#e37263;
    position:relative;
    padding-left:30px;
}
/***拡大対応***/
@media screen and (max-width: 900px) {
    .activity_header_area h2{
        font-size:15px;
    }
}
@media screen and (max-width: 480px) {
    .activity_header_area h2{
        text-align:center;
    }
}
.activity_header_area span{
    display:block;
}
@media screen and (max-width: 480px) {
    .activity_header_area span{
        display:block;
    }
}
.activity_message_area{
    padding:0px 80px 0px 30px;
    font-size:15px;
    line-height:1.7em;
    text-align:center;
}
/***拡大対応***/
@media screen and (max-width: 900px) {
    .activity_message_area{
        font-size:10px;
    }
}
@media screen and (max-width: 480px) {
    .activity_message_area{
        padding:0 20px;
    }
}
.activity_message_area .activity_row_1{
    padding-bottom:10px;
}
.activity_message_area .activity_row_2{
    padding-bottom:10px;
}
.activity_message_area .activity_row_3{
    padding-bottom:10px;
}
.activity_message_area .activity_row_4{
    padding-bottom:10px;
}
.activity_message_area .activity_row_5{
    padding-bottom:10px;
}


.activity_img_area{
    /*width:800px;*/
    /*height:600px;*/
    width:50%;
    position:relative;
}
@media screen and (max-width: 480px) {
    .activity_img_area{
        width:100%;
        height:300px;
        margin:0px;
    }
}
.activity_img{
    background-image:url(/public/img/activity_design3.jpeg);
    background-size:cover;
    width:100%;
    height:400px;
    margin-top:0px;
    border-radius:50% 0 0 0;
}
@media screen and (max-width: 480px) {
    .activity_img{
        width:100%;
        height:300px;
        margin-top:0px;
    }
}
.activity_btn_area{
    margin-top:60px;
    padding-right:50px;
}
@media screen and (max-width: 480px) {
    .activity_btn_area{
        margin-top:30px;
        padding-right:0px;
    }
}
.activity_btn_area i{
    margin-left:10px;
}
.activity_btn{
	display: block;
	text-align: center;
	text-decoration: none;
	width: 300px;
	margin: auto;
	padding: 1rem 1rem;
	font-weight: bold;
	border: 2px solid #9b7a6c;
	color: #9b7a6c;
    background-color:white;
	transition: 0.5s;
}
.activity_btn:hover{
    color: #fff;
	background: #9b7a6c;
}

/******************************************************************/
/* ご予約セクション                                                */
/******************************************************************/
.reserve{
    margin-top:100px;
    text-align:center;
    position:relative;
}
.reserve::after{
    content:"Reserve";
    width:30px;
    height:100px;
    top:10px;
    left:10px;
    position:absolute;
    writing-mode:vertical-rl;
    text-align:right;
    border-left:2px solid #9b7a6c;
    color:#9b7a6c;
    font-size:20px;
}
@media screen and (max-width: 480px) {
    .reserve::after{
        position:absolute;
        top:10px;
        left:10px;
    }
}
.reserve_area{
    display:flex;
    flex-direction:column;
    text-align:center;
}
.reserve_header_area{
    height:250px;
    font-size:20px;
    font-weight:bold;
    color:#696969;
    background-color:#f4e3dd;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.reserve_header_area .span1{
    color:#af9c98;
    padding-top:20px;
    font-size:15px;
    font-weight:normal;
    display:block;
}
.reserve_header_area .span2{
    color:#af9c98;
    font-size:15px;
    font-weight:normal;
    display:block;
}
.reserve_btn_area{
    display:flex;
    height:200px;
}
.reserve_web_btn_area{
    width:50%;
    font-weight:bold;
}
.reserve_web_btn_area .span1{
    display:block;
    padding-top:10px;
    font-size:15px;
    font-weight:normal;
}
@media screen and (max-width: 480px) {
    .reserve_web_btn_area .span1{
        font-size:13px;
    }
}
.reserve_web_btn_area .span2{
    display:block;
    font-size:15px;
    font-weight:normal;
}
@media screen and (max-width: 480px) {
    .reserve_web_btn_area .span2{
        font-size:13px;
    }
}
.reserve_web_btn{
    font-size:20px;
    color:#f4e3dd;
    background-color:#9a6f64;
    display:flex;
    height:100%;
    width:100%;
    align-items:center;
    justify-content:center;
    position:relative;
    transition:0.5s;
}
@media screen and (max-width: 480px) {
    .reserve_web_btn{
        font-size:17px;
    }
}
.reserve_web_btn:hover{
    color: #9a6f64;
	background: #f4e3dd;
}
.reserve_web_btn::before {
    content:"";
    display:block;
    width:20px;
    height:10px;
    background:#f4e3dd;
    margin-bottom:30px;
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(0 0,100% 0,50% 100%);
    position:absolute;
    top:0;
    left:50%;
}
.reserve_line_btn_area{
    width:50%;
    font-weight:bold;
}
.reserve_line_btn_area .span1{
    display:block;
    font-size:15px;
    font-weight:normal;
    padding-top:10px;
}
@media screen and (max-width: 480px) {
    .reserve_line_btn_area .span1{
        font-size:13px;
    }
}
.reserve_line_btn_area .span2{
    display:block;
    font-size:15px;
    font-weight:normal;
}
@media screen and (max-width: 480px) {
    .reserve_line_btn_area .span2{
        font-size:13px;
    }
}
.reserve_line_btn{
    font-size:20px;
    color:#9a6f64;
    background-color:#eacbc5;
    display:flex;
    height:100%;
    width:100%;
    align-items:center;
    justify-content:center;
    position:relative;
    transition:0.5s;
    padding:0 5px;
}
@media screen and (max-width: 480px) {
    .reserve_line_btn{
        font-size:17px;
    }
}
.reserve_line_btn:hover{
    color: #f4e3dd;
	background: #583236;
}
.reserve_line_btn::before {
    content:"";
    display:block;
    width:20px;
    height:10px;
    background:#f4e3dd;
    margin-bottom:30px;
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(0 0,100% 0,50% 100%);
    position:absolute;
    top:0;
    left:50%;
}
/******************************************************************/
/* 店舗情報セクション                                              */
/******************************************************************/
.information{
    background-color:white;
    padding-top:50px;
    padding-bottom:50px;
    position:relative;
}
@media screen and (max-width: 480px) {
    .information{
        padding-top:100px;
    }
}
.information::before{
    content:"Access";
    width:30px;
    height:100px;
    top:10px;
    left:10px;
    position:absolute;
    writing-mode:vertical-rl;
    text-align:right;
    border-left:2px solid #9b7a6c;
    color:#9b7a6c;
    font-size:20px;
}
@media screen and (max-width: 480px) {
    .information::before{
        position:absolute;
        top:10px;
        left:10px;
    }
}
.information_area{
    display:flex;
    justify-content:center;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .information_area{
        flex-direction:column;
    }
}
.information_detail{
    padding:20px;
    color:#696969;
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .information_detail p{
        font-size:14px;
    }
}
.info_shop_area{
    display:flex;
    align-items:center;

}
.info_logo_area{
    width:45px;
}
@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    .info_logo_area{
        width:10%;
    }
}
.info_name_area{
    display:flex;
    margin-left:20px;

}
@media screen and (max-width: 480px) {
/* 480px以下に適用されるCSS（スマホ用） */
    .info_name_area{
        width:90%;

    }
}
.info_shop_name{
    font-size:23px;
    font-weight:bold;
    display:flex;
}
@media screen and (max-width: 900px) {
    /*拡大対応*/
    .info_shop_name{
        font-size:15px;
    }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .info_shop_name{
        font-size:25px;
        width:100%;
    }
}
.info_shop_branch{
    font-size:23px;
    display:none;/*非表示対応*/
}
@media screen and (max-width: 900px) {
    /*拡大対応*/
    .info_shop_branch{
        font-size:15px;
    }
}
/*郵便番号*/
.info_post{
    margin-top:20px;
    font-size:14px;
}
@media screen and (max-width: 900px) {
    /*拡大対応*/
    .info_post{
        margin-top:10px;
        font-size:10px;
    }
}
/*住所*/
.info_address{
    font-size:14px;
}
@media screen and (max-width: 900px) {
    /*拡大対応*/
    .info_address{
        font-size:10px;
    }
}
/*営業時間*/
.info_hours{
    display:flex;
    margin-top:20px;
}
.info_hours_title{
    width:100px;
    background-color:#997768;
    border-radius:10px;
    padding:3px;
    text-align:center;
    margin-right:22px;
    font-size:14px;
    color:#FCF3F3;
}
@media screen and (max-width: 900px) {
    /*拡大対応*/
    .info_hours_title{
        width:90px;
        font-size:10px;
    }
}
.info_hours_text{
    padding:3px;
    font-size:14px;
}
@media screen and (max-width: 900px) {
    /*拡大対応*/
    .info_hours_text{
        font-size:10px;
    }
}
/*定休日*/
.info_holiday{
    display:flex;
    margin-top:10px;
}
.info_holiday_title{
    width:100px;
    background-color:#997768;
    border-radius:10px;
    padding:3px;
    text-align:center;
    margin-right:22px;
    font-size:14px;
    color:#FCF3F3;
}
/******拡大対応********/
@media screen and (max-width: 900px) {
    .info_holiday_title{
        width:90px;
        font-size:10px;
    }
}
.info_holiday_text{
    padding:3px;
    font-size:14px;
}
/******拡大対応********/
@media screen and (max-width: 900px) {
    .info_holiday_text{
        font-size:10px;
    }
}
/*電話番号*/
.info_telephone{
    display:flex;
    margin-top:10px;
}
.info_telephone_title{
    width:100px;
    background-color:#997768;
    border-radius:10px;
    padding:3px;
    margin-right:22px;
    text-align:center;
    font-size:14px;
    color:#FCF3F3;
}
/******拡大対応********/
@media screen and (max-width: 900px) {
    .info_telephone_title{
        width:90px;
        font-size:10px;
    }
}
.info_telephone_text{
    padding:3px;
    font-size:14px;
}
/******拡大対応********/
@media screen and (max-width: 900px) {
    .info_telephone_text{
        font-size:10px;
    }
}    
/*SNS*/
.info_sns{
    display:flex;
    margin:20px;
}
.info_sns li{
    padding-right:25px;
}
.info_sns li:first-child{
    padding-top:2px;
}
.info_sns li:last-child{
    padding-right:0px;
    padding-top:2px;
}

/*補足事項1*/
.info_supplement1{
    margin-top:10px;
    font-size:14px;
}
/******拡大対応********/
@media screen and (max-width: 900px) {
    .info_supplement1{
        font-size:10px;
    }
}

/*補足事項2*/
.info_supplement2{
    font-size:14px;
}
/******拡大対応********/
@media screen and (max-width: 900px) {
    .info_supplement2{
        font-size:10px;
    }
}

/*地図*/
.map{
    padding:20px;
}
.map iframe{
    width:500px;
    height:400px;
}
@media screen and (max-width: 900px) {
    /*拡大対応*/
    .map iframe{
        width:350px;
        height:300px;
    }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .map iframe{
        width:100%;
        height:300px;
    }
}
/******************************************************************/
/* フッターエリア                                                  */
/******************************************************************/
/******************************************************************/
/* トップへ戻るボタン                                               */
/******************************************************************/
#page_top {
    position: fixed;
    right: 10px;
    /*bottom: 10px;*/
    /*bottom:0vh;*/
    padding: 0px;
    width:80px;
    z-index:99;/*ハンバーガーメニュー表示中は後ろに隠す*/
    scroll-behavior:smooth;
}
/* 拡大対応 */
@media screen and (max-width: 900px) {
    #page_top {
        width:30px;
    }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    #page_top {
        right: 10px;
        bottom: 60px;
        width:60px;
    }
}
#page_top span{
    display:block;
}
/******************************************************************/
/* ご支援リンク                                                    */
/******************************************************************/
.support{
    display:none;
    position:fixed;
    bottom:25vh;
    right:10px;
    z-index:98;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .support{
        bottom:30vh;
        right:0px;
    }
}
.support.active{
    display:block;
    /*anime*/
    animation-name:anime-fadein;
    animation-fill-mode:forwards;
    animation-duration:1s;
}
/*フェードインアニメ*/
@keyframes anime-fadein{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
.support_area{
    width:100px;
    height:400px;
    padding-top:40px;
    text-align:center;
    background-image:url(/public/img/support_backimage.png);
    background-repeat:no-repeat;
    background-size:contain;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .support_area{
        padding-top:30px;
        width:80px;
        height:auto;
    }
}
.support_area h2{
    color:#9a6f64;
    font-size:15px;
    font-weight:bold;
    font-family:"Noto Sans jp";
    background-color:#fce9ed;
    border-radius:50px;
    /*border:1px solid #fcc9d2;*/
    border:1px solid black;
    margin-left:10px;
    margin-right:10px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .support_area h2{
        font-size:12px;
    }
}
.support_link_area{
    display:flex;
    flex-direction:column;
    padding-top:20px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .support_link_area{
        padding-top:10px;
    }
}
.support_link_area img{
    width:50px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .support_link_area img{
        width:40px;
    }
}
.support_link_item{
    display:flex;
    justify-content:center;
    padding-top:5px;
    padding-bottom:5px;
}
/*storesロゴ バランス調整*/
.support_link_item_stores img{
    width:43px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .support_link_item_stores img{
        width:35px;
    }
}
/*振込先 バランス調整*/
.support_link_item_donate{
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    font-size:11px;
    font-weight:bold;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .support_link_item_donate{
        font-size:10px;
    }
}
.support_link_item_donate img{
    margin:0 auto;
}

@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .support_link_item_donate img{
        width:30px;
    }
}
.support_close_btn {
    display: flex;
    margin:5px auto;
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid #3d5667; /* 枠の調整 */
    border-radius: 50%;  /* 丸みの度合い */
    background: #fff; /* ボタンの背景色 */
}
.support_close_btn::before, .support_close_btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px; /* 棒の幅（太さ） */
    height: 18px; /* 棒の高さ */
    background: #3d5667; /* バツ印の色 */
}
.support_close_btn::before {
    transform: translate(-50%,-50%) rotate(45deg);
}
.support_close_btn::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}
.support_close_btn:hover{
    cursor:pointer;
}
/******************************************************************/
/* ボトムナビゲーション（スマホ用）                                  */
/******************************************************************/
.bottom_navi_area {
    background: #997768;
    border-top: solid 1px white;
    position: fixed;
    width: 100%;
    bottom: 0px;
    z-index: 2;
    padding-top:5px;
    padding-bottom:5px;
    display: none;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .bottom_navi_area {
        display: block;
    }
}
.bottom_navi_list {
    display: flex;
    margin-top:5px;
    list-style: none;
    padding: 0;
}
.bottom_navi_list li {
    color:white;
    width: 25%;
    text-align: center;
    font-size: 12px;
    border-right:1px solid white;
}
.bottom_navi_list li:last-child{
    border-right:none;
}
.bottom_navi_list span{
    display:block;
}
.bottom_navi_btn{
    display:block;
}
.bottom_navi_btn .support_image{
    display:flex;
    margin:0 auto;
    width:24px;
}
/******************************************************************/
/* フッター                                                        */
/******************************************************************/
footer{
    position:relative;
}
/******************************************************************/
/* フッターメニュー                                                */
/******************************************************************/
.footer_menu{
    background-color:#f4e3dd;
}
.footer_menu_lists{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding-top:10px;
}
@media screen and (max-width: 480px) {
    .footer_menu_lists{
        justify-content:left;
    }
}
.footer_nemu_list{
    width:100px;
    color:#696969;
    font-size:14px;
    font-weight:bold;
    text-align:center;
}
@media screen and (max-width: 480px) {
    .footer_nemu_list{
        /*width:60px;*/
        width:20%;
        font-size:10px;
        margin-bottom:10px;
    }
}
.footer_nemu_list span{
    display:block;
    color:#9a6f64;
    font-size:13px;
}
@media screen and (max-width: 480px) {
    .footer_nemu_list span{
        font-size:8px;
    }
}
/******************************************************************/
/* コピーライト                                                    */
/******************************************************************/
.copyright_area{
    color:#696969;
    padding-top:20px;
    padding-bottom:10px;
    background-color:#f4e3dd;
    
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .copyright_area{
        padding-top:10px;
        padding-bottom:60px;
    }
}
.copyright_area p{
    text-align:center;
    font-size:13px;
}
@media screen and (max-width: 480px) {
    .copyright_area p{
        font-size:10px;
    }
}
/******************************************************************/
/* 工事中ページ共通                                                */
/******************************************************************/
.preparation{
    margin-top:120px;
    margin-bottom:120px;
}
/******************************************************************/
/* 会社概要ページ                                                  */
/******************************************************************/
.company{
    display:flex;
    justify-content:center;
}

/******************************************************************/
/* プライバシーポリシー                                             */
/******************************************************************/
.privacypolicy{
    width:100%;
    position:relative;
}
.privacypolicy_area{
    display:flex;
    justify-content:center;
    flex-direction:column;
    background-color:#f3e5df;
    padding:100px 200px 100px 200px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .privacypolicy_area{
        padding:5px 10px 120px 10px;
    }
}
.privacypolicy_area h2{
    font-size:30px;
    font-weight:bold;
    color:#9b7a6c;
    margin-bottom:30px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .privacypolicy_area h2{
        font-size:20px;
        margin-bottom:10px;
    }
}
.privacypolicy_area h2 span{
    display:block;
    font-size:20px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .privacypolicy_area h2 span{
        font-size:12px;
    }
}
.privacypolicy_content_area{
    background-color:white;
    font-size:17px;
    padding:30px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .privacypolicy_content_area{
        font-size:13px;
        padding:14px;
    }
}
.privacypolicy_content_area h3{
    font-size:20px;
    font-weight:bold;
    margin-top:30px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .privacypolicy_content_area h3{
        font-size:15px;
        margin-top:20px;
    }
}
/******************************************************************/
/* キャンセルポリシー                                              */
/******************************************************************/
.cancelpolicy{
    width:100%;
    position:relative;
}
.cancelpolicy_area{
    display:flex;
    justify-content:center;
    flex-direction:column;
    background-color:#f3e5df;
    padding:100px 200px 100px 200px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .cancelpolicy_area{
        padding:5px 10px 120px 10px;
    }
}
.cancelpolicy_area h2{
    font-size:30px;
    font-weight:bold;
    color:#9b7a6c;
    margin-bottom:30px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .cancelpolicy_area h2{
        font-size:20px;
        margin-bottom:10px;
    }
}
.cancelpolicy_area h2 span{
    display:block;
    font-size:20px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .cancelpolicy_area h2 span{
        font-size:12px;
    }
}
.cancelpolicy_content_area{
    background-color:white;
    font-size:17px;
    padding:30px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .cancelpolicy_content_area{
        font-size:13px;
        padding:14px;
    }
}
.cancelpolicy_content_area h3{
    display:block;
    width:250px;
    background-color:#f3e5df;
    font-size:20px;
    font-weight:bold;
    margin-top:30px;
    margin-bottom:10px;
    padding:5px 30px;
    text-align:center;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .cancelpolicy_content_area h3{
        width:100%;
        font-size:15px;
        margin-top:20px;
    }
}
.cancelpolicy_row{
    text-decoration:underline;
    font-weight:bold;
}
/******************************************************************/
/* わんこ写真一覧ページ                                            */
/******************************************************************/
.photo_main{
    margin-top:30vh;
    margin-bottom:30vh;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .photo_main{
        margin-top:10vh;
        margin-bottom:20vh;
    }
}
.photo_main h2{
    color:#696969;
    font-size:30px;
    font-weight:bold;
    text-align:center;
    margin-bottom:5vh;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .photo_main h2{
        font-size:20px;
    }
}
.photo_main h2 span{
    display:block;
    color:#997768;
    font-size:20px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .photo_main h2 span{
        font-size:15px;
    }
}
.photo_main_lists{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    width:60%;
    margin:0 auto;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .photo_main_lists{
        width:90%;
    }
}
.photo_main_lists li{
    display:flex;
    margin-bottom:5vh;
    width:30%;
    overflow:hidden;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}
.photo_main_lists li img{
    display:flex;
    transition:1s all;
}
.photo_main_lists li img:hover{
    transform:scale(1.2,1.2);
    transition:1s all;
}
.photo_main_item{
    position:relative;
}
/******************************************************************/
/* 料金一覧ページ                                                  */
/******************************************************************/
.price_main{
    position:relative;
}
.price_main_area{
    width:100%;
    display:flex;
    justify-content:center;
    flex-direction:column;
    padding:100px 250px;
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
	.price_main_area{
        padding:5px 5px;
    }
}
.price_main_area h2{
    margin-bottom:50px;
    text-align:center;
    font-size:30px;
    font-weight:bold;
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_area h2{
        margin-bottom:50px;
        font-size:25px;
    }
}
.price_main_area h2 span{
    display:block;
    font-size:25px;
    color:#9b7a6c;
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_area h2 span{
        font-size:20px;
    }
}
.price_main_area h3{
    margin-left:5px;
    margin-right:5px;
    border:1px solid #b39595;
    background-color:#f4e3dd;
    color:#9b7a6c;
    font-size:20px;
    font-weight:bold;
    padding:10px;
    text-align:center;
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_area h3{
        font-size:15px;
    }
}
.price_comment{
    margin-bottom:30px;
    font-size:14px;
}
.price_nomination_area{
    border:1px solid #9b7a6c;
    padding:5px;
    margin-left:5px;
    margin-right:5px;
    margin-top:0px;
    margin-bottom:50px;
}
.price_nomination_area span{
    display:inline-block;
    width:200px;
}
/*トリミング　テーブル*/
.price_main_trimming_table{
    margin:5px 5px 50px 5px;
    border-collapse: collapse;
    border:1px solid #b39595;
    font-size:17px;
}
.price_main_trimming_table td{
    border-collapse: collapse;
    border:1px solid #b39595;
    padding:5px;
}
.price_main_trimming_table th{
    border-collapse: collapse;
    border:1px solid white;
    background-color:#b39595;
    color:white;
    text-align:center;
    padding:10px;
}
.price_main_trimming_table .th_width_1{
    width:33%;
}
.price_main_trimming_table .th_width_2{
    width:33%;
}
.price_main_trimming_table .th_width_3{
    width:33%;
}
.trimming_supplement{
    margin-bottom:20px;
    font-size:13px;
    padding:10px;
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_trimming_table{
        font-size:15px;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_trimming_table th{
        padding:1px;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_trimming_table .th_width_1{
        width:50%;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_trimming_table .th_width_2{
        width:25%;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_trimming_table .th_width_3{
        width:25%;
    }
}


/*トリミング　補足テーブル*/
.price_main_trimming_supplement_table{
    margin:5px 5px 100px 5px;
    border-collapse: collapse;
    border:1px solid #b39595;
    font-size:17px;
}
.price_main_trimming_supplement_table td{
    border-collapse: collapse;
    border:1px solid #b39595;
    padding:5px;
}
.price_main_trimming_supplement_table th{
    border-collapse: collapse;
    border:1px solid white;
    background-color:#b39595;
    color:white;
    text-align:center;
    padding:10px;
}
.price_main_trimming_supplement_table .td_noborder_1{
    border-top:0px none;
    border-bottom:0px none;
}
.price_main_trimming_supplement_table .td_noborder_2{
    border-bottom:0px none;
}
.price_main_trimming_supplement_table .th_width_1{
    width:33%;
}
.price_main_trimming_supplement_table .th_width_2{
    width:33%;
}
.price_main_trimming_supplement_table .th_width_3{
    width:15%;
}
.price_main_trimming_supplement_table .th_width_4{
    width:15%;
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_trimming_supplement_table{
        font-size:15px;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_trimming_supplement_table .th_width_1{
        width:30%;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_trimming_supplement_table .th_width_2{
        width:22%;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_trimming_supplement_table .th_width_3{
        width:23%;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_trimming_supplement_table .th_width_4{
        width:21%;
    }
}
/*オプション　テーブル*/
.price_main_option_table{
    margin:5px 5px 50px 5px;
    border-collapse: collapse;
    border:1px solid #b39595;
    font-size:17px;
}
.price_main_option_table td{
    border-collapse: collapse;
    border:1px solid #b39595;
    padding:5px;
}
.price_main_option_table th{
    border-collapse: collapse;
    border:1px solid white;
    background-color:#b39595;
    color:white;
    text-align:center;
    padding:10px;
}
.price_main_option_table .th_width_1{
    width:33%;
}
.price_main_option_table .th_width_2{
    width:20%;
}
.price_main_option_table .th_width_3{
    width:47%;
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_option_table{
        font-size:15px;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_option_table .th_width_1{
        width:38%;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_option_table .th_width_1{
        width:22%;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_option_table .th_width_1{
        width:40%;
    }
}
/*ホテル　テーブル*/
.price_main_hotel_box_content{
    margin:5px 5px 0px 5px;
    padding:5px;
    border:1px solid #b39595;
    font-size:17px;
}
.price_main_hotel_table{
    margin:5px 5px 50px 5px;
    border-collapse: collapse;
    border:1px solid #b39595;
    font-size:17px;
}
.price_main_hotel_table td{
    border-collapse: collapse;
    border:1px solid #b39595;
    padding:5px;
}
.price_main_hotel_table th{
    border-collapse: collapse;
    border:1px solid white;
    background-color:#b39595;
    color:white;
    text-align:center;
    padding:10px;
}
.price_main_hotel_table .td_noborder_1{
    border-top:0px none;
    border-bottom:0px none;
}
.price_main_hotel_table .td_noborder_2{
    border-top:0px none;
}
.price_main_hotel_table span{
    font-weight:bold;
}
.price_main_hotel_table .th_width_1{
    width:70%;
}
.price_main_hotel_table .th_width_2{
    width:30%;
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_hotel_box_content{
        font-size:15px;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_hotel_table{
        font-size:15px;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_hotel_table .th_width_1{
        width:70%;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_hotel_table .th_width_2{
        width:30%;
    }
}
/*一時預かり　テーブル*/
.price_main_stay_table{
    margin:5px 5px 50px 5px;
    border-collapse: collapse;
    border:1px solid #b39595;
    font-size:17px;
}
.price_main_stay_table td{
    border-collapse: collapse;
    border:1px solid #b39595;
    padding:5px;
}
.price_main_stay_table th{
    border-collapse: collapse;
    border:1px solid white;
    background-color:#b39595;
    color:white;
    text-align:center;
    padding:10px;
}
.price_main_stay_table .td_noborder_1{
    border-top:0px none;
    border-bottom:0px none;
}
.price_main_stay_table .td_noborder_2{
    border-bottom:0px none;
}
.price_main_stay_table span{
    font-weight:bold;
}
.price_main_stay_table .th_width_1{
    width:70%;
}
.price_main_stay_table .th_width_2{
    width:30%;
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_stay_table{
        font-size:15px;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_stay_table .th_width_1{
        width:70%;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_stay_table .th_width_2{
        width:30%;
    }
}
/*送迎　テーブル*/
#pickup_service{
    display:none; /*不使用20240716*/
}
.price_main_pickup_table{
    margin:5px 5px 50px 5px;
    border-collapse: collapse;
    border:1px solid #b39595;
    font-size:17px;
    margin-bottom:130px;
    display:none; /*不使用20240716*/
}
.price_main_pickup_table td{
    border-collapse: collapse;
    border:1px solid #b39595;
    padding:5px;
}
.price_main_pickup_table th{
    border-collapse: collapse;
    border:1px solid white;
    background-color:#b39595;
    color:white;
    text-align:center;
    padding:10px;
}
.price_main_pickup_table .td_noborder_1{
    border-top:0px none;
    border-bottom:0px none;
}
.price_main_pickup_table .td_noborder_2{
    border-bottom:0px none;
}
.price_main_pickup_table .th_width_1{
    width:70%;
}
.price_main_pickup_table .th_width_2{
    width:30%;
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_pickup_table{
        font-size:15px;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_pickup_table .th_width_1{
        width:70%;
    }
}
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .price_main_pickup_table .th_width_2{
        width:30%;
    }
}
/******************************************************************/
/* スタッフ紹介ページ                                               */
/******************************************************************/
.staff_main{
    margin-top:30vh;
    margin-bottom:30vh;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main{
        margin-top:15vh;
        margin-bottom:15vh;
    }
}
.staff_main h2{
    color:#696969;
    text-align:center;
    font-size:30px;
    font-weight:bold;
    margin-bottom:10vh;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main h2{
        font-size:25px;
    }
}
.staff_main h2 span{
    display:block;
    color:#997768;
    font-size:25px;
}
.staff_main_area{
    max-width:1000px;
    display:flex;
    justify-content:center;
    flex-direction:column;
    width:80%;
    margin:0 auto;
}
.staff_main_box{
    display:flex;
    justify-content:space-between;
    width:100%; 
    margin-bottom:200px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_box{
        flex-direction:column;
        margin-bottom:100px;
    }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_box:nth-child(2){
        flex-direction:column-reverse;
    }
}
.staff_main_img{
    max-width:300px;
    max-height:400px;
    overflow:hidden;
    object-fit:cover;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
}
.staff_main_img img{
    width:300px;
    max-width:300px;
    height:400px;
    max-height:400px;
}
.staff_main_content{
    width:50%;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_content{
        width:100%;
        margin-left:0px;
    }
}
.staff_main_lists{
    display:flex;
    flex-direction:column;
    padding:0px 10px 10px 10px;
    margin-left:10px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_lists{
        margin-left:0px;
        text-align:center;
    }
}
.staff_main_lists dt{
    width:150px;
    margin-top:20px;
    background-color:#f4e3dd;
    border-radius:20px;
    text-align:center;
    color:#997768;
    font-size:15px;
    font-weight:bold;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_lists dt{
        width:180px;
        margin:20px auto 0px;
    }
}
.staff_main_lists dd{
    max-width:100%;
    margin-top:10px;
    margin-left:10px;
    margin-right:10px;
    color:#997768;
    font-size:14px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_lists dd{
        margin-left:0px;
        margin-right:0px;
    }
}
.staff_main_lists a{
    text-decoration:underline;
}
.staff_main_content h3{
    font-size:min(2vw, 25px);
    font-weight:bold;
    margin-top:0px;
    margin-bottom:50px;
    padding:5px 5px 5px 50px;
    background-color:#FFFCFD;
    border:1px solid #f4e3dd;
    border-radius:50px;
    position:relative;
    text-align:center;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_content h3{
        font-size:20px;
        margin-top:50px;
        margin-bottom:20px;
        padding:5px 5px 5px 30px;
    }
}
.staff_main_content h3::before{
    content:"";
    background-image:url(/public/img/staff_design.png);
    background-repeat:no-repeat;
    background-size:contain;
    width:2vw;
    max-width:35px;
    height:2vw;
    max-height:35px;
    position:absolute;
    top:10px;
    left:10px; 
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_content h3::before{
        width:20px;
        height:20px;
        position:absolute;
        top:10px;
        left:5px; 
    }
}
.staff_main_content .post_owner::after{
    content:"";
    background-image:url(/public/img/post_owner.png);
    background-repeat:no-repeat;
    background-size:contain;
    width:12vw;
    max-width:100px;
    height:12vw;
    max-height:100px;
    position:absolute;
    top:-60px;
    right:-10px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_content .post_owner::after{
        width:25vw;
        max-width:100px;
        height:25vw;
        max-height:100px;
        top:-45px;
        right:-10px;
    }
}
.staff_main_content .post_manager::after{
    content:"";
    background-image:url(/public/img/post_manager.png);
    background-repeat:no-repeat;
    background-size:contain;
    width:12vw;
    max-width:100px;
    height:12vw;
    max-height:100px;
    position:absolute;
    top:-60px;
    right:-10px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_content .post_manager::after{
        width:25vw;
        max-width:100px;
        height:25vw;
        max-height:100px;
        top:-45px;
        right:-10px;
    }
}
.staff_main_content .post_staff::after{
    content:"";
    background-image:url(/public/img/post_staff.png);
    background-repeat:no-repeat;
    background-size:contain;
    width:12vw;
    max-width:100px;
    height:12vw;
    max-height:100px;
    position:absolute;
    top:-60px;
    right:-10px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_content .post_staff::after{
        width:25vw;
        max-width:100px;
        height:25vw;
        max-height:100px;
        top:-45px;
        right:-10px;
    }
}
.staff_main_content h3 .span1{
    font-size:min(1vw, 17px);
    font-weight:bold;
    margin-left:40px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_content h3 .span1{
        font-size:15px;
        margin-left:10px;
    }
}
.staff_main_content h3 .span2{
    font-size:min(1vw, 17px);
    font-weight:bold;
    margin-left:10px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .staff_main_content h3 .span2{
        font-size:15px;
        margin-left:10px;
    }
}
.staff_main_content h3 .post{
    display:none; /*一時的に非表示*/
    color:#997768;
    font-size:17px;
    font-weight:bold;
    margin-left:50px;
    background-color:#f4e3dd;
    border-radius:50px;
    padding:5px;
}
/******************************************************************/
/* お知らせページ                                                  */
/******************************************************************/
.news{
    position:relative;
    margin-top:80px;
    margin-bottom:200px;
}
@media screen and (max-width: 480px) {
    .news{
        margin-top:50px;
        margin-bottom:70px;
    }
}
.news::before{
    content:"News";
    width:30px;
    height:100px;
    position:absolute;
    top:10px;
    left:10px;
    writing-mode:vertical-rl;
    text-align:right;
    border-left:2px solid #9b7a6c;
    color:#9b7a6c;
    font-size:20px;
}
@media screen and (max-width: 480px) {
    .news::before{
        position:absolute;
        top:10px;
        left:10px;
    }
}
.news_area{
    display:flex;
    justify-content:center;
    background-color:white;
}
.news_display_area{
    width:80%;
    display:flex;
    justify-content:center;
    text-align:center;
    border-radius:20px;
    padding:20px;
    margin-top:100px;
    margin-bottom:100px;
    position:relative;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .news_display_area{
        width:100%;
        flex-direction:column;
        margin-top:30px;
        margin-bottom:30px;
    }
}
.news_display_title{
    width:30%;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .news_display_title{
        width:100%;
        margin-bottom:20px;
    }
}
.news_display_title h2{
    color:#997768;
    font-size:40px;
    font-weight:600;
    text-align:left;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .news_display_title h2{
        font-size:30px;
    }
}
.news_display_title h2 span{
    display:block;
    color:#583236;
    font-size:15px;
    padding-left:5px;
}
.news_display{
    width:70%;
    text-align:left;
    border-top:4px solid #997768;
    border-bottom:4px solid #997768;
    padding-top:10px;
    padding-bottom:10px;
    margin-top:15px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .news_display{
        width:100%;
    }
}
.news_row{
    display:flex;
    color:#997768;
    font-weight:bold;
    text-align:left;
    padding:10px;
    border-bottom:1px dotted #997768;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .news_row{
        padding:5px;
    }
}
.news_row:last-child{
    border-bottom:none;
}
.news_row_date{
    color:#583236;
}
.news_row_date span{
    display:block;
    color:#997768;
    font-size:30px;
}
.news_row_content{
    margin-left:50px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .news_row_content{
        margin-left:20px;
    }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .news_row_content p{
        font-size:14px;
    }
}
.news_row_content a{
    text-decoration:underline;
}
.news_row_title p .title{
    display:block;
    font-weight:bold;
}
.news_row_title p .text{
    display:block;
    font-size:13px;
    font-weight:normal;
    margin-top:10px;
}
.news_row_category{
    margin-bottom:10px;
    display:flex;
}
.news_row_category .category_notice{
    color:#583236;
    background-color:#f4e3dd;
    padding:2px 10px;
    border-radius:20px;
    text-align:center;
    width:200px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .news_row_category .category_notice{
        width:100px;
    }
}
.news_row_category .category_new{
    color:#FCE9ED;
    background-color:#F77195;
    padding:2px 10px;
    border-radius:20px;
    text-align:center;
    width:80px;
}
/******************************************************************/
/* ご寄付 ページ                                                   */
/******************************************************************/
.donate{
    position:relative;
    margin-top:80px;
    margin-bottom:200px;
}

.donate_area{
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;

}
.donate_area h2{
    color:#9a6f64;
    font-size:24px;
    font-weight:bold;
    margin-top:100px;
    margin-bottom:100px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .donate_area h2{
        margin-top:30px;
        margin-bottom:50px;
    }
}
.donate_area dl{
    display:flex;
    flex-wrap:wrap;
    color:#9a6f64;
    border-top:1px dashed #9a6f64;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .donate_area dl{
        width:90%;
        flex-direction:column;
    }
}
.donate_area dt{
    width:30%;
    padding:15px;
    font-weight:bold;
    color:#9a6f64;
    border-bottom:1px dashed #9a6f64;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .donate_area dt{
        width:100%;
        padding-bottom:0px;
        border-bottom:none;
    }
}
.donate_area dd{
    width:70%;
    padding:15px;
    border-bottom:1px dashed #9a6f64;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .donate_area dd{
        width:100%;
    }
}
/******************************************************************/
/* サイトマップ                                                    */
/******************************************************************/
.sitemap_main{
    /*margin-top:150px;
    margin-bottom:150px;*/
    margin-top:30vh;
    margin-bottom:30vh;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .sitemap_main{
        margin-top:15vh;
        margin-bottom:15vh;
    }
}
.sitemap_main h2{
    color:#696969;
    text-align:center;
    font-size:30px;
    font-weight:bold;
    margin-bottom:10vh;
}
.sitemap_main h2 span{
    display:block;
}
.sitemap_main h2{
    color:#696969;
    text-align:center;
    font-size:30px;
    font-weight:bold;
    margin-bottom:10vh;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .sitemap_main h2{
        font-size:25px;
    }
}
.sitemap_main h2 span{
    display:block;
    color:#997768;
    font-size:25px;
}
.sitemap_main_area{
    max-width:1000px;
    margin:0 auto;
}
.sitemap_main_area .home{
    color:#997768;
    font-size:20px;
    font-weight:bold;
    margin-bottom:20px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .sitemap_main_area .home{
        font-size:17px;
        margin-left:5px;
    }
}
.sitemap_main_area .home:hover{
    color:red;
}
.sitemap_main_area .btn:hover{
    color:red;
}
.sitemap_unit{
    display:flex;
    justify-content:left;
    margin-bottom:20px;
    margin-left:10px;
    margin-right:10px;
    border-bottom:2px dashed #f4e3dd;
}
.sitemap_unit h3{
    width:40%;
    font-size:20px;
    font-weight:bold;
    color:#997768;
    margin-right:30px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .sitemap_unit h3{
        width:48%;
        font-size:15px;
        margin-right:10px;
    }
}
.sitemap_unit p{
    width:55%;
    font-size:14px;
    font-weight:bold;
    color:#997768a6;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .sitemap_unit p{
        width:48%;
        font-size:12px;
    }
}
.sitemap_multi_unit{
    margin-top:50px;
    margin-bottom:10px;
    margin-left:10px;
    margin-right:10px;
    border-bottom:2px dashed #f4e3dd;
    position:relative;
}
.sitemap_multi_unit h3{
    font-size:20px;
    font-weight:bold;
    color:#997768;
    margin-right:30px;
    margin-bottom:30px;
    padding-left:20px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .sitemap_multi_unit h3{
        font-size:15px;
        margin-bottom:20px;
    }
}
.sitemap_multi_unit h3::before{
    content:"";
    width:20px;
    height:20px;
    background-image:url(/public/img/sitemap_design.png);
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;
    top:2px;
    left:-5px;
}
.sitemap_multi_unit dl{
    display:flex;
    flex-wrap:wrap;
}
.sitemap_multi_unit dt{
    width:40%;
    font-size:20px;
    font-weight:bold;
    color:#997768;
    margin-right:30px;
    margin-bottom:40px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .sitemap_multi_unit dt{
        width:48%;
        font-size:15px;
        margin-right:10px;
        margin-bottom:40px;
    }
}
.sitemap_multi_unit dd{
    width:55%;
    font-size:14px;
    font-weight:bold;
    color:#997768a6;
    margin-bottom:40px;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .sitemap_multi_unit dd{
        width:48%;
        font-size:12px;
        margin-bottom:40px;
    }

}
/******************************************************************/
/* アニメーション処理                                               */
/******************************************************************/
/******************************************************************/
/*右から左にスライド表示                                            */
/******************************************************************/
.anime_fadeRight{
    animation-name:fadeRightAnime;/*任意の名称。@keyframesの名称と一致させる*/
    animation-duration:1s;
    animation-fill-mode:forwards;
    animation-delay:1s;
    opacity:0;
    }
    
    @keyframes fadeRightAnime{
      from {
        opacity: 0;
        transform: translateX(20px);
        animation-timing-function:ease-in-out;
      }
    
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
/******************************************************************/
/*スクロール時、下から上にフェードイン                               */
/******************************************************************/
/*フェードイン前の初期ポジションを指定している？*/
.anime_slideBottom {
    opacity: 0;
    transform: translateY(20px);/*指定PX分下にずらす*/
    /*transition: all 1.3s 0s ease-in;*/
    transition-property:all;
    transition-duration:0.5s;
    transition-delay:0s;
    transition-timing-function:ease-in-out;

}
/******************************************************************/
/*スクロール時、右から左にフェードイン                               */
/******************************************************************/
.anime_slideRight1 {
    opacity: 0;
    transform: translateX(30px);
    transition: all 1.3s 0s ease-out;
    transition-delay:0s;
}
.anime_slideRight2 {
    opacity: 0;
    transform: translateX(30px);
    transition: all 1.3s 0s ease-out;
    transition-delay:0.5s;/*0.5秒後から開始*/
}
.anime_slideRight3 {
    opacity: 0;
    transform: translateX(30px);
    transition: all 1.3s 0s ease-out;
    transition-delay:1s;/*1秒後から開始*/
}
/******************************************************************/
/*その場でフェードイン                                              */
/******************************************************************/
.anime_fadeIn{
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    animation-delay:2s;
    opacity:0;
}
@keyframes fadeInAnime{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/******************************************************************/
/*その場でフェードイン（ギャラリー用）                              */
/******************************************************************/
.anime_fadeIn2{
    animation-name:fadeIn2Anime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeIn2Anime{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*順番表示のためのdelay*/
.delay_time02{
    animation-delay: 0.2s;
}
.delay_time04{
    animation-delay: 0.4s;
}
.delay_time06{
    animation-delay: 0.6s;
}
.delay_time08{
    animation-delay: 0.8s;
}
.delay_time10{
    animation-delay: 1.0s;
}
.delay_time12{
    animation-delay: 1.2s;
}
.delay_time14{
    animation-delay: 1.4s;
}
.delay_time16{
    animation-delay: 1.6s;
}
.delay_time18{
    animation-delay: 1.8s;
}
.delay_time20{
    animation-delay: 2.0s;
}
.delay_time22{
    animation-delay: 2.2s;
}
.delay_time24{
    animation-delay: 2.4s;
}
.delay_time24{
    animation-delay: 2.4s;
}
.delay_time26{
    animation-delay: 2.6s;
}
.delay_time28{
    animation-delay: 2.8s;
}
.delay_time30{
    animation-delay: 3.0s;
}
.delay_time32{
    animation-delay: 3.2s;
}
.delay_time34{
    animation-delay: 3.4s;
}
.delay_time36{
    animation-delay: 3.6s;
}
.delay_time38{
    animation-delay: 3.8s;
}
.delay_time40{
    animation-delay: 4.0s;
}
.delay_time42{
    animation-delay: 4.2s;
}
.delay_time44{
    animation-delay: 4.4s;
}
.delay_time46{
    animation-delay: 4.6s;
}
.delay_time48{
    animation-delay: 4.8s;
}
.delay_time50{
    animation-delay: 5.0s;
}
.delay_time52{
    animation-delay: 5.2s;
}
.delay_time54{
    animation-delay: 5.4s;
}
/******************************************************************/
/*ふわふわ揺れる                                                   */
/******************************************************************/
.anime_sway {
    animation: SwayAnime 3s ease-in-out infinite alternate;/*当行のみ追加でもアニメーション利用可*/
    display: inline-block;
    transition: 1.5s ease-in-out;
}
@keyframes SwayAnime {
    0% {
      transform:translate(0, 0) rotate(-7deg);
    }
    50% {
      transform:translate(0, -7px) rotate(0deg);
    }
    100% {
      transform:translate(0, 0) rotate(7deg);
    }
}

/******************************************************************/
/*左部から右部を徐々に表示                                          */
/******************************************************************/
.anime_gradually_indicate {
    overflow: hidden;
    position: relative;
  }
  
  .anime_gradually_indicate::before {
    animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    background: #fff;
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }
  
  @keyframes anime_gradually_indicate {
    100% {
      transform: translateX(100%);
    }
  }