/*-------------------------
  【style-top.css】：index.htmlでのみ適用しているCSS
-------------------------*/
@charset "utf-8";

/* 紹介部テキスト */
.column1{
  margin-top:80px;
  letter-spacing:1px;
}

/* 紹介部テキスト（詳細） */
.text1{
  margin-top:50px;
  margin-left:40px;
  font-size:20px;
}

/*TOPページ 小見出しの囲み（ピンクの楕円）*/
.kakomi-text{
  width: 600px;
  height: 60px;
  line-height: 60px;
  background-color: #E57676;
  border-radius: 30px;
  color: #fff;
  text-align: center;
  font-size:28px;
  margin: 0 auto;
  padding-right:40px;
  padding-left:40px;
}

/*チェックボックス風イラスト描画（PC）*/
.checkbox{
   font-size:20px;
   font-weight:bold;
}
.checkbox:before{
   content: '';
   display: inline-block;
   width: 40px;
   height: 40px;
   margin-right:10px;
   background-image: url(../img/checkbox_icon.png);
   background-size: contain;
   vertical-align: middle;
}

/*チェックボックス風イラスト描画（mobile）*/
.checkbox-responsive{
   font-size:15px;
   font-weight:bold;
}

.checkbox-responsive:before{
   content: '';
   display: inline-block;
   width: 25px;
   height: 25px;
   margin-right:3px;
   background-image: url(../img/checkbox_icon.png);
   background-size: contain;
   vertical-align: middle;
}

.text20px-center{
  font-size:20px;
  text-align: center;
}

/*抜粋QA-グレーライン*/
.question_gray{
  background: #f2f2f2;
  padding: 10px;
}

/*抜粋QA-白ライン*/
.question_white{
  padding: 10px;
}

/*TOPキャッチコピー（「スケジュール管理・TODOアプリ」）*/
.top-text{
  position: relative;
  display: inline-block;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: black;
  background-color: white;
  font-size: 18px;
  border: solid 3px black;
  box-sizing: border-box;
  border-radius: 10px;
}
.top-text:before {
  content: "";
  position: absolute;
  bottom: -23px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}
.top-text:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid black;
  z-index: 1;
}

/*TOPキャッチコピー（「便利機能たくさん」）*/
.top-text2{
  color: black;
  font-size: 20px;
  border-bottom: dashed 2px black;
}

/*背景画像の白フィルター*/
.colorfilter-base {
    background-color: white; /* カラーフィルタ効果の色を指定 */
    display: inline-block;  /* (任意：インラインブロック化したい場合) */
}
.colorfilter-image-download {
    opacity: 0.6;    /* カラーフィルタ効果の度合いを指定 */
    display: block;
}
.colorfilter-image-top {
    opacity: 0.4;    /* カラーフィルタ効果の度合いを指定 */
    display: block;
}

/*縁取り（浮かび上がり）文字*/
.huchidori{
  display     : inline-block;
  font-weight : bold;
  color       : #ffffff;
  text-shadow:  2px  2px 10px #777 ,
               -2px  2px 10px #777 ,
                2px -2px 10px #777 ,
               -2px -2px 10px #777;
}

/*下向き矢印*/
.arrow_u {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  color: #333;
  text-decoration: none;
}
.arrow_u:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-bottom: solid 2px #333;
  border-right: solid 2px #333;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -6px;
  transform: rotate(45deg);
}

/* ボタン装飾（楕円） */
.uk-button-default{
    border-radius: 500px;
    color: black;
    border: 1px solid black;
    font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
    font-size: 15px;
}
.uk-button-default:hover{
    color: white;
    border: 1px solid rgb(58, 199, 255);
    background-color:  rgb(58, 199, 255);
    font-size: 15px;
}

/* Youtube表示エリア（mobile) */
.youtube_res{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.youtube_res iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}