@charset "utf-8";

.nm{ font-size: 12px; line-height: 20px; }
.ns{ font-size: 10px; line-height: 14px; }
.spt5{ margin-top: 5px; }
.spt10{ margin-top: 10px; }
.spt15{ margin-top: 15px; }
.spt20{ margin-top: 20px; }
.spt25{ margin-top: 25px; }
.spt30{ margin-top: 30px; }
.spt40{ margin-top: 40px; }
.spt50{ margin-top: 50px; }
.spt60{ margin-top: 60px; }
.spt70{ margin-top: 70px; }
.spt80{ margin-top: 80px; }
.spt90{ margin-top: 90px; }
.spt100{ margin-top: 100px; }
.spt110{ margin-top: 110px; }
.spt120{ margin-top: 120px; }
.spt130{ margin-top: 130px; }
.spt140{ margin-top: 140px; }
.spt150{ margin-top: 150px; }
.invalid-line-height{ line-height: 0; }
.ovf-h{ overflow: hidden; }
.full-width{ width: 100%; }
.txt-left{ text-align: left; }
.txt-center{ text-align: center; }
.txt-right{ text-align: right; }
.txt-indent{ text-indent: -1em; padding-left: 1em; display: block; }
.txt-hide{ text-indent: 101%; display: block; white-space: nowrap; overflow:hidden; }
.inline-block{ display: inline-block; }
.clearfix:after{ display: block; clear: both; height: 0; visibility: hidden; content: ""; }
.sw-elm .pc,.sw-elm .sp{ display: none; }
.sw-elm .pc{ display: block; }
.sw-elm img.pc{ display: inline; }
@media screen and (max-width: 640px){ /*1112px以下のcss*/
	.sp-none{ display: none; }
	.sw-elm .pc,.sw-elm img.pc{ display: none; }
	.sw-elm .sp{ display: block; }
	.sw-elm img.sp{ display: inline; }
	.spt5.-liquid-base{ margin-top: 1.56%; }
	.spt10.-liquid-base{ margin-top: 3.13%; }
	.spt15.-liquid-base{ margin-top: 4.69%; }
	.spt20.-liquid-base{ margin-top: 6.25%; }
	.spt25.-liquid-base{ margin-top: 7.81%; }
	.spt30.-liquid-base{ margin-top: 9.38%; }
	.spt40.-liquid-base{ margin-top: 12.5%; }
	.spt50.-liquid-base{ margin-top: 15.63%; }
	.spt60.-liquid-base{ margin-top: 18.75%; }
	.spt70.-liquid-base{ margin-top: 21.88%; }
	.spt80.-liquid-base{ margin-top: 25%; }
	.spt90.-liquid-base{ margin-top: 28.13%; }
	.spt100.-liquid-base{ margin-top: 31.25%; }
	.spt110.-liquid-base{ margin-top: 34.38%; }
	.spt120.-liquid-base{ margin-top: 37.5%; }
	.spt130.-liquid-base{ margin-top: 40.63%; }
	.spt140.-liquid-base{ margin-top: 43.75%; }
	.spt150.-liquid-base{ margin-top: 46.88%; }
	.full-width.-liquid-base{ width: auto; }
	.txt-center.-liquid-base{ text-align: left; }
	.txt-right.-liquid-base{ text-align: left; }
}
.lp-header {
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	text-align: center;
}
.lp-footer {
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	padding-bottom: 5%;
}
#main img {
	width: 100%;
}
.fontdown {
	font-size: 80%;
	line-height: 1.2em;
	font-weight: normal;
}
.fontdown-b {
	font-size: 80%;
	line-height: 1.2em;
	font-weight: bold;
}
#main{
}
#e-coto {
	background-color: #F7F7F2;
	padding-bottom: 5%;
}
#main .lp-header .ttl {
	padding-top: 5%;
}
#main .lp-header .mainttl {
	margin-top: 8%;
	margin-bottom: 8%;
}
#main .lp-header .copy {
	margin-bottom: 4%;
}
#main .lp-header .copytxt {
	color: #563320;
	font-size: 20px;
	line-height: 1.7em;
	font-weight: bold;
	text-align: center;
}
.lp-header .abeno-ev {
	border-top: 1px solid #644731;
	border-bottom: 1px solid #644731;
	margin-top: 4%;
	padding-top: 4%;
}
#main .content  {
	max-width: 900px;
	width: 70%;
	margin: 0 auto;
}
.content .title  {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
.content .copy  {
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	margin-top: 3%;
}
.content .wh-box  {
	background-color: #FFFFFF;
	border-radius: 30px;
	margin-top: 5%;
	padding-top: 3%;
	padding-bottom: 3%;
}
.section01 .content .wh-box .ttl {
	color: #5CB4A9;
	text-align: center;
	font-size: 30px;
	line-height: 1.2em;
	font-weight: bold;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
}
.section02 .content .wh-box .ttl {
	color: #F39601;
	text-align: center;
	font-size: 30px;
	line-height: 1.2em;
	font-weight: bold;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
}
.section03 .content .wh-box .ttl {
	color: #E95398;
	text-align: center;
	font-size: 30px;
	line-height: 1.2em;
	font-weight: bold;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
}
.content .wh-box .boxinner  {
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	text-align: center;
}
.wh-box .boxinner .type00 {
	color: #563320;
	font-size: 14px;
	line-height: 1.7em;
	width: 100%;
	margin-top: 3%;
	font-weight: bold;
}
.wh-box .boxinner .txtbox {
	color: #563320;
	font-size: 14px;
	line-height: 1.7em;
	text-align: left;
	font-weight: bold;
}
.wh-box .boxinner .txtbox strong {
	font-size: 115%;
}
.wh-box .boxinner .photo {
}
.photo.wrap-g {
	border: 4px solid #67BCB2;
}
.photo.wrap-o {
	border: 4px solid #F39601;
}
.photo.wrap-p {
	border: 4px solid #E95398;
}
.wh-box .boxinner .type01 {
	display: inline-block;
	vertical-align: top;
	margin-top: 3%;
	width: 48%;
}
.wh-box .boxinner .type01:nth-child(2n)  {
	margin-right: 2%;
}
/*.wh-box .boxinner .type01 + .type01 {
	margin-left: 2%;
}*/
.wh-box .boxinner .type02    {
	display: inline-block;
	vertical-align: top;
	margin-top: 3%;
	width: 48%;
	margin-bottom: 3%;
}
.wh-box .boxinner .type02:nth-child(2n)   {
	margin-right: 2%;
}
#main .another-navi  {
	margin-top: 8%;
	margin-left: auto;
	margin-right: auto;
}
.another-navi ul {
	text-align: center;
	list-style-type: none;
}
.another-navi ul li {
	width: 32%;
	display: inline-block;
}
.another-navi ul li:nth-child(2) {
	margin-left: 1%;
	margin-right: 1%;
}
.indent {
	text-indent: -1em;
	padding-left: 1em;
	line-height: 1.7em;
	color: #563320;
}
.txt-red {
	color: #EA0003;
}
.txt {
	color: #563320;
	font-size: 14px;
	line-height: 1.7em;
	text-align: center;
	font-weight: bold;
}
.copy-txt {
	color: #563320;
	font-size: 16px;
	line-height: 1.7em;
	text-align: center;
	font-weight: bold;
	margin-top: 3%;
}
.btn-g {
	background-color: #5CB4A9;
}
.btn-o {
	background-color: #F39601;
}
.btn-p {
	background-color: #D15D9E;
}
.btn-b {
	background-color: #593E2B;
	margin-bottom: 4%;
}
.btn-b strong {
	font-size: 120%;
}
.button {
	align-items: center;
	justify-content: center;
	line-height: 1.5em;
	text-decoration: none;
	color: #ffffff;
	font-size: 14px;
	border-radius: 80px;
	font-weight: bold;
	border: 0px solid #333333;
	position: relative;
	transition: 0.3s;
	padding-left: 10%;
	padding-right: 13%;
	padding-top: 2%;
	padding-bottom: 2%;
	display: inline-block;
	min-width: 200px;
	text-align: center;
}

.button::before, .button::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  transform-origin: 100% 50%;
  height: 2px;
  width: 16px;
  background-color: #fff;
  border-radius: 2px;
  will-change: transform;
  transition: .3s;
}

.button::before {
  transform: translateY(-50%) rotate(50deg);
}

.button::after {
  transform: translateY(-50%) rotate(-50deg);
}

.button:hover {
  opacity: 0.7; text-decoration: none;
}

.button:hover::before, .button:hover::after {
  opacity: 0.7; text-decoration: none;
}
/* CSS Document */





@media screen and (max-width: 640px){ /*1112px以下のcss*/
.lp-header {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}
#main .lp-header .copytxt {
	color: #563320;
	font-size: 12px;
	line-height: 1.7em;
	font-weight: bold;
	text-align: center;
}
.lp-footer {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	padding-bottom: 5%;
}
#main .content  {
	margin: auto;
	width: 90%;
}
.content .title  {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.content .copy  {
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	margin-top: 3%;
}
.content .wh-box  {
	background-color: #FFFFFF;
	border-radius: 15px;
	margin-top: 5%;
	padding-top: 3%;
	padding-bottom: 3%;
}
.section01 .content .wh-box .ttl {
	color: #5CB4A9;
	text-align: center;
	font-size: 22px;
	line-height: 1.2em;
	font-weight: bold;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
}
.section02 .content .wh-box .ttl {
	color: #F39601;
	text-align: center;
	font-size: 22px;
	line-height: 1.2em;
	font-weight: bold;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
}
.section03 .content .wh-box .ttl {
	color: #E95398;
	text-align: center;
	font-size: 22px;
	line-height: 1.2em;
	font-weight: bold;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
}
.wh-box .boxinner .txtbox {
	color: #563320;
	font-size: 12px;
	line-height: 1.7em;
	text-align: left;
	font-weight: bold;
}
.wh-box .boxinner .txtbox strong {
	font-size: 110%;
}
.content .wh-box .boxinner  {
	margin-left: auto;
	margin-right: auto;
	width: 85%;
	text-align: center;
}
.wh-box .boxinner .type01 {
	display: inline-block;
	vertical-align: top;
	margin-top: 3%;
	width: 100%;
}
.wh-box .boxinner .type01:nth-child(2n)  {
	margin-right: 2%;
}
/*.wh-box .boxinner .type01 + .type01 {
	margin-left: 2%;
}*/
.wh-box .boxinner .type02    {
	display: inline-block;
	vertical-align: top;
	margin-top: 3%;
	width: 100%;
	margin-bottom: 3%;
}
.wh-box .boxinner .type02:nth-child(2n)   {
	margin-right: 2%;
}
#main .another-navi  {
	margin-top: 8%;
	margin-left: auto;
	margin-right: auto;
}
.another-navi ul {
	text-align: center;
	list-style-type: none;
	padding-top: 10%;
}
.another-navi ul li {
	width: 55%;
	display: inline-block;
}
.another-navi ul li:nth-child(2) {
	margin-top: 2%;
	margin-bottom: 2%;
}
.txt {
	color: #563320;
	font-size: 12px;
	line-height: 1.7em;
	text-align: center;
	font-weight: bold;
}
.copy-txt {
	color: #563320;
	font-size: 12px;
	line-height: 1.7em;
	text-align: center;
	font-weight: bold;
	margin-top: 3%;
}
	.button {
	align-items: center;
	justify-content: center;
	line-height: 1.5em;
	text-decoration: none;
	color: #ffffff;
	font-size: 12px;
	border-radius: 80px;
	font-weight: bold;
	border: 0px solid #333333;
	position: relative;
	transition: 0.3s;
	padding-left: 10%;
	padding-right: 13%;
	padding-top: 3%;
	padding-bottom: 3%;
	display: inline-block;
	min-width: 200px;
	text-align: center;
}

.button::before, .button::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  transform-origin: 100% 50%;
  height: 2px;
  width: 16px;
  background-color: #fff;
  border-radius: 2px;
  will-change: transform;
  transition: .3s;
}

.button::before {
  transform: translateY(-50%) rotate(50deg);
}

.button::after {
  transform: translateY(-50%) rotate(-50deg);
}
}