﻿/*フッターにバナー*/
.footer_box{
    width: 50%;
    margin: 30px auto 0px;
}
.footer_box .left,.footer_box .right{border-top: 2px dashed #ffa24a;}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    .footer_box{width: 100%;}
    .footer_box .left, .footer_box .right{width: 60%!important;}
    .footer_box .left a{padding-bottom: 30px;}
}

/*住所削除*/
#info .info_txt{
    width: 490px;
    text-align: center;
}
.footer_cms p{text-align: center;}
@media screen and (max-width: 667px){
    #info .info_txt{width: 220px;}
    .footer_cms p{width: 190px;}
}

/* CMS・下層ページ ----------------------------------*/
.cate_title h3{
    font-weight: 700;
    font-size: 34px;
}
#cms_2-f .box_title1{
    padding-left: 54px;
    font-weight: 700;
    font-size: 26px;
}
#cms_2-f .box_title1::after{
    width: 30px;
    height: 3px;
    top: 17px;
}
#cms_3-c .cate_txt1{
    background-color: #dff7d0;
    padding: 15px;
    border-radius: 15px;
    margin-top: 20px;
}
#cms_3-c .cate_title{
    border-left: 5px solid;
    padding: 0;
    padding-top: 2px;
    padding-left: 22px;
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.15em;
        text-align: left;
}
#cms_5-a .box_wrap{
    background-color: #fff;
}
#cms_5-a .cate .cate_title{
    color: #121212;
}
.cms_5-a .box_title1,#cms_5-a .box_title1{font-weight: bold;}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}

/* メインイメージ -----------------------------------*/
.catch {
    z-index: 3;
    position: absolute;
    top: 25%;
    left: 5%;
    /*transform: translate(-50%, -50%); X横 Y縦 始点が要素の中心になる */
    width: 35%;
}
/* タブレット */
@media screen and (max-width: 768px){
    #main_img{
        height: 740px;
        max-height: 100vh;
    }
    .catch{
        top: 22%;
        left: 2%;
        width: 53%;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #main_img{height: 100vh;}
    .catch {
        top: 22%;
        left: 4%;
        width: 80%;
    }
}

/* トップページ -------------------------------------*/
.top_cms_box .cms_title h2{
    border-bottom: solid 3px;
    font-weight: 900;
    font-style: normal;
}
.con_no{
    opacity: 1;
    font-size: 20px;
    font-style: normal;
}
#intro h2{
    font-size: 31px;
    letter-spacing: 0.1em;
}
.intro_txt{
    width: 45%!important;
}
.intro_img{
    width: 55%!important;
}
#contents .con_title{
    font-size: 31px;
    letter-spacing: 0em;
}
#contents .con_img{
    background-size: contain;
    background-repeat: no-repeat;
}


/* タブレット */
@media screen and (max-width: 768px){
    .intro_txt,.intro_img{width: 90%!important;}
    .intro_txt{order: 2;}
    .intro_img{order: 1;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #intro h2{font-size: 27px;letter-spacing: 0.07em;}
    #contents .con_title{    font-size: 22px;
    padding: 0;
    line-height: 1.7;}
    .top_cms_box .cms_title{margin-bottom: 50px;}
    
}

/* 全体 ---------------------------------------------*/
header{
    padding: 0 30px 0 0;
    background: linear-gradient(0deg, rgba(251,244,238,0) 10%, rgba(251,244,238,0.4) 50%, rgba(251,244,238,0.7) 90%);
}
header.pd_l-30px{padding-left: 0;}
header #logo .logo img{width: 100%!important;}
header #logo .logo{width: 50%; margin-left: 0;}
header #header #header_menu li:last-child a span{
    color: #383838;
}
.drawer-hamburger,.drawer-hamburger:hover{
    background-color: #fdf8f3;
    height: 40px;
    padding-top: 0px!important;
        border-radius: 10px;
}
.drawer--left .drawer-nav{background-color: #88cb5a;}
.drawer-hamburger-icon.bg_color1{background-color: #422a0a;}
.drawer-open .drawer-hamburger-icon.bg_color1{background-color: transparent;}
.drawer-hamburger-icon::after, .drawer-hamburger-icon::before{background-color: #422a0a!important;}

.linkStyle{
	color:#88cb5a;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	color:#88cb5a;
	opacity: 0.7;
	text-decoration: none;
}
.pager li a{color: #383838; border-radius: 10px;}

#page_title #filter_white{padding-bottom: 30px;}
#page_title h2{    color: #422a0a;}
@media screen and (max-width:800px) {
    #page_title #filter_white{padding-bottom: 0px;}
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    #page_title h2{
        font-size: 26px;
        letter-spacing: 0px;
    }
    #page_title.page3 h2{
        width: 260px;
        display: block;
        margin: 0 auto;
    }
}

/* 配色 ----------------------------------------------*/
#wrap{background-color: #fffbf7;}
.txt_color1,.hvr_txt_color1:hover{color: #282828;} 
/*.txt_color2,.hvr_txt_color2:hover{color: #f4f3f2;} */
.txt_color3,.hvr_txt_color3:hover{color: #d58335;} 
/*.txt_color4,.hvr_txt_color4:hover{color: #eae4df;} */
/*.txt_color5,.hvr_txt_color5:hover{color: #f2ede7;}*/ 

.bg_color1,.hvr_bg_color1:hover{background-color: #d8f5c6;}/*#88cb5a*/
.bg_color2,.hvr_bg_color2:hover{background-color: #fbf4ee;}
.bg_color3,.hvr_bg_color3:hover{background-color: #f5b578;} 
.bg_color4,.hvr_bg_color4:hover{background-color: #e0f8d1;} 
/*.bg_color5,.hvr_bg_color5:hover{background-color: #f2ede7;}*/ 

.border_color1,.hvr_border_color1:hover{border-color: #88cb5a;}
/*.border_color2,.hvr_border_color2:hover{border-color: #f4f3f2;}*/
.border_color3,.hvr_border_color3:hover{border-color: #ffa24a;}
/*.border_color4,.hvr_border_color4:hover{border-color: #eae4df;}*/
/*.border_color5,.hvr_border_color5:hover{border-color: #f2ede7;}*/

/*テンプレート  -------------------------------------*/

/*contact_type1 ---------------------------------------*/
.contact_type1 .con_box1 .left{
    padding: 40px 27px 30px;
    background-color: #f7f7f7;
    margin: 1%;
    width: 60%!important;
    box-sizing: border-box;
}
.contact_type1 .con_box2 .left, .contact_type1 .con_box2 .right {
    padding: 40px 27px 30px;
    background-color: #f7f7f7;
    margin: 1%;
    width: 30%!important;
    box-sizing: border-box;
}

.contact_type1 .cate_title {
    padding: 0;
    margin: 0;
    font-size: 19px;
    margin-bottom: 16px;
}
.contact_type1 .con_box1 a {
    display: block;
    max-width: 330px;
    margin: 0 auto 27px;
    transition: opacity .6s;
}
.contact_type1.con_box2 a{
    display: block;
    max-width: 450px;
    margin: 0 auto;
    transition: opacity .6s;
}
.contact_type1 .click_bt {
    cursor: pointer;
    padding: 10px 18px;
    background-color: #fff;
    box-shadow: 0 3px 8px rgb(0 0 0 / 10%);
    border-radius: 5px;
    text-align: center;
}
.contact_type1 .txt_box{
     display: none
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    .contact_type1 .left, .contact_type1 .right {
        width: 80%!important;
    }
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
    .contact_type1 .con_box1 .left,.contact_type1 .con_box2 .left, .contact_type1 .con_box2 .right  {
        padding: 30px 27px 30px;
        width: 100%!important;
        margin-bottom: 20px;
    }
    .contact_type1 .cate_title {
        font-size: 17px;
    }
}


/* ---------- loopSlider ---------- */

#topcms_gallery_type1 .loopSlider .ul::before,#topcms_gallery_type1 .loopSlider .ul::after{
    background-image: url(./Dup/img/border.png);
    background-size: auto;
    width: 100%;
    height: 24px;
    left: 0;
    top: 0;
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
}
#topcms_gallery_type1 .loopSlider .ul::after{
    top: auto;
    bottom: 0;
}


/* ---------- loopSlider ---------- */
#topcms_gallery_type1 .loopSliderWrap{
    top: 0;
    left: 0;
    height: 450px;
}
#topcms_gallery_type1 .loopSlider {
    margin: 0 auto;
    height: 450px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
#topcms_gallery_type1 .loopSlider .ul {
    height:450px;
    float: left;
    overflow: hidden;
}
#topcms_gallery_type1 .loopSlider .ul .li {
    width: 450px;
    height: 450px;
    float: left;
    display: inline;
    overflow: hidden;
	position: relative;
	box-sizing: border-box;
	padding: 0;
}
#topcms_gallery_type1 .loopSlider .ul .li img{
    border-radius: 0;
}
#topcms_gallery_type1 .loopSliderWrap:after {
    content: "";
    display: none;
    clear: none;
}

/*リンクボタン*/
#topcms_gallery_type1 .btn{z-index: 4;}
#topcms_gallery_type1 .btn a::before {
    content: '';
    position: absolute;
    bottom: 55px;
    right: 27%;
    width: 42%;
    height: 1px;
    background: #333;
    transition: all .3s;
}
#topcms_gallery_type1 .btn a::after {
    content: '';
    position: absolute;
    bottom: 60px;
    right: 27%;
    width: 15px;
    height: 1px;
    background: #333;
    transform: rotate(35deg);
    transition: all .3s;
}
#topcms_gallery_type1 .btn a:hover::before {
    right: 16%;
    background: #fff;
}
#topcms_gallery_type1 .btn a:hover::after {
    right: 15%;
    background: #fff;
}
#topcms_gallery_type1 .btn {
    display: block;
}
#topcms_gallery_type1 .btn a {
    background: #fff;
    color: #212121;
    width: 200px;
    height: 200px;
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 50%;
    flex-wrap: wrap;
    transition: all 0.4s;
}
#topcms_gallery_type1 .btn a:hover {
    background: #1c1c1c;
    color: #fff;
}
#topcms_gallery_type1 .btn a span, .btn a strong {
    text-align: center;
}
@media(max-width: 768px) {
#topcms_gallery_type1,#topcms_gallery_type1 .loopSliderWrap,#topcms_gallery_type1 .loopSlider,#topcms_gallery_type1 .loopSlider ul,#topcms_gallery_type1 .loopSlider .ul .li{
	height: 280px;
}
#topcms_gallery_type1 .loopSlider .ul .li{
    width: 280px;
}
#topcms_gallery_type1 {
    padding-bottom: 0;
    padding-top: 0;
}
}
@media(max-width: 667px) {
#topcms_gallery_type1,.loopSliderWrap,.loopSlider,.loopSlider .ul,.loopSlider .ul .li{
	height: 179px!important;
}
#topcms_gallery_type1 .loopSlider .ul .li{
    width: 179px;
}
#topcms_gallery_type1 .btn a::after {
    bottom: 35px;
    right: 27%;
}
#topcms_gallery_type1 .btn a::before {
    bottom: 30px;
    right: 27%;
}
#topcms_gallery_type1 .btn a {
    width: 140px;
    height: 140px;
    line-height: 1.7;
}
}

/* ------------------------------------------------------- fv -----------------------------------------------------*/
.fvWrap .fvWrap__body .fvWrap__tile{position: relative;}
.fvWrap .fvWrap__body .rail-left .fvWrap__tile::before{
    background-image: url(./Dup/img/border2.png);
    background-size: auto;
    width: 160%;
    height: 24px;
    left: 13%;
    top: 0;
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    transform: rotate(90deg) translate(0%, -50%);
}
.fvWrap .fvWrap__body .rail-left .fvWrap__tile::after {
    background-image: url(./Dup/img/border2.png);
    background-size: auto;
    width: 160%;
    height: 24px;
    right: 22%;
    top: 0;
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    transform: rotate(90deg) translate(0%, -50%);
}
.fvWrap .fvWrap__body .rail-center .fvWrap__tile{
    z-index: 0;
}
.fvWrap .fvWrap__body .rail-center .fvWrap__tile::before{
    background-image: url(./Dup/img/border2.png);
    background-size: auto;
    width: 162%;
    height: 24px;
    left: 16%;
    top: 46%;
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    transform: rotate(90deg) translate(0%, 0%);
}
.fvWrap .fvWrap__body .rail-center .fvWrap__tile::after {
    background-image: url(./Dup/img/border2.png);
    background-size: auto;
    width: 162%;
    height: 23px;
    right: 16%;
    top: 46%;
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    transform: rotate(90deg) translate(0%, 0%);
}
.fvWrap .fvWrap__body .rail-right .fvWrap__tile::before{
    background-image: url(./Dup/img/border2.png);
    background-size: auto;
    width: 160%;
    height: 24px;
    left: 13%;
    top: 0;
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    transform: rotate(90deg) translate(0%, -50%);
}
.fvWrap .fvWrap__body .rail-right .fvWrap__tile::after {
    background-image: url(./Dup/img/border2.png);
    background-size: auto;
    width: 160%;
    height: 24px;
    right: 21%;
    top: 0;
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    transform: rotate(90deg) translate(0%, -50%);
}

/* タブレット */
@media screen and (max-width: 768px){
    .fvWrap .fvWrap__body .rail-left .fvWrap__tile::before{left: 10%;}
}

@media(max-width: 667px) {
    .fvWrap .fvWrap__body .rail-center .fvWrap__tile::before{width: 158%; left: 14%;}
    .fvWrap .fvWrap__body .rail-center .fvWrap__tile::after{right: 14%; width: 158%;}
    .fvWrap .fvWrap__body .rail-left .fvWrap__tile::before{left: 5%;}
}



@-webkit-keyframes rail_up {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  to {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
  }
}
@keyframes rail_up {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  to {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
  }
}
@-webkit-keyframes rail_down {
  from {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}
@keyframes rail_down {
  from {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}
.fvWrap {
  width: 100%;
  height: 100vh;
  position: relative
}
@media screen and (min-width:1001px) {
  .fvWrap {
    max-height: 80vw
  }
}
@media screen and (max-width:800px) {
  .fvWrap {
    height: 740px;
    max-height: 100vh
  }
}

.fvWrap .fvWrap__wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 120px);
  overflow: hidden
}
@media screen and (min-width:1001px) {
  .fvWrap .fvWrap__wrap {
    max-height: 80vw
  }
}
@media screen and (max-width:800px) {
  .fvWrap .fvWrap__wrap {
    height: 100%;
    max-height: none
  }
}
.fvWrap .fvWrap__body {
  margin: 0 0 0 auto;
  width: 76.1%;
  max-width: 130vh;
  height: 200%;
  display: flex;
  -webkit-transform: rotate(55deg);
  transform: rotate(55deg);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%
}
@media screen and (max-width:800px) {
  .fvWrap .fvWrap__body {
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    max-width: none;
    width: 90%;
    min-width: 500px
  }
}
@media screen and (max-width:500px) {
  .fvWrap .fvWrap__body {
    position: absolute;
    top: 0;
    left: auto;
    right: -8%
  }
}
.fvWrap .fvWrap__body .fvWrap__rail {
    position: relative;
    width: calc(33.33% - 70px);
    margin-right: 23px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@media screen and (max-width:800px) {
  .fvWrap .fvWrap__body .fvWrap__rail {
    margin-right: 12px;
    width: calc(33.33% - 12px)
  }
}
.fvWrap .fvWrap__body .fvWrap__rail .fvrail_inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  background-color: #422a0a;
}
.fvWrap .fvWrap__body .fvWrap__rail.rail-left.is-inview .fvrail_inner {
  -webkit-animation: rail_up 30s linear infinite;
  animation: rail_up 30s linear infinite
}
.fvWrap .fvWrap__body .fvWrap__rail.rail-center .fvrail_inner {
  flex-direction: column-reverse
}
.fvWrap .fvWrap__body .fvWrap__rail.rail-center.is-inview .fvrail_inner {
  -webkit-animation: rail_down 25s linear infinite;
  animation: rail_down 25s linear infinite
}
.fvWrap .fvWrap__body .fvWrap__rail.rail-right.is-inview .fvrail_inner {
  -webkit-animation: rail_up 19s linear infinite;
  animation: rail_up 19s linear infinite
}
.fvWrap .fvWrap__body .fvWrap__tile {
  margin-bottom: 24px;
  -webkit-transform: translateY(50%);
  transform: translateY(50%)
}
@media screen and (max-width:800px) {
  .fvWrap .fvWrap__body .fvWrap__tile {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    margin-bottom: 12px
  }
}
.fvWrap .fvWrap__body .fvWrap__tile img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-transform: rotateY(0deg) translate3d(0, 0, 0);
  transform: rotateY(0deg) translate3d(0, 0, 0)
}
body.opening .fvWrap .fvWrap__body .fvWrap__tile img {
  opacity: 0;
  -webkit-transform: rotateY(50deg) translate3d(0, 0, 0);
  transform: rotateY(50deg) translate3d(0, 0, 0)
}
.fvWrap .fvWrap__body .fvWrap__tile.tile-center {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
@media screen and (max-width:800px) {
  .fvWrap .fvWrap__body .fvWrap__tile.tile-center {
    -webkit-transform: translateY(50%);
    transform: translateY(50%)
  }
}
.fvWrap .fvWrap__body .fvWrap__tile:nth-child(1) img {
  transition: .7s .6s
}
.fvWrap .fvWrap__body .fvWrap__tile:nth-child(2) img {
  transition: .7s .8s
}
.fvWrap .fvWrap__body .fvWrap__tile:nth-child(3) img {
  transition: .7s 1s
}
.fvWrap .fvWrap__body .fvWrap__tile:nth-child(4) img {
  transition: .7s 1.2s
}
.fvWrap .fvWrap__body .fvWrap__tile:nth-child(5) img {
  transition: .7s 1.4s
}
.fvWrap .fvWrap__body .fvWrap__tile:nth-child(6) img {
  transition: .7s 1.6s
}
.fvWrap .fvWrap__body .fvWrap__tile:nth-child(7) img {
  transition: .7s 1.8s
}
.fvWrap .fvWrap__body .fvWrap__tile:nth-child(8) img {
  transition: .7s 2s
}


#page_title .fvWrap{height: 37vh;}
#page_title .fvWrap .fvWrap__wrap{
    width: 200%;
}
#page_title .fvWrap .fvWrap__body{
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}
@media screen and (max-width:800px) {
    #page_title .fvWrap{display: none;}
}
/*
@media(max-width: 768px) {
    #page_title .fvWrap{height: 23vh;}
    #page_title .fvWrap .fvWrap__body{width: 45%; top: 5px;}
}
@media(max-width: 667px) {
    #page_title .fvWrap{height: 30vh;}
    #page_title .fvWrap .fvWrap__body{width: 83%; top: 0px;}
}
*/
.page_title_dec{display: none;}
@media screen and (max-width:800px) {
    .page_title_dec{
        display: block;
        
    }
}