@charset "utf-8";
/*-------------------- swiper --------------------*/
.swiper-container {
	width: 100%;
	height: 100%;
}
.swiper-pagination-bullet {
    width: 19px;
    height: 19px;
}
.swiper-pagination-bullet-active {
	background: #015b37;
}
.swiper-button-prev {
	background-image: url(../images/button_prev.png);
}
.swiper-button-next {
	background-image: url(../images/button_next.png);
}
/*-------------------- base --------------------*/
.lp {}
.lp h2 {
	color: #015b37;
	font-size: 240%;
	padding-bottom: 1em;
	text-align: center;
}
.lp h3 {
	color: #015b37;
	font-size: 170%;
	padding-bottom: 1em;
	text-align: center;
}
.lp h4 {
	color: #323232;
	font-size: 170%;
	padding-bottom: 0.5em;
}
.lp p {
	font-size: 130%;
	padding-bottom: 1em;
}
.lp .caps1 {
	font-size: 100%;
}
.lp .caps2 {
	font-size: 100%;
}
.listStyle li {
	padding-bottom: 0.3em;
	padding-left: 1.3em;
	text-indent: -1.3em;
}
.listStyle li::before {
	color: #015b37;
	content: "●";
	display: inline;
	margin-right: 0.3em;
}
.listStyle li ul {
	padding-top: 0.3em;
}
.listStyle li li::before {
	content: "・";
}
.bg_gray,
#hero,
.news,
.explain,
.functionList,
.case
{
	background: #f0f0f0;
}
/*-------------------- hero --------------------*/
#hero {
	margin-bottom: 30px;
}
#hero .swiper-container {
	position: relative;
}
#hero .swiper__overCover {
	bottom: 0;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 2;
}
#hero .openBox {
	margin-bottom: 35px;
	padding: 0 50px;
	text-align: left;
}
#hero .swiper-slide {
	background: no-repeat center;
	background-size: auto 100%;
	padding: 70px 50px 150px;
}
#hero .swiper-slide[data-swiper-slide-index="0"] {
	background-image: url(../images/slide_0_sp.png);
	background-position: right center;
}
#hero .swiper-slide[data-swiper-slide-index="1"] {
	background-image: url(../images/slide_1_sp.png);
}
#hero .swiper-slide[data-swiper-slide-index="2"] {
	background-image: url(../images/slide_2_sp.png);
}
#hero .swiper-slide h2 {
	display: none;
}
/*-------------------- open__phone --------------------*/
.open__phone {
	display: none;
}
/*-------------------- news --------------------*/
.news {
	padding: 21px 21px 13px;
}
.news h3 {
	color: #323232;
	padding-bottom: 13px;
	text-align: left;
}
.newsList dt {
	clear: left;
	float: left;
	padding-bottom: 5px;
	width: 9em;
}
.newsList dd {
	float: left;
	padding-bottom: 5px;
}
/*-------------------- exfunction --------------------*/
.exfunction {
	padding: 56px 0 38px;
}
.exfunction__col {
	max-width: 29%;
	width: 29%;
}
.exfunction__col img {
	display: block;
	margin: 0 auto 10px;
}
.exfunction .listStyle {
	padding-left: 15px;
}

.exfunction .listStyle li {
	padding-bottom: 1em;
}
/*-------------------- demo --------------------*/
#demo .swiper-container {
	position: relative;
}
#demo .swiper__overCover {
	background: url(../images/img_iPad.png) no-repeat center;
	background-size: 100%;
	left: 0;
	padding-top: 58.6%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2;
}
#demo .swiper-slide {
	padding-bottom: 150px;
	width: 69.4%;
}
#demo .swiper-slide img {
	height: auto;
	margin: 5% 0;
	width: 100%;
}
#demo .swiper-slide p {
	display: none;
}
#demo .swiper-slide.swiper-slide-active p {
	display: block;
}
#demo .swiper-pagination {
	bottom: 75px;
}
/*-------------------- functionList --------------------*/
.functionList {
	padding: 56px 0 38px;
}
.pickUp {}
.pickUp li {
	border: 1px solid #015b37;
	color: #005c3a;
	padding: 0;
	text-align: center;
	margin-bottom: 1.5em;
	background: #fff;
}

.pickUp li span {
	background: #015b37;
	color: #fff;
	width: 100%;
	font-size: 140%;
	margin-bottom: 13px;
	padding: 20px 0 18px;
	text-align: center;
	margin-top: -2px;
}

.pickUp li .icon_function {
	width: 100%;
	text-align: center;
}
.pickUp li img {
	display: inline-block;
}
.functionList .listStyle {
	color: #015b37;
	font-weight: bold;
}
.termsList {
	color: #015b37;
	font-weight: bold;
}
.termsList li {
	margin-right: 40px;
	margin-bottom: 1em;
}
.termsList li small {
	background: #fff;
	border: 1px solid #015b37;
	display: inline-block;
	margin-right: 10px;
	padding: 3px 7px 2px;
}
.functionList .openBox a {
	width: 258px;
	background: #005c3a;
}
/*-------------------- step --------------------*/
.step {
	padding: 56px 0 38px;
}
.stepBox {
	border-top: 1px solid #bfbfbf;
	margin-bottom: 24px;
}
.stepBox li {
	border: 1px solid #bfbfbf;
	border-top: none;
	padding: 21px 18px;
}
.stepBox__num {
	background: #f0f0f0;
	font-size: 270%;
	max-width: 15%;
	padding: 12px 5px 14px;
	text-align: center;
	width: 15%;
}
.stepBox__num small {
	display: block;
	font-size: 60%;
	text-align: center;
	width: 100%;
}
.stepBox__text {
	max-width: 48%;
	padding: 12px 5px 0 42px;
	width: 48%;
}
.stepBox__text p {
	font-size: 100%;
}
.stepBox__img {
	max-width: 37%;
	width: 37%;
}
.stepBox__img > img {
	width: 48%;
}
.stepBox__img img + img {
	margin-left: 4%;
}
/*-------------------- case --------------------*/
.case {
	padding: 20px 0 40px;
}
.lp .case h2 {
    padding-bottom: 20px;
}
.case .banner {
	background: #000000;
	color: #FFFFFF;
	min-height: 277px;
	margin-bottom: 24px;
}
.case .banner .float_right img {
	display: block;
}
.case .float_right {
	float: right;
}
.case .shop_name {
	font-size: 156%;
}
.case .shop_name > span.genre {
	font-size: 70%;
    letter-spacing: 0px;
}
.banner_text {
	padding: 2em 1.5em;
}
.banner_text p {
	font-size: 100%;
	padding: 5px 0;
}
.button__case {
	margin-top: 4em;
	display: block;
}
a.button__case img:hover {
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
.case .openBox a {
	width: 258px;
	background: #005c3a;
}
/*-------------------- break point --------------------*/
@media all and (max-width: 1024px){

/*-------------------- hero --------------------*/
#hero .swiper__overCover {
	left: 0;
	width: 100%;
}
.case .shop_name {
    font-size: 150%;
    line-height: 0.8em;
}
.case .shop_name > span.genre {
    font-size: 60%;
}
.button__case {
	max-width: 18vw;
}
a.button__case {
	width: 100%;
}
a.button__case img {
	width: 16.0vw;
	display: block;
}
.banner_text {
    padding: 2em 0.5em 0;
}
.banner_text p {
	padding: 10px 5px;
    font-size: 1.5vw;
}
.button__case {
    margin-top: 3em;
}
}
@media all and (max-width: 767px){

/*-------------------- base --------------------*/
.lp h2 {
	font-size: 160%;
}
.lp h3 {
	font-size: 130%;
}
.lp h4 {
	font-size: 110%;
}
.lp p {
	font-size: 100%;
}
/*-------------------- hero --------------------*/
#hero {
	margin-bottom: 7px;
}
#hero .swiper__overCover {
	display: none;
}
#hero .swiper-slide {
	padding: 0;
}
#hero .swiper-slide img {
	display: none;
}
#hero .swiper-slide h2 {
	font-size: 198%;
	display: block;
	line-height: 1.2;
	padding-top: 0.9em;
	padding-bottom: 1.5em;
	text-align: center;
	text-shadow:1px 1px 2px #fff;
}
/*-------------------- open__phone --------------------*/
.open__phone {
	display: block;
}
/*-------------------- exfunction --------------------*/
.exfunction .flex {
	display: block;
}
.exfunction__col{
	max-width: 100%;
	padding-bottom: 40px;
	width: 100%;
}
.exfunction .listStyle li {
	padding-bottom: 1em;
}
/*-------------------- demo --------------------*/
#demo .swiper-slide {
	padding-bottom: 70px;
}
#demo .swiper-pagination {
	bottom: 35px;
}
#demo p {
	font-size: 60%;
}
/*-------------------- functionList --------------------*/
.pickUp {
	display: block;
}
.pickUp li {
	max-width: 100%;
	width: 100%;
}
.termsList {
	display: block;
}
.termsList li {
	margin-right: 0;
}
/*-------------------- step --------------------*/
.stepBox li {
	display: block;
}
.stepBox__num {
	max-width: 100%;
	width: 100%;
}
.stepBox__num small {
	display: inline-block;
	font-size: 60%;
	width: auto;
}
.stepBox__text {
	max-width: 100%;
	padding-right: 0;
	padding-left: 0;
	width: 100%;
}
.stepBox__text p {
	font-size: 100%;
}
.stepBox__img {
	max-width: 100%;
	width: 100%;
}
/*-------------------- case --------------------*/

.case .float_right {
	float: none;
}
.case .banner {
    height: auto;
}
.case .banner img {
	width: 100%;
	display: block;
}
.case .banner {
    width: 100%;
}
.banner_text {
    padding: 2em 0.5em;
}
.button__case {
	max-width: 215px;
	margin-top: 1em;
	display: block;
	text-align: center;
}
a.button__case {
	width: 215px;
}
}