@charset "UTF-8";

/*　----------------------------------------　

コンテンツ部分

------------------------------------------*/
h2.mi_title1 {
    font-size: 28px;
    margin-top: 40px;
    margin-bottom: 20px;
}

h2.mi_feature {
 padding:0.5em;
 border-left:solid 6px #4472C4;
 background:#DEEBF7;
 margin-top: 50px;     
 margin-bottom: 20px;   
}

h3 {
    font-size: 16px;
    line-height: 24px;
}

h3.mi_item {
    color: #0F733A;
    font-weight: 600;
    margin-top: 20px;
}

h3.h3_hpak {
    font-size: 20px;
    line-height: 1.6em;
    font-weight: 600;
    margin-top: 20px;
    margin-top: 20px;
}

h3.tabletitle_hpak {
  position: relative;    
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  margin: 30px 0 20px 0;
  padding:0.5em;
  background:#FFE560;   
}

h3.tabletitle_hpak:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #FFE560;
  width: 0;
  height: 0;
}

section.feature_hpak {
    padding-bottom: 30px;
}

p.data_small {
    font-size: 12px;
    font-weight: normal;
}

.table_hpak {
  border-collapse: collapse;
  width: 100%;
}

.table_hpak th,
.table_hpak td {
  border: 1px solid #ccc;
  padding: 0.5em;    
  text-align: center;
}

.table_hpak .th_hpak1 {
  font-weight: bold;
  color: #0337ad;
  background-color: #DEEBF7; 
}

.table_hpak .th_hpak2 {
  font-weight: bold;
  background-color: #efefef;
}

.table_hpak .tr_hpak2 {
  border: 2px solid #000;
}

.cost_box {
  width: 100%;
  background-color: #FFFFE0;
  text-align: center;
  padding: 1.5em 1em;
  box-sizing: border-box;
  margin: 1.5em 0 1em 0;
}

/* h3.cost_hpak のスタイル */
.cost_box .cost_hpak {
  font-size: 20px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.8em;
  background: linear-gradient(transparent 60%, yellow 30%);
  display: inline-block;
}

/* p.cost_text のスタイル */
.cost_box .cost_text {
  font-size: 20px;
  font-weight: 600;    
  display: block;
  width: auto;
  height: auto;
  padding: 10px;
  background-color:#FFE560;    
  line-height: 1.5;
  margin-bottom: 1.1em; /* 下のpタグとの間隔を調整 */
}

.youtube {
    text-align: center;
}

/*　関連情報--------------------　*/

.relation_area {
    border: 1px solid #cdcdcd;
    padding: 10px 5px 5px 15px;
}
.relation_ttl {
    font-size: 1.6rem;
    font-weight: bold;
    color: #1f518e;
    margin-bottom: 10px;
}
.relation_area_link ul li {
    margin-bottom: 10px;
    display: block;
}

/* ダウンロードボタン */
.dbtn {
  background: #df5213; /* 背景色 */
  color: #fff; /* 文字色 */
  padding: 16px 40px; /* 上下の余白、左右の余白 */
  text-decoration: none; /* デフォルトで入る下線を消す */
  text-align: center;
  width: 100%;
   max-width:650px;	
  border-radius: 30px; /* 角を丸くする */
  transition-property: opacity;
　-webkit-transition-property: opacity;
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
}
.dbtn:hover {
  opacity: .7;
}