#container{position: relative;margin:0px 10px 0px 10px;font-size:16px;}
#loading{
 width:100%;
 height:100%;
 background-color:rgb(255 255 255 / 80%);
 vertical-align:middle;
 position:absolute;
 left:0%;
 top:0%;
 margin-left:-30px;
}

/* 全体レイアウト */
body {
 margin: 70px 0 0 0 ;
 padding: 0;
 border: 0;
 background-color:#fdfdff;
}

.title {
 text-align:left;
 color:#000080;
 background-color:rgba(221,221,255,0.52);
 width:100%;
 margin-top:1px;
 margin-bottom:1px;
 padding:10px 0 0 0;
 font-size:2vw;
 font-weight: bold;
 border-top:1px solid;
 border-bottom:1px solid;
}

.wrapper {
 display: grid;
 grid-template-columns: 50% 50%;
 grid-template-rows: max-content max-content 1fr auto;
 margin: 1% 1% 1% 1%;
 gap: 7px;
}

.writebox {
 background-color:#FaFaFF;
 grid-column-start: 1;
 grid-column-end: 1;
 grid-row-start: 1;
 grid-row-end: 1;
 padding: 1% 1% 1% 1%;
 box-shadow: 1px 1px 5px 1px #555;
}

.samplebox {
 background-color:#FaFaFa;
 grid-column-start: 2;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 1;
 padding: 1% 1% 1% 1%;
 box-shadow: 1px 1px 5px 1px #555;
}

.output {
 background-color:#FFFaFa;
 grid-column-start: 1;
 grid-column-end: 1;
 grid-row-start: 2;
 grid-row-end: 2;
 padding: 1% 1% 1% 1%;
 box-shadow: 1px 1px 5px 1px #555;
}

.profile {
 visibility: collapse;
 background-color:#F5FaF5;
 grid-column-start: 2;
 grid-column-end: 2;
 grid-row-start: 2;
 grid-row-end: 2;
 padding: 1% 1% 1% 1%;
 box-shadow: 1px 1px 5px 1px #555;
}

.image {
 background-color:#F5F5FF;
 grid-column-start: 2;
 grid-column-end: 2;
 grid-row-start: 2;
 grid-row-end: 2;
 padding: 1% 1% 1% 1%;
 box-shadow: 1px 1px 5px 1px #555;
}

.information {
 background-color:#FFFFEA;
 grid-column-start: 1;
 grid-column-end: 3;
 grid-row-start: 3;
 grid-row-end: 3;
 padding: 1% 1% 1% 1%;
 box-shadow: 1px 1px 5px 1px #555;
}

.cm {
 background-color:#e9F9FF;
 grid-column-start: 1;
 grid-column-end: 3;
 grid-row-start: 5;
 grid-row-end: 5;
 padding: 1% 1% 1% 1%;
 box-shadow: 1px 1px 5px 1px #555;
}

.objTitle {
 display: inline-block;
 font-weight: bold;
 vertical-align: text-bottom;
 margin: 0 0 0 5px;
/* width:130px;*/
}

h1{text-align:left; color:#000080; background-color:#ddddff; width:100%; margin-top:4px; margin-bottom:10px; padding:1px; font-size:200%; border-top:1px solid; border-bottom:1px solid;}
h2{text-align:left; color:#000080; background-color:#eeeeff; width:100%; margin-top:4px; margin-bottom:10px; padding:0.5px; font-size:150%; border-top:0.5px solid; border-bottom:0.5px solid;}
h3{text-align:left; color:#000080; background-color:#eeffff; width:100%;  margin-top:4px; margin-bottom:10px; padding:0.25px; font-size:120%; border-top:0.5px solid; border-bottom:0.0px solid;}


/* 広告用css */
div.cmField {
 display: flex;
}

div.cmContents {
 width:150px;text-align:center;
}

/* ボタン */
button.pdf {
    width:100%;
    height:2.5em;
    font-weight:bold;
}

button.img {
    width:100%;
    height:2.5em;
    font-weight:bold;
}

button.tnf {
    width:100%;
    height:2.5em;
    font-weight:bold;
}

/* プロファイル関連 */
input.profilenumber { 
 width:50px; 
}
select.fontselect {
 width:150px; 
}

select.dyeing {
 width:80px; 
}

input[type=text] {
 font-size: 100%;
}

/* テキスト入力関連 */
textarea {
 font-size: 100%;
 font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック','メイリオ',Meiryo,sans-serif;
}

/* 項目の表示・非表示 */
.box-show {
 height:0;
 overflow:hidden;
 background-color:#FFF5F5;
}
.hidden-box input:checked ~ .box-show
{
 height:auto;
}
.detail, .detail2
{
 margin:.5em;
 padding:.5em;
}
.detail
{
 background-color:#f5f5f5;
}
.detail2
{
 background-color:#f5f5f5;
}


.outputArea {
 display: grid;
 grid-template-columns: 15% 19% 19% 19% 28%;
}

.outputItemTitle {
 /* background-color:#ffbbaa; */
 grid-column-start: 1;
 grid-column-end: 1;
 padding: 1% 0% 1% 0%;
}

.outputItemTitleDetail {
 display:none;
 /* background-color:#ffbbaa; */
 grid-column-start: 1;
 grid-column-end: 1;
 padding: 1% 0% 1% 0%;
}

.profileSelect {
 /* background-color:#ffbbaa; */
 grid-column-start: 2;
 grid-column-end: 5;
 grid-row-start: 1;
 grid-row-end: 1;
 padding: 1% 0% 1% 0%;
}

.outputImg {
 /* background-color:#ff0000; */
 grid-column-start: 5;
 grid-column-end: 5;
 grid-row-start: 1;
 grid-row-end: 5;
}

.outputSelect {
 /* background-color:#00ff00; */
 grid-column-start: 2;
 grid-column-end: 5;
 grid-row-start: 2;
 grid-row-end: 2;
 padding: 1% 0% 1% 0%;
}

.addInfo {
 display:none;
 /* background-color:#00ffff; */
 grid-column-start: 2;
 grid-column-end: 5;
 grid-row-start: 3;
 grid-row-end: 3;
 padding: 1% 0% 1% 0%;
}

.setMargin {
 display:none;
 /* background-color:#ffffff; */
 grid-column-start: 2;
 grid-column-end: 5;
 grid-row-start: 4;
 grid-row-end: 4;
 padding: 1% 0% 1% 0%;
}

.templateSelect {
 display:none;
 /* background-color:#aaFaFa; */
 grid-column-start: 2;
 grid-column-end: 6;
 grid-row-start: 5;
 grid-row-end: 5;
 padding: 1% 0% 1% 0%;
}

.setStartPage {
 display:none;
 /* background-color:#aaFFFF; */
 grid-column-start: 2;
 grid-column-end: 6;
 grid-row-start: 6;
 grid-row-end: 6;
 padding: 1% 0% 1% 0%;
}

.setFilename {
 display:none;
 /* background-color:#aaFF11; */
 grid-column-start: 2;
 grid-column-end: 6;
 grid-row-start: 7;
 grid-row-end: 7;
 padding: 1% 0% 1% 0%;
}

.setPageRange {
 display:none;
 /* background-color:#99FFaa; */
 grid-column-start: 2;
 grid-column-end: 6;
 grid-row-start: 8;
 grid-row-end: 8;
 padding: 1% 0% 1% 0%;
}

.addSetting {
 display:none;
 /* background-color:#99FF00; */
 grid-column-start: 2;
 grid-column-end: 6;
 grid-row-start: 9;
 grid-row-end: 9;
 padding: 1% 0% 1% 0%;
}


.profileArea {
 display: grid;
 grid-template-columns: minmax(150px,auto) minmax(200px,auto) minmax(150px,auto) minmax(150px,auto) minmax(150px,auto);

 /* 
 grid-template-columns: fit-content(200px) fit-content(300px) fit-content(200px) fit-content(200px) fit-content(200px);
 grid-template-columns: 20% 25% 18% 17% 20%;
 */
}

.paperSize {
 /* background-color:#ffbbaa; */
 grid-column-start: 1;
 grid-column-end: 1;
 grid-row-start: 1;
 grid-row-end: 3;
}

.layoutPosition {
 /* background-color:#aaffaa; */
 grid-column-start: 2;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 3;
}

.stringsParameter {
 /* background-color:#aaff00; */
 grid-column-start: 3;
 grid-column-end: 3;
 grid-row-start: 1;
 grid-row-end: 3;
}

.tombParameter {
 /* background-color:#ff5533; */
 grid-column-start: 4;
 grid-column-end: 4;
 grid-row-start: 1;
 grid-row-end: 3;
}

.paintParameter {
 /* background-color:#ff5533; */
 grid-column-start: 5;
 grid-column-end: 5;
 grid-row-start: 1;
 grid-row-end: 3;
}

.fontParameter {
 /* background-color:#55aa33; */
 grid-column-start: 1;
 grid-column-end: 1;
 grid-row-start: 2;
 grid-row-end: 2;
}

.fontArea {
 display: grid;
 width:100%;
 grid-template-columns: 33.333333% 33.333333% 33.333333%;
}

.fontSelectTitle {
 /* background-color:#55aa33; */
 grid-column-start: 1;
 grid-column-end: 4;
 grid-row-start: 1;
 grid-row-end: 1;
}

.stringsFontSelect {
 /* background-color:#55aaf3; */
 grid-column-start: 1;
 grid-column-end: 1;
 grid-row-start: 2;
 grid-row-end: 2;
}

.titleFontSelect {
 /* background-color:#55aaf3; */
 grid-column-start: 2;
 grid-column-end: 2;
 grid-row-start: 2;
 grid-row-end: 2;
}

.templateFontSelect {
 /* background-color:#55aaf3; */
 grid-column-start: 3;
 grid-column-end: 3;
 grid-row-start: 2;
 grid-row-end: 2;
}

.sampleArea {
 display: grid;
 grid-template-columns: 10% 40% 40% 10%;
}

.sampleTitle {
 /* background-color:#55aa33; */
 grid-column-start: 1;
 grid-column-end: 5;
 grid-row-start: 1;
 grid-row-end: 1;
}

.imageOn {
 /* background-color:#55aa33; */
 text-align:center;
 grid-column-start: 1;
 grid-column-end: 5;
 grid-row-start: 5;
 grid-row-end: 5;
}

.leftImage {
 /* background-color:#55aa33; */
 text-align: right;
 grid-column-start: 2;
 grid-column-end: 2;
 grid-row-start: 3;
 grid-row-end: 3;
}

.rightImage {
 /* background-color:#55aa33; */
 text-align: left;
 grid-column-start: 3;
 grid-column-end: 3;
 grid-row-start: 3;
 grid-row-end: 3;
}

.samplePageNum {
 /* background-color:#ffaa33; */
 text-align:center;
 grid-column-start: 1;
 grid-column-end: 5;
 grid-row-start: 4;
 grid-row-end: 4;
}

.paperType {
 /* background-color:#ff6633; */
 text-align:center;
 grid-column-start: 1;
 grid-column-end: 5;
 grid-row-start: 6;
 grid-row-end: 6;
}

.informationArea {
 display:none;
 /* display: grid; */
 grid-template-columns: 10% 23.3333% 10% 23.3333% 10% 23.3333%;
}

.infoAreaTitle {
 /* background-color:#ffffff; */
 grid-column-start: 1;
 grid-column-end: 5;
 padding: 0% 0% 0% 0%;
}

.infoAreaItemName1 {
 /* background-color:#ffffff; */
 grid-column-start: 1;
 grid-column-end: 1;
}

.infoAreaItemName2 {
 /* background-color:#ffffff; */
 grid-column-start: 3;
 grid-column-end: 3;
}

.infoAreaItemName3 {
 /* background-color:#ffffff; */
 grid-column-start: 5;
 grid-column-end: 5;
}

.infoAreaItemValue1 {
 /* background-color:#ffffff; */
 grid-column-start: 2;
 grid-column-end: 2;
}

.infoAreaItemValue2 {
 /* background-color:#ffffff; */
 grid-column-start: 4;
 grid-column-end: 4;
}

.infoAreaItemValue3 {
 /* background-color:#ffffff; */
 grid-column-start: 6;
 grid-column-end: 6;
}

input.inputInformation {
 padding-left:0;
 padding-right:0;
 width:100%;
}

input.startpage {
 width: 40px;
 text-align: right;
}

th.info {
 background-color: #FFFFEA;
 text-align:left;
 vertical-align:bottom;
 padding-top:5px;
}
td.info {
 background-color: #FFFFEA;
 border:1px solid;
 border-color:#bbbbbb;
 white-space:nowrap;
}

table.man{
 border:1px solid;
 background-color:#eef3f9;
 border-color:#bbbbbb;
 border-collapse: collapse;
}
th.man{
 text-align:left;
 white-space: pre-wrap;
 border:2px solid;
 background-color:#fff4fa;
 border-color:#bbbbbb;
}
td.man{
 border:1px solid;
 background-color:#e0f3f9;
 border-color:#bbbbbb;
}

#profileView:checked ~ .profile {
 visibility: visible;
}

#outputDetail:checked ~ * .outputItemTitleDetail {
 display:inline;
}

#outputDetail:checked ~ * .addInfo {
 display:inline;
}

#outputDetail:checked ~ * .setMargin {
 display:inline;
}

#outputDetail:checked ~ * .templateSelect {
 display:inline;
}

#outputDetail:checked ~ * .setStartPage {
 display:inline;
}

#outputDetail:checked ~ * .setFilename {
 display:inline;
}

#outputDetail:checked ~ * .setPageRange {
 display:inline;
}

#outputDetail:checked ~ * .addSetting {
 display:inline;
}

#informationView:checked ~ .informationArea {
 display:grid;
}

input.tools{
    margin:0;
    padding:0;
    width:40px;
    text-align:center;
}

input.tools_ruby{
    margin:0;
    padding:0;
    width:60px;
    text-align:center;
}

input.tools_tag{
    margin:0;
    padding:0;
    width:120px;
    text-align:center;
}

input.tools_conv{
    margin:0;
    padding:0;
    width:150px;
    text-align:center;
}

.summary {
  display: grid; /* 初期値の display: list-item 以外を指定したので、デフォルトの三角形アイコンは非表示になる */
  /* grid-template-columns: 1fr 24px; */
  gap: 6px;
  align-items: center;
  text-align:center;
  padding: 1px 1px 1px 1px;
  margin: 3px 5px 10px 0px;
  background-color: #eeeeff;
  border-radius: 5px;
  border-top: 1px solid #ddddff;
  border-left: 1px solid #aaaaff;
  border-right: 1px solid #aaaaff;
  border-bottom: 1px solid #ddddff;
}

.details {
  /* --------アコーディオンの中身のスタイル-------- */
  &::details-content {
    transition:
      height 0.4s,
      opacity 0.4s,
      content-visibility 0.4s allow-discrete;
    height: 0;
    opacity: 0;
    overflow: clip;
    background-color: #eeeeff;
  }

  /* --------アコーディオンの中身のスタイル（開いている時）-------- */
  &[open]::details-content {
    opacity: 1;
  }

  /* アコーディオンが開いた時のスタイル */
  &[open] .icon {
    transform: rotate(180deg);
  }
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
  }
  details[open]::details-content {
    height: auto;
  }
}

/* height:0→autoへのアニメーションが対応していない場合は、固定値にアニメーションさせる */
@supports not (interpolate-size: allow-keywords) {
  details[open]::details-content {
    height: 150px;
    overflow-y: scroll;
  }
}

.toolsArea {
 width:99%;
 display: none;
 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 margin: 5 auto;
 text-align:center;
}

#toolsview:checked ~ .toolsArea {
 display:grid;
}

header {
  display: flex;
  /*justify-content: space-between;*/
  position: fixed;
  top: 0px;
  left:0px;
  padding: 0px 0px;
  height:50px;
  width:100%;
  /* background-color:rgba(3,169,244,0.1);*/
  /* background-color:rgba(0,0,0,0.02); */
  z-index: 5;
}