@charset "utf-8";

/* ==============================================
   PC用スタイル（印刷優先）
   ============================================== */

/* 全体設定（画面全体）*/
body {
  font-family: "游ゴシック, "Yu Gothic", "Meiryo", sans-serif;
 /*  font-size: 16px; 16px */
  /*   line-height: 1.6; */
 /*  margin: 20px auto; 
  max-width: 960px; 900px */
    max-width: none;  /* これで画面幅を100%に設定 */
    margin: 0 auto;   /* 左右の余白を自動で調整 */
  background-color: #fff; /* #fff */
  color: #000;
  text-align: center; 
}

/* メニューの幅 */
.table_menu {
  width: 50%; /* 98% */
  font-size: 13px; /* 16px */
  border-collapse: collapse;
  margin: 0 auto;
  border: 0px solid #FF0000; /* 2px　#ccc tableの線が消える */
  background-color: #fff; /* #fff */
  text-align: center;
}

/* ドリルの幅 */
.table_drill {
  width: 62%; /* 98% */
  font-size: 13px; /* 16px */
  border-collapse: collapse;
  margin: 0 auto;
  border: 0px solid #FF0000; /* 2px　#ccc tableの線が消える */
  background-color: #fff; /* #fff */
  text-align: center;
}

 /* 画像の幅１ */ 
.pic100 {
  width: 100%;        /* スマホでは画面幅に合わせて縮小 */
  height: auto;
  display: block;     /* 印刷時に余計な余白やズレを防ぐ */
  margin: 0 auto;     /* 中央寄せ（印刷でもキレイ） */
  background-color: #fff; /* #fff */
  border: 0px solid #ccc; /* 0px #ccc */
}

 /* 画像の幅２ */ 
.pic90 {
  width: 100%;        /* スマホでは画面幅に合わせて縮小 */
  height: auto;
  display: block;     /* 印刷時に余計な余白やズレを防ぐ */
  margin: 0 auto;     /* 中央寄せ（印刷でもキレイ） */
  background-color: #fff; /* #fff */
  border: 0px solid #0000FF; /* 0px #ccc */
}

/* セル */
.table_menu td {
  border: 0px solid #ddd; /* 1px　セルの線が消える */
  padding: 0px; /* 8px */
/* text-align: center;ボタン */
}

/* +++++++++++++++++++++++++++*++ */
/* 　　メニューバー 左寄せ、中央　　　　*/
/* ++++++++++++++++++++++++*+++++ */
input.menu_select {
	font-size: 30px;
	width: 100%;
	height: 70px;
	color: #000000;
	text-align: left;
	border-style: solid; border-width: 1px;	
	border-color: #000000;
   -webkit-appearance: none;
    border-radius: 0;
    background: -moz-linear-gradient(top, #c0c0c0, #FFF);
    background: -webkit-linear-gradient(top, #c0c0c0, #FFF);
    background: linear-gradient(to bottom, #c0c0c0, #FFF);
}
input.menu_select_dojo {
	font-size: 30px;
	width: 100%;
	height: 70px;
	color: #000000;
	text-align: left;
	border-style: solid; border-width: 1px;	
	border-color: #000000;
   -webkit-appearance: none;
    border-radius: 0;
    background: -moz-linear-gradient(top, #ffe4c4, #FFF);
    background: -webkit-linear-gradient(top, #ffe4c4, #FFF);
    background: linear-gradient(to bottom, #ffe4c4, #FFF);
}
input.menu_select_center {
	font-size: 30px;
	width: 100%;
	height: 70px;
	color: #000000;
	text-align: center;
	border-style: solid; border-width: 1px;	
	border-color: #000000;
   -webkit-appearance: none;
    border-radius: 0;
    background: -moz-linear-gradient(top, #c0c0c0, #FFF);
    background: -webkit-linear-gradient(top, #c0c0c0, #FFF);
    background: linear-gradient(to bottom, #c0c0c0, #FFF);
}
input.menu_select:hover {
    background-color: #808080;
    color: #ff0000;
}
input.menu_select_center:hover {
    background-color: #808080;
    color: #ff0000;
}
/* 白色 */
.back_ffffff { 
    background-color: #ffffff;
}
/* +++++++メニューバー　END++++++++++++++++++++*++ */

/* 見出し */
h1, h2 {
  font-size: 30px;
  font-weight: normal;
  text-align: center;
  margin: 10px 0;
}

/* ボタン */
.btn1 {
  font-size: 18px;
  padding: 10px 30px;
  border-radius: 8px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

.btn1:hover {
  background-color: #0056b3;
}

/* ＝＝追加＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.j_logo {
  font-size: 15px; 
  text-align: center;
  font-weight: normal;
}
.login_info {
  font-size: 15px; 
  color: #ff0000;
  text-align: center;
  font-weight: normal;
}
.obi_smp { 
  font-size: 30px;
  font-weight: normal;
  border: 2px solid #000;
  background-color: #2484DB;
  text-align: center;
  color: #ffffff;
  -webkit-appearance: none;
  border-radius: 0;
}
.obi_dojo { 
  font-size: 30px;
  height: 50px; 
  line-height: 50px;
  font-weight: normal;
  border: 2px solid #000;
  background-color: #eee8aa;
  text-align: center;
  color: #000;
  -webkit-appearance: none;
  border-radius: 0;
}

/* ++++++++++++ */
/* 暗記道場の画面 */
/* ++++++++++++ */
.dojo_header { font-size: 15px; }
.dojo_title { 
    font-size: 20px; 
    height: 40px; 
}
/* １～３用 */
.dojo_e_ex1 { 
    text-align: center;
    font-size: 16px; 
}
.dojo_e_black1 { 
    text-align: center;
    font-size: 25px; 
    height: 30px; 
}
.dojo_hs_black1 { 
    text-align: left;
    font-size: 25px; 
    height: 30px; 
}
.dojo_e_ans1 {
    text-align: center;
    font-size: 20px; 
    height: 30px; 
}
.dojo_hs_ans1 {
    text-align: center;
    font-size: 20px; 
    height: 30px; 
}
.dojo_e_black3 { 
    text-align: center;
    font-size: 17px; 
    height: 20px; 
}
.dojo_e_ans3 {
    text-align: center;
    font-size: 17px; 
    height: 20px; 
}
.dojo_e_hosoku {
    text-align: center;
    font-size: 20px; 
}
.dojo_hs_hosoku {
    text-align: left;
    font-size: 20px; 
}

.dojo_ex1 { 
    font-size: 13px; 
    height: 20px; 
}
.dojo_ex2 { 
    font-size: 20px; 
    height: 20px; 
}
.dojo_line1 { 
    font-size: 15px; 
    height: 50px; 
    background-color:#d3d3d3;
}
.dojo_line2 { 
    font-size: 15px; 
    height: 40px; 
}
/* 英単語が問題 */
.dojo_E_ques{ 
    font-size: 23px;
    background-color:#d3d3d3;
}
/* 意味が問題 */
.dojo_J_ques{ 
    font-size: 20px;
    background-color:#d3d3d3;
}
/* 英単語が答え */
.dojo_E_ans{ 
    color: red;
    font-size: 27px;
}
/* 意味が答え */
.dojo_J_ans{ 
    color: red;
    font-size: 20px;
}

/* 補足 */
.dojo_hosoku{ 
    color: blue;
    font-size: 18px;
}

.eng_menu { 
    font-size: 20px; 
    height: 60px; 
}

/* +++++++++++++++++++++++++++*++ */
/* メニュー画面下の「戻る」ボタンの設定 */
/* ++++++++++++++++++++++++*+++++ */
.fixed-bottom-btn {
    position: fixed;
    bottom: 2px;       /* 下からの距離 */
    left: 50%;          /* 横中央 */
    transform: translateX(-50%);
    z-index: 1000;
	width: 300px; /* 300px */
}

/* 印刷時は非表示にする */
@media print {
    .fixed-bottom-btn {
        display: none;
    }
}

/* +++++++++++++++++++++++++++++++*++ */
/* メニュー画面下の「戻る」ボタンの色サイズ */
/* +++++++++++++++++++++++++++++++*++ */
button.cmn_modoru {
    font-size: 30px;/* 25px */
    width: 850px; /* 500px */
    height: 60px; /* 50px */
    line-height: 50px; /* ← これで上下中央にピッタリ */
    padding: 0; /* ← 自動余白を無効に */
    color: #000000;
    text-align: center;
    border: 1px solid #000000;
    -webkit-appearance: none;
    border-radius: 0;
    background: -moz-linear-gradient(top, #99ff99, #FFF);
    background: -webkit-linear-gradient(top, #99ff99, #FFF);
    background: linear-gradient(to bottom, #99ff99, #FFF);
}
button.cmn_modoru:hover {
    background-color: #808080;
    color: #ff0000;
}

/* +++++++++++*++ */
/* ドリル作成ボタン */
/* +++++++++++++ */
button.saku_btn_ty {
	font-size: 25px;
	font-weight : bold;
	width:300px;
	height:65px;
	padding: 10px 10px;
	padding-bottom: 15px;
    background-color: #248;
	color: #fff;
    border-style: none;
   -webkit-appearance: none;
   border-radius: 10px;
}
.aida {
	width: 30px;
}

/* +++++++++++*++ */
/* ドリル作成ボタン */
/* +++++++++++++ */
button.saku_btn_2 {
	font-size: 25px;
	font-weight : bold;
	width:150px;
	height:65px;
	padding: 10px 10px;
	padding-bottom: 15px;
    background-color: #248;
	color: #fff;
    border-style: none;
   -webkit-appearance: none;
   border-radius: 10px;
}
.aida2 {
	width: 10px;
}

/* ２段 */
button.saku_btn_2dan {
	font-size: 25px;
	font-weight : bold;
	width:300px;
	height:100px;
	padding: 3px 10px;
	padding-bottom: 15px;
    background-color: #248;
	color: #fff;
    border-style: none;
   -webkit-appearance: none;
   border-radius: 10px;
}

/* 印刷ボタン縦横方向 */
button.saku_math_btn {
	font-size: 25px;
	font-weight : bold;
	width:500px;
	height:60px;
	padding: 10px 10px;
	padding-bottom: 15px;
    background-color: #248;
	color: #fff;
    border-style: none;
   -webkit-appearance: none;
   border-radius: 10px;
}

/* 開発未登録 */
button.saku_math_btn2 {
	font-size: 25px;
	font-weight : bold;
	width:500px;
	height:60px;
	padding: 10px 10px;
	padding-bottom: 15px;
    background-color: #green;
	color: #fff;
    border-style: none;
   -webkit-appearance: none;
   border-radius: 10px;
}


/* +++++++++++++++++++*++ */
/* メニュー画面の高さ微調整用 */
/* +++++++++++++++++++*++ */
.h_chousei1{
	height: 10px; 
	background-color: #ffffff;/* #ffd700 #ffffff */
}
.h_chousei2{
	height: 20px; 
	background-color: #ffffff;
}
.h_chousei3{
	height: 30px; 
	background-color: #ffffff;
}

/* ++++++++++++++++++++++++++++++++++++++++++++*++ */
/* メニューの文字サイズ ext1：茶色、ext2：緑、ext3：説明文*/
/* ++++++++++++++++++++++++++++++++++++++++++++*++ */
.ext1 {
	font-family: sans-serif;
	font-size: 22px;
	color: #800000;
	font-weight : bold;
}
.ext2 {
	font-size: 25px;
    line-height: 45px;   /* 折り返し文字の行間を空ける */
	padding-left: 20px;
	font-weight : bold;
	color: #008000;
	text-align: left;
}
.ext3 {
	font-size: 20px;
	padding-left: 20px;
	padding-right: 20px;
	font-weight : normal;
	text-align: left;
}
.ext3r {
	font-size: 20px;
	padding-left: 20px;
	padding-right: 20px;
	font-weight : normal;
	text-align: right;
}

.unit_ex {
	font-size: 27px; 
    text-align: left;
	position: relative;
	left: 5px;   /* 元の位置から右へpxズレる */
    top: -2px; /* 下にずらす（-2pxで上に移動） */
	right: 10px;   /* 元の位置から右へpxズレる */
}

/* 数学の次へ */
img.thema {
	width: 448px; /* 640*0.7 */
	height: 35px; /* 50*0.7 */
}

/* 数学の個別メニュー */
img.math2025_small {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  position: relative;   /* z-index を効かせるため */
}

/* 
img.math2025_small:hover {
  transform: scale(1.5);
  z-index: 10;
}
 */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* ラジオボタン */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
input[type="radio"] {
    width: 30px;             /* ← 実サイズで拡大（transformを使わない） */
    height: 30px;
    border: 2px solid #0000ff;  /* 枠線を太く（お好みで） */
    border-radius: 50%;      /* ← ラジオボタンなので丸 */
    background-color: #fff;

    -webkit-appearance: none; /* iPad / Safari標準デザイン無効化 */
    appearance: none;
    position: relative;
    cursor: pointer;
}

/*  選択されたときの●マーク（中央固定・iPadでクリック可能） */
input[type="radio"]:checked::after {
    content: "";
    width: 14px;      /* ●の直径 */
    height: 14px;
    background: #0000ff; /* ●の色（変えたい場合はここ） */
    border-radius: 50%; 
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* ← iPadでの選択ズレ防止に重要 */
}

.h_radio{
	height: 30px;
	vertical-align: middle;	
}

/* ラジオボタンの説明 */
.btn_ex {
	font-size: 27px; 
	position: relative;
    top: -1px; /* 下にずらす（-2pxで上に移動） */
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* チェックボックス（PC・スマホ対応）*/
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
input[type="checkbox"] {
    width: 32px;
    height: 32px;
    border: 2px solid #000;
    border-radius: 4px;
    background-color: #fff;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* チェック時の表示（なるべく差が出ない記号） */
input[type="checkbox"]:checked::after {
    content: "✔";        /* ←「×」より差が少ない */
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* セレクト */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
select {
  height: 40px;
  font-size: 22px;
  padding: 6px 10px;
	align: center;
	border: 2px solid #000; /* ★枠線を太く（色は黒） */
  border-radius: 4px;
}

.select-st { width: 100px; }
.select-s { width: 200px; }
.select-m { width: 300px; }
.select-l { width: 400px; }
.select-xl { width: 500px; }

.h_select{
	height: 34px;
	text-align: center;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* テキストボックス１行  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
input[type="text"] {
    height: 37px;              /* これで枠の高さを確保 */
    line-height: 32px;
    font-size: 25px;           /* ナチュラル拡大 */
	text-align: center;
    padding: 2px 6px;
	border: 2px solid #000; /* ★枠線を太く（色は黒） */
    box-sizing: border-box;    /* 印刷ズレ防止 */
    border-radius: 0;
}

.input-vs { width: 100px; }
.input-st { width: 100px; }
.input-s { width: 200px; }
.input-m { width: 300px; }
.input-l { width: 400px; }
.input-xl { width: 500px; }

.kara_size{
	width: 60px;
    font-size: 25px;
	text-align: center;
}

.h_textbox{
	height: 37px;
	vertical-align: bottom;	
	text-align: center;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* 　　テキストエリア複数行の設定  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
textarea {
  font-size: 25px;
  line-height: 1.4;
  border: 2px solid #000; /* 太い枠線 */
  border-radius: 4px;
  background-color: #fefefe;
  color: #000;
  padding: 6px;
  resize: none;
  display: block;
  box-sizing: content-box; /* ←ここを変更！ */
}

/* サイズ指定 */
.mojiretu20-width {
  width: 490px;
  height: 360px;
  margin: 5px;
  display: inline-block;
  background-color: #f8f8f8;
  border-radius: 2px;
}

.h_mojiretu20 {
  height: 400px;
}

/* サイズ指定２ */
.mojiretu10-width {
  width: 380px;
  height: 150px;
  margin: 5px;
  display: inline-block;
  background-color: #f8f8f8;
  border-radius: 2px;
}

.h_mojiretu10 {
  height: 180px;
}

/*xxxxページ切り換えボタンxxxxxxxxxxxxxxxxxxxxxx*/
/****** ボタンの位置固定 ******/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.button-container {
    position: fixed;
    bottom: 1%;             /* 画面下部に固定 */
    left: 50%;             /* 画面中央基準に配置 */
    transform: translateX(-50%); /* 中央寄せ */
    background-color: white;
    padding: 5px;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;          /* 横並び */
    justify-content: center; /* 中央寄せ */
    /*  gap: 10px;              ボタン間の余白 */
}

/* プリント時に非表示となる */
@media print {
    .button-container {
        display: none !important;
    }
}
	
/* ボタンの共通スタイル（固定サイズ） */
.button-container button {
    width: 95px;   /* 横幅固定 */
    height: 40px;   /* 高さ固定 */
    font-size: 25px; /* 文字サイズ固定 */
	/* margin 上から時計回り */
	padding: 0px 0px 3px 0px;
    border-radius: 5px;
    border-style: none;
    font-family: sans-serif;
    font-weight: normal;
    margin-right: 2px;
    margin-left: 2px;
}

/****** 文字サイズ ****** */
.bunsi {
    font-family: sans-serif;
	font-size: 30px; /* 35px */
	text-align: left;
	color: #ff0000;
	padding: 0px 5px 0px 5px;
  }
	
.bline {
    font-family: sans-serif;
	font-size: 25px;
	/* margin 上から時計回り */
	padding: 0px 5px 5px 5px;
  }

.bunbo {
    font-family: sans-serif;
	font-size: 30px; 
	text-align: center;
	/* margin 上から時計回り */
	padding: 0px 5px 0px 2px;
  }

/****** ボタンの色設定 ******/
/* buttonボタン 戻る・印刷 */
button.btn1 {
    background-color: #696969;
	color: #fff;
  }

/* buttonボタン 前へ */
button.prev {
    background-color: #008000;
	color: #fff;
  }

button.prev_dim {
    background-color: #c0c0c0;
	color: #fff;
  }

/* buttonボタン 次へ */
button.next {
    background-color: #008000;
	color: #fff;
  }

button.next_dim {
    background-color: #c0c0c0;
	color: #fff;
  }

/* buttonボタン 問題 */
button.ques {
    background-color: #ff0000;
	color: #fff;
  }

/* buttonボタン 答え */
button.ans {
    background-color: #4169e1;
	color: #fff;
  }

/* buttonボタン 英単語表示 */
button.engw {
    background-color: #ff3300;
	color: #fff;
  }

/* buttonボタン 意味表示 */
button.mean {
    background-color: #996600;
	color: #fff;
  }

/* buttonボタン 答え */
button.add1 {
    background-color: #800000;
	color: #fff;
  }

/* buttonボタン 答え */
button.add2 {
    background-color: #483d8b;
	color: #fff;
  }


/* buttonボタン 答えがない場合 */
button.nothing {
    background-color: #c0c0c0;
	color: #fff;
  }
/*xxxxページ切り換えボタンENDxxxxxxxxxxxxxxxxxxxxxx*/

/*xxxx一覧表の設定xxxxxxxxxxxxxxxxxxxxxx*/
/* 一覧の文字サイズ */
/*xxxx一覧表の設定xxxxxxxxxxxxxxxxxxxxxx*/
.table_list {
    border-collapse: collapse; /* 枠線を重ねない（1本に見える） */
    margin: auto;
	font-size: 25px; 
  }
/* 一覧の文字サイズ */
 .td_list {
    border: 1px solid black;   /* 黒線をセルに */
    padding: 8px;              /* 文字と線の間の余白 */
    text-align: center;        /* 中央寄せ（任意） */
	font-size: 25px;
	height: 30px; 
  }


/* 印刷時 */
@media print {
  body {
    background: #fff;
    color: #000;
  }
  .btn1 {
    display: none;
  }
}

@media print {
  .page-break {
    page-break-before: always; /* 旧仕様 */
    break-before: page;        /* 新仕様 */
  }
}