/************************************/
/* Beauty Life～健やかな身体を作る新習慣～ */
/************************************/

/* POINT 吹き出し */
.speechbubble {
  position: relative;
  display: inline-block;
  width: 85px;
  height: 85px;
  margin-right: 20px;
  padding: 15px;
  border-radius: 9999px;
  background-color: #F8C500;
  text-align: center;
  align-content: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: #000000;
}
.speechbubble::after {
  content: "";
  position: absolute;
  top: 60%;
  right: 6px;
  border-style: solid;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #F8C500;
  translate: 100% -40%;
  transform: skew(0, 20deg);
  transform-origin: left;
}
.speechbubble span {
  font-size: 28px;
}
/* POINT 吹き出し ここまで */


/* 左上タイトル付きボックス */
.cstm-box-title-topleft {
  --box-color: #F08437; /* 基本色 */
  margin: 2em auto; /* 外側余白 */
  position: relative; /* タイトル基準 */
  border: 2px solid var(--box-color); /* 枠線 */
  max-width: 800px; /* 最大幅 */
}
.cstm-box-title-topleft .box-title {
  background: var(--box-color); /* 背景 */
  color: #fff; /* 文字色 */
  padding: 0.2em 1em; /* 内側余白 */
  position: absolute; /* 左上固定 */
  top: -1.0em; left: 1.5em; /* 位置 */
  display: inline-block; /* 内容幅 */
  font-size: 1.0em; /* サイズ */
  border-radius: 5px; /* 角丸 */
  max-width: calc(100% - 2em); /* 幅調整 */
  white-space: nowrap; /* 折返しなし */
  overflow: hidden; text-overflow: ellipsis; /* 省略 */
  display: flex;
  align-items: center;
}
.cstm-box-title-topleft .box-title span {
  font-size: 1.5em;
}
.cstm-box-title-topleft .box-content {
  padding: 2.5em 2em 2em; /* タイトル分の余白 */
}
/* 段落の余白なし */
.cstm-box-title-topleft p { margin: 0; }
/* 左上タイトル付きボックス ここまで */


/* タイトル リボン背景 */
.title-ribbon {
  position: relative;
  display: inline-block;
  height: 54px;
  line-height: 54px;
  padding: 0 40px;
  background: linear-gradient(#F2D9B6 0 20%, #EEB267 80%);
}
.title-ribbon::before,
.title-ribbon::after {
  position: absolute;
  top: 0;
  width: 0px;
  height: 0px;
  border-color: transparent #fff;
  border-style: solid;
  content: '';
}
.title-ribbon::before {
  left: 0;
  border-width: 27px 0px 27px 10px;
}
.title-ribbon::after {
  right: 0;
  border-width: 27px 10px 27px 0px;
}
/* タイトル リボン背景 ここまで */


/* タイトル リボンテキスト */
.title-ribbon p {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 22px;
}
.title-ribbon p span {
  font-weight: 700;
  transform: rotate(0.05deg);
  font-size: 19px;
}
/* タイトル リボンテキスト ここまで */


/* 問い合わせなどのボタン */
.btn-outline-custom {background-color:#ffffff; border-color:#F08437; color:#F08437;}
.btn-outline-custom:hover {background-color:#F08437; color:#ffffff;}
.btn-outline-custom:active {transform: translateY(2px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}
.btn-outline-custom:focus {outline: none; box-shadow: 0 0 0 4px rgba(112, 147, 151, 0.2);}
/* 問い合わせなどのボタン ここまで */


@media (max-width: 768px) {
	.speechbubble {
	  width: 75px;
	  height: 75px;
	  font-size: 15px;
	  line-height: 1.0;
	}
	.speechbubble span {
	  font-size: 26px;
	}

	.cstm-box-title-topleft .box-content {
	  padding: 2.5em 1.5em 2em;
	}
}



/*********************************/
/* 共通アイテム（カスタマイズして使用） */
/*********************************/

span.badge {margin-right:0.5em;}

ul.tenlist {
  list-style: none;
  padding-left: 1em;
  text-indent:-1em;
}
ul.tenlist > li:before{
  content:"・";
  color: black;
}

ul.komelist {
  list-style: none;
  padding-left: 1em;
  text-indent:-1em;
}
ul.komelist > li:before{
  content:"※";
  color: black;
}

ul.marulist {
  list-style: none;
  padding-left: 1em;
  text-indent:-1em;
}
ul.marulist > li:before{
  content:"●";
  color: black;
}

ul.squarelist {
  list-style: none;
  padding-left: 1em;
  text-indent:-1em;
}
ul.squarelist > li:before{
  content:"■";
  color: black;
}

span.text-hanging-2em {
  display: inline-block;
  padding-left: 2em;
  text-indent: -2em;
}


@media (max-width: 768px) {
	img.photo80 {
	  width: 80%;
	  display: block;
	  margin: 0 auto;
	}
	img.photo70 {
	  width: 70%;
	  display: block;
	  margin: 0 auto;
	}
	img.photo60 {
	  width: 60%;
	  display: block;
	  margin: 0 auto;
	}
}