@charset "UTF-8";
/*====================================
	----------------------------------
		Color
	----------------------------------
	
	Main     : #C02727
  	Accent   : #F3A22D  #142550
 
	----------------------------------
  		font
	----------------------------------
 
	font-family: tbudrgothic-std, sans-serif;
	font-weight: 400;
	font-style: normal;

  
 
====================================*/



/*====================================
 
	0. ResetCSS
 
====================================*/
*,::after,::before{box-sizing:border-box}html{line-sizing:normal}body{margin:0}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.35rem}h4{font-size:1rem}h5{font-size:.83rem}h6{font-size:.67rem}h1{margin:20px 0}pre{white-space:pre-wrap}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle;max-width:100%}canvas,img,svg,video{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}


/*====================================
 
	1. Body
 
====================================*/

body{
	width: 100%;
	overflow-x: hidden;
	font-family: tbudrgothic-std, sans-serif;
	font-weight: 400;
	font-style: normal;
	word-wrap: break-word;
	line-height: 200%;
	letter-spacing: .2rem;
	direction: ltr;
	color: #191919;
	font-size: 16px;
	scroll-behavior: smooth;
	transition: all .3s;
	text-align: justify;
	text-justify: distribute;
	background-color: #F7F7F7;
}

@media screen and (max-width: 750px){
	body{ font-size: .8em;}
}


/*====================================
 
	2. Parts
 
====================================*/

::selection {
    background: #C02727;
    color: #FFF; }

::-moz-selection{
    background: #C02727;
    color: #FFF; }


img{
	transition: all .5s;
}

ul{
	list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

li{
	list-style: none;
	display: block;
}

a{
	text-decoration: none;
	color: #191919;
	transition: all .3s;
	display: block;
}


i{
	margin-right: 5px;
}

figure{
	margin: 0;
}

button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	transition: all .3s;
}

.container{
	width: 90%;;
	margin: 0 auto;
	max-width: 1250px;
}

/*　viwe_more
====================================*/

.view_more,
a.view_more,
button.view_more {
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.view_more-border {
  margin-bottom: 12px;
  padding: 0;

  -webkit-transition: all 0.3s;

  transition: all 0.3s;

  border-radius: 0;
}

a.view_more-border span {
  position: relative;
  display: block;
  padding: 1vw 2vw;
  color: #000;
  border: 2px solid #000;
  border-radius: 0.5rem;
  background: #fff;
}

a.view_more-border:before {
  position: absolute;
  bottom: -8px;
  left: 0;

  display: block;

  width: 100%;
  height: 14px;

  content: "";
  -webkit-transition: all 0.3s;
  transition: all 0.3s;

  border: 2px solid #000;
  border-top: 1px solid #000;
  border-radius: 0 0 0.5rem 0.5rem;
  background-image: -webkit-repeating-linear-gradient(
    135deg,
    #000,
    #000 1px,
    transparent 2px,
    transparent 5px
  );
  background-image: repeating-linear-gradient(
    -45deg,
    #000,
    #000 1px,
    transparent 2px,
    transparent 5px
  );
  background-size: 7px 7px;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;
}

a.view_more-border:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
}

a.view_more-border:hover:before {
  bottom: -5px;
}

a.view_more-border:active {
  -webkit-transform: translate(0, 7px);
  transform: translate(0, 7px);
}

a.view_more-border:active:before {
  bottom: -1px;
}



@media screen and (max-width: 480px){
	.viwe_more{
		margin: 0 auto;
	}
}


@media screen and (max-width: 900px){
	.container{width: 90%; margin: 0 auto;}
	.br_none{ display: none;}
}

@media screen and (max-width: 600px){
	.container{ width: 95%;}
	a.view_more-border span{ padding: 15px 70px;}
}

@media screen and (max-width: 480px){
}

/*　Web font チラツキ
====================================*/

html {
    visibility: hidden;
}

html.wf-active,
html.loading-delay {
    visibility: visible;
}


/*---------------------------------

  3.TITLE

---------------------------------*/


h1,h2,h3,h4{ color: #333; }

h2,h3,h4{ font-weight: normal; }

h3{	font-weight: normal; }

h3 span{
	font-size    : 13px;
	font-weight  : normal;
	display      : block;
    margin-bottom: 10px;
}

h4 span{
	font-size     : 13px;
	font-weight   : normal;
	letter-spacing: .1em;
}

.tit1{
	font-size  : 2.5rem;
	font-weight: 900;
}

.tit1 span{
	display: block;
	color: #C02727;
	text-transform: uppercase;
	font-size: 1.5rem;
	margin-bottom: 10px;
}

.tit2{
	margin: 5rem auto 4rem;
	position: relative;
	font-weight: 900;
	text-align: center;
	font-size: 2.5rem;
}

.tit2::before, .tit2::after{
	content: "";
	background-color: #F3A22D;
	height: 3.2rem;
	position: absolute;
	top: -0.5rem;
	width: 0.4rem;
	border-radius: 25%;
}

.tit2::before{
	right: -3.5rem;
	transform: rotate(20deg);
}

.tit2::after{
	left: -3.5rem;
	transform: rotate(-20deg);
}

@media screen and (max-width: 800px){
	.tit1 span{ line-height: 1.5em;}
}

@media screen and (max-width: 650px){
	.tit1{ font-size: 6vw;}
	.tit1 span{ font-size: 4vw;}
}

/*---------------------------------

  3.pattern

---------------------------------*/

.dot_bg {	
  background-color   : #ffffff;
  background-image   : radial-gradient(#999999 19%, transparent 22%),
                       radial-gradient(#999999 19%, transparent 22%);
  background-position: 0 0, 11px 11px;
  background-size    : 22px 22px;
}


/*---------------------------------

  Loading

---------------------------------*/

#loading{
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
}

.spinner{ text-align: center;}

.load_img{
	width: 60%;
	margin: 0 auto 30px;
}

.load_txt{
	animation:txt 1s ease-in-out infinite alternate;
	letter-spacing: 0;
	font-weight: bold;
	color: #c02727;
}

@keyframes txt{
    0% {opacity:0;}
    100% {opacity:1;}
}


.loaded {
	opacity: 0;
	visibility: hidden;
}

#fountainG{
	position:relative;
	width:234px;
	height:28px;
	margin:auto;
}



.fountainG{
	position:absolute;
	top:0;
	background-color:rgb(255,255,255);
	width:28px;
	height:28px;
	animation-name:bounce_fountainG;
		-o-animation-name:bounce_fountainG;
		-ms-animation-name:bounce_fountainG;
		-webkit-animation-name:bounce_fountainG;
		-moz-animation-name:bounce_fountainG;
	animation-duration:1.5s;
		-o-animation-duration:1.5s;
		-ms-animation-duration:1.5s;
		-webkit-animation-duration:1.5s;
		-moz-animation-duration:1.5s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	transform:scale(.3);
		-o-transform:scale(.3);
		-ms-transform:scale(.3);
		-webkit-transform:scale(.3);
		-moz-transform:scale(.3);
	border-radius:19px;
		-o-border-radius:19px;
		-ms-border-radius:19px;
		-webkit-border-radius:19px;
		-moz-border-radius:19px;
}

#fountainG_1{
	left:0;
	animation-delay:0.6s;
		-o-animation-delay:0.6s;
		-ms-animation-delay:0.6s;
		-webkit-animation-delay:0.6s;
		-moz-animation-delay:0.6s;
}

#fountainG_2{
	left:29px;
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
}

#fountainG_3{
	left:58px;
	animation-delay:0.9s;
		-o-animation-delay:0.9s;
		-ms-animation-delay:0.9s;
		-webkit-animation-delay:0.9s;
		-moz-animation-delay:0.9s;
}

#fountainG_4{
	left:88px;
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
}

#fountainG_5{
	left:117px;
	animation-delay:1.2s;
		-o-animation-delay:1.2s;
		-ms-animation-delay:1.2s;
		-webkit-animation-delay:1.2s;
		-moz-animation-delay:1.2s;
}

#fountainG_6{
	left:146px;
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
}

#fountainG_7{
	left:175px;
	animation-delay:1.5s;
		-o-animation-delay:1.5s;
		-ms-animation-delay:1.5s;
		-webkit-animation-delay:1.5s;
		-moz-animation-delay:1.5s;
}

#fountainG_8{
	left:205px;
	animation-delay:1.64s;
		-o-animation-delay:1.64s;
		-ms-animation-delay:1.64s;
		-webkit-animation-delay:1.64s;
		-moz-animation-delay:1.64s;
}



@keyframes bounce_fountainG{
	0%{
	transform:scale(1);
		background-color:rgb(192,39,39);
	}

	100%{
	transform:scale(.3);
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes bounce_fountainG{
	0%{
	-o-transform:scale(1);
		background-color:rgb(192,39,39);
	}

	100%{
	-o-transform:scale(.3);
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes bounce_fountainG{
	0%{
	-ms-transform:scale(1);
		background-color:rgb(192,39,39);
	}

	100%{
	-ms-transform:scale(.3);
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes bounce_fountainG{
	0%{
	-webkit-transform:scale(1);
		background-color:rgb(192,39,39);
	}

	100%{
	-webkit-transform:scale(.3);
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes bounce_fountainG{
	0%{
	-moz-transform:scale(1);
		background-color:rgb(192,39,39);
	}

	100%{
	-moz-transform:scale(.3);
		background-color:rgb(255,255,255);
	}
}

/*---------------------------------

  4.HEADER

---------------------------------*/

header{
    display        : flex;
	align-items    :center;
	justify-content:space-between;
	flex-direction :row;
	flex-wrap      : nowrap;
	width          : 100%;
	transition     : .3s;
	position       : fixed;
	top            : 0;
	left           : 0;
	z-index        : 999;
	background     : rgba(255,255,255,0);
	height         : 100px;
}

.head_left{ width: 450px; }

.head_left a{ padding: 0px 20px; }

#logo{
	width     : 100%;
	transition: .3s;
}

#logo.mini{ width: 90% !important; }

.head_right{
	width: 500px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
}

/*　header_estimate
====================================*/

.h_r_estimate{
	border: #C02727 solid 5px;
	height: 100px;
	width: 60%;
	background-color: #fff;
	font-weight: bold;
	font-size: 14px;
}

.h_r_estimate span{
	display: block;
}

.h_r_estimate i{
	font-size: 150%;
	margin-right: 5px;
}

.h_r_estimate a{
	color: #C02727;
	padding: 13px 0;
}

.h_r_estimate a:hover{
	background-color: #C02727;
	color: #fff;
}

/*　header_menu
====================================*/

.h_r_MENU{
	border-top: #C02727 solid 5px;
	border-bottom: #C02727 solid 5px;
	border-right: #C02727 solid 5px;
	background-color: #C02727;
	height: 100px;
	width: 40%;	
	font-size: 14px;
}

.cp_offcm01 {
	cursor: pointer;
	font-weight: bold;
	width: 100%;
	color: #fff;
}


.cp_offcm01 #cp_toggle01 ~ label::after {
	font-family: 'FontAwesome';
	content: '\f0c9';
	font-size: 1em;
	margin-left: 5px;
}
.cp_offcm01 #cp_toggle01:checked ~ label::after {
	content: '\f00d';
}

/* inner */
.cp_offcm01 .cp_menu {
	position: fixed;
	top: 95px;
	right: -100vw;
	width: 29%;
	height: 80vh;
	z-index: 9999;
	cursor: pointer;
	-webkit-transition: 1s transform;
	        transition: 1s transform;
	-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	        transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	background-color: #FFF;
}
.cp_menu{ overflow: scroll;}
.cp_offcm01 .cp_menu ul {
	background-color: #C02727;
	 height: 100%;
	padding: 0;
}
.cp_offcm01 .cp_menu li {
	list-style: none;
}
.cp_offcm01 .cp_menu li a {
	display: block;
	padding: 13px 20px;
	text-decoration: none;
	color: #ffffff;
	background-color: #c02727;
	border: 5px solid #C02727;
	text-align: left;
}

.cp_offcm01 .cp_menu li a:hover{
	border: 5px solid #C02727;
	color: #C02727;
	background: #FFF;
}

.cp_offcm01 .cp_menu li a span{
    font-size: 120%;
    margin-right: 30px;
	display: block;
}

.cp_offcm01 #cp_toggle01 {
	position: absolute;
	display: none;
	opacity: 0;
}
.cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
	-webkit-transform: translateX(-100vw);
	        transform: translateX(-100vw);
}
/* menu toggle */
.cp_offcm01 #cp_toggle01 ~ label {
	display: block;
	cursor: pointer;
	-webkit-transition: 1s transform;
	        transition: 1s transform;
	-webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	        transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	text-align: center;
	line-height: 85px;
}


.menu_phone{ background: #FFF;}
.menu_phone img{ width: 80%; margin: 0 auto; padding: 10px;}

@media screen and (max-width: 953px) {
	.h_r_estimate{ display: none; width: 0;}
}

@media screen and (max-width: 900px){
	.head_left{width: 70%;}
	.head_rihgt{width: 30%;}
	.head_rihgt li{width: fit-content;}
}

@media screen and (max-width: 800px){
	header{ display: block;}
	.head_right{ position: absolute; top: 0; right: 0;}
	.head_left{width: 50%;}	
	.h_r_MENU{ height: 80px;}
	.cp_offcm01 #cp_toggle01 ~ label{ line-height: 9vh; font-size: .8em;}
	.cp_offcm01 .cp_menu{ top: 80px; font-size: .8em; width: 40%;}
}


@media screen and (max-width: 600px){
	.head_left{width: 65%}
	.h_r_MENU{ height: 60px; width: 25%;}	
	.cp_offcm01 .cp_menu{ width: 60%;}
	.cp_offcm01 #cp_toggle01 ~ label{ line-height: 55px;}
	.cp_offcm01 .cp_menu{ top: 60px;}
}

@media screen and (max-width: 400px){
	.h_r_MENU{ height: 45px;}
	.cp_offcm01 #cp_toggle01 ~ label{ line-height: 5vh;}
	.cp_offcm01 .cp_menu{ top: 45px;}
}

/*　header_nemu_sns
====================================*/

.sns{
	display: flex;
	align-items: center;
	font-size: 26px;
	text-align: center;
	justify-content: center;
	margin-top: 30px;
}

.sns i{
	margin: 0;
}


/*---------------------------------

  SUUMO バナー

---------------------------------*/

.bnr_wrap{
	margin-bottom: 50px;
	display: flex;
}

.bnr_wrap a:first-child{ margin-right: 30px;}
.bnr_wrap a{transition: .2s}
.bnr_wrap a:hover{opacity: .6}


@media screen and (max-width: 800px){
	.bnr_wrap a{ margin: 0 auto; width: 45%;}
	.bnr_wrap a:first-child{ margin: 0 auto 30px auto;}
}

@media screen and (max-width: 550px){
	.bnr_wrap{margin-bottom: 0}
}



/*---------------------------------

  5.footer固定

---------------------------------*/

.cb-footer{
	z-index:99;
	position: fixed; 
	bottom: 0; 
	left: 0; 
	display: none;
	background:#FFF;
	width:100%;
	color:#c02727;
	height: 100px;
}

.none{
	display: none;
}

.contact_bar{
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact_bnr{
	display: flex;
	align-items: flex-end;
}

.link_LINE{ width: 203px;}
.link_mitsumori{ width: 367px;}
.phone img{ width: 205px; margin-top: 12px; margin-left: 50px;}

.sp_phone{display: none;}

@media screen and (max-width: 1050px){
	.contact_bar{ width: 95%;}
}

@media screen and (max-width: 850px){
	.phone img{ margin-left: 10px;}
}

@media screen and (max-width: 750px){
	.cb-footer{ height: 90px;}
	.link_LINE{ width: 155px;}
	.link_mitsumori{ width: 280px;}
}

@media screen and (max-width: 550px){
	.phone{display: none}
	.sp_phone{display: block; margin: 0 auto; border: #c02727 solid 3px; padding: 30px;}
	.sp_phone img{ width: 200px; margin: 0 auto;}
}

@media screen and (max-width: 450px){
	.link_LINE{ width: 132px;}
	.link_mitsumori{ width: 240px;}
	.cb-footer{ height: 80px}
}


/*---------------------------------

  6.FOOTER

---------------------------------*/

footer{
	padding: 20px 0 100px 0;
	margin: 0;
	position: relative;
	z-index: 1;
	width: 100%;
	background-color: #FFF;
}

.footer_contact{
	padding: 30px;
	background-color: #C02727;
	color: #fff;
}


.footer_nav{
	display: flex;
	align-items: center;
	margin:50px auto 30px;
	border: 3px solid #000;
	padding: 30px 0;
	font-size: 15px;
	font-weight: 900;
}

.footer_nav ul{
	display: flex;
	align-items: center;
	justify-content: space-between;
    width: 90%;
    margin: 0 auto;
	flex-wrap: wrap;
}

.footer_nav ul li{
	margin-right: 30px;
}

.footer_nav a span{ color: #C02727; display: block; font-size: 13px;}

.footer_nav a:hover{
	color: #C02727;
}

/*
.bnn_logo{
	display: flex;
	align-items: flex-end;
    justify-content: space-evenly;
	margin-bottom: 30px;
	padding: 90px 0;
}

.bnn_logo_inner{
	text-align: center;
	background-color: #fff;
	height: 120px;
	padding: 20px;
	display: flex;
	align-items: center;
}

*/

.bnn_w{
	width: 250px;
}

.footer_btm{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin: 20px auto;
}

.footer_logo{
	width: 30%;
}

.footer_logo img{
	width: 100%;
}

.footer_nav_mini{
	font-size: 12px;
	position: relative;
	padding-right: 70px;
}

.footer_nav_mini::after{
	content: "";
	background: url("../img/anshin.jpg") no-repeat;
	background-size: contain;
	position: absolute;
	top: -50px;
	right: 0;
	width: 60px;
	height: 60px;
}

.footer_nav_mini ul li{
	display: inline-block;
}

#copy{
	font-size: 10px;
	letter-spacing: 2px;
	letter-spacing: 0;
}

@media screen and (max-width: 1000px){
	.footer_nav ul{ justify-content: flex-start;}
	.footer_nav ul li{ width: 35%;}
}

@media screen and (max-width: 896px){
	.access_link{
		text-align: center;
		margin-left: 0;
		margin: 50px auto;
	}

		.addr{
		display: block;
		width: 100%;
		font-size: 12px;
		text-align: center;
	}
	.footer_btm{ display: block;}
	.footer_logo{ width: 100%;}
	.footer_logo img{ width: 60vw;}
}

@media screen and (max-width: 730px){
	.footer_nav ul{display: block;}
	.footer_nav ul li{ width: 100%; margin-bottom: 15px;}
	.footer_nav{ font-size: 1em;}
	.footer_nav a span{ font-size: 1em; line-height: 1em;}
}

@media screen and (max-width: 480px){
	.footer_nav ul{flex-direction: column;}
	.footer_nav li{margin: 5px auto;}
	.footer_nav_mini{ padding-right: 0;}
	.footer_nav_mini::after{ top: -70px; width: 50px}
	
}

@media screen and (max-width: 400px){
	#copy{transform-origin:0 0; transform: scale(0.8); width: 120%;}
}

/*---------------------------------

  track

---------------------------------*/

.go_item{
	width: 88px;
    height: 50px;
    border-radius: 10px;
    background-image: url("../img/index/gogo.png");
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    

}
.go_item.anime{
    animation-name: upDown;
    animation-iteration-count: infinite;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-timing-function: steps(2);
    transition-duration: .3s;
    transition-property: transform;
}


.go_stage{
    position: relative;
    width: 70%;
    height: 65px;
    top: 0px;
    display: block;
}


.go_wrap{
	display: block;
    position: absolute;
    top: 20px;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 15s;
    animation-iteration-count: 1;
	margin-right: -25px;
}

.go_wrap[data-order="left"] {
    animation-name: GoLeft;
}
.go_wrap[data-order="right"] {
    animation-name: GoRight;
}

[data-order="right"] > .go_item {
    transform: rotateY(180deg);
}

@keyframes GoLeft {
    0% {
        right: 10%;
    }
    100% {
        right: 90%;
    }
}
@keyframes GoRight {
    0% {
        right: 90%;
    }
    100% {
        right: 10%;
    }
}

@keyframes upDown {
    0% {
        top: 0;
    }
    100% {
        top: 3px;
    }
}