/* パンチ　BOX　Ａ */
.punch-box-a {
 position: relative;
 margin: 10px auto;
 padding: 40px 20px 15px;
 width: 90%; /* ボックス幅 */
 background-color: #f7f7f7; /* ボックス背景色 */
 color: #666666; /* 文章色 */
 border: 1px solid #ccc; /* 枠線 */
 box-shadow: 1px 1px 2px #ccc; /* 影 */
}
.punch-box-a::before, 
.punch-box-a::after {
 position: absolute;
 content: '';
 top: 10px;
 width: 18px;
 height : 18px;
 background-color: #fff; /*穴背景色*/
 box-shadow: -1px -1px 8px #cccccc inset;
 border: 1px solid #ccc; /*穴*/
 border-radius: 50%;
}
.punch-box-a::before { left: 80px;}
.punch-box-a::after { right: 80px;}


/* メモ　クリップ　Ａ */
.clip-box-a {
 position: relative;
 margin: 2em auto;
 padding-top: 20px;
 padding-right: 40px;
 padding-bottom: 20px;    padding-left: 20px;
	
 width: 90%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #000000; /* 文章色 */
 border: 1px solid #ccc; /* 枠線 */
 box-shadow: 1px 1px 1px #acacac; /* 影の色 */
}
.clip-box-a::before {
 position: absolute;
 content: '';
 top: -15px;
 right: 10px;
 height: 55px;
 width: 15px;
 border: 3px solid #555555; /*クリップ色 */
 background-color: none;
 border-radius: 12px;
 box-shadow: 1px 1px 2px #999;
 transform: rotate(10deg);
 z-index: 1;
}
.clip-box-a::after {
 position: absolute;
 content: '';
 top: 0px;
 width: 10px; 
 right: 20px;
 border: solid 5px #fff; /*背景色と同じ色にする*/
 z-index: 2;
}

/* トリプル　囲み枠 */
.kakomi-triple1 {
 position: relative;
 border: 1px solid #007b43; /*左枠線*/
 width: 90%;
 margin: 2em auto;
 padding: 20px 15px 15px 20px;
 z-index: 0;
}
.kakomi-triple1::before,
.kakomi-triple1::after {
 position: absolute;
 content: '';
 width: 100%;
 height: 100%;
}
.kakomi-triple1::before {
 border: 1px solid #3eb370; /*中枠線*/
 bottom: -4px;
 right: -4px;
 z-index: 1;
}
.kakomi-triple1::after {
 border: 1px solid #7ebea5; /*右枠線*/
 bottom: -7px;
 right: -7px;
 z-index: 2;
}


/* よくあるご質問 */
dl.qa {
 overflow: hidden;
 _zoom: 1;
}
 
dl.qa dd,
dl.qa dt {
 padding: 0 20px 0px 50px;
}
 
dl.qa dt {
 margin: 20px 20px 0 0;
}
 
dl.qa dd:first-letter,
dl.qa dt:first-letter {
 font-size: 1.6em;
 font-weight: bold;
 margin-right: 10px;
 padding: 5px;
}
 
dl.qa dd {
 margin: 10px 0 -1px 0;
 padding-bottom: 20px;
 border-bottom: solid 1px #aaa;
}
 
dl.qa dt:first-letter {
 color: #3498db;
}
 
dl.qa dd:first-letter {
 color: #ff6767;
}

/* メモ　ホチキス　Ａ */
.Hochi-box-a {
 position: relative;
 margin: 2em auto;
 padding: 20px;
 width: 90%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #555555; /* 文章色 */
 border: 1px solid #d9333f; /* 枠線 */
 box-shadow: 2px 2px 2px #ccc; /* 影の色 */
}
.Hochi-box-a::before {
 position: absolute;
 content: '';
 top: 5px;
 left: 20px;
 height: 30px;
 border: 1.5px solid #d9333f; /* ホチキス色 */
 border-radius: 12px;
 box-shadow: 1px 1px 1px #333;
 transform: rotate(45deg);
}



/* レスポンス型テーブル */

table {
  margin: 20px auto;
}
.tbl-r02 th {
  background: #111111;
  border: solid 1px #ccc;
  color: #000000;
  padding: 10px;
}
.tbl-r02 td {
　border: solid 1px #ccc;
  padding: 10px;
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 80%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}


/* 見出し再設定 */
h1 {
    margin: 0px 0;
    font-size: 110%;
}


/*グラデーションボタン*/
.btn-gradient-3d-orange {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #c58668;
}

.btn-gradient-3d-orange:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}