﻿.bnr{
        position: fixed;
    bottom: 30px;
    right: 100px;
    padding: 12px 35px;
    background-color: #ff8f03;
    color: #fff;
    border: 2px solid #fff;
    font-weight: bold;
    font-size: 1.4rem;
    border-radius: 10px;
    text-align: center;
    z-index: 3;
}
.bnr .smal{
    font-size: 1rem;
    margin-left: 5px;
}
.bnr:hover{background-color: #ffc903;}
/* タブレット */
@media screen and (max-width: 768px){
    .bnr{right: 50px;}
}
/* スマホ */
@media screen and (max-width: 667px){
    .bnr{right: auto;left: 50%;transform:translateX(-50%);width: 63%;bottom:15px;}
}
@media screen and (max-width: 350px){
    .bnr{width:250px;padding: 12px 0px;}
}
/*---------------------------------------------
 テンプレート ・CMS・下層ページ 
--------------------------------------------*/
.sns_links li{width: 35px;}

#top_contents1 .catch_txt{
        max-width: 1290px;
}
#top_contents1 .catch_txt h2{
        font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
#top_contents1 .catch_txt p{
    color: #484848;
    font-size: 1.2rem;
    font-weight: 600;
}

#top_contents2{
    background-image: url(./Dup/img/img_bg.jpg);
    background-size: cover;
    background-position: left top;
    background-repeat: repeat-y;
    background-attachment: fixed;
    
        padding: 150px 0;
}

#top_contents2 .con_box .text_box{    overflow-y: unset;}
#top_contents2 .text_box h2{
    font-size: 2.2rem;
    font-weight: 700;
    color: #ff8f03;
}
#top_contents2 .text_box h2:first-letter{font-size: 3.2rem;}
#top_contents2 .text_box p{
    font-weight: 700;
    font-size: 1rem;
}
.link_bnr{
    color: #fff;
    background-color: #ff8f03;
    border-radius: 5px;
    margin-top: 20px;
    display: block;
    padding: 15px 20px;
    width: 160px;
    transition:all 0.3s;
    
}
.link_bnr:hover{}
.link_bnr i{transform: translateX(10px);transition:all 0.3s;}
.link_bnr:hover i{transform: translateX(15px);}

.fa-envelope:before{content: "\f086";}
#footer::before{background: rgba(255, 255, 253, 0.4);}
.footer_box .txt_white{color: #4d4d4d; font-weight: bold;}

.cms_1-g .box_title1{font-weight: bold;}
.cms_1-g .date{max-width: 140px;}
#cms_2-g .cate_title{border-color: #ff8f03;}
#cms_2-g .cate_txt3{
    padding: 30px 20px;
    background-color: #fff3c8;
    border-radius: 10px;
}

/* タブレット */
@media screen and (max-width: 768px){
    #top_contents1 .catch_txt h2{
        width: 490px;
        margin: 0 auto 30px;
    }
    #top_contents2 .text_box h2{
        text-align: center;
    }
    #top_contents2 .con_box:nth-child(2) .text_box h2{
        width: 370px;
        margin: 0 auto 35px;
        text-align: center;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #top_contents1 .catch_txt h2{
        font-size: 1.8rem;
        width: 270px;
        border-bottom: 3px solid;
    }
    #top_contents2 .text_box h2{font-size: 1.9rem;}
    #top_contents2 .con_box:nth-child(1) .text_box h2{width: 200px;margin: 0 auto 35px;}
    #top_contents2 .con_box:nth-child(2) .text_box h2{width: 280px;}
    
    #cms_2-g .cate_txt3{margin-top: 30px;padding: 20px 20px;}
}
@media screen and (max-width: 350px){
    #top_contents1{padding: 50px 28px;}
    #top_contents1 .catch_txt h2 {letter-spacing: 0em;width: 260px;}
}
/* --------------------------------------------
 メインイメージ 
---------------------------------------------*/
#main_img{
    position: relative;
    height: 800px;
    background-color: #ff8f03;
}
#main_img::before{
    content: "";
    width: 100%;
    height: 101%;
    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 70%, rgba(255,255,255,1) 95%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
#main_img::after{}
.catch {
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);/* X横 Y縦 始点が要素の中心になる */
    width: 50%;
    max-width: 720px;
}
.dec01{
    position: absolute;
    max-width: 350px;
    width: 25%;
    bottom: 0px;
    left: 7%;
}
@media screen and (max-width: 1260px){
    #main_img > img{height: 100%;width: auto;}
}
/* タブレット */
@media screen and (max-width: 768px){
    #main_img{height: 600px;}
    /*#main_img > img{top: 95px;transform:translate(-50%,0%);}*/
    .catch {width: 60%;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #main_img{height: 500px;}
    /*#main_img > img{top: 78px;}*/
    .catch {top: 50%;width: 70%;}
}


/*--------------------------------------------
 全体 
----------------------------------------------*/
body{font-size: 17px;}
.linkStyle{
	color: #ff8f03;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	color: #ff8f03;
	opacity: 0.7;
	text-decoration: none;
}


.txt_color1,.hvr_txt_color1:hover{color: #ff8f03;} 
.txt_color2,.hvr_txt_color2:hover{color: #ff8f03;} 
.txt_color3,.hvr_txt_color3:hover{color: #ffc903;} 
.txt_color4,.hvr_txt_color4:hover{color: #fff;} 
/*.txt_color5,.hvr_txt_color5:hover{color: #f2ede7;}*/ 

.bg_color1,.hvr_bg_color1:hover{background-color: #ff8f03;}
/*.bg_color2,.hvr_bg_color2:hover{background-color: #f4f3f2;}*/
.bg_color3,.hvr_bg_color3:hover{background-color: #ffc903;} 
.bg_color4,.hvr_bg_color4:hover{background-color: #fff;} 
/*.bg_color5,.hvr_bg_color5:hover{background-color: #f2ede7;}*/ 

.border_color1,.hvr_border_color1:hover{border-color: #ff8f03;}
.border_color2,.hvr_border_color2:hover{border-color: #ffc903;}
.border_color3,.hvr_border_color3:hover{border-color: #ffc903;}
.border_color4,.hvr_border_color4:hover{border-color: #fff;}
/*.border_color5,.hvr_border_color5:hover{border-color: #f2ede7;}*/

/* ------------------------------------------------------- fv -----------------------------------------------------*/
.fvWrap .fvWrap__body .fvWrap__tile{position: relative;}

.fvWrap .fvWrap__body .rail-center .fvWrap__tile{
    z-index: 0;
}

/* タブレット */
@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: 100vw
  }
}
@media screen and (max-width:800px) {
  .fvWrap {
    height: 690px;
    max-height: 80vh
  }
}

.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;
    height: 107%;
  }
}
@media screen and (max-width:800px) {
  .fvWrap .fvWrap__wrap {
    height: 100%;
    max-height: none
  }
}
.fvWrap .fvWrap__body {
  margin: 0 0 0 auto;
  width: 100%;
  max-width: 130vh;
  height: 200%;
  display: flex;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -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: 100%;
    min-width: 500px
  }
}
/* スマホ */
@media screen and (max-width: 667px){
    .fvWrap {height: 100%;}
}
@media screen and (max-width:500px) {
  .fvWrap .fvWrap__body {
    position: absolute;
    top: -10px;
    left: auto;
    right: 0%
  }
}
.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 55s linear infinite;
  animation: rail_up 55s 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 55s linear infinite;
  animation: rail_down 55s linear infinite
}
.fvWrap .fvWrap__body .fvWrap__rail.rail-right.is-inview .fvrail_inner {
  -webkit-animation: rail_up 55s linear infinite;
  animation: rail_up 55s 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);
  border-radius: 15px;
}
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
}

