@charset "utf-8";
/* CSS Document */

/* ==========================================
	package ▼
========================================== */

dt,dd {
	line-height: 3rem;
}

.top-bg  {
	/*
  background: url(../img/package-bg-01.jpg) repeat-x center center;
	background-size: contain;
  */
	text-align: center;
	margin: 0 -999rem;
	padding: 5.0rem 999rem 4rem;
}
.top-img {
  display: none;
}

h2 {
	font-size: 2.3rem;
	font-weight: 900;
	padding-bottom: 2rem;
}
h2 span {
	display: block;
	font-size: 5.7rem;
	font-weight: 400;
}
h2 span:first-letter {
	color: #4f7ad2;
}
h2+p {
	font-size: 2.0rem;
  padding: 0 1.5rem;
}

@media (max-width: 767px) {
  .top-bg {
    /*background: #f2f2f2;*/
    padding: 4rem 999rem;
  }
	.top-img {
    background: url(../img/package-bg-01-sp.jpg) repeat-x center center;
    background-size: contain;
    display: inherit;
    border-bottom: 4px solid #f2f2f2;
    display: block;
    height: 175px;
	}
	h2+p {
    font-size: 2.0rem;
	}
}

/* ==========================================
	point-01 ▼
========================================== */

.top-txt,
.point-01 > dl,
.point-02 > dl {
	text-align: center;
	padding: 6.0rem 0 7.5rem;
}
.top-txt dt,
.point-01 > dl dt,
.point-02 > dl dt {
	border-bottom: 4px solid #4f7ad2;
	display: inline-block;
	font-size: 3.0rem;
	font-weight: 900;
	letter-spacing: 0.6rem;
	padding:  0 2.0rem 2.0rem;
	margin-bottom: 5.0rem;
}
.top-txt dd,
.point-01 > dl dd,
.point-02 > dl dd {
	font-size: 1.6rem;
	text-align: left;
}

.point-02 {
  padding-top: 6.5rem
}

.title-w {
	background: url(../img/package-title-bg.jpg) repeat -50px;
	margin: 0 -999rem;
	padding: 0 999rem;
}
h3 {
	background: url(../img/package-point-01.jpg) no-repeat left center;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 400;
	letter-spacing: 0.3rem;
	padding: 3.0rem 8.5rem;
}
.title-w:nth-of-type(3) h3 {
	background: url(../img/package-point-02.jpg) no-repeat left center;
}
.title-w:nth-of-type(4) h3 {
	background: url(../img/package-point-03.jpg) no-repeat left center;
}
h3 span {
	display: block;
	font-size: 3.0rem;
	font-weight: 900;
}

.point-01 {
	background: url(../img/decoration-bg.jpg) repeat center;
	padding: 6.5rem 999rem 16.5rem;
  margin: 0 -999rem;
}
                   
.machine:not(:last-child) {
	padding-bottom: 4.0rem;
}
.machine > dl dt {
	font-size: 2.0rem;
	font-weight: 500;
	padding-bottom: 0.8rem;
}
.machine > dl dd {
	font-size: 1.6rem;
}

@media (max-width: 767px) {
	.top-bg + dl,
	.top-txt,
	.point-01 > dl,
  .point-02 > dl,
	.point-03 {
		padding-right:  1.5rem;
		padding-left:  1.5rem;
	}
.top-txt dt,
.point-01 > dl dt,
.point-02 > dl dt {
	border-bottom: 4px solid #4f7ad2;
	display: inline-block;
	font-size: 2.3rem;
  }
  h3,
	.title-w:nth-of-type(3) h3,
	.title-w:nth-of-type(4) h3 {
		background: #4f7ad2;
		padding: 1.0rem;
	}
	h3::before {
		content: "POINT1";
		background: #fff;
		-webkit-border-radius: 5px;/* for Safari and Chrome */
		-moz-border-radius: 5px; /* for Firefox */
		-o-border-radius: 5px; /* for opera */
		border-radius: 5px;
		color: #4f7ad2;
		display: inline-block;
		font-weight: 600;
		padding: 0.3rem;
		margin-right: 0.5rem;
	}
	.title-w:nth-of-type(3) h3::before {
		content: "POINT2";
	}
	.title-w:nth-of-type(4) h3::before {
		content: "POINT3";
	}
	h3 span {
		font-size: 2.3rem;
	}
  .point-01 {
    padding: 3.0rem 0 8.0rem;
    margin: 0;
	}
}

/* ==========================================
	point-02 ▼
========================================== */
.point-02 > dl dd a {
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 3px 4px 10px 0px #d4d4d4;
    -moz-box-shadow: 3px 4px 10px 0px #d4d4d4;
    -webkit-box-shadow: 3px 4px 10px 0px #d4d4d4;
    -o-box-shadow: 3px 4px 10px 0px #d4d4d4;
    /* background: url(../img/sp-pdf.png) no-repeat 4.0rem center; */
    display: block;
    font-size: 2.5rem;
    text-align: center;
    padding: 3.0rem;
    margin: 5rem auto 0;
    width: 60%
}
.point-02 > dl dd a::before {
    font-family: 'FontAwesome';
    content: "\f1c1";
    color: #cd2929;
    font-size: 3.2rem;
    position: relative;
    right: 5rem;
}
.point-02 > dl dd a::after {
    font-family: 'FontAwesome';
    content: "\f0da";
    color: #cd2929;
    font-size: 3.2rem;
    position: relative;
    left: 5rem;
}


@media (max-width: 767px) {
  .point-02 > dl dd a {
    font-size: 2.0rem;
    padding: 1.0rem;
    width: 95%
  }
  .point-02 > dl dd a::before {
    right: 2.0rem;
  }
  .point-02 > dl dd a::after {
    left: 2.0rem;
    top: 0.2rem;
  }
}

/* ==========================================
	point-03 ▼
========================================== */

.point-03 {
	padding-bottom: 8.5rem;
}
.point-03::before {
	content: "";
	background: url(../img/package-bg-03.jpg) no-repeat center center;
	background-size: contain;
	display: block;
	height: 535px;
	margin: 0 -999rem 8.5rem;
	padding: 0 999rem;
}
.point-03 figure {
	position: relative;
}
.point-03 figure figcaption {
	position: absolute;
	top: 0;
	left: 0;
}
.point-03 figure figcaption p {
	font-size: 2.0rem;
	padding: 5.0rem 0 4.0rem;
}

@media (max-width: 767px) {
	.clearfix > dl dt {
		padding-top: 1.5rem;
	}
	.point-03::before {
		background-size: 5% auto;
		height: 28.2rem;
    margin: 0 -999rem 4rem;
    padding: 0 999rem;
}
	.point-03 figure {
		padding: 2rem 0 4rem;
	}
	.point-03 figure figcaption img {
		max-width: 50%;
	}
	.point-03 figure figcaption {
		top: 1.5rem;
	}
	.point-03 figure figcaption p {
    font-size: 1rem;
    padding: 1rem 0 0;
	}
}

/* ==========================================
	Ipad～ ▼
========================================== */


/* ==========================================
	iphone5～ ▼
========================================== */

@media (max-width: 320px) {
	h3 span {
		font-size: 1.9rem;
	}
	.point-03::before {
    background-size: 3% auto;
    height: 16.5rem;
	}
}