/**************************************
	PC用スタイルシート
***************************************/
html
{
	/* 縦横表示変更時のため */
	-webkit-text-size-adjust: 90%;
    margin:　6px auto;
}
/* 本文一般 */
body
{
    font-family: "Helvetica Neue",
                Arial,
                "Hiragino Kaku Gothic ProN",
                "Hiragino Sans",
                Meiryo,
                sans-serif;	text-decoration: none;
	text-align:center;
    margin:　0px auto;
}
/* ページボディー */
.pageBody
{
    box-sizing: border-box;
    max-width: 1024px;
    width: 100%;
	margin: 0px auto;
	padding: 0px;
	text-align: center;
}
/* イメージがはみ出さないようにする */
img
{
    max-width: 100%;
}
/*===============================================
 吹き出し用
===============================================*/
/* メモった！用 */
#memotta h2 {
  position: relative;
  padding: 0.6em;
  background: -webkit-repeating-linear-gradient(-45deg, #ffcc66, #ffcc66 4px,#ffcc00 3px, #ffcc00 8px);
  background: repeating-linear-gradient(-45deg, #ffcc66, #ffcc66 4px,#ffcc00 3px, #ffcc00 8px);
  border-radius: 7px;
}
#memotta h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #ffcc00;
  width: 0;
  height: 0;
}
/* 健康管理onメモった！用 */
#memottaHealth h2 {
  position: relative;
  padding: 0.6em;
  background: -webkit-repeating-linear-gradient(-45deg, #afeeee, #afeeee 4px,#87ceeb 3px, #87ceeb 8px);
  background: repeating-linear-gradient(-45deg, #afeeee, #afeeee 4px,#87ceeb 3px, #87ceeb 8px);
  border-radius: 7px;
}
#memottaHealth h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #87ceeb;
  width: 0;
  height: 0;
}
/* メモった！OEM用 */
#memottaOEM h2 {
  position: relative;
  padding: 0.6em;
  background: -webkit-repeating-linear-gradient(-45deg, #FFF8DC, #FFF8DC 4px,#FFDAB9 3px, #FFDAB9 8px);
  background: repeating-linear-gradient(-45deg, #FFF8DC, #FFF8DC 4px,#FFDAB9 3px, #FFDAB9 8px);
  border-radius: 7px;
}
#memottaOEM h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #FFDAB9;
  width: 0;
  height: 0;
}
/*===============================================
 お知らせ用
===============================================*/
/* メモった！用 */
#memotta ul.news{
  position: relative;
  padding: 15px 15px 15px 30px;
  font: 16px/1.6 'arial narrow', sans-serif;
  border: solid 2px #FF8C00;
  border-radius:8px;
  color: #FF8C00;
  background: #fff;
}
/* 健康管理onメモった！用 */
#memottaHealth ul.news{
  position: relative;
  padding: 15px 15px 15px 30px;
  font: 16px/1.6 'arial narrow', sans-serif;
  border: solid 2px #adcce8;
  border-radius:8px;
  color: #448ccb;
  background: #fff;
}
ul.news:before{
  content: "お知らせ";
  position: absolute;
  display: block;
  top: -15px;
  left: 20px;
  background: #fff;
  font-size: 16px;
  /*font-weight: bold;*/
  padding: 0 10px;
}
/*
ul.news li{
  font-weight: bold;
}
*/
/*===============================================
 機能説明用
===============================================*/
/* 共通 */
ul.list {
  border: solid 2px #ffb03f;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  margin-top: 2em;
  text-align: left;
}
ul.list li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}
ul.list li:before {
  /*リストのアイコン*/
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまでの距離*/
  color: #ffb03f; /*アイコン色*/
}
ul.list li:after {
  /*タブ*/
  background: #ffb03f;
  color: #fff;
  font-family: "Font Awesome 5 Free",'Avenir','Arial',sans-serif;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: '';/*アイコンコード＋文字*/
  letter-spacing: 0.05em;/*字間*/
}
/* 基本機能 */
ul.list1 {
  border: solid 2px #ffb03f;
}
ul.list1 li:before {
  color: #ffb03f; /*アイコン色*/
}
ul.list1 li:after {
  background: #ffb03f;
  content: '基本機能';/*アイコンコード＋文字*/
}
/* 体調管理 */
ul.list2 {
  border: solid 2px #ffb03f;
}
ul.list2 li:before {
  color: #ffb03f; /*アイコン色*/
}
ul.list2 li:after {
  background: #ffb03f;
  content: '体調管理';/*アイコンコード＋文字*/
}
/* グループ */
ul.list3 li:before {
  /*リストのアイコン */
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまでの距離*/
  color: #ffb03f; /*アイコン色*/
}
ul.list3 li:after {
  /*タブ*/
  background: #ffb03f;
  color: #fff;
  font-family: "Font Awesome 5 Free",'Avenir','Arial',sans-serif;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: 'グループ';/*アイコンコード＋文字*/
  letter-spacing: 0.05em;/*字間*/
}
/* 個人のメモ帳 */
ul.list4 li:before {
  /*リストのアイコン */
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまでの距離*/
  color: #ffb03f; /*アイコン色*/
}
ul.list4 li:after {
  /*タブ*/
  background: #ffb03f;
  color: #fff;
  font-family: "Font Awesome 5 Free",'Avenir','Arial',sans-serif;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: '個人のメモ帳';/*アイコンコード＋文字*/
  letter-spacing: 0.05em;/*字間*/
}
/* イベント管理 */
ul.list5 li:before {
  /*リストのアイコン */
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまでの距離*/
  color: #ffb03f; /*アイコン色*/
}
ul.list5 li:after {
  /*タブ*/
  background: #ffb03f;
  color: #fff;
  font-family: "Font Awesome 5 Free",'Avenir','Arial',sans-serif;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: 'イベント管理';/*アイコンコード＋文字*/
  letter-spacing: 0.05em;/*字間*/
}
/* 女性のためのからだ管理 */
ul.list6 li:before {
  /*リストのアイコン */
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまでの距離*/
  color: #ffb03f; /*アイコン色*/
}
ul.list6 li:after {
  /*タブ*/
  background: #ffb03f;
  color: #fff;
  font-family: "Font Awesome 5 Free",'Avenir','Arial',sans-serif;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: '女性のためのからだ管理';/*アイコンコード＋文字*/
  letter-spacing: 0.05em;/*字間*/
}
/* プライベートで */
ul.list7 {
  border: solid 2px #ffb6c1;
}
ul.list7 li:before {
  color: #ffb6c1; /*アイコン色*/
}
ul.list7 li:after {
  background: #ffb6c1;
  content: 'プライベートで';/*アイコンコード＋文字*/
}

/* ビジネスで */
ul.list8 {
  border: solid 2px #4169e1;
}
ul.list8 li:before {
  color: #4169e1; /*アイコン色*/
}
ul.list8 li:after {
  background: #4169e1;
  content: 'ビジネスで';/*アイコンコード＋文字*/
}

/*===============================================
 プラン説明
===============================================*/
.planTable table{
   border-collapse: collapse;
   margin: 0 auto;
   padding: 0;
   width: 100%;
   table-layout: fixed;
 }
 .planTable thead th{
   padding: 1em .8em;
   border-right: 5px solid#fff;
 }
 .planTable tr {
   background-color: #fff;
   padding: .35em;
 }
 .planTable tr:nth-child(even){
   background-color: #f9f9f9;
 }
 .planTable td {
   padding: .7em;
   text-align: center;
 }
  .planTable th {
   height: 48px;
 }
 .planTitle{
    background: #ffefd5;
 }
 .plan1{
   /*background: #03A9F4;*/
   background: #4169e1;
   color: #FFFFFF;
 }
 .plan1_i{
   /*color:#03A9F4;*/
   color:#4169e1;
   font-weight: bold;
 }
 .plan4{
   background: #009688;
 }
 .plan4_i{
   color:#009688;
   font-weight: bold;
 }
 .plan3{
   background: #4caf50;
 }
 .plan3_i{
   color:#4caf50;
   font-weight: bold;
 }
 .plan2{
   /*background: #cddc39;*/
   background: #ffb03f;
 }
 .plan2_i{
   color:#ffb03f;
   font-weight: bold;
 }

/*===============================================
 ログインボタン
===============================================*/
a.loginButton{
  display:inline-block;
    font:normal normal 300 1.3em 'Open Sans';
    text-decoration:none;
    color:rgba(28, 190, 131, 1);
    brackground-color:transparent;
    /*border:1px solid rgba(28, 190, 131, 1);*/
    border:1px solid rgba(173, 204, 232, 1);
    border-radius:100px;
    padding: .3em 1.2em;
    margin:5px;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, transparent 50%, rgba(255, 240, 245, 1) 50%);
    /*background-image: linear-gradient(to right, transparent 50%, rgba(28, 190, 131, 1) 50%);*/
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}
a.loginButton:hover{
    color:rgba(255, 255, 255, 1);
    /*background-color:rgba(28, 190, 131, 1);*/
    background-position: -100% 100%;
}

/*===============================================
 Jquery用設定
===============================================*/
/* 背景色を白にする */
.ui-body-c, .ui-overlay-c {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

/*===============================================
画面の横幅が640px以下
===============================================*/
@media screen and (max-width:640px)
{
	/* 本文 */
	body
	{
		font-size:16px;
		height: 16px;
		line-height: 20px;
	}
    /* h1～h4 */
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    h3 { font-size: 16px; }
    h4 { font-size: 14px; }
}
/*===============================================
画面の横幅が641px以上800px以下
===============================================*/
@media screen and (min-width: 641px) and (max-width:800px)
{
	/* 本文 */
	body
	{
		font-size:18px;
		height: 20px; line-height: 20px;
	}
    /* h1～h4 */
    h1 { font-size: 22px; }
    h2 { font-size: 20px; }
    h3 { font-size: 16px; }
    h4 { font-size: 14px; }
}
/*===============================================
画面の横幅が801px以上
===============================================*/
@media screen and (min-width: 801px)
{
	/* 本文 */
	body
	{
		font-size:20px;
		height: 20px; line-height: 20px;
	}
    /* h1～h4 */
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    h3 { font-size: 18px; }
    h4 { font-size: 16px; }
}