@charset "utf-8";

section#sub_pagettl{
	background-image: url(../img/subttl_feature.png);
}


/**5つの特徴**/
#sect_feat{}
#sect_feat #feat_point{
	padding-top: 40px;
}

#sect_feat #feat_point li{
	background-color: #898989;
	color: #FFFFFF;
	position: relative;
	margin-bottom: 50px;
	width: 100%;
}
/*
#sect_feat #feat_point li::after {
  content: "";
  display: block;
  clear: both;
}
#sect_feat #feat_point li:before{
	content: "";
	width: 50%;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
*/
#sect_feat #feat_point li {display: flex; align-content: stretch; flex-wrap: wrap;}
#sect_feat #feat_point li .point_txt{ width: 50%; display: block; padding: 4em 3em;}
/*#sect_feat #feat_point li .point_txt:after { content:"."; height:0px;	clear:both;	display: block;	visibility:hidden;}*/
#sect_feat #feat_point li:nth-child(2n) .point_txt{ order:1; }

#sect_feat #feat_point li .point_photo{width: 50%;display: block; background-size: cover;background-repeat: no-repeat;background-position: center;}

#sect_feat #feat_point .point_movie{z-index: 0; display: block; width: 50%; overflow: hidden; position: relative; }
#sect_feat #feat_point .point_movie:before{content: ""; display: block; padding-top:56.25%; }
#sect_feat #feat_point .point_movie video,#sect_feat #feat_point .point_movie iframe{ /*width: 100%;*/ height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);	transform: translate(-50%, -50%);}
#sect_feat #feat_point .point_movie iframe{aspect-ratio:16 / 9;}

#sect_feat #feat_point li .point_txt h3{ font-size: 1.8rem;	line-height: 1.4em; padding-bottom: 1.5em;}
#sect_feat #feat_point li .point_txt h3 small[class*="dis_bl"]{font-size:70%; line-height: 1.6em; padding-top: 0.75em;}

#sect_feat #feat_point li .star_num{
	background-image: url(../img/mark_starRED.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	width: 2.5em;
	height: 2.5em;
	text-align: center;
	font-size: 2rem;
	line-height: 1em;
	display: block;
	padding-top: 0.75em;
	position: absolute;
	top: -40px;
	left: calc(25% - 1.25em);
}

#sect_feat #feat_point li:nth-child(2n) .star_num{left: auto; right:calc(25% - 1.25em);}


#sect_feat .btn_box{ text-align: center;}



/* ##### responsive ##### */
@media screen and (max-width: 760px) {

	/**5つの特徴**/
	#sect_feat{
	}
	#sect_feat #feat_point{
		padding-top: 40px;
	}

	#sect_feat #feat_point li{
	background-color: transparent;
	color: #373737;
	margin-bottom: 70px;
	}
	
	#sect_feat #feat_point li:last-child{margin-bottom: 0;}
	#sect_feat #feat_point li .point_txt{
	width: 100%;
	padding-top: 3em;
	padding-right: 5%;
	padding-left: 5%;
	padding-bottom: 2em;
	float: none;
	}
    #sect_feat #feat_point li:nth-child(2n) .point_txt{ order:0; }
    #sect_feat #feat_point li .point_txt .stxt{ /*display: flex;*/ align-content: stretch;}
    #sect_feat #feat_point li .stxt .point_photo{ width: 40%;background-image: none;}
    #sect_feat #feat_point li .stxt .point_photo img{width: 100%;}
    #sect_feat #feat_point li .stxt .point_photo[class*="fl_"][class*="left"]{padding-bottom: 0; padding-right: 1em;}
    
    #sect_feat #feat_point li .stxt .point_movie{ width: 100%;background-image: none; padding-bottom: 1em; display: block;}
    #sect_feat #feat_point li .stxt .point_movie video{width: 100%; height: auto;}
    #sect_feat #feat_point li .stxt .point_movie[class*="fl_"][class*="left"] {padding-bottom: 0; padding-right: 0;}
    
    #sect_feat #feat_point li .stxt p{ display: inline; /*width: 60%; padding-left: 1em;*/}
	#sect_feat #feat_point li .point_txt h3{ font-size: 1.4rem; text-align: center;}
    #sect_feat #feat_point li .point_txt h3 small[class*="dis_bl"]{text-align: left;}	
	#sect_feat #feat_point li .star_num{
	margin: auto;
	left: 0!important;
	right: 0!important;
	color: #FFFFFF;
    font-size: 1.75rem;
	}

	#sect_feat .btn_box{ text-align: center;}

}