@import url('https://fonts.googleapis.com/css2?family=Ephesis&display=swap');
.font1{
    font-family: 'Ephesis', cursive;
    line-height: 1.4;
}

.linkStyle{
    color:#bf9d74;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}

/*
.fix_bnr,
#return_top{
    position:absolute;
}
*/

.sample{
    display:none;
}


/*--all page---------------------------
-------------------------------------*/
header.scr_header{
    background-color:rgba(242,236,233,0.9)!important;
}
.scr_header #header{
    border-bottom:1px solid #fff;
}

.scr_header #pc_nav li a, #footer_nav li a{
    color:#333;
}
.scr_header .button_container span:not(:first-child){
    background:#333;
}
.scr_header .button_container span:nth-of-type(1){
    color:#333;
}
#wrap{
    background: #f2ece9;
}
.back1:before,
.back2:before{
    background-color:transparent!important;
    z-index:-1;
}
#pc_nav li, #top_pc_nav li, #footer_nav li {
    max-width: 100%;
}
#pc_nav li a{
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
#footer {
    background-color: rgba(255,255,255,0.1);
}

#footer_con h2{
    /*color:#333!important;*/
    display:none;
}
#copyright{
    background-color: #b7cbc7;
}
#copyright,
#copyright a,
.return a,
#overlay .left li:before{
    color:#333!important;
}
.fix_bnr{
    right:70px;
    z-index:99;
}
.overlay {
    background: linear-gradient(135deg, rgba(242,236,233,0.9) ,rgba(242,236,233,1))!important;
}
.overlay ul li a,
#overlay .right,
#overlay .right p a{
    color:#333;
}
#overlay .left, #overlay .right {
    border-color: #333;
}
.button_container.active .top,
.button_container.active .bottom{
    background:#333;
}
.button_container.active span:nth-of-type(1) {
    color: #333;
}
.nav_menu_more:first-of-type a .icon:before{
    display:none;
}
#copyright{
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
}


/*--top page---------------------------
-------------------------------------*/
#header #logo{
    opacity:1;
}
#main_img .menu .square_box{
    display:none;
}
#top_pc_nav{
    top:2%;
    right:4%;
    z-index:2;
}
#video{
    height:100vh;
}
.catch{
    z-index:2;
    top:40%;
}
.catch1{
    font-size:2rem;
}
.catch2{
    font-size:1.5rem;
}
.catch2 span{
    font-size:5rem;
    line-height: 1;    
}
.menu{
    top:70%;
}

.hana1{
    top: -20px;
    right: 0;
    left: 0;
    margin: auto;
    width: 85px;
}
/*----modal----*/
.modal_bt{cursor: pointer}
.modal_bg{top: 0;left: 0;background-color: rgba(0,0,0,0.5);z-index: 9998;}
.modal_box{max-height: 90%;overflow-y: auto;z-index: 9999;}
.close_bt{cursor: pointer}
.more_box{
    border-radius:100px;
    cursor:pointer;
}

.nayami_box figure{
    border-radius: 50%;
}
/*下から順番にフェードイン*/
 .fadeup {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}
.fadeup.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

.txt_anim1 span{
	position: relative;
	right: 20px;
	opacity: 0;
	transition: all .8s;
}
.txt_anim1 span.start{
	right: 0;
	opacity: 1;
}
#contents1 .con_sub_title,
#contents2 .con_sub_title{
    transform-origin: bottom left;    
    transform: translateX(-20px) rotate(-8deg);
}
#contents3_wrap:after {
    display:none;
}

/*loopslide*/
.loopSlide {
    position: relative;
    display: flex;
    width: 100vw;
    overflow: hidden;
}

.loopSlide ul {
        padding: 0;
        width: 100vw;
        display: flex;
        flex-shrink: 0;
}
.loopSlide ul:first-child {
        animation: slide1 60s -30s linear infinite;
}
.loopSlide ul:last-child {
        animation: slide2 60s linear infinite;
}
 
.loopSlide ul li {
            display: inline-block;
            width: 100%;
            min-width: 150px;
            list-style: none;
            text-align: center;
}
.loopSlide ul img {
            display: block;
            width: 100%;
            height: auto;
}
 
@keyframes slide1 {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
 
@keyframes slide2 {
    0% {
        transform: translateX(0);
    }
 
    to {
        transform: translateX(-200%);
    }
}

#top_cms .line-l:before{
    display:none;
}
.cms_title{
    text-align:center;
}
.v_type2 .demo_box {padding-top: 70px}
.v_type2 {counter-reset: number 0;}
.v_type2 .cate_box {padding: 30px 20px;}
.v_type2 .cate_box:before {
    counter-increment: number 1;
    content: "0" counter(number);
    display: inline-block;
    position: absolute;
    top: -22px;
    left: -5px;
    z-index: 1;
    font-size: 50px;
    font-weight: 100;
    font-style: italic;
    color: #C45F2C;
    background-color: #fff;
    line-height: 1;
    padding: 0 25px 0 0;
}
.v_type2 .cate_box:nth-child(n + 10):before{
    content: "" counter(number);
}
#top_cms .v_type2{
    padding:100px 50px 80px 50px;
}
#top_cms .v_type2 .cate_box:last-child{
    margin-bottom:30px;
}

.v_type3 .cate_box{background-color:#fff;}
.v_type3 .box_title1{color: #a67c52;}

/*--under page---------------------------
-------------------------------------*/
#cms_3-b .cate_list{
    margin-bottom:30px!important;
}



/* ---------- responshive ---------- */
@media screen and (max-width: 1600px){
    #video video {
    width: auto!important;
    height: 100%;
}
    
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

#main_img,
#video {
    height: 57vh;
}
.catch{
    width:100%;
    top:50%;
}
.catch1{
    font-size: 1.5rem;
    letter-spacing: 1px;
}
#top_cms .v_type2 {
    padding: 80px 50px 60px 50px;
}
.page6 #page_title h2{
    font-size:1.5rem;
}
.fix_bnr {
    right: 50px;
    
}
#copyright{
    padding-bottom:80px;
}
}

/* ---------- スマートフォン ---------- */

@media screen and (max-width: 667px){
.width_80_sp{
    width:80px;
}

#main_img,
#video{
    height:51vh;
}
.catch{
    top:60%;
}
.catch1 {
    font-size: 1.2rem;
    letter-spacing: -1px;
}
.catch2 {
    font-size: 1.1rem;
}
.catch2 span {
    font-size: 2.5rem;
}
#intro_wrap {
    padding-top: 20%;
}
.hana1{
    width:60px;
}
#contents1 .con_sub_title, #contents2 .con_sub_title{
    padding-top:30px;
    transform: translateX(-50px) rotate(-8deg);
}
#contents1 .num {
    top: -53px;
    left: 34%;
}
#contents2 .num{
    left: 58%;
}
.fix_bnr {
    right: 30px;
}
#copyright {
    padding-bottom: 60px;
}
#top_cms .v_type2 {
    padding: 70px 20px 60px 20px;
}
.v_type2 .cate_box{padding: 42px 25px 25px;}
.v_type2 .cate_box:before {
    top: -15px;
    font-size: 40px;
}
.page3 .page_title_box h2,
.page4 .page_title_box h2{
    letter-spacing: -1px;
}
}