/* service */


/* contents
----------------------------------------- */
.side-nav-wrapper {
	margin-bottom: 80px;
}
.main-cont {
}
.side-nav {
	display: none;
}

/* service-description */
.service-description {
}
.service-description > li {
	position: relative;
	margin-bottom: 55px;
	border-top: 1px solid;
}
.service-description > li:last-child {
	margin-bottom: 0;
}
.description01 {
	color: #77AAA3;
}
.description01 .num::before {
	background-color: #77AAA3;
}
.description01 .illust img {
	display: inline-block;
	width: 190px;
	margin: 40px 0 0 40px;
}
.description02 {
	color: #587E9F;
}
.description02 .num::before {
	background-color: #587E9F;
}
.description02 .illust img {
	display: inline-block;
	width: 190px;
	margin: 40px 0 0 40px;
}
.description03 {
	color: #C4975B;
}
.description03 .num::before {
	background-color: #C4975B;
}
.description03 .illust img {
	display: inline-block;
	width: 190px;
	margin: 40px 0 0 40px;
}
.description04 {
	color: #9398A3;
}
.description04 .num::before {
	background-color: #9398A3;
}
.description04 .illust img {
	display: inline-block;
	width: 120px;
	margin: 40px 0 0 80px;
}
.description05 {
	color: #B96168;
}
.description05 .num::before {
	background-color: #B96168;
}
.description05 .illust img {
	display: inline-block;
	width: 125px;
	margin: 40px 0 0 60px;
}
.description06 {
	color: #81589F;
}
.description06 .num::before {
	background-color: #81589F;
}
.description06 .illust img {
	display: inline-block;
	width: 190px;
	margin: 55px 0 0 70px;
}
.service-description .num {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	font-family: din-2014, sans-serif;
	font-weight: 400;
	font-size: 5.0rem;
	line-height: 1.6;
	z-index: 10;
}
.service-description .num::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: calc(100% - 2px);
	height: 4px;
}
.service-description .illust {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	margin-bottom: 20px;
}
.service-description .ttl {
	margin-bottom: 15px;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.6;
}
.service-description .ttl span {
	font-size: 1.8rem;
}
.service-description .lead p {
	margin-bottom: 15px;
	font-size: 1.4rem;
	color: #333;
	line-height: 2.3;
}
.service-description .lead p:last-child {
	margin-bottom: 0;
}
.service-description-ul {
	margin: 30px 0 30px;
}
.service-description-ul:last-child {
	margin-bottom: 0;
}
.service-description-ul li {
	position: relative;
	padding-left: 15px;
	margin-bottom: 10px;
	line-height: 1.6;
	color: #333;
}
.service-description-ul li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 6px;
	height: 6px;
	background-color: #333;
	border-radius: 50%;
}
.service-description-ul li:last-child {
	margin-bottom: 0;
}

/** products-example-area **/
.products-example-area {
}
.products-example-area-ttl {
	text-align: center;
}
.products-example-area-ttl span {
	font-size: 2.0rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.55;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	vertical-align: top;
}
.example-box {
	margin-top: -34px;
	padding: 60px 4% 50px;
	background-color: #F2F8F8;
}
.example-box-list {
	display: flex;
	flex-wrap: wrap;
	padding:  11% 10% calc(11% - 13px);
	background-color: #fff;
}
.example-box-list li {
	position: relative;
	display: inline-block;
	margin: 0 12px 13px 0;
	padding-bottom: 6px;
	font-size: 1.3rem;
}
.example-box-list li::after {
	content: "";
	position: absolute;
	left: 2px;
	bottom: 0;
	width: 100%;
	height: 1px;
	margin: auto;
	background-image: linear-gradient(to right, #333, #333 1px, transparent 1px, transparent 3px);
	background-size: 3px 1px;
	background-repeat: repeat-x;
}

















































/* tablet 560px - 959px */
@media only screen and (min-width: 560px) {


/* contents
----------------------------------------- */
.side-nav-wrapper {
	margin-bottom: 120px;
}
.main-cont {
}
.side-nav {
	display: none;
}

/* service-description */
.service-description {
}
.service-description > li {
	display: flex;
	position: relative;
	margin-bottom: 80px;
	padding-top: 60px;
	border-top: 1px solid;
}
.service-description > li:last-child {
	margin-bottom: 0;
}
.description-inner-left {
	width: 40%;
	margin-right: 5%;
}
.description-inner-right {
	width: 55%;
}
.description01 {
	color: #77AAA3;
}
.description01 .num::before {
	background-color: #77AAA3;
}
.description01 .illust img {
	display: inline-block;
	width: 100%;
	margin: 80px 0 0 0;
}
.description02 {
	color: #587E9F;
}
.description02 .num::before {
	background-color: #587E9F;
}
.description02 .illust img {
	display: inline-block;
	width: 70%;
	margin: 80px 0 0 20%;
}
.description03 {
	color: #C4975B;
}
.description03 .num::before {
	background-color: #C4975B;
}
.description03 .illust img {
	display: inline-block;
	width: 100%;
	margin: 80px 0 0 0;
}
.description04 {
	color: #9398A3;
}
.description04 .num::before {
	background-color: #9398A3;
}
.description04 .illust img {
	display: inline-block;
	width: 75%;
	margin: 80px 0 0 10%;
}
.description05 {
	color: #B96168;
}
.description05 .num::before {
	background-color: #B96168;
}
.description05 .illust img {
	display: inline-block;
	width: 70%;
	margin: 80px 0 0 10%;
}
.description06 {
	color: #81589F;
}
.description06 .num::before {
	background-color: #81589F;
}
.description06 .illust img {
	display: inline-block;
	width: 100%;
	margin: 80px 0 0 0;
}
.service-description .num {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	font-family: din-2014, sans-serif;
	font-weight: 400;
	font-size: 6.0rem;
	line-height: 1.6;
	z-index: 10;
}
.service-description .num::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: calc(100% - 2px);
	height: 4px;
}
.service-description .illust {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	margin-bottom: 20px;
}
.service-description .ttl {
	margin-bottom: 25px;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.6;
}
.service-description .ttl span {
	font-size: 2.2rem;
}
.service-description .lead p {
	margin-bottom: 25px;
	font-size: 1.4rem;
	color: #333;
	line-height: 2.3;
}
.service-description .lead p:last-child {
	margin-bottom: 0;
}
.service-description-ul {
	margin: 45px 0 55px;
}
.service-description-ul:last-child {
	margin-bottom: 0;
}
.service-description-ul li {
	position: relative;
	padding-left: 15px;
	margin-bottom: 10px;
	line-height: 1.6;
	color: #333;
}
.service-description-ul li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 6px;
	height: 6px;
	background-color: #333;
	border-radius: 50%;
}
.service-description-ul li:last-child {
	margin-bottom: 0;
}

/** products-example-area **/
.products-example-area {
	padding: 0 5.3% 0;
}
.products-example-area-ttl {
	text-align: center;
}
.products-example-area-ttl span {
	font-size: 2.0rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.55;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	vertical-align: top;
}
.example-box {
	margin-top: -34px;
	padding: 60px 7% 50px;
	background-color: #F2F8F8;
}
.example-box-list {
	display: flex;
	flex-wrap: wrap;
	padding: 9% 10% calc(9% - 13px);
	background-color: #fff;
}
.example-box-list li {
	position: relative;
	display: inline-block;
	margin: 0 12px 13px 0;
	padding-bottom: 6px;
	font-size: 1.3rem;
}
.example-box-list li::after {
	content: "";
	position: absolute;
	left: 2px;
	bottom: 0;
	width: 100%;
	height: 1px;
	margin: auto;
	background-image: linear-gradient(to right, #333, #333 1px, transparent 1px, transparent 3px);
	background-size: 3px 1px;
	background-repeat: repeat-x;
}


} /* tablet end */



















































/* PC 960px - */
@media only screen and (min-width: 960px) {


/* contents
----------------------------------------- */
.side-nav-wrapper {
	margin-bottom: 160px;
}
.main-cont {
}
.side-nav {
	display: block;
}

/* service-description */
.service-description {
}
.service-description > li {
	display: flex;
	position: relative;
	margin-bottom: 120px;
	padding-top: 90px;
	border-top: 1px solid;
}
.service-description > li:last-child {
	margin-bottom: 0;
}
.description-inner-left {
	width: 40%;
	margin-right: 5%;
}
.description-inner-right {
	width: 55%;
}
.description01 {
	color: #77AAA3;
}
.description01 .num::before {
	background-color: #77AAA3;
}
.description01 .illust img {
	display: inline-block;
	width: 90%;
	margin: 120px 0 0 0;
}
.description02 {
	color: #587E9F;
}
.description02 .num::before {
	background-color: #587E9F;
}
.description02 .illust img {
	display: inline-block;
	width: 90%;
	margin: 120px 0 0 0;
}
.description03 {
	color: #C4975B;
}
.description03 .num::before {
	background-color: #C4975B;
}
.description03 .illust img {
	display: inline-block;
	width: 90%;
	margin: 120px 0 0 0;
}
.description04 {
	color: #9398A3;
}
.description04 .num::before {
	background-color: #9398A3;
}
.description04 .illust img {
	display: inline-block;
	width: 68%;
	margin: 100px 0 0 21%;
}
.description05 {
	color: #B96168;
}
.description05 .num::before {
	background-color: #B96168;
}
.description05 .illust img {
	display: inline-block;
	width: 63%;
	margin: 110px 0 0 15%;
}
.description06 {
	color: #81589F;
}
.description06 .num::before {
	background-color: #81589F;
}
.description06 .illust img {
	display: inline-block;
	width: 90%;
	margin: 110px 0 0 5%;
}
.service-description .num {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	font-family: din-2014, sans-serif;
	font-weight: 400;
	font-size: 7.0rem;
	line-height: 2.0;
	z-index: 10;
}
.service-description .num::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: calc(100% - 2px);
	height: 4px;
}
.service-description .illust {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 180px;
	margin-bottom: 20px;
}
.service-description .ttl {
	margin-bottom: 45px;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.6;
}
.service-description .ttl span {
	font-size: 2.8rem;
}
.service-description .lead p {
	margin-bottom: 30px;
	font-size: 1.5rem;
	color: #333;
	line-height: 2.4;
}
.service-description .lead p:last-child {
	margin-bottom: 0;
}
.service-description-ul {
	margin: 45px 0 55px;
}
.service-description-ul:last-child {
	margin-bottom: 0;
}
.service-description-ul li {
	position: relative;
	padding-left: 15px;
	margin-bottom: 8px;
	line-height: 1.7;
	font-size: 1.5rem;
	color: #333;
}
.service-description-ul li::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	width: 6px;
	height: 6px;
	background-color: #333;
	border-radius: 50%;
}
.service-description-ul li:last-child {
	margin-bottom: 0;
}

/** products-example-area **/
.products-example-area {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 40px 0;
}
.products-example-area-ttl {
	text-align: center;
}
.products-example-area-ttl span {
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.55;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	vertical-align: top;
}
.example-box {
	margin-top: -38px;
	padding: 70px;
	background-color: #F2F8F8;
}
.example-box-list {
	display: flex;
	flex-wrap: wrap;
	padding: 65px 70px 57px;
	background-color: #fff;
}
.example-box-list li {
	position: relative;
	display: inline-block;
	margin: 0 45px 18px 0;
	padding-bottom: 8px;
	font-size: 1.6rem;
}
.example-box-list li::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	margin: auto;
	background-image: linear-gradient(to right, #333, #333 1px, transparent 1px, transparent 3px);
	background-size: 3px 1px;
	background-repeat: repeat-x;
}


} /* PC end */