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

/* ==========================================================
 width: 700 - 1149px
========================================================== */
@media screen and (min-width: 700px) and (max-width: 1149px) {
	.header-nav-in {
		padding: 0 15px;
	}
}

/* ==========================================================
 max-width: 699px
========================================================== */
@media screen and (min-width: 1px) and (max-width: 699px) {

	/*header
---------------------------------------------------------- */
	.header-nav-02 {
		height: 80px;
	}
	.header-nav-02 .logo {
		width: 138px;
		height: 30px;
		margin-left: 20px;
	}
	.header-nav-02 .header-nav-area {
		/* display: none; */
		overflow-y: auto;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: calc(100% - 75px);
		padding: 0 15px 15px;
		background: #fff;
		visibility: hidden;
		opacity: 0;
		z-index: 999;
		transition: all 0.2s;
	}
	.header-nav-02 .header-nav-list {
		margin-right: 0;
	}
	.header-nav-02 .item-01 .link,
	.header-nav-02 .item-02 .link,
	.header-nav-02 .item-03 .link {
		margin: 0;
		text-align: left;
	}
	.header-nav-02 .item-01 .link,
	.header-nav-02 .item-02 .link {
		border-bottom: 1px solid #eee;
	}
	.header-nav-02 .item-01 {
		display: block;
	}
	.header-nav-02 .item-01 .link {
		width: 100%;
	}
	.header-nav-02 .item-01 a,
	.header-nav-02 .item-02 a {
		padding: 8px 10px;
	}
	.header-nav-02 .item-01 .sub {
		display: inline-block;
		margin-left: 15px;
	}
	.header-nav-02 .item-02 {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin-top: 12px;
		font-size: 11px;
	}
	.header-nav-02 .item-02 .link {
		width: calc(50% - 7px);
	}
	.header-nav-02 .item-03 {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-top: 12px;
		font-size: 10px;
	}
	.header-nav-02 .item-03 .link {
		width: 100%;
	}
	.header-nav-02 .item-03 .link a {
		padding: 3px 10px;
	}
	.header-nav-02 .item-04 {
		margin-top: 8px;
	}
	.header-nav-02 .item-04 .ico {
		width: 38px;
		height: 38px;
	}
	.header-nav-02 .item-04 .ico a {
		padding: 10px;
	}
	.header-nav-02 .item-04 .ico img {
		width: 100%;
		height: 100%;
	}
	.header-nav-02 .header-menu-btn {
		position: relative;
		padding: 20px 55px 20px 20px;
		letter-spacing: 1px;
		color: #616161;
		font-size: 12px;
		font-weight: 300;
		font-family: "proxima-nova", sans-serif;
		z-index: 999;
	}
	.header-nav-02 .header-menu-btn::before,
	.header-nav-02 .header-menu-btn::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 20px;
		display: block;
		width: 20px;
		height: 1px;
		background: #616161;
		transition: transform 0.2s;
	}
	.header-nav-02 .header-menu-btn::before {
		transform: translateY(-3px);
	}
	.header-nav-02 .header-menu-btn::after {
		transform: translateY(3px);
	}
	html.is-open .header-nav-02 .header-menu-btn::before {
		transform: rotate(45deg);
	}
	html.is-open .header-nav-02 .header-menu-btn::after {
		transform: rotate(-45deg);
	}
	html.is-open .header-nav-02 .header-nav-area {
		visibility: visible;
		opacity: 1;
	}

	/* footer
	---------------------------------------------------------- */
	.footer-nav-contact,
	.footer-nav-banner {
		display: block;
	}
	.footer-nav-contact p {
		text-align: center;
	}
	.footer-nav-contact p + p {
		margin: 0;
	}
	.footer-nav-banner {
		margin: 40px 0 50px;
	}
	.footer-nav-banner li {
		width: 234px;
		margin-left: auto;
		margin-right: auto;
	}
	.footer-nav-banner li + li {
		margin-top: 10px;
	}

	/* contents / section
	---------------------------------------------------------- */
	.contents {
		margin-bottom: 150px;
		padding: 0 15px;
	}
	.sec-cmn-01,
	.sec-cmn-03 {
		margin-top: 70px;
	}
	.sec-cmn-02 {
		margin-top: 50px;
	}

	/* txt
	---------------------------------------------------------- */
	.txt-cmn-02 {
		margin-top: 20px;
		line-height: 1.8;
		text-align: justify;
	}

	/* ttl
	---------------------------------------------------------- */
	.ttl-main-01 {
    margin: 25px -15px 40px;
	}
	.ttl-main-01 .txt {
		font-size: 30px;
	}
	.ttl-main-01 .sub {
    margin-top: 5px;
    font-size: 14px;
	}
	.ttl-main-02 {
		margin: 30px -15px 50px;
		font-size: 20px;
	}
	.ttl-main-02 img {
		margin-top: 30px;
	}
	.ttl-main-03 {
		margin-bottom: 40px;
	}
	.ttl-cmn-01 {
		margin-bottom: 20px;
	}
	.link-more {
		margin-top: 20px;
	}
	.link-wrap .link-more {
		width: 130px;
	}
	.link-tel {
		pointer-events: all;
	}

	/* list
	---------------------------------------------------------- */
	.dl-cmn-01 {
		display: block;
		margin-top: 70px;
		border-left: 1px solid #eee;
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}
	.dl-cmn-01 dt,
	.dl-cmn-01 dd {
		width: 100%;
		border-left: none;
	}

	/* box
	---------------------------------------------------------- */
	.box-cmn-01 + .box-cmn-01 {
    margin-top: 70px;
	}
	.box-cmn-01 figure,
	.box-cmn-01 .box-cmn-in {
		float: none;
		width: 100%;
	}
	.box-cmn-01 .box-cmn-in .link-right a {
		float: none;
		margin: 30px auto 0;
	}
	.box-cmn-01 .ttl-cmn-02 {
		margin-top: 30px;
	}
	.box-cmn-02 + .box-cmn-02 {
		margin-top: 60px;
	}
	.box-cmn-02 .link-img-01 {
		display: block;
		border: none;
	}
	.box-cmn-02 figure,
	.box-cmn-02 .box-cmn-in {
		width: 100%;
	}
	.box-cmn-02 .ttl-cmn-02 {
		margin: 20px 0;
	}
	.box-img-01 {
		display: block;
	}
	.box-img-01 img {
		width: 100%;
	}
	.box-img-01 img + img {
		margin-top: 30px;
	}
	.box-iframe-01 {
		width: auto;
		height: 250px;
		margin: 0 -15px;
	}

	/* table
	---------------------------------------------------------- */
	.table-wrap {
		overflow: auto;
	}
	.table-cmn-01 {
		width: 600px;
	}
	.s-td-10 {
		width: 15%;
	}

	/* 商品ページ
	---------------------------------------------------------- */
	.list-product {
		display: block;
	}
	.list-product .item {
		max-width: none;
		margin: 0 0 30px;
	}
	.list-product .item .link-img-01 {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.list-product .item h3 {
		width: 125px;
	}
	.list-product .item h3 .ico-monde {
		top: 0;
		left: 0;
	}
	.list-product .item .detail {
		width: calc(100% - 140px);
	}
	.list-product .item h4,
	.list-product .item p {
		text-align: left;
	}
	.sec-product {
		display: block;
		margin-top: 10px;
	}
	.img-product,
	.box-product {
		width: 100%;
	}
	.img-product {
		max-width: 300px;
		margin: 0 auto 20px;
	}
	.box-product .name {
  margin: 20px 0;
	font-size: 16px;
	}
	.box-product .price {
		margin: 15px 0 20px;
	}
	.list-detail dt {
		margin-top: -1px;
	}
	.list-detail dd {
		margin: 20px 0 0;
		padding-bottom: 20px;
	}

	/* マナビスのビジネス
	---------------------------------------------------------- */
	.box-business-01 {
		display: block;
	}
	.box-business-01 p {
		width: 100%;
	}
	.box-business-01 p + p {
		margin-top: 40px;
	}
	.box-link-about {
		display: block;
		margin-top: 50px;
	}
	.box-link-about .link-img-01 {
		width: 100%;
	}
	.box-link-about .link-img-01 + .link-img-01 {
		margin-top: 20px;
	}
	.box-link-about .link-img-01 img {
		width: 40%;
	}
	.box-link-about .link-img-01 figcaption {
		width: 60%;
	}

	/* 私たちの会社
	---------------------------------------------------------- */
	.box-aboutus-01 figure {
		float: none;
		width: 100%;
		margin: 0 0 30px;
	}
	.list-aboutus {
		display: block;
		margin-top: 70px;
	}
	.list-aboutus li {
		width: 100%;
	}
	.list-aboutus li + li {
		margin-top: 40px;
	}
	.txt-story-01 {
		margin-top: 0;
		line-height: 2;
		font-size: 16px;
	}
	.txt-company-01 {
		margin: 0;
	}
	.txt-company-01 + .txt-cmn-02 {
		margin-top: 30px;
		text-align: center;
	}
	.txt-company-01 span:nth-of-type(2) {
		margin-top: 10px;
	}

	/* お手入れステップ
	---------------------------------------------------------- */
	.list-step-wrap::before,
	.list-step-wrap > .item::after,
	.list-step-wrap .item-03 .item:nth-of-type(1)::before,
	.list-step-wrap .item-03 .item:nth-of-type(3)::before,
	.list-step-wrap .item-03::after {
		display: none;
	}
	.list-step-wrap > .item::before,
	.list-step-wrap .item-03::before {
		top: -17px;
		left: 50%;
		width: 0;
		height: 0;
		background: none;
		border-style: solid;
		border-width: 5px 5px 0 5px;
		border-color: #bdbdbd transparent transparent transparent;
		transform: translateX(-50%);
	}
	.list-step-wrap .item + .item {
    margin-top: 30px;
}
	.list-step-wrap .item-02 {
		position: relative;
		top: auto !important;
		right: auto;
	}
	.list-step-wrap .item-03 {
		float: none;
		margin-top: 30px;
	}
	.list-step-wrap .item-03 > p {
		margin: 0;
		padding: 8px 0;
		line-height: 1;
		text-align: center;
	}
	.list-step-wrap .item-03 .item:nth-of-type(2) .name {
		letter-spacing: -0.4px;
	}
	.list-step-wrap .item-03 .item:nth-of-type(3) .name {
		letter-spacing: -0.2px;
	}

	/* マナビスの働き方
	---------------------------------------------------------- */
	.box-work-intro-01,
	.box-work-intro-02 {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
		width: auto;
		margin: 0 -15px;
	}
	.box-work-intro-01 .box-work-in,
	.box-work-intro-02 .box-work-in {
		position: static;
		width: auto;
		margin: 30px 15px 0;
		transform: none;
	}
	.box-work-intro-01 .box-work-in h3,
	.box-work-intro-01 .box-work-in p {
		text-align: left;
	}
	.box-work-intro-01 .box-work-in h3 {
		font-size: 18px;
	}
	.box-work-intro-01 .box-work-in p,
	.box-work-intro-02 .box-work-in p {
		margin-top: 20px;
	}
	.box-work-intro-01 figcaption,
	.box-work-intro-02 figcaption {
		display: none;
	}
	.box-work-intro-01 figure,
	.box-work-intro-02 figure,
	.box-work-01 figure {
		width: 100%;
	}
	.box-work-01 .type-01,
	.box-work-01 .type-02 {
		float: none;
		margin: 0 0 30px;
	}
	.box-work-01 .txt-work-01 {
		line-height: 2;
	}
	.box-work-01 .box-work-in .txt-work-01 {
		margin-top: 0;
	}

	/* その他ページ
	---------------------------------------------------------- */
	.list-qa dt,
	.list-qa dd {
		text-align: justify;
	}
	.list-qa dt {
		padding-right: 40px;
	}
	.list-qa dd {
    margin-bottom: 20px;
}

}