/***
Theme Name: best wash 旭川
Description: 旭川を拠点に展開しているコインランドリー
Author: muotoilu
***/

@charset "UTF-8";

* {
  box-sizing: border-box;
}

*:before {
  box-sizing: border-box;
}

*:after {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

a {
	text-decoration: none;
	color: #444;
}

a:hover {
	text-decoration: none;
}

a img {
  -webkit-transition: opacity 200ms ease-out;
  -moz-transition: opacity 200ms ease-out;
  transition: opacity 200ms ease-out;
}

.cf:before {
  height: 0;
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
}

.cf:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;/* 隙間対応 */
  font-size: 0.1em;/* 隙間対応 */
  line-height: 0;/* 隙間対応 */
}

ul,ol {
  list-style: none;
}

table {
	font-family: "Noto Sans JP", sans-serif;
}



body {
	font-family: source-han-sans-japanese, sans-serif;   
	font-weight: 400;
	color: #262626;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
	background: #fff;
}




/************************************************** 
	
	Common
	
**************************************************/

.container {
  width: 89.07%;
  margin: 0 auto;
  letter-spacing: 0.05em;
}

.section-head {
	padding-bottom: 60px;
	font-size: 27px;
	letter-spacing: 0.05em;
}

.section-head .sub {
	display: block;
	padding-top: 15px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	font-family: poppins, sans-serif;
}

.leadcopy {
	line-height: 2em;
	font-size: 14px;
	letter-spacing: 0.03em;
	text-align: justify;
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .conteiner {
	width: 100%;
  }
}

/* 600px以上 */
@media screen and (min-width: 600px) {
  .container {
  }
}

/* 768px以上 */
@media screen and (min-width: 768px) {
  .container {
	width: 84%;
	margin: 0 auto;
  }
  
  .section-head {
	  font-size: 35px;
	  padding-bottom: 100px;
  }
  
  .section-head .sub {
	  padding-top: 20px;
	  font-size: 15px;
  }
  
  .leadcopy {
	  font-size: 16px;
  }
  
}

/* 992px以上 */
@media screen and (min-width: 992px) {
  .container {
	width: 91%;
	margin: 0 auro;
  }
}

/* 1240px以上 */
@media screen and (min-width: 1240px) {
  .container {
	max-width: 1240px;
  }
}






/************************************************** 
	
	Header
	
**************************************************/
#header {
	position: fixed;
	width: 100%;
	height: 90px;
	top: 0;
	left: 0;
	background: #324452;
	z-index: 100;
}

#header .inner {
	margin: 0 auto;
	display: flex;
	justify-content: space-between; 
	align-items: center;
	height: 90px;
}

#header #siteId {
  	position: relative;
    z-index: 10;
}

#header #siteId img {
	width: 130px;
/* 	filter: brightness(0) saturate(100%) invert(62%) sepia(96%) saturate(493%) hue-rotate(160deg) brightness(98%) contrast(97%); */
}

#header #siteId img a {
	transition: 0.3s;
}







/* 480px以下 */
@media screen and (max-width: 480px) {
  
}

/* 600px以上 */
@media screen and (min-width: 600px) {
  
}

/* 768px以上 */
@media screen and (min-width: 768px) {
	
	#header #siteId img {
		width: 130px;
	}
  
}

/* 992px以上 */
@media screen and (min-width: 992px) {
	
	#header .inner {
		height: 90px;
	}
	
	#header #siteId img:hover {
		opacity: 0.7;
	}
	
	#header .gnavi li a {
		font-size: 15px;
		font-weight: 600;
		color: #fff;
		letter-spacing: 0.05em;
	}
	
	
 
}

/* 1240px以上 */
@media screen and (min-width: 1240px) {
 
}


/************************************************** 
	
	Hero 
	
**************************************************/
#hero {
	position: relative;
	/* top: 70px; */
	left: 0;
	right: 0;
	z-index: 50;
}

#hero .video-wrap {
	position: relative;
}

#hero .video {
	position: relative;
	width: 100%;
	height: 100vh;
	/* height: calc(100vh - 70px);  */
	overflow: hidden;
}

#hero .movie {
	position: relative;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}

#hero .catch-area {
	position: absolute;
	width: 100%;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}

#hero .catch-area img {
	display: block;
	width: 240px;
	margin: 0 auto;
	padding-bottom: 30px;
}

#hero .catch-area .catch {
	text-align: center;
	line-height: 2em;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #fff;
}

#hero .catch-area .catch .lrg {
	font-size: 30px;
}

/* 600px以上 */
@media screen and (min-width: 600px) {
	
	#hero .catch-area img {
		width: 340px;
	}
	
	#hero .catch-area .catch {
		font-size: 22px;
	}
	
	#hero .catch-area .catch .lrg {
		font-size: 32px;
	}
  
}

/* 768px以上 */
@media screen and (min-width: 768px) {
	
	#hero .catch-area img {
		width: 450px;
	}
	
	#hero .catch-area .catch {
		font-size: 26px;
	}
	
	#hero .catch-area .catch .lrg {
		font-size: 40px;
	}
  
}

/* 992px以上 */
@media screen and (min-width: 992px) {
	
	#hero .catch-area img {
		width: 470px;
	}
	
	#hero .catch-area .catch {
		font-size: 28px;
	}
	
	#hero .catch-area .catch .lrg {
		font-size: 43px;
	}
  
}

/* 1240px以上 */
@media screen and (min-width: 1240px) {
	
	#hero .catch-area img {
		width: 510px;
	}
	
	#hero .catch-area .catch {
		font-size: 35px;
	}
	
	#hero .catch-area .catch .lrg {
		font-size: 55px;
	}
  
}



/************************************************** 
	
	店舗について
	
**************************************************/

#store {
	position: relative;
	padding-top: 120px;
	padding-bottom: 210px;
	background: #39CAF7;
}

.bubble-background {
	position: relative;
	/* height: 100vh; */
	width: 100%;
	overflow: hidden;
}

#store h2 {
	text-align: center;
	color: #fff;
}

#store .store-box {
	padding: 17px 17px 40px;
	background: #fff;
	border-radius: 30px;
}

#store .store-box:not(:last-child) {
	margin-bottom: 45px;
}

#store .store-box h3 {
	padding-bottom: 27px;
	text-align: center;
	letter-spacing: 0.05em;
	font-size: 20px;
}

#store .store-box .visual {
	position: relative;
	width: 100%;
	height: 174px;
	margin-bottom: 30px;
	overflow: hidden;
}

#store .store-box .visual img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	will-change: clip-path;
	transition: clip-path 0.3s ease;
	object-fit: cover;
	border-radius: 30px;
}

#store .store-box .visual img.img-01 {
	z-index: 2;
}

#store .store-box .visual img.img-02 {
	z-index: 1;
}

#store .store-box dt {
	font-weight: 500;
}

#store .store-box dt,
#store .store-box dd {
	display: inline-block;
	padding-bottom: 15px;
	letter-spacing: 0.08em;
	font-size: 14px;
}

#store .info-box {
	padding-bottom: 30px;
}

#store .btn-area {
	width: fit-content;
	width: -moz-fit-content;
	margin: 0 auto;
}

#store .btn-area .btn {
	display: inline-block;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	background: #FEE119;
	border-radius: 50px;
	transition: 0.3s;
}

#store .btn-area .btn:first-child {
	margin-right: 20px;
}



/* 480px以下 */
@media screen and (max-width: 480px) {
  
}

/* 600px以上 */
@media screen and (min-width: 600px) {
	
	#store {
		padding-bottom: 250px;
	}
	
	#store .store-box .visual {
		height: 330px;
	}
	
	#store .store-box .info-box {
		width: fit-content;
		width: -moz-fit-content;
		margin: 0 auto;
	}
  
}

/* 768px以上 */
@media screen and (min-width: 768px) {
	
	#store {
		padding-bottom: 300px;
	}
	
	
	#store .store-box {
		padding: 22px 22px 60px;
	}
	
	#store .store-box h3 {
		padding-bottom: 30px;
		font-size: 25px;
	}
	
	#store .store-box .visual {
		padding-bottom: 40px;
	}
	
	#store .store-box dt,
	#store .store-box dd {
		padding-bottom: 20px;
		font-size: 16px;
	}
	
	
	#store .btn-area .btn {
		padding: 15px 28px;
		font-size: 15px;
	}
	
	#store .btn-area .btn:hover {
		opacity: .7;
	}
	
	
	
  
}

/* 992px以上 */
@media screen and (min-width: 992px) {
	
	#store {
		padding-bottom: 300px;
	}
	
	#store .store-contents {
		display: flex;
		-js-display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	#store .store-box {
		width: 400px;
		margin-right: 50px;
	}
	
	#store .store-box:nth-child(2n) {
		margin-right: 0;
	}
	
	#store .store-box:last-child {
		margin-bottom: 0;
	}
	
	#store .store-box:nth-child(3) {
		margin-bottom: 0;
	}
  
}

/* 1240px以上 */
@media screen and (min-width: 1240px) {
	
	#store .store-box {
		width: 540px;
		margin-right: 50px;
	}
  
}




/************************************************** 
	
	マシンについて
	
**************************************************/

#machine {
	position: relative;
	top:0;
	left: 0;
	right: 0;
	padding-top: 60px;
	padding-bottom: 40px;
	background: #fff;
}

#machine h2 {
	padding-bottom: 40px;
}

#machine .bodylead {
	padding-bottom: 70px;
}

#machine .machine-wrap {
	padding-bottom: 70px;
}

 
#machine .mask_sp {
	display: block;
	position: absolute;
	top: -80px;
}

#machine .mask_pc {
	display: none;
}

#machine h2 {
	text-align: center;
}

#machine h3 {
	padding-bottom: 40px;
	line-height: 1.7em;
	letter-spacing: 0.05em;
	font-size: 22px;
}

#machine .visual {
	padding-bottom: 70px;
}

#machine .visual img {
	width: 100%;
	height: 350px;
	object-fit: contain;
	border-radius: 30px;
}

#machine .shoes {
	padding: 80px 12px;
	background: #39CAF7;
	border-radius: 30px;
}

#machine .shoes h3 {
	color: #fff;
}

#machine .shoes .shoes-visual {
	padding-bottom: 70px;
	text-align: center;
}

#machine .shoes .shoes-wrap:not(:last-child) {
	padding-bottom: 90px;
}

#machine .shoes .wash {
	width: 100%;
	height: 350px;
	object-fit: contain;
}

#machine .shoes .shoes-visual .dry {
	width: 80%;
	margin: 0 auto;
}

#machine .shoes .dry {
	width: 100%;
	height: auto;
	object-fit: cover;
}




/* 480px以下 */
@media screen and (max-width: 480px) {
  
}

/* 600px以上 */
@media screen and (min-width: 600px) {
	
	#machine {
		padding-top: 100px;
		padding-bottom: 120px;
	}
	
	#machine .mask_sp {
		top: -100px;
	}
	
	#machine .visual img {
		height: 300px;
	}
	
	#machine .shoes .shoes-visual .dry {
		width: 60%;
	}
	
	
  
}

/* 768px以上 */
@media screen and (min-width: 768px) {
	
	#machine {
		padding-bottom: 160px;
	}
	
	#machine h3 {
		font-size: 30px;
	}
	
	#machine .mask_sp {
		top: -120px;
	}
	
	#machine .machine-wrap {
		padding-bottom: 100px;
	}
	
	#machine .visual img {
		height: 380px;
	}
	
	#machine .shoes .wash {
		height: 400px;
	}
	
	
  
}

/* 992px以上 */
@media screen and (min-width: 992px) {
	
	#machine .mask_sp {
		display: none;
	}
	
	#machine .mask_pc {
		display: block;
		position: absolute;
		top: -120px;
	}
	
	
	#machine .bodylead {
		width: 800px;
		margin: 0 auto;
		padding-bottom: 100px;
	}
	
	#machine .machine-wrap {
		display: flex;
		-js-display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	
	#machine .dry {
		flex-direction: row-reverse;
	}
	
	#machine .desc {
		width: 600px;
	}
	
	#machine .visual {
		width: 470px;
		margin-right: 30px;
		padding-bottom: 0;
	}
	
	#machine .dry .visual {
		margin-right: 0;
		margin-left: 30px;
	}
	
	#machine .visual img {
		height: 480px;
	}
	
	#machine .shoes {
		padding: 120px 20px;
	}
	
	#machine .shoes .shoes-wrap {
		display: flex;
		-js-display: flex;
		justify-content: center;
	}
	
	#machine .shoes .desc {
		width: 480px;
	}
	
	#machine .shoes .shoes-visual {
		margin-right: 60px;
	}
	
	#machine .shoes .wash {
		width: 350px;
	}
	
	#machine .shoes .shoes-visual .dry {
		width: 350px;
	}
	
	
  
}

/* 1240px以上 */
@media screen and (min-width: 1240px) {
	
	#machine .mask_pc {
		top: -130px;
	}
	  
	#machine .desc {
		width: 600px;
	}
	
	#machine .visual img {
		height: 570px;
	}
	
	#machine .shoes .desc {
		width: 540px;
	}
 }

/* 1400x以上 */
@media screen and (min-width: 1400px) {
	
	#machine .mask_pc {
		  top: -150px;
	  }
  
}

/* 1600x以上 */
@media screen and (min-width: 1600px) {
	
	#machine .mask_pc {
		  top: -170px;
	  }
  
}

/* 1920x以上 */
@media screen and (min-width: 1920px) {
	
	#machine .mask_pc {
		  top: -200px;
	  }
  
}




/************************************************** 
	
	ご利用料金
	
**************************************************/
#fee {
	margin-bottom: 120px;
	padding-top: 90px;
	padding-bottom: 90px;
	background: #FEE119;
}

#fee h2 {
	text-align: center;
}

#fee h3 {
	padding-bottom: 25px;
	text-align: left;
	font-size: 20px;
	font-weight: 600;
}

/* アイコン */
#fee h3.machine-sml::before{
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-right: 12px;
	background-image: url(img/icon_17kg.png);
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
}

#fee h3.machine-lrg::before {
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-right: 12px;
	background-image: url(img/icon_27kg.png);
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
}

#fee h3.shoes-wash::before {
	content: "";
	display: inline-block;
	width: 45px;
	height: 45px;
	margin-right: 12px;
	background-image: url(img/icon_shoes_wash.png);
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
}

#fee h3.shoes-dry::before {
	content: "";
	display: inline-block;
	width: 45px;
	height: 45px;
	margin-right: 12px;
	background-image: url(img/icon_shoes_dry.png);
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
}

#fee .fee-wrap {
	padding: 60px 12px 80px;
	background: #fff;
}

#fee .table-content:not(:last-child) {
	padding-bottom: 60px;
}

#fee table {
	width: 100%;
	border-bottom: 1px solid #a5a5a5;
}

#fee table th {
	font-weight: 600;
	background: #fff;
}

#fee table th,
#fee table td {
	padding: 15px;
	text-align: center;
	font-size: 14px;
	border: 1px solid #a5a5a5;
}

#fee table .odd {
	background: #FDF2A6;
}

#fee table .even {
	background: #BAEBFA;
}



/* 480px以下 */
@media screen and (max-width: 480px) {
  
}

/* 600px以上 */
@media screen and (min-width: 600px) {
	
	#fee {
		padding-bottom: 120px;
	}
	
	#fee .fee-wrap {
		padding: 60px 30px 80px;
	}
	
	/* アイコン */
	#fee h3.machine-sml::before {
		width: 45px;
		height: 45px;
	}
	
	#fee h3.machine-lrg::before {
		width: 45px;
		height: 45px;
	}
	
	#fee h3.shoes-wash::before {
		width: 53px;
		height: 53px;
	}
	
	#fee h3.shoes-dry::before {
		width: 53px;
		height: 53px;
	}
  
}

/* 768px以上 */
@media screen and (min-width: 768px) {
	
	#fee {
		padding-top: 120px;
		padding-bottom: 160px;
	}
	
	#fee h3 {
		font-size: 22px;
	}
	
	#fee .fee-wrap {
		padding: 80px 30px 80px;
	}
	
	#fee table th,
	#fee table td {
		font-size: 16px;
	}
	
	/* アイコン */
	#fee h3.machine-sml::before {
		width: 55px;
		height: 55px;
	}
	
	#fee h3.machine-lrg::before {
		width: 55px;
		height: 55px;
	}
	
	#fee h3.shoes-wash::before {
		width: 60px;
		height: 60px;
	}
	
	#fee h3.shoes-dry::before {
		width: 60px;
		height: 60px;
	}
	
	
  
}

/* 992px以上 */
@media screen and (min-width: 992px) {
	
	
	#fee .fee-wrap {
		padding: 100px 60px 80px;
		display: flex;
		-js-display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	#fee .table-content {
		width: 47%;
		margin-right: 40px;
	}
	
	#fee .table-content:not(:last-child) {
		padding-bottom: 80px;
	}
	
	#fee .table-content:nth-child(2n) {
		margin-right: 0;
	}
  
}

/* 1240px以上 */
@media screen and (min-width: 1240px) {
  
}



/************************************************** 
	
	お洗濯について
	
**************************************************/
#washing h2 {
	text-align: center;
	padding-bottom: 40px;
}

#washing h3 {
	font-size: 20px;
}

#washing .bodylead {
	padding-bottom: 80px;
}

#washing .washable {
	margin-bottom: 80px;
	padding: 50px 15px;
	border: 2px solid #39CAF7;
	border-radius: 30px;
	background: #D9F6FF;
}

#washing .washable h3 {
	padding-bottom: 50px;
	color: #39CAF7;
}

#washing .non-washable h3 {
	padding-bottom: 50px;
	color: #262626;
}

#washing .washable h3:before {
	content: "";
	display: inline-block;
	width: 90px;
	height: 60px;
	margin-right: 12px;
	background-image: url(img/icon_washable.png);
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
}

#washing .non-washable h3:before {
	content: "";
	display: inline-block;
	width: 90px;
	height: 60px;
	margin-right: 12px;
	background-image: url(img/icon_non_washable.png);
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
}

#washing table {
	width: 100%;
	border-bottom: 1px solid #a5a5a5;
}

#washing table th {
	font-weight: 600;
}

#washing table th,
#washing table td {
	padding: 15px;
	text-align: center;
	font-size: 14px;
	line-height: 1.5em;
	border: 1px solid #a5a5a5;
}

#washing table td span {
	display: block;
	padding-top: 5px;
	line-height: 1.5em;
	font-size: 12px;
}

#washing .circle img {
	width: 15px;
}

#washing .triangle img {
	width: 15px;
}

#washing .xmark img {
	width: 15px;
}


#washing .non-washable {
	margin-bottom: 60px;
	padding: 50px 15px;
	border: 2px solid #707070;
	border-radius: 30px;
	background: #F4F4F4;
}



/* 480px以下 */
@media screen and (max-width: 480px) {
 
}

/* 600px以上 */
@media screen and (min-width: 600px) {
  
}

/* 768px以上 */
@media screen and (min-width: 768px) {
	
	#washing {
		padding-bottom: 160px;
	}
	
	#washing h3 {
		font-size: 25px;
	}
	
	#washing table th,
	#washing table td {
		font-size: 16px;
	}
	
	#washing table td span {
		font-size: 13px;
	}
	
	#washing .washable h3::before {
		margin-right: 15px;
	}
	
	#washing .non-washable h3::before {
		margin-right: 15px;
	}
	
	#washing .circle img {
		width: 20px;
	}
	
	#washing .triangle img {
		width: 20px;
	}
	
	#washing .xmark img {
		width: 20px;
	}
  
}

/* 992px以上 */
@media screen and (min-width: 992px) {
	
	#washing .bodylead {
		width: 800px;
		margin: 0 auto;
	}
 
}

/* 1240px以上 */
@media screen and (min-width: 1240px) {
	
	#washing .washing-wrap {
		display: flex;
		-js-display: flex;
		justify-content: center;
	}
	
	#washing .washable {
		width: 540px;
		margin-right: 50px;
		margin-bottom: 0;
	}
	
	#washing .non-washable {
		width: 540px;
		margin-bottom: 0;
	}
 
}



/************************************************** 
	
	会社概要
	
**************************************************/
/* Footer下の余白を消す */
.content {
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 100%;
	min-height: 100vh;
}

#about {
	padding-top: 70px;
}

#about .headding {
	padding: 50px 0;
	margin-bottom: 80px;
	background: #FEE119;
}

#about .headding h2 {
	padding-bottom: 0;
	text-align: center;
}

#about dl {
	margin-bottom: 30px;
	border-bottom: 1px solid #38CAF6;
}

#about dl dt {
	padding-bottom: 20px;
	font-size: 14px;
	font-weight: 600;
}

#about dl dd {
	padding-bottom: 20px;
	line-height: 2em;
	font-size: 14px;
}

#about .wrap {
	margin-bottom: 120px;
}


/* 480px以下 */
@media screen and (max-width: 480px) {
  
}

/* 600px以上 */
@media screen and (min-width: 600px) {
  
}

/* 768px以上 */
@media screen and (min-width: 768px) {
	
	#about .headding {
		padding: 80px 0;
		margin-bottom: 160px;
	}
	
	#about .wrap {
		margin-bottom: 160px;
	}
	
	#about dl {
		display: flex;
		-js-display: flex;
		align-items: center;
	}
	
	#about dl dt {
		width: 250px;
		font-size: 16px;
	}
	
	#about dl dd {
		width: 500px;
		font-size: 16px;
	}
  
}

/* 992px以上 */
@media screen and (min-width: 992px) {
	
	#about dl {
		width: 800px;
		margin: 0 auto 30px;
	}
	
	#about dl dd {
		width: 550px;
	}
  
}

/* 1240px以上 */
@media screen and (min-width: 1240px) {
  
}




/************************************************** 
	
	Footer
	
**************************************************/
#footer {
	padding: 40px 0;
	background: #38CAF6;
}

#footer small {
	display: block;
	text-align: center;
	font-size: 12px;
	color: #fff;
}