/*
Theme Name: kenkoulife theme
Author: LAMP co,Ltd.
*/

.gray{
padding: 2em 2em 0.5em;
margin: 2em;
background: #dcdcdc;
border-radius: 10px;/*角の丸み*/
}
.gray p {
margin: 0; 
padding: 0;
}

.purple{
padding: 2em 2em 0.5em;
margin: 2em;
background: #cab8d9;
border-radius: 10px;/*角の丸み*/
}

.fusen_kaimin{
padding: 0.5em 1em;
margin: 2em 0;
background: #dbffff;
border-left: solid 10px #20b2aa;
}

.fusen_kaimin p {
margin: 0; 
padding: 0;
}

.kaimin_point{
    padding: 2em 2em 0.5em;
    margin: 2em 0;
    background: #d1bada;
    box-shadow: 0px 0px 0px 10px #d1bada;
    border: dashed 2px #5a4498;
    border-radius: 8px;
}

.kaimin_point p {
margin: 0; 
padding: 0;
}

.inulin_point{
    padding: 2em 2em 0.5em;
    margin: 2em 0;
    background: #ffffff;
    box-shadow: 0px 0px 0px 10px #ffffff;
    border: dashed 2px #0099FF;
    border-radius: 8px;
}

.inulin_kakomi{
    padding: 2em 2em 0.5em;
    margin: 2em 0;
    background: #ffffff;
    box-shadow: 0px 0px 0px 10px #ffffff;
    border: 2px #ccc;
    border-radius: 8px;
}

/*ボタン*/
.btn-flat-border {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #67c5ff;
  color: white;
}

/*グラデーションの角丸ボタン*/
.btn-gradient-radius {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 10px;
  color: #ffffff;
  background-image: linear-gradient(45deg, #99ff33 0%, #33cc00 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #339900;
}
.btn-gradient-radius:hover {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

.kaiminpr{
   text-align: right;
   color: #a9a9a9;
   font-size:80%;
}

.note{
   text-align: right;
   color: #323232;
   font-size:80%;
}

/*チェックボックス*/
.cp_ipcheck {
	margin: 2em auto;
	text-align: left;
	background-color:#ebf6f7;
}
.cp_ipcheck ul {
	margin: 0.5rem 0.5rem 2rem 0.5rem;
	padding: 0.5rem 1rem;
	list-style: none;
}
.cp_ipcheck .list_item {
	margin: 0 0 0.5rem 0;
	padding: 0;
}
.cp_ipcheck label {
	line-height: 135%;
	position: relative;
	margin: 0.5rem;
	cursor: pointer;
}
.cp_ipcheck .option-input05 {
	position: relative;
	margin: 0 1rem 0 0;
	cursor: pointer;
}
.cp_ipcheck .option-input05:before {
	position: absolute;
	z-index: 1;
	top: 0.125rem;
	left: 0.1875rem;
	width: 0.75rem;
	height: 0.375rem;
	content: '';
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	        transition:         transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-webkit-transform: rotate(-45deg) scale(0, 0);
	        transform: rotate(-45deg) scale(0, 0);
	border: 2px solid #da3c41;
	border-top-style: none;
	border-right-style: none;
}
.cp_ipcheck .option-input05:checked:before {
	-webkit-transform: rotate(-45deg) scale(1, 1);
	        transform: rotate(-45deg) scale(1, 1);
}
.cp_ipcheck .option-input05:after {
	position: absolute;
	top: -0.125rem;
	left: 0;
	width: 1rem;
	height: 1rem;
	content: '';
	cursor: pointer;
	border: 2px solid #f2f2f2;
	background: #ffffff;
}

/*スクロールの表*/
.pricelist-table-wrapper{
overflow-x: scroll;
width:100%;
height:100%;
}

.pricelist-table{
border-collapse:collapse;
min-width:800px;
}

table.pricelist-table th,table.pricelist-table td{
　width: 400px;
  height: 100px;
  vertical-align: middle;
  padding: 10px 20px;
  border: 1px solid #d3d3d3;
}

table.pricelist-table td.p{
  line-height: 2em;
}

.fixed01{
  position: sticky;
  left: 0;
}

/*シンプルな表*/
.simpletable{
width:100%;
height:100%;
}
table.simpletable th,table.simpletable td{
　width: 400px;
  height: 100px;
  vertical-align: middle;
  padding: 10px 20px;
  border: 1px solid #d3d3d3;
}

/*画像とテキストを横に並べる*/
.double_table{
width:100%;
height:100%;
}
table.double_table th,table.double_table td{
  vertical-align: middle;
  padding: 10px 20px;
}

.textbox01{
  border: 2px solid #d3d3d3;	
}


/* 吹き出し風コメント */
.balloon1{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #1f1f1f;
  background-color: #ededed;
  margin-left: 110px;
}

.balloon1 .icon{
  position: absolute;
  left: -110px;
  top: 0;
}

.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 5px;
  border-right: 15px solid #ededed;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}