/*****{ title }*****/
.main h1 {
  position: relative;
  max-width: 100%;
  height: auto;
  margin: 20px auto 30px auto;
  padding: 16px 27px 16px 55px;
  background-size:100% auto;
  background: linear-gradient(to bottom, #bad9f5, #ebf3fc);
  border-radius: 4px;
  font-size: 29px;
  font-weight: 600;
  letter-spacing: 0px;
  color: #000;
  text-align: center;
}
.main h1:before {
  position: absolute;
  top: 20px;
  left: 2px;
  content:"";
  display: inline-block;
  width: 74px;
  height: 34px;
  background: url(/tem/img/hand.webp) no-repeat;
  background-size: contain;
}
/*****{ small_title }*****/
.small_title {
  position: relative;
  max-width: 100%;
  height: auto;
  background-size:100% auto;
  background: linear-gradient(to top right, #bad9f5, #FFF); 
  padding: 14px 0 10px 20px;
  margin: 40px 0 30px 0;
  border-left: 6px solid #2e37f3;
  border-bottom: 2px solid #2e37f3;
  font-size: 20px;
  font-weight: 600;
  color:#000
}
.kage1 { box-shadow: 8px 14px 8px #666666; }
.main img { display: block; max-width: 100%;height: auto; margin: 0 auto 20px auto; border: solid 4px #78b3e7; border-radius: 4px; }
.n { color: #000; font-size: 20px; font-weight: 600; margin-right: 0px; }
.indent { padding-left: 1.6em; text-indent: -1.6em; }
.space { margin-bottom: 10px; }

/* --- 基本デザイン (PC/スマホ画面用) --- */
.explain { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 17px; margin-bottom: 30px;}
.body-2 { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 10px; background-color: #f0f2f5; padding: 10px; }
.setup-container-01 { max-width: 750px; margin: 0 auto; background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.setup-container-02 { max-width: 750px; margin: 0 auto; background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
h5 { border-left: 5px solid #0078d4; text-align: left; padding-left: 10px; font-size: 1.4rem; font-weight: 500; margin-bottom: 40px; }
.input-group { margin-bottom: 15px; text-align: left; }
label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 1.1rem; }
/* 新しい共通クラス */
.form-standard { width: 100%; padding: 12px; border: 3px solid #ccc; border-radius: 8px; font-size: 1rem; box-sizing: border-box; }
.btn-group-01 { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; }
.btn-group-02 { display: flex; flex-direction: column; gap: 10px; margin-top: 0; }

/* 入力画面では非表示にする */
.setup-container-02 { display: none; }
/* JSで表示用のクラスを準備しておく */
.is-visible { display: block; }

/* 中身が空のときは非表示にする */
#resultArea:empty, #printArea:empty { display: none; }

.calc-btn { background: #0078d4; }
.calc-btn:hover { background: #005a9e; }
.pdf-btn { background: #dc3545; display: none; }
.pdf-btn:hover { background: #a71d2a; }
.text-btn { background: #28a745; display: none; }
.text-btn:hover { background: #1e7e34; }

/* --- 画面表示用テーブル --- */
#resultArea { max-width: 750px; margin: 20px auto; }
.display-table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; }
.display-table th, .display-table td { border: 1px solid #ddd; padding: 12px 5px; text-align: center; font-size: 0.95rem; }
.display-table th { background: #444; color: white; font-weight: normal; font-size: 0.8rem; }
h4 { font-size: 1.2rem; font-weight: 500; }

.sun-row, .hol-row { color: #d93025; background-color: #fff5f5; font-weight: bold; }
.sat-row { color: #1a73e8; background-color: #f0f7ff; font-weight: bold; }

/* --- 印刷用設定 (画面では非表示) --- */
#printArea { display: none; }

@media print {
    /* ▼画面上の入力フォームや広告、サイドバーなど不要なものをすべて消す▼ */
     header, footer, .sideWrap, .main h1, .setup-container-01, #resultArea, 
    .head_menu, .main-top-pc_ad, .main-bottom-pc_ad, .main-bottom-sp_ad, .pagetop, .copyright, img, p, .setup-container-02, .small_title, .kage1 {
        display: none !important;
    }
    body, .body-2 {
    background-color: white !important; /* 背景を強制的に白にする */
    background-image: none !important; /* 背景画像がある場合も消す */
    color: black !important;             /* 文字を黒にして読みやすくする */
   }

   #printArea { margin-top: -70px; display: block !important; }
    .print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; padding: 5mm; }
    .card {
    width: 91mm; height: 53mm; border: 1.5px solid #333; border-radius: 8px;
    padding: 10px; box-sizing: border-box; page-break-inside: avoid;
    display: flex; flex-direction: column; justify-content: space-between;
    text-align: center; background-color: #fff !important; -webkit-print-color-adjust: exact;
    }
    .card-header { font-size: 16pt; font-weight: bold; border-bottom: 2px solid #333; padding-bottom: 3px; }
    .card-year { font-size: 16pt; margin-top: 5px; }
    .card-date { font-size: 26pt; font-weight: 900; margin: 2px 0; }
    .card-footer { font-size: 16pt; color: #555; border-top: 1px dashed #999; padding-top: 3px; }
    .sun-row, .hol-row { color: #d93025 !important; border-color: #d93025 !important; }
    .sat-row { color: #1a73e8 !important; border-color: #1a73e8 !important; }
}

/* PC用655px以上に適用 */
@media screen and (min-width: 655px) {
    /* 計算結果文字 */
    input, select, button, .display-table th, .display-table td { font-size: 1.2rem; }
   /* ボタン共通スタイル */
    .calc-btn, .pdf-btn, .text-btn {
    color: white; border: none; margin: 0 100px; padding: 15px; cursor: pointer; transition: background-color 0.3s; border-radius: 8px; font-weight: bold; font-size: 1.2rem; }
}
/* SP用655px以下に適用 */
@media (max-width: 655px) {
    /* 計算結果文字 */
    input, select, button, .display-table th, .display-table td { font-size: 1.1rem; }
    /* ボタン共通スタイル */
    .calc-btn, .pdf-btn, .text-btn {
    color: white; border: none; padding: 15px; cursor: pointer; transition: background-color 0.3s; border-radius: 8px; font-weight: bold; font-size: 1rem; }
     .body-2 { font-size: 15px; }
     .main h1 { font-size: 22px; letter-spacing: 0px; }
     .main img { max-width: 100%;height: auto; margin: 0 auto; }

}