@charset "utf-8";
/*****************************************************
about.css
******************************************************/
@media only screen and (min-width: 641px) {
/*menu*/
.about #siteHeader .siteUtility .siteLinks #menu_about {
  background:url(/ph/coccoapo/common/img/br_gnavi_on.png) no-repeat 2px bottom;
}

}

.index .txLead {
  font-size:18px;
  line-height:30px;
  margin-top:15px;
}
.indexTitle p {
  margin-top:3px;
}

/*headLine02*/
.method .headLine02 {
  padding-top:20px;
}
.history .headLine02 {
  margin-top:40px;
}
/*headLine03*/
.about .headLine03 {
	background-color: #dacede;
}
.metabolism .headLine03 {
  background-color: #ffeda5;
}
/*headLine04*/
.about .headLine04 {
  background: url(/ph/coccoapo/common/img/ico_circle_purple.png) no-repeat left center;
}
.method .headLine04 {
  margin-top:25px;
}
.metabolism .headLine04 {
  background: url(/ph/coccoapo/common/img/ico_circle_orange.png) no-repeat left center;
}
.method section {
  margin: 0 0 35px;
}
.history section {
  margin: 0 0 40px;
}

#aboutTitle {
	padding:50px 0 0;
	background:url(/ph/coccoapo/about/img/bg_title.jpg) no-repeat center 0;
	background-size:cover;
}

.index #mainContents {
	background:#f2f2f2;
}

/*basic info list*/
#basic-info-list {
	padding:45px 0 0;
}
#basic-info-list li {
  width:240px;
	margin:0 0 0 13px;
	float: left;
}
#basic-info-list li:first-child {
	margin:0;
}
#basic-info-list li a {
	display: block;
  text-decoration:none;
}
#basic-info-list li a p {
  color:#333;
  font-size:16px;
  line-height:26px;
  letter-spacing:-0.05em;
  padding:15px 2px 0;
  margin:0;
  text-decoration:none;
  cursor: pointer;
}

#chishiki a {
  text-decoration: none;
  height:216px;
  padding:0 15px 0 20px;
  background:#e5e5e3;
  position: relative;
  display: block;
  box-sizing: border-box;
}
#chishiki a .image {
  position: absolute;
  top:0;
  right:0;
  z-index:1;
}
#chishiki a h2 {
  color:#555;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size:26px;
  line-height:30px;
  font-weight:200;
  padding:0;
  margin:0 0 15px;
}
#chishiki a h2 span {
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック","MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight:200;
  font-size:50px;
  line-height:50px;
  letter-spacing:0.2em;
  margin:0 0 0 20px;
  display:inline-block;
  position:relative;
  top:10px;
}
#chishiki a h3 {
  color:#333;
  font-size:16px;
  line-height:26px;
  font-weight:bold;
  padding:0;
  margin:0 0 5px;
}
#chishiki a p {
  color:#333;
  cursor: pointer;
  font-size:14px;
  line-height:20px;
  letter-spacing:-0.08em;
  margin:0;
  text-shadow:2px 2px 2px #fff;
  position:relative;
  z-index:3;
}

/*lineup**/
#lineup-list {
  margin:0 0 40px;
	padding:30px 0 0;
	clear: both;
}
#lineup-list h5 {
	color:#000;
	font-size:22px;
	font-weight:bold;
	line-height:1;
	text-align: center;
	padding:15px 0;
	margin:0 0 12px;
	border:solid 1px #b6b2ae;
}
#lineup-list ul li {
	width:235px;
	margin:0 0 0 16px;
	float: left;
}
#lineup-list ul li a {
  text-align: center;
  text-decoration: none;
  height: auto;
  padding: 30px 0 0;
  display: block;
  background: none;
  transition: all ease 0.3s;
  box-sizing: border-box;
}
#lineup-list ul li:first-child {
  margin:0 0 0 8px;
}
#lineup-list {
  padding: 0;
}
#lineup-list ul li a:hover {
	opacity: 0.6;
}
#lineup-list ul li a img {
	margin:0 auto;
	display: block;
}
#lineup-list ul li a p {
	color:#000;
	font-size:20px;
	line-height:1;
	text-decoration:none;
	padding:50px 0 0;
	margin:0;
}
#lineup-list ul li a .image img {
	width:auto;
	height: auto;
}
#lineup-list ul li a .text p {
	padding:31px 0 49px;
}
#lineup-list .text {
	margin-top: 16px;
}
#lineup-list .toki .text {
	margin-top: -5px;
}

.method .colGrid {
  margin-bottom:-30px;
}
.method .img {
  margin-top:20px;
}
.method .img figure a {
  display: block;
}

/*metabolism*/
.metabolism section:first-child {
  margin:30px 0 60px;
}
.leadBox {
  padding:18px 20px 18px 40px;
  position: relative;
  border:solid 18px #f2f2f2;
  background:#fff;
}
.leadBox .image {
  margin:0 0 0 30px;
  float:right;
}
.leadBox h3 {
  font-size:18px;
  line-height:26px;
  font-weight:bold;
  padding:20px 0 0;
  margin:0 0 15px;
}
.leadBox p {
  font-size:15px;
  line-height:30px;
  letter-spacing:-0.03em;
  margin:0;
}
.grayBox {
  width:660px;
  padding:25px 40px 10px;
  margin:30px auto 0;
  background:#f2f2f2;
  box-sizing: border-box;
}
.grayBox h4 {
  font-size:18px;
  line-height:26px;
  font-weight:bold;
  margin:0 0 5px;
}
.grayBox p {
  margin:0 0 15px;
}
ul.numList li {
  font-size:16px;
  line-height:24px;
  padding:0 0 5px 1em;
  position: relative;
}
ul.numList li span {
  left:0;
  position: absolute;
}

#energy {
  margin:50px 0 0 !important;
}
#energy .imgBox {
  width:756px;
  margin:70px auto 0;
  padding:0 0 85px;
  position:relative;
  overflow: visible;
}
#energy .imgBox .image {
  width:250px;
  margin:0 auto;
}
#energy .imgBox h5 {
  color:#fff;
  width:210px;
  height:55px;
  padding:0 0 2px;
  font-size:24px;
  line-height:55px;
  text-align: center;
  border-radius:6px;
  position:relative;
  overflow:visible;
  box-sizing: border-box;
}
#energy .imgBox p {
  font-size:15px;
  line-height:25px;
  margin:10px 0 0;
  letter-spacing:-0.05em;
}
#energy .imgBox .energyBlue, #energy .imgBox .energyOrange, #energy .imgBox .energyPink {
  width:240px;
  position:absolute;
  box-sizing: border-box;
}
#energy .imgBox .energyBlue {
  padding:0 0 0 30px;
  top:48px;
  right:0;
}
#energy .imgBox .energyBlue h5 {
  background:#0199d8;
}
#energy .imgBox .energyBlue h5::after {
  position:absolute;
  top:0;
  left:-29px;
  content:url(/ph/coccoapo/about/img/metabolism_arrow_b.png);
}
#energy .imgBox .energyOrange {
  padding:0 20px 0 0;
  top:138px;
  left:0;
}
#energy .imgBox .energyOrange h5 {
  background:#f39700;
}
#energy .imgBox .energyOrange h5::after {
  position:absolute;
  top:0;
  right:-29px;
  content:url(/ph/coccoapo/about/img/metabolism_arrow_o.png);
}
#energy .imgBox .energyPink {
  padding:0 20px 0 0;
  top:-16px;
  left:0;
}
#energy .imgBox .energyPink h5 {
  background:#ec7aac;
}
#energy .imgBox .energyPink h5::after {
  position:absolute;
  top:0;
  right:-29px;
  content:url(/ph/coccoapo/about/img/metabolism_arrow_p.png);
}


@media only screen and (max-width: 640px) {
#aboutTitle {
	padding:12px 0;
	margin:0 0 20px;
	background-size:auto 100%;
}
.txLead {
	font-size:16px;
  font-weight:bold;
}
.index .txLead {
  font-size: 14px;
  line-height: 24px;
  margin-top: 5px;
  font-weight:normal;
}

.history .headLine02 {
  margin-top:30px;
}
.quality .headLine03 {
	margin-top:50px;
}
.about .headLine04 {
  background: url(/ph/coccoapo/common/img/ico_circle_purple.png) no-repeat left 3px;
}
.metabolism .headLine04 {
  background: url(/ph/coccoapo/common/img/ico_circle_orange.png) no-repeat left 3px;
}
.history section {
  margin-bottom:30px;
}
.method [class^=btnType] > a:after {
  left: 8px;
}
.method .btnType01 > a {
  text-align: left;
  padding: 12px 8px 15px 27px;
}

/*basic info list*/
#basic-info-list {
	padding:5px 0 0;
  margin: 0 -5px;
}
#basic-info-list ul {
	width:100%;
	max-width:500px;
	margin:0 auto;
  display: flex;
  flex-wrap: wrap;
}
#basic-info-list li {
	width:50%;
	padding:0 5px;
	margin:20px 0 0;
}
#basic-info-list li:first-child {
  margin:20px 0 0;
}
#basic-info-list li a p {
  font-size:14px;
  line-height:24px;
  padding:10px 2px 0;
}

#chishiki a {
  height:auto;
  padding:30px 10px 25px;
}
#chishiki a .image {
  width:103px;
  height:110px;
}
#chishiki a h2 {
  font-size:15px;
  line-height:22px;
  margin:0 0 35px;
}
#chishiki a h2 span {
  font-size:28px;
  line-height:30px;
  margin:8px 0 0;
  top:0;
}
#chishiki a h3 {
  font-size:15px;
  line-height:22px;
  margin:0 0 15px;
}
#chishiki a p {
  font-size:13px;
  line-height:23px;
  letter-spacing:-0.05em;
}


/*lineup*/
#lineup-list {
  margin:0;
}
#lineup-list ul li {
	width:50%;
	margin:0 0 30px;
}
#lineup-list ul li a .image img {
	  max-width: 100%;
    width: auto;
    height: auto;
    position: static;
    top: 0;
    left: 0;
}
#lineup-list .text {
    margin-top: 5%;
}
#lineup-list ul li a .image {
    width: 100%;
}
#lineup-list ul li a:hover {
    opacity: 1;
}
#lineup-list ul li a {
    text-align: center;
    text-decoration: none;
    height: auto;
    padding: 0;
    display: block;
    background: none;
    transition: all ease 0.3s;
    box-sizing: border-box;
}
#lineup-list .text img {
	  max-width: 204px;
	  width: 83%;
}
#lineup-list h6 img {
	  max-width: 158px;
    width: 50%;
}
#lineup-list .sp-first {
	  display: flex;
}
#lineup-list .sp-second {
	  display: flex;
}
#lineup-list .sp-first .linup_img01 {
	  margin-top: -5px;
}

.about p.bigtxt.taC {
  text-align:left;
}

table.tableType02 {
  margin-top:0;
}

.history .txtBlock {
  overflow: hidden;
}
.history .txtBlock p {
  font-size:14px;
  min-height:110px;
}
.history .btnType01 {
  width:90% !important;
  margin:20px auto 40px !important;
  display: block !important;
  clear: both;
  overflow: visible !important;
}

/*metabolism*/
.metabolism section {
  margin: 0 0 40px;
}
.metabolism section:first-child {
  margin:25px 0;
}
.leadBox {
  padding:10px;
  border:solid 10px #f2f2f2;
}
.leadBox .image {
  width:140px;
  margin:0 0 10px 5px;
}
.leadBox h3 {
  line-height: 30px;
}
.leadBox p {
  font-size: 14px;
  line-height: 26px;
  margin:10px 0 0;
  clear: both;
}
.grayBox {
  width: 100%;
  padding: 20px 20px 5px;
  margin: 20px auto 0;
}
#energy {
  margin: 20px 0 0 !important;
}
#energy .imgBox {
  width: 100%;
  margin: 20px auto 0;
  padding: 0 0 30px;
}
#energy .imgBox h5 {
  width:auto;
  height:40px;
  font-size:18px;
  line-height:40px;
}
#energy .imgBox p {
  font-size:14px;
  line-height:22px;
  margin:10px 0 0;
}
#energy .imgBox .energyBlue, #energy .imgBox .energyOrange, #energy .imgBox .energyPink {
  width:100%;
  padding:20px 0 0;
  top:0;
  left:0;
  right:0;
  position:relative;
}
#energy .imgBox .energyBlue h5::after, #energy .imgBox .energyOrange h5::after, #energy .imgBox .energyPink h5::after {
  display:none;
}

}

@media only screen and (max-width: 579px) {
/*lineup*/
#lineup-list ul li a .image img {
	left:0;
}
}

@media only screen and (max-width: 499px) {
/*lineup*/
#lineup-list ul li a .image {
	width: 100%;
	margin: 0 auto;
}
}

@media only screen and (max-width: 359px) {
#chishiki a .image {
  width:90px;
  height:96px;
}
#chishiki a h2 span {
  font-size:26px;
}
.leadBox .image {
  width:120px;
}

}

@media only screen and (min-width: 641px) {
#basic-info-list li a, .method .img figure a, #chishiki a {
  transition:all ease 0.3s;
}
#basic-info-list li a:hover, .method .img figure a:hover, #chishiki a:hover {
  opacity:0.6;
}

}

/*=================================

	202102 renewal

=================================*/
.blue-txt {
    color: #0063CF;
}




:where(.basicinfo-content_list) {
  --base-font: 2.6667vw;
  --c-btn-navy: 66, 53, 128;
  --c-btn-yellow: 246, 236, 61;
  --c-carousel-pagination-default: 217, 217, 217;
  --c-fat-and-constipation-pink: 228, 0, 110;
  --c-font-navy: 66, 53, 128;
  --c-font-pink: 228, 0, 110;
  --c-font-blue: 0, 94, 174;
  --c-kracie-yellow: 246, 236, 61;
  --c-marker-yellow: 246, 236, 61;
  --c-swelling-blue: 0, 94, 174;
  --c-text-navy: 66, 53, 128;
  --c-true-black: 51, 51, 51;
  --c-true-white: 255, 255, 255;
  --c-bg-coccoapo-theme: 234, 232, 221;
  --c-carousel-pager: 141, 95, 41;
  --c-carousel-pager-active: 54, 54, 54;
  --c-shadow-lineup: 115, 61, 25;
  --c-heading-line: 54, 54, 54;
  --c-diagnosis-label: 87, 38, 5;
  --c-category-theme-fat: 238, 150, 121;
  --c-category-theme-constipation: 213, 150, 209;
  --c-category-theme-kanpo: 157, 201, 110;
}
@media (min-width: 640px) {
  :where(.basicinfo-content_list) {
    --base-font: 1rem;
  }
}



.basicinfo-content_list {
  display: grid;
  justify-content: center;
}
@media (max-width: 639.98px) {
  .basicinfo-content_list {
    margin-top: 8.2666666667vw;

    grid-template-columns: repeat(2, 40.8vw);
    gap: 5.3333333333vw;
  }
}
@media (min-width: 640px) {
  .basicinfo-content_list {
    margin: calc(58 * var(--base-font, 1) / 10) calc(-20 * var(--base-font, 1) / 10) 0;

    grid-template-columns: repeat(4, 20.8%);
    gap: 0 4.2%;
  }
}

@media (max-width: 639.98px) {
  .basicinfo-content_item {
    box-shadow: 0 0 4.8vw 0 rgba(var(--c-true-black), 0.4);
  }
}
@media (min-width: 640px) {
  .basicinfo-content_item {
    box-shadow: 0 0 calc(18 * var(--base-font, 1) / 10) 0 rgba(var(--c-true-black), 0.4);
  }
}

.basicinfo-content_link {
  display: grid;
  background-color: #efede2;
  text-align: center;
  letter-spacing: 0.15em;
}
@media (max-width: 639.98px) {
  .basicinfo-content_link {
    box-shadow: inset 0 0 4.8vw 0 rgba(var(--c-shadow-lineup), 0.6);
    font-size: 4vw;
    line-height: 1.4666666667;

    grid-template-rows: 27.0666666667vw 20vw;
  }
}
@media (min-width: 640px) {
  .basicinfo-content_link {
    transition: box-shadow 0.2s;
    box-shadow: inset 0 0 calc(18 * var(--base-font, 1) / 10) 0 rgba(var(--c-shadow-lineup), 1);
    font-size: calc(22 * var(--base-font, 1) / 10);
    line-height: 1.4545454545;

    grid-template-rows: calc(145 * var(--base-font, 1) / 10) calc(107 * var(--base-font, 1) / 10);
  }
}
.basicinfo-content_link:visited,
.basicinfo-content_link:link {
  text-decoration: none;
  color: #363636;
}
@media (min-width: 640px) {
  .basicinfo-content_link:hover {
    transition: box-shadow 0.2s;
    box-shadow: inset 0 0 calc(5 * var(--base-font, 1) / 10) 0 rgba(var(--c-shadow-lineup), 1);
  }
}

.basicinfo-content_thumb {
  overflow: hidden;
}
.basicinfo-content_thumb img {
  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.basicinfo-content_link:hover .basicinfo-content_thumb img {
  opacity: 0.8;
}

.basicinfo-content_title {
  display: grid;
  align-items: center;
}
@media (min-width: 640px) {
  .basicinfo-content_title {
    margin-top: calc(-5 * var(--base-font, 1) / 10);
  }
}

@media (max-width: 639.98px) {
  .basicinfo_link {
    margin-top: 12.2666666667vw;
    width: 64vw;
  }
}
@media (min-width: 640px) {
  .basicinfo_link {
    width: calc(440 * var(--base-font, 1) / 10);
  }
}