@charset "UTF-8";body{width:100%;font-family:"Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;text-align:center;}
img{
	width:100%;
	vertical-align: top;
}
a{display:inline-block;}
a:hover,
a img:hover{filter:alpha(opacity=80);-moz-opacity:.8;opacity:.8;}
header{position:fixed;z-index:100;top:0;left:0;right:0;height:60px;background:#fff;box-shadow:0 0 2px rgba(0, 0, 0, .3);}
.header-inner{width:100%;max-width:800px;margin:0 auto;height:60px;display:flex;align-items:center;}
.header-logo{margin:0 16px;text-decoration:none;vertical-align:middle;}
.header-logo img{width:177px;}
.header-text{color:#182b3f;font-size:14px;letter-spacing:1px;vertical-align:middle;}
@media screen and (max-width:769px){header{position:fixed;z-index:100;top:0;left:0;right:0;height:60px;background:#fff;box-shadow:0 0 2px rgba(0, 0, 0, .3);}
.header-inner{width:100%;max-width:800px;margin:0 auto;height:60px;display:flex;align-items:center;}
.header-logo{margin:0 16px;text-decoration:none;vertical-align:middle;}
.header-logo img{width:150px;}
.header-text{color:#182b3f;font-size:14px;letter-spacing:1px;vertical-align:middle;line-height:1.5em;text-align:left;padding-right:10px;}
}
@media screen and (max-width:375px){.header-logo img{width:130px;}
}
@media screen and (max-width:320px){.header-logo img{width:100px;}
.header-text{font-size:12px;}
}
#wrapper{max-width:800px;margin:60px auto 0;background:#fff;box-shadow:0 0 4px 4px rgba(0, 0, 0, .1);text-align: center;line-height: 1.3;color: #332d2b;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}

  #side_bnr {
    position: fixed;
    right: 0;
    top: 25%;
    z-index: 999;
	  display: flex;
	  flex-direction: column;
  }
  #side_bnr button {
    background: none;
	  padding: 0;
	  margin-bottom: 8%;
  }
  .side_bnr_img {
    max-width: 150px;
	}
#wrapper h2 {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho", serif;
	font-size: 53px;
	font-weight: bold;
	letter-spacing: 0.15em;	
	line-height: 1.5;
}
.sub_ttl {
	max-width: 214px;
	margin: 10% 0;
}
#clm01 .condition {
	background: url("../img/mat_img03.jpg") no-repeat;
	background-size: 100%;
	padding: 15% 0 7%;
	margin: 10% 0;
	font-size: 39px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho", serif;
}
#clm01 .condition p,#clm01 .condition p.note,#clm02 .condition p {
	color: #fff;
}
#clm01 .condition h3 img {
	max-width: 613px;
	margin: 5% 0 13%;
}
#clm01 .condition p.note {
	font-size: 15px;
	text-align: right;
	margin: 0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	width: 84%;
}
#clm02 .condition {
	background: url("../img/mat_img06.jpg") no-repeat;
	background-size: 100%;
	padding: 23% 0 10%;
	margin: 10% 0;
	font-size: 39px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho", serif;
}
#clm02 .condition h3 img {
	max-width: 552px;
	margin: 10% 0 5%;
}
#clm03 {
	margin: 0 8% 10%;
}
#clm03 h2 {
	font-size: 40px;
	margin: 5% 0;
}
#clm03 h3 {
	margin: 10% 15%;
}
#clm03 ul li {
	margin: 5% 2%;
}
#clm04 {
	background: url("../img/mat_img21.jpg") no-repeat top center;
	background-size: 100%;
	padding: 5%;
}
#clm04 h2 {
	margin: 8% auto;
	font-size: 56px;
}
#clm04 h2 span {
	background: url("../img/mat_img77.png") repeat-x center;
	padding: 1% 1% 0;
}
#clm04 img.troble {
	width: 90%;
}
#clm04 .futan {
	margin: 13% 0 5%;
	position: relative;
}
#clm04 .futan p {
	position: absolute;
	top:0;
	right: 4%;
	left: 45%;
	text-align: left;
	font-size: 28px;
	line-height: 1.6;
	letter-spacing: 0.2em;
}
#clm04 img.question {
	width: 70%;
	margin: 10% 0;
}
#clm04 img.hints {
	width: 90%;
	margin: 5% 0;
}
#clm05 {
	margin: 10% 5%;
}
#clm05 p {
	font-size: 28px;
	line-height: 2; 
}
#clm05 p span.underline,#clm04 .futan p span {
	font-weight: bold;
	border-bottom: 2px solid #332d2b;
}
#clm05 .balloon {
	position: relative;
	margin: 5% 0;
}
#clm05 .balloon img {
	width: 78%;
	margin: 3% 0;
}
#clm05 .balloon p {
	position: absolute;
	top: 22%;
	left: 0;
	right: 0;
	margin: 0 auto;
	color: #00808f;
	font-size: 35px;
	line-height: 1.5;
}
#clm05 img.graph {
	width: 63%;
	margin: 5% 0 18%;
}
#clm05 .salon {
	position: relative;
}
#clm05 .salon p {
	position: absolute;
	top:5%;
	left: 10%;
	font-size: 35px;
	text-align: left;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho", serif;
	line-height: 1.8;
}
#clm05 .salon p span {
	font-weight: bold;
}
#clm06 {
	background: #efece3;
}
.clm06_inner {
	padding: 0 5% 1%;
}
#clm06 h2 {
	letter-spacing: 0.1em;
}
#clm06 .kiseki {
	position: relative;
	padding: 13% 0;
}
#clm06 .kiseki p {
	position: absolute;
	top: 20%;
	left: 13%;
	right: 10%;
	margin: 0 auto;
	text-align: left;
	font-size: 28px;
	line-height: 1.9;
	letter-spacing: 0.15em;
}
#clm06 .kiseki p span, #clm08 .magic_box p span{
	font-weight: bold;
}
#clm06 .kiseki p span.underline, #clm08 .magic_box p span.underline {
	border-bottom: 2px solid #332d2b;
}
#clm06 .zone {
	position: relative;
	margin: 15% 0 5%;
}
#clm06 .zone h3 {
	position: absolute;
	font-size: 42px;
	top: 12%;
	left: 0;
	right: 0;
	margin: 0 auto;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho", serif;
	line-height: 1.8;
	font-weight: bold;
}
#clm06 .zone h3 span,#clm09 .review_box p span {
	background: url("../img/mat_img34.png") repeat-x center;
	padding: 1% 1% 0;
}
#clm06 .zone p {
	position: absolute;
	bottom: 6%;
	left: 10%;
	right: 10%;
	font-size: 28px;
	text-align: left;
	line-height: 2;
	letter-spacing: 0.1em;
}
#clm06 .zone ul {
	position: absolute;
	top: 30%;
	left: 6%;
	right: 6%;
	display: flex;
	justify-content: space-between;
	font-size: 21px;
}
#clm06 .zone ul li {
	width: 30%;
}
#clm06 .zone p.basic {
	text-align: center;
}
#clm06 .zone p.basic span,#clm07 .ordermade p span{
	font-weight: bold;
	border-bottom: 2px solid #332d2b;
}
#clm06 .head_position h4 {
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	margin: 0 auto;
	font-size: 32px;
}
#clm06 .head_position p {
	position: absolute;
	width: 55%;
	top: 25%;
	left: 45%;
	font-size: 23px;
}
#clm07 .ordermade {
	margin: 10% 15% 15%;
}
#clm07 .ordermade h3 {
	background: #00808f;
	border-radius: 26px;
	color: #fff;
	font-size: 31px;
	padding: 3% 0 2%;
}
#clm07 .positioning {
	margin: 0 6%;
}
#clm07 .positioning img.sub_ttl {
	max-width: 292px;
	margin: 10% 0 3%;
}
#clm07 .ordermade .positioning h4 {
	font-size: 30px;
	margin: 0 0 5%;
}
#clm07 .ordermade h4 {
	margin: 13% 10% 5%;
}
#clm07 .ordermade p, #clm08 .magic_box p,#clm09 .review_box p {
	font-size: 30px;
	line-height: 2;
	text-align: left;
}
#clm07 .ordermade .conventional h3 {
	background: #919191;
	border-radius: 26px;
	color: #fff;
	font-size: 31px;
	padding: 3% 0 2%;
	margin: 15% 0 7%;
}
#clm07 .ordermade .conventional h4 {
	margin: 13% 15% 10%;
}
#clm08 {
	background: #efece3;
}
.clm08_inner {
	padding: 3% 5%;
}
#clm08 .clm08_inner h2{
	letter-spacing: 0.05em;
	margin-bottom: 10%;
}
#clm08 .magic_box {
	background: #fff;
	margin: 8% 0;
}
#clm08 .magic_box_inner {
	padding: 0 8% 15%;
}
#clm08 .magic_box_inner2 {
	padding: 0 8% 65%;
}
#clm08 .magic_box_inner p {
	padding: 10% 0 0;
}
#clm08 .magic_box_inner2 p {
	padding: 10% 0 0;
}
#clm08 .magic_box_inner img {
	margin: 10% 0 0;
}
#clm08 .magic_box_inner p.note {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	padding: 0;
}
#clm08 .magic_box_inner2 p.note2 {
	line-height: 1.5;
	padding: 0;
}
#clm08 .magic_box_inner2 p.note2 span {
	font-size: 25px;
	font-weight: normal;
}
.move {
	position:relative;
	width:100%;
}
.youtube {
	position:absolute;
	width:100%;
	padding-top:56.25%;
}
.youtube iframe {
	position:absolute;
	top:0;
	right:0;
	left: 0;
	width: 100%;
	height:110%;
	margin: 5% auto;
	border: none;
}
#clm09 {
	margin: 8% 0;
}
#clm09 h3 {
	margin: 13% 16% 0;
}
#clm09 img.sub_ttl {
	margin: 10% 0 5%;
}
#clm09 .review_box {
	display: flex;
	justify-content: space-between;
	margin: 0 7%;
}
#clm09 .review_box img.img_left {
	max-width: 282px;
	margin-right: 5%;
	height: 100%;
}
#clm09 .review_box img.img_right {
	max-width: 282px;
	margin-left: 5%;
	height: 100%;
}
#clm09 .review_box p {
	margin: 5% 0 0;
	font-size: 28px;
	width: 70%;
}
#clm10 {
	background: #00808f;
	padding: 5%;
}
#clm10 .merit_inner {
	border: 3px solid #fff;
}
#clm10 .merit_inner h2 {
	padding: 7% 15% 5%;
	border-bottom: 3px solid #fff;
}
#clm10 .merit_box {
	display: flex;
	justify-content: space-between;
	margin: 7% 5%;
	color: #fff;
	text-align: left;
	font-size: 26px;
	line-height: 1.9;
}
#clm10 .merit_box .merit_img{
	width: 20%;
	padding-right: 3%;
}
#clm10 .merit_box .merit_txt {
	width: 75%;
}
#clm10 .merit_box .merit_txt h3{
	width: 42.7%;
}
#clm11 h2 {
	font-size: 40px;
	margin: 15% 0;
}
#clm11 h3 {
	font-size: 40px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho", serif;
	line-height: 1.8;
	font-weight: bold;
	margin: 15% 0 3%;
}
#clm11 p {
	font-size: 34px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho", serif;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 3%;
}
#clm11 p span {
	font-size: 14px;
}
#clm11 p.note {
	font-size: 14px;
	text-align: right;
	margin: 0 auto 11%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-weight: bold;
	width: 79%;
}
#clm11 .price {
	margin: 10% 0 0;
	width: 80%;
}
#clm11 p.note02 {
	font-size: 14px;
	text-align: left;
	width: 46%;
	margin: 0 auto 10%;
	font-weight: normal;
}
#clm11 h4 {
	font-size: 36px;
	margin: 0 0 5%;
}
#clm11 table {
	width: 90%;
	margin: 0 auto;
	font-size: 22px;
	line-height: 2;
}
#clm11 table th {
	width: 30%;
	background: #eeeeee;
	border: 2px solid #cccccc;
	text-align: center;
	padding: 3% 0 2%;
}
#clm11 table td {
	width: 70%;
	border: 2px solid #cccccc;
	text-align: left;
	padding: 3% 0 2% 2%;
}

.btn_box img.btn{margin:10% auto 5%;width:100%;}
button:hover {
  cursor: pointer;
  opacity: .8;
}

.footer {margin-top: 10%;}
@media screen and (max-width:769px){body{width:100%;background-color:#e4f4f5;text-align:center;}
img{
	width:100%;
	vertical-align: top;
}
div{line-height:0;}
#wrapper{width:100%;margin:60px auto 0;background:#fff;}
	div {
		line-height: 1.3;
	}
	#clm01 .condition p.note {
		width: 88%;
	}
	#clm05 .salon p {
		font-size: 33px;
		left: 11%;
	}
	#clm08 .magic_box_inner p.note {
		font-size: 14px;
	}
	#clm11 p.note {
		width: 81%;
	}
}
@media screen and (max-width:414px){
	.side_bnr_img {
		max-width: 100px;
	}
	.sub_ttl {
		width: 28%;
	}
	#wrapper h2 {
		font-size: 28px;
	}
	#clm01 .condition,#clm02 .condition,#clm11 h4 {
		font-size: 20px;
	}
	#clm01 .condition h3 img,#clm02 .condition h3 img {
		width: 75%;
	}
	#clm01 .condition p.note,#clm08 .magic_box_inner p.note,#clm11 p.note  {
		font-size: 8px;
	}
	#clm03 h2 {
		font-size: 22px;
	}
	#clm04 h2 {
		font-size: 32px;
	}
	#clm04 h2 span {
		padding: 0;
	}
	#clm04 .futan p {
		font-size: 15px;
	}
	#clm05 .balloon p,#clm05 .salon p,#clm07 .ordermade .positioning h4,#clm07 .ordermade p, #clm08 .magic_box p,#clm11 p {
		font-size: 18px;
	}
	#clm06 .kiseki p {
		top: 18%;
		font-size: 16px;
		line-height: 1.5;
	}
	#clm06 .zone h3,#clm11 h2,#clm11 h3 {
		font-size: 23px;
	}
	#clm06 .zone h3 span, #clm09 .review_box p span {
		padding: 0 1% 0;
	}
	#clm06 .zone ul {
		font-size: 12px;
	}
	#clm06 .zone p,#clm10 .merit_box,#clm05 p {
		font-size: 16px;
	}
	#clm06 .head_position h4 {
	font-size: 18px;
	}
	#clm06 .head_position p {
		font-size: 12px;
	}
	#clm07 .ordermade h3,#clm07 .ordermade .conventional h3 {
		font-size: 16px;
		border-radius: 13px;
	}
	#clm07 .positioning img.sub_ttl {
		width: 55%;
	}
	#clm08 .magic_box_inner2 p.note2 span,#clm11 table {
		font-size: 13px;
	}
	#clm09 .review_box img.img_left,#clm09 .review_box img.img_right {
		width: 40%;
	}
	#clm09 .review_box p {
		font-size: 14px;
	}
	#clm11 p.note02 {
		width: 65%;
		font-size: 10px;
	}
	.btn_box img.btn{margin:10% auto 5%;width:80%;}
}
@media screen and (max-width:375px){
	#wrapper h2 {
		font-size: 24px;
	}
	#clm04 h2 {
		font-size: 28px;
	}
	#clm05 .salon p {
		font-size: 16px;
	}
	#clm06 .kiseki p {
		left: 10%;
		right: 7%;
	}
	#clm04 .futan p,#clm06 .zone p, #clm10 .merit_box {
		font-size: 14px;
	}
	#clm06 .head_position p {
		font-size: 11px;
	}
	#clm11 p.note02 {
		width: 70%;
	}
}
@media screen and (max-width:320px){ 
	#wrapper h2,	#clm04 h2 {
		font-size: 22px;
	}
	#clm01 .condition, #clm02 .condition, #clm11 h4,#clm05 .balloon p, #clm07 .ordermade .positioning h4, #clm06 .zone p, #clm07 .ordermade p, #clm08 .magic_box p, #clm11 p {
		font-size: 16px;
	}
	#clm03 h2,#clm06 .zone h3, #clm11 h2, #clm11 h3 {
		font-size: 18px;
	}
	#clm05 .balloon p,#clm05 .salon p {
		font-size: 14px;
	}
	#clm06 .kiseki p,#clm05 p {
		font-size: 13px;
	}
	#clm04 .futan p,#clm06 .zone p, #clm10 .merit_box,#clm11 table {
		font-size: 12px;
	}
	#clm06 .zone ul {
		font-size: 10px;
	}
	#clm06 .head_position h4 {
	font-size: 16px;
	}
	#clm06 .head_position p {
		font-size: 10px;
		white-space: nowrap;
		left: 43%;
	}
	#clm09 .review_box p {
		line-height: 1.4;
	}
	#clm11 p.note02 {
		width: 83%;
	}
}