﻿/* 街並み ------------------------ */
.dec02{
    position: absolute;
    top:2%;
    right: 2%;
    width: 25%;
}


/*車-----------------------------*/
.car1{
    max-width: 140px;
    width: 100%;
    top: -40px;
    left: 51%;
}
.car2{
    max-width: 140px;
    width: 100%;
    top: -5%;
    left: 40%;
    z-index: 2;
}
.car3{
    display: block;
    max-width: 140px;
    width: 100%;
    top: 7%;
    left: 51%;
}
/* タブレット */
@media screen and (max-width: 768px){
    .dec02{
        top: -4%;
        width: 35%;
    }
    .car1{
        max-width: 30%;
        top: -110px;
        left: 15%;
    }
    .car2{
        max-width: 25%;
        top: -6%;
        left: auto;
        right: 12%;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .car1 {left: 20%; top: -6%; max-width: 40%;}
    .car2{top: -45px; right: auto; left: 51%;max-width: 40%;}
    .car3{
        /*top: -5%;left: 50%;max-width: 40%;*/
        display: none;
    }
}
/*---------------------------------------------
 テンプレート ・CMS・下層ページ 
--------------------------------------------*/
.loader_icon{width: 330px;}
.bnr_dec{
    width: 100%;
    top: -34%;
    animation-name:updownAnime2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-duration:2.5s; /* アニメーション時間 */
}

@keyframes updownAnime2{
  0% {transform: translateY(0);}
  60% {transform: translateY(0);}
  70% {transform: translateY(5px);}
  80% {transform: translateY(0px);}
  90% {transform: translateY(5px);}
  100% {transform: translateY(0px);}
}
.fixbnr{
    position: fixed;
    left: 10px;
    bottom: 10px;
    transition: all 1s;
}

#header h1{
    padding: 10px 0;
    padding-left: 15px;
    background-color: #fbfaf4;
    border-radius: 25px;
    position: absolute;
    right: 1.5%;
    top: 10%;
    width: 28%;
}
#header #sns_link{margin-top: 20vh; position: relative;}
#con_nav li:last-child a{letter-spacing: 0em;font-family: 'Kiwi Maru';line-height: 1;padding: 3px 15px 5px;}
#con_nav li:last-child a:hover{color:#fff;}
#top_contents1{margin-top: 0px;padding-top: 80px;}
.con1_txt_wrap{padding: 150px 7%;}

#top_contents1 .con_title{
    text-align: center;
    color: #ff8f93;
    font-size: 2rem;
    line-height: 1.3;
    letter-spacing: 0.03em;
    margin-bottom: 50px;
}
.title_dec01{
    width: 25%;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 7%;
}

.attach_bg.bg_color2{background-color: #fff;}

#top_contents3{
    background-image: url(./Dup/img/bg.jpg);
    background-position: bottom center;
    background-repeat:no-repeat;
    background-size: 100%;
}

.con3_txt_wrap{padding-top: 100px;}
.con3_txt_wrap.box_3{padding-top: 30px;}

.con3_wrap .con_title{color: #ff8f93;}
.con3_wrap2 .con_title{color: #99b7f9;}
.con3_wrap3 .con_title{color: #ff8f93;}

#footer_info .bg_white{background-color: transparent;}

.box_img1,.box_img1 img{border-radius: 15px;}

#page_title .title_img .con2_bg{background-color: #ffffff; opacity: 0.5;}
#page_title .title_wrap{color: #383838;}
.under_page h1.width_200-max{max-width: 280px;}
.pager li a{border-radius: 10px;}
.v_type3 .cate_box{
    background-color: #fff;
    border-radius: 15px;
}

#sp_nav .width_600-max{max-width: inherit;}

/* タブレット */
@media screen and (max-width: 768px){
    .loader_icon{width: 230px;}
    .fixbnr{ left: 15px; bottom: 20px;}
    #header h1{
        padding: 20px 0px 20px;
        position: relative;
        width: 40%;
        margin-right: 3%;
        top: auto;
        right: auto;
    }
    #top_contents1{padding-top: 200px;}
    
    .title_dec01{top: 3%;}
    .con1_txt_wrap{padding: 120px 7% 150px;}
    #top_contents1 .con_title{font-size: 2.5rem;}
    #top_contents1 .con1_img2{bottom: -140px;}
    
    #top_contents3 .con3_box1{margin-top: 120px; padding: 0px; width: 80%!important;}
    
    .con3_txt_wrap{padding-top: 50px;}
    .con3_wrap .con_title,.con3_wrap2 .con_title,.con3_wrap3 .con_title{font-size: 2rem;}
    
    #top_contents3 .con3_wrap2{padding-top: 170px;}
    .con3_box2{transform: rotate(4deg); padding: 0;width: 80%!important;}
    
    #footer{padding-bottom: 80px;}
    
    .under_page h1.width_200-max{max-width: 280px;}
}
/* スマホ */
@media screen and (max-width: 667px){
    .loader_icon{width: 190px;}
    #header h1{width: 50%;}
    .mainwrap-r h1{width: 150px;}
    
    #top_contents1{padding-top: 160px;}
    .title_dec01{top: 2.5%; width: 30%;}
    .con1_txt_wrap {padding: 70px 5% 130px;}
    #top_contents1 .con_title{font-size: 1.55rem;letter-spacing: 0em;margin-bottom: 30px;}
    #top_contents1 .con1_img2{bottom: -80px; width: 60%!important;}
    
    #attach{height: 300px;}
    
    #top_contents3{
        background-image: url(./Dup/img/bg_sp.jpg);
        background-position: bottom center;
        background-repeat:no-repeat;
        background-size: 100%;
    }
    #top_contents3 .con3_box1{margin-top: 90px;width: 90%!important;}
    #top_contents3 .con3_box1 .mg_b-50px{margin-bottom: 0;}
    .con3_txt_wrap{padding-top: 30px;}
    .con3_wrap .con_title, .con3_wrap2 .con_title, .con3_wrap3 .con_title{font-size: 1.5rem; letter-spacing: 0em;}
    
    #top_contents3 .con3_wrap2{ padding-top: 120px;}
    #top_contents3 .con3_box2{width: 90%!important;}
    #top_contents3 .con3_box2 .mg_b-50px{margin-bottom: 0;}
    
    #top_contents3 .con3_box3{margin-top: 0;}
    #top_contents3 .con3_wrap3 .con_title{width: 260px; margin: 0 auto 30px;}
    
    .under_page h1.width_200-max{max-width: 200px;}
    #page_title .title_img{background-position-x: 60%;}
}

/* テキストアニメーション ---------------------- */
.txt_anim6 span{
	display: inline-block;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
	animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
	opacity: 0;
}
.txt_anim6 span.start{
	-webkit-animation-name: slide-bs;
	animation-name: slide-bs;
	opacity: 1;
}
@keyframes slide-bs{
	0%{-webkit-transform: translateY(20px);transform: translateY(20px);}
	100%{-webkit-transform: translateY(0);transform: translateY(0);}
}

/* topcms_news_type4 --------------------------------*/
.topcms_news_type4 .cate_box {transition: all 0.3s;}
.topcms_news_type4 .cate_box:hover{
    transform: translate(0px, -10px);
    /*box-shadow: 0 10px 10px #ccc;*/
    /*border: 1px solid #fff;*/
}
.topcms_news_type4 .cate_box{
	width: 30.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	border-radius: 15px;
	background-color: #fff;
	padding: 0;
	box-sizing:border-box;
	border: 2px solid #ffa4a7;
	/*box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);*/
}

.topcms_news_type4 .cate_box .grid_12{
    background-color: #fff;
    border-radius: 0 0px 13px 13px;
}
.topcms_news_type4 .cate_box figure.box_img1,.topcms_news_type4 .cate_box figure.box_img1 a img{
    border-radius: 13px 13px 0 0;

}
.topcms_news_type4 .txt_height{
	height: 3em
}
.topcms_news_type4 .box_title1:empty{
	display: block!important;
}
/* タブレット */
@media screen and (max-width: 768px){
    
}
/* スマートフォン */
@media screen and (max-width: 667px){
.topcms_news_type4 .cate_box {
    width: 100%!important;
    margin-bottom: 15px;
}
}

/* ぽよんと動く -------------------------------- */
.poyon.start {
  margin: 30px auto;
  height: 100px;
  border-radius:5px;
  animation: poyon 1.2s;
}


@keyframes poyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
/* ぽよんと動く -------------------------------- */
.poyon_top{}
.poyon_top.start {
  margin: 30px auto;
  height: 100px;
  border-radius:5px;
  animation: poyon 1.2s;
}


@keyframes poyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%);  }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

/*エンジンみたいなアニメーション*/
.anim_type2{
	/*position: relative;*/
	animation-name: anim_type2;
	animation-iteration-count: infinite;
	animation-duration: 0.1s;
	animation-direction: alternate;
	animation-timing-function: steps(2);
	transition-duration: .3s;
	transition-property: transform;
}
@keyframes anim_type2 {
	0% {transform: translateY(4px);}
	100% {transform: translateY(0px);}
}
/* --------------------------------------------
 メインイメージ 
---------------------------------------------*/
.catch{
    position: absolute;
    right: 3%;
    bottom: 7%;
    width: 40%;
}

/* タブレット */
@media screen and (max-width: 768px){
    .catch{width: 50%;right: auto;left: 3%;bottom: -17%;}
    #main_img{height: 60vw;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #mainwrap{min-height: unset;}
    .catch{width: 53%;bottom: -50px;}
    #main_img{height: 70vw;}
}


/*--------------------------------------------
 全体 
----------------------------------------------*/
.head_tel {
    background-color: #99b7f9;
    color: #fff;
}
.head_tel p{
    font-weight: 600;
}

.linkStyle{
	color: #ff8f93;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	color: #ff8f93;
	opacity: 0.7;
	text-decoration: none;
}


.txt_color1,.hvr_txt_color1:hover{color: #ff8f93;} 
.txt_color2,.hvr_txt_color2:hover{color: #99b7f9;} 
.txt_color3,.hvr_txt_color3:hover{color: #ff8f93;} 
/*.txt_color4,.hvr_txt_color4:hover{color: #eae4df;} */
/*.txt_color5,.hvr_txt_color5:hover{color: #f2ede7;}*/ 

.bg_color1,.hvr_bg_color1:hover{background-color: #ff8f93;}
.bg_color2,.hvr_bg_color2:hover{background-color: #97b6db;}
.bg_color3,.hvr_bg_color3:hover{background-color: #fbfaf4;} 
/*.bg_color4,.hvr_bg_color4:hover{background-color: #eae4df;} */
/*.bg_color5,.hvr_bg_color5:hover{background-color: #f2ede7;}*/ 

.border_color1,.hvr_border_color1:hover{border-color: #ff8f93;}
.border_color2,.hvr_border_color2:hover{border-color: #99b7f9;}
.border_color3,.hvr_border_color3:hover{border-color: #ff8f93;}
/*.border_color4,.hvr_border_color4:hover{border-color: #eae4df;}*/
/*.border_color5,.hvr_border_color5:hover{border-color: #f2ede7;}*/