/* all page */
/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');
body {
    font-family: "Zen Kaku Gothic New", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: var(--color1);text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
#google_privacy a{color: var(--color1);}
:root{
	--black: #2f2825;
	--color1: #efab26;
	--color2: #dbdbdb;
	--color3: #432818;
	--color4: #f9f7eb;
}

.txt_color_nomal, .txt_color_nomal:hover{color: var(--black);}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1);}
.txt_color2, .hvr_txt_color2:hover{color: var(--color2);}
.txt_color3, .hvr_txt_color3:hover{color: var(--color3);}
.txt_color4, .hvr_txt_color4:hover{color: var(--color4);}

/* background-color */
.bg_black, .bg_black:hover{color: var(--black);}
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1);}
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2);}
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3);}
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4);}

/* border-color ※!important */
.border_black, .border_black:hover{color: var(--black);}
.border_color1, .hvr_border_color1:hover{border-color: var(--color1);}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2);}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3);}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4);}


#fix_bnr {
    bottom: 10px;
    right: 100px;
    z-index: 5;
    width: 25%;
    max-width: 350px;
}
#loading, #loading_line .line2 {
    background-color: var(--color3);
}
/* header */
#loading_logo {
    max-width: 300px;
}
#header .logo {width: 90% !important;}

/* footer */
#logo2{
    max-width: 200px;
}


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

/* main img */
#main_img {height: 100vh;}
#main_img::before{
    content: "";
    background-image: url('/Files/img/main_bottom.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom left;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.main_catch_wrap {
    width: 70%;
    max-width: 850px;
    transform: translate(-50%, -60%);
    /* left: 3%;
    bottom: 5%; */
    flex-direction: column;
}
.main_catch{
    width: calc(100% - 100px);
}
.main_catch3{
    width: calc(100% - 150px);
}

.passing .passing-bar {
    position: relative;
    display: inline-block;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: var(--color1);
}
.passing.move .passing-bar:before {
    -webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
    animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing .passing-txt {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	padding: 5px 15px;
}
.passing.move .passing-txt {
    -webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
    animation: passing-txt 0s ease .5s 1 normal forwards;
    background-color: transparent;
    /* width: calc(100% + 30px); */
    transform: translateX(-25px);
}
@-webkit-keyframes passing-bar{
	0% {left: 0;right: auto;width: 0;}
	50% {left: 0;right: auto;width: 100%;}
	51% {left: auto;right: 0;width: 100%;}
	100% {left: auto;right: 0;width: 0;}
}
@keyframes passing-bar{
	0% {left: 0;width: 0;}
	50% {left: 0;width: 100%;}
	51% {left: 0;width: 100%;}
	100% {left: 100%;width: 0;}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}

/* main */
.t_banner_box .banner {
    width: 32%;
    margin-left: 2%;
    overflow: hidden;
}
.t_banner_box .banner:first-child {margin-left: 0%;}
.t_banner_box .banner:hover {margin-top: -20px;}

/* intro */
#top_contents1 {padding: 100px 5% 165px;}
.house_icon {max-width: 60px;}

/* contents */


/* topcms */


/* under page ----------------------------------------------------------------*/
.cate_list li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
    font-weight: bold;
}
#cms_2-h .box_img1, #cms_2-h .box_img2, #cms_2-h .box_img3, #cms_2-h .box_img4 {
    width: 24% !important;
}

.flow_type3 .cate{counter-reset: box;}
.flow_type3 .cate_box{counter-increment: box;}
.flow_type3 .box_item{padding-top: 60px;}
.flow_type3 .box_title1{z-index: 0}
.flow_type3 .box_title1::before, .flow_type3 .box_title1::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
.flow_type3 .box_title1::before {
	content: "0"counter(box);
	font-size: 86px;
	color: #ebebeb;
	left: 0;
	top: -70px;
	z-index: -1;
}
.flow_type3 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #222
}
/*-------- スマートフォン --------*/
@media screen and (max-width: 667px){
.flow_type3 .box_title1::before{
	left: auto;
	right: 0;
	top: -50px
}
.flow_type3 .box_item {
    padding-top: 36px;
}
}


/* ---------- 1536px ---------- */
@media screen and (max-width: 1536px){}
/* ---------- 1366px ---------- */
@media screen and (max-width: 1366px){}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#fix_bnr{width: 40%;}
.main_catch_wrap {
    width: 80%;
    max-width: 850px;
    transform: translate(-50%, -50%);
}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#fix_bnr{width: 250px;}
#main_img {
    height: 90vh;
    background-position: left 60% center;
}
.main_catch_wrap {
    width: 99%;
    transform: translate(-50%, -40%);
}
.passing.move .passing-txt {transform: translateX(-15px);}
.main_catch {width: calc(100% - 80px);}
.main_catch3 {width: calc(100% - 130px);}
.t_banner_box .banner {
    width: 70%;
    margin-left: 0;
    margin-bottom: 20px;
}
.t_banner_box .banner:hover {margin-top: 0;}
#top_contents1 {padding: 70px 5% 60px;}

#cms_2-h .box_img1, #cms_2-h .box_img2, #cms_2-h .box_img3, #cms_2-h .box_img4 {
    width: 48% !important;
}

}