@charset "UTF-8";

/****************************************

          top.css

*****************************************/




/****************************************

          top

*****************************************/



#main_visual {
	margin-bottom: 30px;
}

.base_02 .bn_tv{
	margin-bottom: 40px;
}

/*sp*/
@media (max-width: 767px) {

    .index {
        padding-top:0px;	
    }

    #main_visual {
        margin-bottom: 10px;
    }
	
	.base_02 .bn_tv{
		margin-bottom: 0;
	}

}














/*----------------------------------------
	top_about
----------------------------------------*/

#top_about {
	margin-bottom:50px;
}
#top_about h2 {
    font-size: 24px;
    font-size: 2.4rem;
    border-left: solid 5px #fd9600;
    margin-bottom: 30px;
    padding: 18px 20px;
    line-height: 1.4;
    background-color: #fff8ef;
}
#top_about dl {
	margin-bottom:40px;
}
#top_about dt {
	margin-bottom:20px;
}
#top_about dd{
    padding: 0 20px;
    margin-bottom:20px;
    line-height: 1.8;
    font-size: 16px;
    font-size: 1.6rem;
}

#top_about dd strong{
    font-size: 18px;
    font-size: 1.8rem;
    background: linear-gradient(rgba(0, 0, 0, 0) 60%, #ffff66 0%);
}
#top_about dd b{
    text-decoration: underline;
}


#top_about .top_appeal {
	position:relative;
/*	margin-top:-30px; */
	z-index:1;
}
#top_about .top_appeal h3 {
	margin-bottom:20px;
}
#top_about .top_appeal h3 + p {
	margin-bottom:10px;
}
#top_about .top_rank {
	margin:50px 0 30px;
	text-align:center;
	background-color:#ffda96;
	border:2px solid #f5edce;
}
#top_about .top_rank h3 {
	margin:-20px 0 10px;
}
#top_about .top_rank li {
	margin-bottom:10px;
}
#top_about .top_rank li:last-child {
	margin-bottom:5px;
}
#top_about .top_experiences {
}
#top_about .top_experiences h3 {
	margin-bottom:10px;
}

#top_about .top_experiences h3 + p {
	margin-bottom:20px;
}

#top_about .top_experiences p + p {
	margin-bottom:0;
}
#top_about .top_experiences ul {
	padding:10px 10px 0;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-content: center;
	align-content: center;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	background: #ffffde;
	background: -moz-linear-gradient(top, #ffffde 0%, #f7e9cd 52%, #fff6e4 100%);
	background: -webkit-linear-gradient(top, #ffffde 0%, #f7e9cd 52%, #fff6e4 100%);
	background: linear-gradient(to bottom, #ffffde 0%, #f7e9cd 52%, #fff6e4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffde', endColorstr='#fff6e4', GradientType=0 );
}
#top_about .top_experiences li {
	width:219px;
	margin-bottom:10px;
}

#top_about .top_experiences ul + p {
	margin-top:15px;
	text-align:right;
	font-size: 13px;
	font-size: 1.3rem;
}


/*sp*/
@media (max-width: 767px) {



#top_about {
	margin-bottom:0px;
}
#top_about h2 {
    font-size: 20px;
    font-size: 2.0rem;
    padding: 15px 20px;
}
#top_about dl {
	margin-bottom:30px;
}
#top_about dd{
    padding: 0 10px;
}

#top_about .top_experiences li {
	width:49%;
}

#top_about .top_experiences ul + p {
	margin:15px 0 5px;
	font-size: 12px;
	font-size: 1.2rem;
}

}


/*----------------------------------------
	top_case
----------------------------------------*/

#top_case {
	margin-bottom:30px;
}
#top_case h2 {
	margin-bottom:30px;
	text-align:center;
}
#top_case article {
	position:relative;
	margin-bottom:30px;
	padding-bottom:15px;
	border:8px solid #ffb008;
}
#top_case article:before {
	content: "";
	display:block;
	position:absolute;
	left:10px;
	top:-23px;
	width:90px;
	height:110px;
	background: url(../img/case00.png) no-repeat left top;
	z-index:2;
}

/*

#top_case article:nth-of-type(1):before {
	background: url(../img/case00.png) no-repeat left top;
}
#top_case article:nth-of-type(2):before {
	background: url(../img/case02.png) no-repeat left top;
}
#top_case article:nth-of-type(3):before {
	background: url(../img/case03.png) no-repeat left top;
}
*/



#top_case h3 {
	position:relative;
	margin:0 20px 20px 110px;
	padding:25px 0 20px;
	border-bottom:1px dotted #aaa;
	color:#55160c;
}
#top_case h3 span {
	position:absolute;
	left:-72px;
	top:32px;
	color:#f29828;
	font-size: 30px; font-size: 3.0rem;
	z-index:10;
}
#top_case h3 + p {
	margin:0 20px 30px 0;
	font-weight:bold;
	text-align:right;
}
#top_case article div {
	padding:0 25px;
}
#top_case article figure {
	margin-bottom:20px;
	line-height:1.6;
}
#top_case article figure ul {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items:center;
	align-items:center;
}

#top_case article figure ul li {
	position:relative;
}

#top_case article figure ul li:nth-of-type(1):before {
	content: "";
	display:block;
	position:absolute;
	left:0px;
	right:0;
	top:-15px;
	margin:auto;
	width:98px;
	height:32px;
	background: url(../img/img_before.png) no-repeat left top;
	z-index:2;
}

#top_case article figure ul li:nth-of-type(2) strong {
	position:absolute;
	left:20px;
	top: 55px;
	font-weight:bold;
	color:#55160c;
	font-size: 22px; font-size: 2.2rem;
	text-shadow:
		-1px -1px #fff,
		1px -1px #fff,
		-1px 1px #fff,
		1px 1px #fff;
	z-index:3;
}

#top_case article figure ul li:nth-of-type(2) span {
	color:#ff0000;
	font-size: 28px; font-size: 2.8rem;
}



#top_case article figure ul li:nth-of-type(3):before  {
	content: "";
	display:block;
	position:absolute;
	left:0px;
	right:0;
	top:-15px;
	margin:auto;
	width:98px;
	height:32px;
	background: url(../img/img_after.png) no-repeat left top;
	z-index:2;
	
}


#top_case article .text {
	padding: 0;
	margin-bottom:10px;
	line-height:1.6;
}
#top_case article p.att {
	text-align:right;
	font-weight:normal;
	font-size: 13px;
	font-size: 1.3rem;
}

/*sp*/
@media (max-width: 767px) {


#top_case article div {
	padding:0 15px;
}

#top_case article figure ul li:nth-of-type(2) {
	padding:0 5px;
}

#top_case article figure ul li:nth-of-type(2) strong {
	position:absolute;
	left:10px;
	top: 25px;
	font-size: 14px; font-size: 1.4rem;
}

#top_case article figure ul li:nth-of-type(2) span {
	font-size: 18px; font-size: 1.8rem;
}

#top_case article p.att {
	font-size: 11px;
	font-size: 1.1rem;
}


}

/*----------------------------------------
	top_youtube
----------------------------------------*/

#top_youtube {
	margin-bottom:40px;
}
#top_youtube h2 {
	margin-bottom:20px;
	text-align:center;
}
/*----------------------------------------
	top_reason
----------------------------------------*/

#top_reason {
	margin-bottom:40px;
}
#top_reason h2 {
	margin-bottom:20px;
	text-align:center;
}
#top_reason div {
	position:relative;
	margin-bottom:30px;
	padding:35px 30px 0px;
	border:3px solid #ffb008;
}
#top_reason h3 {
	margin-bottom:20px;
}
#top_reason div figure {
	float: right;
	display: table;
	width: 153px;
	padding-left:20px;
}
#top_reason div p {
	margin-bottom: 20px;
	line-height: 2.0;
}
/*
#top_reason div p:last-child {
	text-align:right;
	margin-right:20px;
}
*/

#top_reason div p span {
	color:#ff4e00;
	font-weight:bold;
}
#top_reason div p strong {
	color:#ff4e00;
	line-height:1.2;
	font-size: 18px;
	font-size: 1.8rem;
}
#top_reason ul {
	width:300px;
	margin:0 auto 30px;
}
#top_reason li {
	position:relative;
	margin-bottom:15px;
	padding:10px 0 0 40px;
	font-weight:bold;
	font-size: 22px;
	font-size: 2.2rem;
}
#top_reason li:before {
	content: "";
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	width:33px;
	height:31px;
	background: url(../img/check01.png) no-repeat left top;
	z-index:2;
}

/*sp*/
@media (max-width: 767px) {

#top_reason div {
	margin-bottom:20px;
	padding:20px 15px 0px;
}
	
}


/*----------------------------------------
	top_effect
----------------------------------------*/

#top_effect ul {
    margin-bottom: 80px;
}
#top_effect ul {
	padding:25px 15px 20px;
	background: #ffffde;
	background: -moz-linear-gradient(top, #ffffde 0%, #f7e9cd 52%, #fff6e4 100%);
	background: -webkit-linear-gradient(top, #ffffde 0%, #f7e9cd 52%, #fff6e4 100%);
	background: linear-gradient(to bottom, #ffffde 0%, #f7e9cd 52%, #fff6e4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffde', endColorstr='#fff6e4', GradientType=0 );
}
#top_effect li {
	margin-bottom:10px;
	padding:20px 20px 17px;
	border-top:1px solid #bbbbbb;
	border-bottom:1px solid #bbbbbb;
	border-left:25px solid #ff6a05;
	border-right:1px solid #bbbbbb;
	background-color:#fff;
	font-weight:bold;
	line-height:1.2;
	font-size: 22px;
	font-size: 2.2rem;
}
#top_effect li strong {
	color:#ee3415;
}
#top_effect p {
	text-align:right;
	margin:15px 10px 30px 0;
	font-size: 14px;
	font-size: 1.4rem;
}

/*sp*/
@media (max-width: 767px) {
    #top_effect ul {
        padding:15px 15px 10px;
    }
	#top_effect li {
        line-height: 1.4;
		padding:15px 15px 12px 15px;
		font-size: 18px; font-size: 1.8rem;
	}	
    #top_effect li br{
        display: none;
	}	

}
