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


:root{
    --txt_shadow:0 0 5px #c88612;
}

.bg_color3{
    background-color:transparent;
    background:url(./Dup/img/bg2.jpg) no-repeat;
    background-size:100%;
}ca
#fakeloader.bg_color3{
    background-size: cover;
}
.font_14{
    font-size:17px;
}
.font_500{
    font-weight:500;
}



/*▼キャプチャ用CSS▼*/
/*
.main_box::before{
    position:absolute;
}
#contents1 .fluid1,
#contents1 .fluid2,
#contents1 .fluid3,
#contents1 .fluid4,
#contents2 .fluid5,
#contents2 .fluid6{
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
*/
/*▲キャプチャ用CSS▲*/

/*--all page---------------------------
-------------------------------------*/

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

#fakeloader{
    background-size: cover!important;
}
body{
    overflow:hidden;
    line-height: 1.7;
}
header{
    background-color:#fff!important;
    position:relative;
}
header::before,
.main_box::before{
    content:'';
    display:block;
    z-index: 5; 
    pointer-events:none;
}
header::before {
    position:absolute;    
    width: 350px;
    height: 300px;
    background: url(./Dup/img/reaf1.png) no-repeat;
    background-size: contain;
    bottom: 3%;
    left: -6%;
}
.main_box::before {
    position: fixed;
    width: 350px;
    height: 300px;
    background: url(./Dup/img/reaf2.png) no-repeat;
    background-size: contain;
    top: -2%;
    right: -2%;
}
header #logo{
    max-width:200px;
}


.pc_box .tel_bt a{
    border-top:0;
    position:relative;
    z-index:6;
}
.pc_box .tel_bt a:hover{
    transform:translateY(-3px);
    color:#f4bd3a;
}
.pc_box .head_banner a{
    border-radius:30px;
    margin: 0 10px;
    text-shadow: var(--txt_shadow);
    position:relative;
    z-index:6;
    
}
.more a,
.foot_tel_bt a{
    text-shadow:var(--txt_shadow);
    border-radius:50px;
}

.pc_box .head_banner a:hover,
.more a:hover,
.foot_tel_bt a:hover{
    transform:translateY(-5px);
}

footer{
    border-top:0!important;
}

/*--animation--------------------------
--------------------------------------*/
/* ローディング後にじわっと出現 */
.load-blurTrigger{
    opacity: 0;
}
.load-blur{
  animation-name:load-blurAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
}

@keyframes load-blurAnime{
  from {
  filter: blur(10px);
  transform: translate(-50%,-50%) scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
  }
}


/*流体シェイプの回転*/
@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}

@keyframes fluidrotate2 {  
	  
0%, 100% {
    border-radius: 65% 35% 48% 52% / 55% 38% 62% 45% ;
}
14% {
    border-radius: 70% 30% 56% 44% / 48% 51% 49% 52% ;
}
28% {
    border-radius: 44% 56% 58% 42% / 48% 61% 39% 52% ;
}
42% {
    border-radius: 36% 64% 46% 54% / 58% 39% 61% 42% ;
}
56% {
    border-radius: 72% 28% 56% 44% / 47% 32% 68% 53%  ;
}
70% {
    border-radius: 58% 42% 68% 32% / 72% 55% 45% 28% ;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}





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

/*first view*/
.catch{
    z-index:2;
    width: 35vw;
    max-width: 700px;
}

/*img frame*/
#video::before,
.attach_outer::before,
.img5::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:2;
    pointer-events:none;
}
#video::before{
    background:url(./Dup/img/frame.png) no-repeat;
    background-size:100% 100%;    
}

/*fluid*/
.fluid_orange{
    background: linear-gradient(90deg, rgba(255,219,159,0.6) 0%, rgba(255,238,159,0.6) 100%);    
}
.fluid_yellow{
    background: linear-gradient(90deg, rgba(255,248,215,0.7) 0%, rgba(255,238,159,0.7) 100%);    
}
#contents1 .fluid1 {
    z-index: 3;
    top: -10%;
    left: 10%;
    width: 23vh;
    height: 23vh;
    animation: fluidrotate 30s ease 0s infinite;
}
#contents1 .fluid2 {
    z-index: 3;
    top: 11%;
    left: 18%;
    width: 10vh;
    height: 10vh;
    animation: fluidrotate2 30s ease 0s infinite;
}
#contents1 .fluid3 {
    z-index: 3;
    bottom: 4%;
    right: 19%;
    width: 10vh;
    height: 10vh;
    animation: fluidrotate 30s ease 0s infinite;
}
#contents1 .fluid4 {
    z-index: 3;
    bottom: -9%;
    right: 10%;
    width: 21vh;
    height: 19vh;
    animation: fluidrotate2 30s ease 0s infinite;
}
#contents2 .fluid5 {
    z-index: 3;
    top: -37%;
    right: -35%;
    width: 21vh;
    height: 19vh;
    animation: fluidrotate2 30s ease 0s infinite;
}
#contents2 .fluid6 {
    z-index: 3;
    top: 2%;
    right: -41%;
    width: 10vh;
    height: 10vh;
    animation: fluidrotate 30s ease 0s infinite;
}


#contents1 .intro_sub_title {
    font-size: 6rem;
    opacity: 0.8;
}
#contents1 .intro_sub_title span {
    width: 250px;
    height: auto;
    top: 20px;
    left: 0%;
}
#contents1 .txt2,
#contents1 .txt3{
    position:relative;
    z-index:2;
}
#contents1 a{
    border-radius:30px;
    text-shadow: var(--txt_shadow);
}

.attach_outer::before{
    background:url(./Dup/img/attach_frame.png) no-repeat;
    background-size:100% 100%; 
}

.img5::before{
    background:url(./Dup/img/img5_frame.png) no-repeat;
    background-size:100% 100%;    
}


/*contents3*/
#contents3{
    background-image:url(./Dup/img/top_frame.png),url(./Dup/img/bottom_frame.png),url(./Dup/img/bg.jpg);
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-size:100% 20px,100% 20px,cover;
    background-position:top,bottom,top;
}

.txt3,
#contents2 p,
#contents3 p{
    font-weight:bolder;
}


/*--under page---------------------------
-------------------------------------*/
/*menu*/
#cms_3-g .cate_item, .cms_3-g .box_wrap{
    box-shadow:none;
    border: 1px solid #c9baa9;
}

/*voice*/
.v_type3 .cate_box{border: 1px solid #c9baa9;}

/*FAQ*/
.cms_5-f .box_wrap{border: 1px solid #c9baa9;}
#cms_5-f .cate:before, .cms_5-f .cate:before{
    display:none;
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
header::before,
.main_box::before{
    display:none;
}
/*
header{
    background-color:transparent!important;
}
*/
header #logo{
    max-width:100px;
}
.pc_box .head_banner a {
    border-radius: 10px 10px 0 0;
}
.catch{
    width:50vw;
}
#contents1 {
    padding: 100px 10%;
}
#contents1::before,#contents1::after,
.page_box::before,.page_box::after{
    content:'';
    position:absolute;
    display:block;
    width: 280px;
    height: 100px;
    top:-9%;
    z-index: 2; 
    pointer-events:none;
}
#contents1::before,
.page_box::before{
    background: url(./Dup/img/reaf1_tb.png) no-repeat;
    background-size: contain;
    left: -2%;
}
#contents1::after,
.page_box::after{
    background: url(./Dup/img/reaf2_tb.png) no-repeat;
    background-size: contain;
    right: -2%;
}
.page_box{
    position:relative;
}
.page_box::before,.page_box::after{
    top: -40%;
}
#contents1 .intro_sub_title {
    font-size: 5rem;
}
#contents1 .intro_sub_title span {
    width: 200px;
    height: auto;
    top: 3px;
    left: 5%;
}
#contents1 .fluid1,
#contents1 .fluid2{
    display:none;
}
#contents1 .fluid3 {
    z-index: 3;
    bottom: 0%;
    right: 12%;
    width: 8vh;
    height: 8vh;
}
#contents1 .fluid4 {
    z-index: 3;
    bottom: -2%;
    right: 10%;
    width: 4vh;
    height: 4vh;
}
#contents2{
    position:relative;
}
#contents2::before {
    content: '';
    position: absolute;
    display: block;
    width: 250px;
    height: 290px;
    background: url(./Dup/img/reaf2.png) no-repeat;
    background-size: contain;
    top: -3%;
    right: -3%;
    z-index: 2;
    pointer-events: none;
}
#contents2 .fluid5 {
    top: auto;
    bottom: -40%;
    right: -1%;
    width: 13vh;
    height: 12vh;
}
.pc_box .head_banner a{
    border: 3px solid #fff;
    border-bottom: 0;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
header #logo {
    max-width: 80px;
}
.catch_sp{
    height:220px;
}
#contents1 {
    padding: 30px 10%;
}
#contents1::before, #contents1::after,
.page_box::before, .page_box::after{
    width: 190px;
    height: 70px;
}
#contents1 .intro_sub_title {
    font-size: 2.5rem;
}
#contents1 .intro_sub_title span {
    width: 130px;
    top: 0px
}
#contents2 {
    padding: 70px 10% 150px;
}
#contents2::before{
    width: 150px;
    height: 130px;
    top: -2%;
}
footer .logo{
    text-align:center;
}

#cms_5-f .cate_box .arrow, .cms_5-f .cate_box .arrow{
    top: 34%;
    transform: none;
}

.page_box::before, .page_box::after{
    top:-35%;
}
#cms_2-g .cate_title {
    font-size: 1.3em;
}

#sp_nav .fat-nav li a{
    font-size:17px;
}
header .head_banner{
    width:220px;
}
.head_banner i{
    display:none;
}

}