@charset "UTF-8";

/* この下からリニューアルサイト用のCSS 2025 */

/* 黄色を出したくないページ（body指定） */
body.no-radio-row-highlight tr:has(input[type="radio"]:checked) {
  background-color: transparent !important;
}


#main {
/* 02paper内のはがき用紙選択ページ用 */

#linenap  {
	width: 600px !important;
}

table#price{
	width: 600px !important;
}


#course02 .yoshisentaku{
	width: 600px;
	max-width: 100%;
	margin: 0px;
	padding: 0px;
	border: 1px solid #999999;
	border-top-width: 0px;
	border-top-style: none;
}
#course02 .yoshisentaku tr {
	border-right: 1px solid #999999;
}
#course02 .yoshisentaku th  {
	border-left: 1px solid #999999;
	background-color: #ECF5E8;
	font-weight: normal;
	padding-right: 15px;
	padding-left: 15px;
	vertical-align: middle;
}
#course02 .yoshisentaku td    {
	border-left: 1px solid #999999;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-right-width: 0px;
	border-right-style: none;
	padding-right: 10px;
	vertical-align: top;
}
#course02 .yoshisentaku a  {
	text-decoration: none;
}
#course02 .yoshisentaku td#cel {
	width: 80px;
	padding-right: 0px;
	padding-left: 0px;
	text-align: center;
}
#course02 .yoshisentaku td.select {
	padding: 0px;
	width: 75px;
}
#course02 .yoshisentaku #katsuai {
	display: none;
}
#course02 .yoshisentaku img {
	vertical-align: baseline;
}


.colorselect P {
	font-weight: bold;
	font-size: 1.3em;
	text-align: center;
}
.colorselectcl {
	text-align: center;
	font-weight: bold;
	font-size: 1.3em;
	background: #FBEF44;
}


.colorselectw {
	font-weight: bold;
	font-size: 1.1em;
	text-align: center;
}
.colorselectclcon {
		text-align: justify;
	font-weight: normal;
	font-size: 1em;
	background: #FBEF44;
}
.colorselectm {
	font-weight: bold;
	font-size: 1.1em;
	text-align: center;
	background: #FBEF44;
}









/* 03optionページ内のモーダル用 */


.modal-wrapper .modal-content table td{
  border: none;
}

#footermodal {
	color: #FFFFFF;
	background-color: #333333;
	height: 20px;
	padding: 5px;
	text-align: center;
	margin-top: 20px;
}
.modallist {
	padding-left: 20px;
	font-size: 1.2em;
	lign-height: 2em;
	font-weight: 300;
}

.bfmodal tr td {
	border:none !important;
}

.mdtitlebox {
    padding: 0.5em 0.5em;
    margin: 0.5em 0;
    background: #f0f7ff;
    border: dashed 2px #5b8bd0;/*点線*/
}
.mdtitlebox p {
    margin: 0;
    padding: 0;
	font-size: 1.2em;
	lign-height: 2em;
	font-weight: 300;
}


.mdtitlebox02 {
    padding: 0.5em 1em;
    margin: 0.5em 0;
    background:#59E3A5;
    border: dashed 2px #239F67;/*点線*/
}
.mdtitlebox02 p {
    margin: 0;
    padding: 0;
	font-size: 1.2em;
	font-weight: 700!important;
}

.kihonp01 {
	font-size: 1.2em;
	font-weight: bolder;
}
.kihonp01m {
	font-size: 1.2em;
	font-weight: bolder;
	text-align: justify;
	padding: 10px;
	border-top: none;
    border-bottom: 1px solid #333;
}
.kihonp02 {
	font-size: 1.2em;
	lign-height: 2em;
	font-weight: 300;
}
.kihon03 {
	font-size: 1.2em;
	lign-height: 2em;
	font-weight: bolder;
	background-color: #cccccc;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 15px;
	margin-bottom: 10px;
	margin-top: 30px;
}



/* 03optionページ用 */

.option .op_titleprice{
	padding: 0px;
}
.option td .op {
	background-color: #ddffee;
	font-size: 1.5em;
	font-weight: bold;
}
.option td.opcontents{
	padding: 0px;
	text-align: justify;
}
.oppriced {
	background-color: #eeffdd;
	font-size: 1.5em;
	font-weight: bold;
	color:#F0102C;
	padding: 0px;
	text-align: right;
	width: 140px;
}
.option td .opprice {
	background-color: #ddffee;
	font-size: 1.5em;
	font-weight: bold;
	color:#F0102C;
	padding: 0px;
	text-align: right;
	width: 140px;
}
.opppricebox {
    background-color: #ffffff;
    margin-right: 10px;
    padding: 5px;
    border: solid 2px #FF0000;
    border-radius: 15px;
    display: inline-block;
    color:#FF0000;
    white-space: nowrap;
}
.opppricebox p {
	text-align: right;
    margin: 0; 
    padding: 0;
}
tr .opcontents p {
	padding-top: 10px;
	font-weight: bolder;
	font-size: 1.1em;
}
.opimg {
	border:none;
}
.option td.opd {
	background-color:#eeffdd;
	font-size: 1.5em;
	font-weight: bold;
}
label {
  border: none;
  padding-top: 5px;
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  cursor: pointer;
  display: inline-block;
}
.opcontents label:hover {
  background: #ECF5E8;
}
/* 03option：選択されている行の右側説明をハイライト */
table.option tr:has(input[name="layoutoption"]:checked) td.opcontents > label {
  background: #FFFE8E;
  display: block;
}


.Customized-Item-Radio {
  accent-color: #000;
}

table.option td.opcontents:has(input[name="layoutoption"]:checked){
  background-color: #fff6b0;
  padding: 10px 8px;
}

table.option td.opcontents:has(input[name="layoutoption"]:checked) .opppricebox{
  display: inline-block;
  line-height: 1.3;
  box-sizing: border-box;
}
.opton table {
  border-collapse: collapse;
  width: 300px;
}

.opton td {
  border: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
  padding: 12px;
}
td.maru:has(label.green_radio) {
  background-color: #00AA00;
}




/* ホバー時 */
.option tr:hover {
  background-color: #FCFCE9;
}

.bfmodal tr:hover {
  background-color: #ffffff;
}

.nyukodata tr:hover {
  background-color: #ffffff;
}

.bfmodal td {
  border: none;
  text-align: center;
  padding: 0px;
}

/* ラジオボタンが選択されている行をハイライト */
tr:has(input[type="radio"]:checked) {
  background-color: #FFFE7C;
}



/* label全体をクリック可能に */
label {
  display: block;
  cursor: pointer;
}





.kihonp02m {
	font-size: 1.2em;
	lign-height: 2em;
	font-weight: 300;
	text-align: justify;
	border-top: none;
    border-bottom: 1px solid #333!important;
}





/* 03option  modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;                 /* 普段は閉じておく */
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100dvh;
  background-color: rgb(0 0 0 / 60%);
}
.modal:target {
  display: flex;
}
.close {
  top: 20px;
  right: 20px;
  font-size: 36px;
  color: black;
  text-decoration: none!important;
  cursor: pointer;
  transform: translate(50%, -50%);
	}
.closetext {
  font-size: 20px;
  color: black;
  border: 2px solid #aaa;
  padding: 0.5em;
  border-radius: 15px;
	}
.closetext:hover {
    color: #fff; /* 文字色を白にする */
    background-color: #999; /* 背景色をグレー（#999999）にする */
    text-decoration: none; /* リンクに出てくる下線を無効にする*/   
	}
.modal-wrapper {
  position: relative;
  width: 80%;
  max-width: 550px;
  max-height: 70%;
  padding: 20px;
  margin: auto;
  overflow: scroll;
  background-color: #FEFEFE;
  border-radius: 5px;
}
.modal-wrapper-l {
  position: relative;
  width: 65%;
  max-width: 100%;
  max-height: 90%;
  padding: 5px;
  margin: auto;
  overflow: scroll;
  background-color: #FEFEFE;
  border-radius: 5px;
}

.modal-content h1 {
margin-top: 10px;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.bfmodal  {
	text-align: center;
	margin-top: 0px;
	font-size: 24px;
	letter-spacing: -0.02em;
	background-color: #ffffff;
}
.optionmodal td {
  border: 1px solid #000!important;
  padding: 12px;
}
.kihonright {
	padding-left: 30px;
}






.modal-wrapper .modal-content table td{
  border: none;
}

#footermodal {
	color: #FFFFFF;
	background-color: #333333;
	padding: 5px 10px;
	text-align: center;
	margin-top: 20px;
	height: auto;        /* ← これに変更（または削除） */
	line-height: 1.4;    /* ← 行間を詰める */
	box-sizing: border-box;
}
.modallist {
	padding-left: 20px;
	font-size: 1.2em;
	lign-height: 2em;
	font-weight: 300;
}

.bfmodal tr td {
	border:none !important;
}

.mdtitlebox {
    padding: 0.5em 0.5em;
    margin: 0.5em 0;
    background: #f0f7ff;
    border: dashed 2px #5b8bd0;/*点線*/
}
.mdtitlebox p {
    margin: 0; 
    padding: 0;
	font-size: 1.2em;
	lign-height: 2em;
	font-weight: 300;
}


.mdtitlebox02 {
    padding: 0.5em 1em;
    margin: 0.5em 0;
    background:#59E3A5;
    border: dashed 2px #239F67;/*点線*/
}
.mdtitlebox02 p {
    margin: 0; 
    padding: 0;
	font-size: 1.2em;
	font-weight: 700!important;
}

.kihonp01 {
	line-height: 1.6; 
	font-size: 1.2em;
	font-weight: bolder;
}
.kihonp01m {
	line-height: 1.6; 
	font-size: 1.2em;
	font-weight: bolder;
	text-align: justify;
	padding: 10px;
	border-top: none;
    border-bottom: 1px solid #333;
}
.kihonp02 {
	font-size: 1.2em;
	lign-height: 2em;
	font-weight: 300;
}
.kihon03 {
	font-size: 1.2em;
	lign-height: 2em;
	font-weight: bolder;
	background-color: #cccccc;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 15px;
	margin-bottom: 10px;
	margin-top: 30px;
}


/* a0_basic/voice_form.html */
p.voice-question {
  background: #c2edff;/*背景色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
  margin-bottom: 20px;

}
/* ラジオボタン用ラベル（voice_form想定） */
.radio-label {
  display: block;
  padding: 1px 0;     /* 行間の正体はここ */
  cursor: pointer;
}





}
/* main　終わり */