/* ------------- my css ------------- */



/* color */
.txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--black);}
:root{
    --color1: #5b1818; 
    --color2: #efedd8; 
    --color3: #301300; 
    --color4: #efefef; 
    --black: #151a1e; 
}

.txt_red, .hvr_txt_red:hover{color: #C12326;}
.txt_gray, .hvr_txt_gray:hover{color: #ccc}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1)} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: var(--color2)} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: var(--color3)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */

/* background-color */
.bg_black, .hvr_bg_black:hover{background-color: var(--black)} /* 黒背景 */
.bg_gray, .hvr_bg_gray:hover{background-color: #ccc}
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1)} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2)} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3)} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)} /* アクセントカラー2 */
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_gray, .hvr_border_gray:hover{border-color: #ccc}
.border_color1, .hvr_border_color1:hover{border-color: var(--color1)}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2)}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3)}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4)}


/*自動リンク設定*/
.linkStyle{
    color:var(--color1);
}
.linkStyle:hover{
	opacity:0.7
}
/*全体*/
#wrap{
    min-width: 1000px;
}

@media screen and (max-width: 768px) {
    #wrap{
    min-width: auto;
}
}

/* ------------- header ------------- */
#header h1 span{
    padding: 10px;
    border: none;
}

#header h1.active{
    top: 0;
    left: 0;
}
#header h1.active img{
    max-width: 150px;
}

@media screen and (max-width: 768px) {
#header h1.active img {
    max-width: 130px;
}
}
@media screen and (max-width: 667px) {
#header h1.active img {
    max-width: 70px;
}
}



/* ------------- スライド　FV------------- */
@keyframes zoomUp {
  0% {
    transform: translate(-50%,-50%) scale(1);
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -ms-filter: sepia(100%);
    -o-filter: sepia(100%);
    filter: sepia(100%);
  }
    20% {
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -ms-filter: sepia(100%);
    -o-filter: sepia(100%);
    filter: sepia(100%);
    }
    70% {
    -webkit-filter: sepia(0%);
    -moz-filter: sepia(0%);
    -ms-filter: sepia(0%);
    -o-filter: sepia(0%);
    filter: sepia(0%);
    }
  80% {
    transform: translate(-50%,-50%) scale(1.05);
  }
}
@keyframes zoomDown {
  0% {
    transform: translate(-50%,-50%) scale(1.08);
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -ms-filter: sepia(100%);
    -o-filter: sepia(100%);
    filter: sepia(100%);
  }
    20% {
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -ms-filter: sepia(100%);
    -o-filter: sepia(100%);
    filter: sepia(100%);
    }
    60% {
    -webkit-filter: sepia(0%);
    -moz-filter: sepia(0%);
    -ms-filter: sepia(0%);
    -o-filter: sepia(0%);
    filter: sepia(0%);
    }
  85% {
    transform: translate(-50%,-50%) scale(1);
  }
}


/* ------------- top ------------- */

#main_img .main_txt{
    top: 50%;
	left: 50%;
    width: 86%;
    max-width: 950px;
    z-index: 3;
    transform: translate(-50%,-50%) rotate(-13deg);
    filter: drop-shadow(2px 2px 8px rgba(0,0,0,0.3));
}

#main_img .tori_img{
    bottom: -2%;
    right: 0;
    width: 30%;
    max-width: 380px;
    z-index: 3;
}
/* 回転カード共通設定 */
.tori_img.flip_card {
  perspective: 1000px;
  width: 100%; 
  max-width: 330px;
  height: auto;
}

/* 回転アニメーション */
.tori_img .flip_inner {
  position: relative;
  width: 100%;
  height: 320px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.tori_img:hover .flip_inner {
  transform: rotateY(180deg);
}

/* 表面と裏面 */
.tori_img .flip_front,
.tori_img .flip_back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
}

.tori_img .flip_front img,
.tori_img .flip_back img {
  width: 100%;
  display: block;
}

.tori_img .flip_back {
  transform: rotateY(180deg);
}

#main_img .tori_img_tb{
    bottom: 0;
    right: 0;
    width: 45%;
    max-width: 300px;
    z-index: 3;
}


#main_img #slide_wrap .down{
    left: 2%;
}



#intro .intro_img{
    right: 5%;
    bottom: -5%;
    width: 20%;
    max-width: 220px;
    transform: rotateZ(17deg);
}


#contents1{background: url(../img/bg.png) center / auto repeat !important;
}

#contents2 .contents2_img{
    left: 5%;
    top: 0;
  /*  margin-top: -12%;*/
   margin-top: 0;
    width: 38%;
    max-width: 400px;
    transform: rotateZ(-3deg);
}

#contents3::after{
    background: url(../img/bg.png) center / auto repeat !important;
}

@media screen and (max-width: 768px) {
        #main_img #slide_wrap .down{
            left: 5%;
        }
        #contents1 .d_flex .flex_order3{
            margin-top: 80px;
        }
        #contents2 .contents2_img{
            left: 50%;
            top: auto;
            bottom: -50px;
            /*margin-top: -11%;*/
            margin-top: 0%;
            width: 70%;
            max-width: 550px;
            transform: translate(-50%,0) rotateZ(-3deg);
        }

}

@media screen and (max-width: 667px) {
    #intro .intro_img{
    width: 22%;
    bottom: -1%;
}
#contents1 .d_flex .flex_order3{
            margin-top: 50px;
        }
 #contents2 .contents2_img{
            bottom: -20px;
        }

}

/* ------------- footer ------------- */

#footer{
        background: url(../img/bg.png) center / auto repeat !important;
}

#sns_links li a {
    opacity: 1;
    max-width: 40px;
}

#sns_links li a:hover {
    opacity: 0.7;
}

@media screen and (max-width: 667px) {
    #footer .logo.grid_10_sp {
        width: 52% !important;
    }
}

/* ------------- 下層 ------------- */

.cate{
    padding-bottom: 70px;
    margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
    #page_title{
        min-height: 40vh !important;
        height: 400px !important;
    }
    
    #page_title .txt_vertical{
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
    }
    #page_title >div{
        margin-top: -20%;
    }
}

@media screen and (max-width: 667px) {
    #page_title{
        height: 280px !important;
    }}

/* ------------- こだわり ------------- */
#cms_2-g .cate_list{
    display: none;
}

#cms_2-g .cate_title {
    line-height: 1.3;
}


/* ------------- コース ------------- */
#cms_3-e .cate_list, #cms_3-e .cate_title{
    display: none;
}


/* ------------- google_privacy ------------- */
#google_privacy{
    background-color: var(--color2) !important;
}




/*EN追記*/

.txt_vertical{
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
    }

#main_nav .d_flex{
    flex-flow: column;
}

#nav_wrap .grid_12_sp{
    width: 100% !important;
}

#page10 .d_flex {
    flex-flow: row wrap;
    
}

@media screen and (max-width: 768px) {
    #page10 ul li {
        margin-bottom: 25px;
        padding-bottom: 25px;
    }
}