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

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




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

  0.Main

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

#flow{
}

#hero_main{
	position: relative;
	height: 400px;
	padding: 100px 0 0 0;
	background: url("../img/index/bg.png") repeat-x;
	background-attachment: fixed;
	background-size: contain;
	-webkit-animation: bgroop 200s linear infinite;
    animation: bgroop 200s linear infinite;		
}

.main_wrap{
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

@-webkit-keyframes bgroop {
    from {
        background-position: 0  0;
    }
    to {
        background-position: -1956px 0;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1956px 0;
    }
}


.main_catch{
	width: 100%;
	font-size: 2.5vw;
    line-height: 1.7em;
	margin: 0;
	padding: 0 20px;
	font-weight: 900;
	color          : #ffffff;            
	letter-spacing : 4px;
	text-shadow    : 
	2px  2px 0px #000,
	-2px  2px 0px #000,
	2px -2px 0px #000,
	-2px -2px 0px #000,
	2px  0px 0px #000,
	0px  2px 0px #000,
	-2px  0px 0px #000,
	0px -2px 0px #000;  
}

.main_catch span{
	display: block;
	color: #C02727;
	font-size: 4vw;
}

.main_img{
	width: 70%;
}

.main_img img{
	
}

@media screen and (max-width: 850px){
	#hero_main{ background-size: auto;}
	.main_catch{ font-size: 2em;}
	.main_catch span{ font-size:  1.5em;}
}

@media screen and (max-width: 450px){
	.main_catch{ font-size: 1.8em; padding: 0;}	
}


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

  contents01 

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

#contents01{
	text-align: center;
	padding: 100px 0;
}

.flow_wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.flow_inner{
	margin: 50px auto;
	width: 30%;
	border: #000 solid 3px;
	border-radius: 20px;
	padding: 30px;
	background-color: #FFF;
	height: 650px;
}

.flow_inner h3{
	font-weight: bold;
	font-size: 25px;
}

.flow_inner h3 span{
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	color: #fff;
	font-weight: 900;
	background-color: #C02727;
	border: #000 solid 3px;
	border-radius: 50%;
	margin: 0 auto;
	font-size: 1.6rem;
	letter-spacing: 0;
	margin-top: -100px;
	margin-bottom: 30px;
}

.flow_img{ height: 30%;}

.w100{ height: 100%; margin: 0 auto;}

.w80{ width: 70%; height: auto; margin: 0 auto; padding-top: 20px;}

.flow_inner p{ letter-spacing: 2px; text-align: left;}

.tel{ font-weight: 900; letter-spacing: 0!important; font-size: 20px; margin-top: 10px; text-align: center!important;}

.tel span{ font-weight: normal; font-size: 12px; display: block; line-height: 18px; margin-top: 10px;}

.flow_link a{font-size: 16px;}

.flow_link a.view_more-border span{
	padding: 1rem 1.5rem;
}


.flow_end{
	position: relative;
	overflow: hidden;
	display: flex;
}

.flow_end::before{
	content: '';
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 10vw solid #C02727;
      border-left: 100vw solid transparent;
}

.flow_end::after {
  content: '';
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 10vw solid #C02727;
      border-right: 100vw solid transparent;
}

.flow_end_img{ 
	width: 47%;
	background: url("../img/flow/flow_07.png") no-repeat;	
	background-color: #C02727;
	background-size: contain;
	margin-top: 10vw;
	background-position: center;
}

.flow_end_box{
	width: 53%;
	background-color: #C02727;	
	color: #FFF;
	padding: 10vw 2vw;
	margin-top: 10vw;
	text-align: left;
}

.flow_end_box h3{
	color: #FFF;
	font-weight: 900;
	font-size: 2rem;
	width: 80%;
	margin: 1rem 0;
	border-bottom: #FFF solid 3px;
	padding-bottom: 15px;
}

.flow_end_box h3 span{}

.mini_ttl{ font-weight: 900; text-transform: uppercase;}



@media screen and (max-width: 1000px){
	.flow_inner{ width: 45%; height: 600px;}
	.flow_end_box h3{ width: 95%;}
}

@media screen and (max-width: 700px){
	.flow_inner{ height: 650px;}
	.flow_link a.view_more-border span{ padding: 20px;}
}

@media screen and (max-width: 650px){
	.flow_inner{ padding: 20px;}
	.flow_end{ display: block;}
	.flow_end_img,.flow_end_box{ width: 100%;}
	.flow_end_img{ height: 250px;}
	.flow_end_box{ margin-top: 0; padding: 50px;}
}

@media screen and (max-width: 500px){
	.flow_wrap{ display: block;}
	.flow_inner{ width: 80%; height: 550px; margin-bottom: 70px;}
	.flow_end_box{ padding: 30px;}
}


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

  contents02

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

#contents02{
	position: relative;
	display: flex;
	align-items: flex-start;
	padding: 100px 0;
}

#contents05 .tit1{
	text-align: center;
}

.plan_box{
	display: flex;
	justify-content: space-around;
	padding-top: 100px;
	flex-wrap: wrap;
}

.plan_inner{
	position: relative;
	border: #333 3px solid;
    border-radius: 20px;
    padding: 20px;
    width: 24%;
	text-align: center;
	padding-bottom: 80px;
}

.plan_inner img{
	margin: -100px auto 0 auto;
}

.plan1{}
.plan2{}
.plan3{}
.plan4{ margin-bottom: 40px!important;}

.plan_inner h3{
	font-weight: 900;
	font-size: 25px;
	margin-bottom: 0;
}

.plan_inner p{
	letter-spacing: 2px;
	border-bottom: #000 3px dashed;
    padding-bottom: 10px;
}

.plan_subtxt{
	font-size: 14px;
	border: none!important;
}

.plan_link{
	position: absolute;
	bottom: 15px;
	right: 25%;
	left: 0;
	width: 100%;
}


@media screen and (max-width: 1100px){
	.plan1{ width: 74%;}
	.plan_inner p{ line-height: 1.5em}
}

@media screen and (max-width: 800px){
	#contents02{ padding: 0 0 50px 0;}
	.plan_box{ padding-top: 0;}
	.plan_inner{ width: 46%; margin-top: 100px;}
	.plan1{ width: 19vh;}
}

@media screen and (max-width: 600px){
	.plan_inner{ width: 80%;}
}

@media screen and (max-width: 400px){
	.plan_inner{ width: 90%;}
}