@charset "UTF-8";

textarea {
  width: 100%;
  height: 300px;
  margin: 0;
  padding:10px;
  font-size:15px;
  line-height:1.4em;
  background-color: rgb(252, 251, 216);
  border: 2px solid rgb(55, 135, 240);
  border-radius: 6px;

}

.setting-a,
.setting-b {
  border: 1px solid #069;
  border-radius: 6px;
  margin-bottom:30px;
}


.common-article-area .setting-a h4,
.common-article-area .setting-b h4 {
  margin: 0;
  background-color: #069;
  color:#fff;
  padding: 10px 10px 4px 10px;
  font-weight: 400;
}

.setting-table {
  width:98%;
  /* border: 2px solid #ccc; */
  border-radius: 10px;
  margin: 10px auto 40px;

}


.setting-table tr {
  border-bottom: 1px dotted #ccc;
}
.setting-table tr td {
  
}

.setting-table tr td p {
  margin: 0;
  padding: 10px 20px;
  display:inline-block;
}
.setting-table tr td p input[type=checkbox] {
  width:20px;
  height:20px;
  margin: 4px 6px;
  vertical-align: middle;
}

.setting-table tr td p input[type=radio] {
  width:20px;
  height:20px;
  margin: 4px 6px;
  vertical-align: middle;
}
.setting-table tr td p select {
  padding: 6px;
  background-color: #eee;
  border: 1px solid #4e8cff;
  border-radius: 6px;
}
.setting-table tr td p input[type=text] {
  padding: 6px;
  width: 360px;
  margin-right:4px;
  background-color: rgb(252, 251, 216);
  border: 1px solid #4e8cff;
  border-radius: 6px;
}
.setting-table tr td p button[type=button] {
  margin:1px;
}

.clr-btn {
  /* width:20px;
  height:20px;
  background-color: #999999;
  color:#fff;
  font-weight: 700;
  font-size:18px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%; */
  padding:0;
  padding-right:4px;
  border: 0;
  margin-right: 0;
  margin-left: 0;
  background-color:unset;
  margin:0;


}


.clr-btn:hover {
  /* background-color: #f60; */
  cursor: pointer;
}

.setting-table thead {
  
}
.setting-table thead tr {
  border: 0;
}

.setting-table thead td p {
  background-color: #eee;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  border-radius: 9999px;
  margin: 10px;
  margin-bottom: 20px;
  padding: 6px;
  display: block;
}
.setting-table td:first-child {
  font-weight: 700;
  white-space: nowrap;
}
.setting-table td:nth-of-type(2){
  display:none;
}

/*google icon */

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}
.material-symbols-outlined {
  margin: 0;
  vertical-align: middle;
  color: #bbb;

}
a .material-symbols-outlined {
  color: rgb(55, 135, 240);
}
a:hover .material-symbols-outlined {
  color: #f60;
}
button .material-symbols-outlined {
  color: rgb(55, 135, 240);
  cursor:pointer;
}
button.clr-btn .material-symbols-outlined {
  color:#bbb;
}
button:hover .material-symbols-outlined {
  color: #f60;
  cursor:pointer;
}

h1 .material-symbols-outlined {
  font-size: 34px;
  margin-right:2px;
}



      /* 続きを見る */
      .accordion {
        position: relative;
        padding-top: 0;
        padding-bottom: 0px;
     }

     /* ボタン */
     .accordion-btn {
        /* background-color: #006; */
        background-color: rgb(94, 95, 89);     
        border: 0;
        /* border-radius: 9999px; */
        /* bottom: 0px; */
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-size: 15px;
        left: 0;
        margin: 0 20px;
        padding: 10px;
        position: relative;
        right: 0;
        text-align: center;
        transition: all .2s;
        width: 170px;
        z-index: 3;
     }
  /* 続きを読むボタンの表記 */
  .accordion-btn::after {
    content: "▼ 基本設定を開く";
 }

 .accordion-btn2::after {
  content: "▼ 詳細設定を開く";
}

 /* ボタンhover時のスタイル */
 .accordion-btn:hover {
    /* background-color: #fff;
    color: #6495ed; */
 }

 .accordion-text {
    /* overflow: hidden; */
    overflow: auto;

    /* テキストを隠す */
    position: relative;
 }

 /* 最初に見えてるテキストエリアの高さ */
 .accordion-text.is-hide {
    height: 0px;
    margin-bottom: 20px;
 }

 /* テキストをグラデーションで隠す */
 .accordion-text::before {
    background: -webkit-linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, #fff 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, #fff 100%);
    bottom: 0;
    content: "";
    height: 0px;
    /* グラデーションで隠す高さ */
    position: absolute;
    width: 100%;
    left:0;
    z-index: 11;
 }

 /* 閉じるボタンの位置 */
 .accordion-btn.is-show {
    /* bottom: 0px; */
    background-color: rgb(185, 185, 180);  
 }

 /* 閉じるボタンの表記 */
 .accordion-btn.is-show::after {
    content: "▲ 設定を閉じる";
 }

 /* 続きを見るボタンをクリックしたらテキストを隠しているグラデーションを消す */
 .accordion-btn.is-show+.accordion-text::before {
    display: none;
 }


      /* 続きを見る     サブ表示 */
      .accordion-sub {
        /* position: relative; */
        padding-top: 0;
        padding-bottom: 0px;
        display: flex;
        flex-direction:row;
        border:1px solid #069;
        /* background-color: #eee; */
        margin:10px auto;
        width:98%;
        flex-wrap:wrap;
     }
.accordion-sub-btn-wrap {
  width:100%;
  text-align: right;
}

     /* ボタン */
     .accordion-sub-btn {
        /* background-color: #006; */
        background-color: #bbb;     
        border: 0;
        /* border-radius: 9999px; */
        /* bottom: 0px; */
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-size: 15px;
        right: 0;
        margin: 0 10px;
        padding: 0;
        position: relative;
        right: 0;
        text-align: center;
        transition: all .2s;
        width: 20px;
        height:20px;
        border-radius: 50%;
        text-align: center;
        vertical-align: middle;
        top:-26px;

     }
  /* 続きを読むボタンの表記 */
  .accordion-sub-btn::after {
    content: "?";
 }


 /* ボタンhover時のスタイル */
 .accordion-sub-btn:hover {
    background-color: #f60;
    color: #fff;
 }

 .accordion-sub-text {
    overflow: hidden;
    /* テキストを隠す */
    position: relative;
    background-color: #dce5ee;
    width:100%;
    margin: 10px 0 0;
    padding: 0;
 }

 /* 最初に見えてるテキストエリアの高さ */
 .accordion-sub-text.is-hide {
    height: 0px;
    margin-bottom: 20px;
    z-index: 2;
 }


 /* 閉じるボタンの位置 */
 .accordion-sub-btn.is-show {
    /* bottom: 0px; */
    background-color:#bbb;  
 }
 .accordion-sub-btn.is-show:hover {
  background-color:#f60;  
}

 /* 閉じるボタンの表記 */
 .accordion-sub-btn.is-show::after {
    content: "×";
    font-size: 18px;
    line-height: 1.0em;
 }

 /* 続きを見るボタンをクリックしたらテキストを隠しているグラデーションを消す */
 .accordion-sub-btn.is-show+.accordion-sub-text::before {
    display: none;
 }
 .settings-head,
 .settings-form {
  border: 1px solid #faa;
  display: block;
 }

 .settings-head {
  display: block;
  width:30%;
 }
 
 .settings-form {
  display: block;
  width:70%;
 }



/* ダウンロードボタン */

#download {
  margin: 10px auto 60px;
  height: 4em;
  font-weight: 700;
  font-size: 16px;
  background-color: #eee;
  border: 2px solid rgb(55, 135, 240);
  border-radius: 6px;
  cursor:pointer;
  padding: 10px 30px;
}

#download:hover {
  background-color: #e7eefd;
  border: 2px solid #f60;
  cursor:pointer;
}


#download .material-symbols-outlined {
font-size: 40px;
margin-right: 10px;
margin-bottom: 10px;

}


/* 反映する ボタン */

#add-btn {
  margin: 0 auto 0;
  width:auto;
  font-weight: 400;
  font-size: 15px;
  padding:10px 1.5em;
  background-color: #eee;
  border: 2px solid rgb(55, 135, 240);
  border-radius: 6px;
  cursor:pointer;
}
#add-btn:hover {
  background-color: #e7eefd;
  border: 2px solid #f60;
  cursor:pointer;
}


#add-btn .material-symbols-outlined {
  font-size:30px;
  margin-bottom: 4px;
  margin-left:4px;
}


/* テキストコピー*/

.js-copy-wrap {
display: flex;
flex-direction: row;
margin-bottom: 40px;
margin-left: 20px;
}
.common-article-area p.copy_alert {
  display:  none;
  padding: 8px 16px 0;
  background-color: #4e8cff;
  border-radius: 9999px;
  color: #fff;
  line-height: 1.6em;
}
.js-copy-wrap p {
margin: 0;
padding: 0;
}

#js-copybtn {
  padding:0;
  margin: 0;
  vertical-align: middle;
  padding: 6px 6px;
  background-color:white;
  border: 0;
  font-size: 18px;
  color: rgb(55, 135, 240);
}
#js-copybtn:hover{
  color: rgb(255, 94, 0);
}
#js-copytext {
  margin:0;
  background-color: #eee;
  border-radius: 6px;
  border: #4e8cff 1px solid;
  padding: 6px 16px;
}

p.file-select {
  background-color: #d8ecfd;
  border-radius:0 0 6px 6px;
  text-align: center;
  /* width:96%; */
  margin: 0;
  padding: 10px;
  font-size: 16px;
  font-weight:700;
}
.file-select input[type=file] {
  margin-left: 20px;
  margin-right: 20px;
  font-size: 16px;
  font-weight: 700;
}
.common-article-area h4 {
  margin: 30px 20px 4px;
}

/* ON OFF スイッチ */

 /* === ボタンを表示するエリア ============================== */
 .switchArea {
  line-height    : 30px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  font-size      : 15px;                /* 文字サイズ         */

  position       : relative;            /* 親要素が基点       */
  margin         :  auto 40px;                /* 中央寄せ           */
  width          : 70px;               /* ボタンの横幅       */
  background     : #fff;                /* デフォルト背景色   */
  display:inline-block;
}

 /* === チェックボックス ==================================== */
.switchArea input[type="checkbox"] {
  display        : none;            /* チェックボックス非表示 */
}

 /* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 30px;                /* ボタンの高さ       */
  border         : 2px solid #999999;   /* 未選択タブのの枠線 */
  border-radius  : 15px;                /* 角丸               */
}

 /* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked +label {
  border-color   : #007fff;             /* 選択タブの枠線     */
}

 /* === 表示する文字（標準） ================================ */
.switchArea label span:after{
  content        : "OFF";               /* 表示する文字       */
  padding        : 0 0 0 18px;          /* 表示する位置       */
  color          : #999999;             /* 文字色             */
  font-weight: 700;
  cursor:pointer;
}

 /* === 表示する文字（ONのとき） ============================ */
.switchArea  input[type="checkbox"]:checked + label span:after{
  content        : "ON";                /* 表示する文字       */
  padding        : 0 18px 0 0;          /* 表示する位置       */
  color          : #007fff;             /* 文字色             */
  font-weight: 700;
  cursor:pointer;
}

 /* === 丸部分のSTYLE（標準） =============================== */
.switchArea .swImg {
  position       : absolute;            /* 親要素からの相対位置*/
  width          : 22px;                /* 丸の横幅           */
  height         : 22px;                /* 丸の高さ           */
  background     : #999999;             /* カーソルタブの背景 */
  top            : 4px;                 /* 親要素からの位置   */
  left           : 4px;                 /* 親要素からの位置   */
  border-radius  : 11px;                /* 角丸               */
  transition     : .2s;                 /* 滑らか変化         */
}

 /* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ .swImg {
  transform      : translateX(40px);    /* 丸も右へ移動       */
  background     : #007fff;             /* カーソルタブの背景 */
}

/* 脚注 */

.caption {
  font-size:15px !important;
  margin: 10px 30px;
}
.caption dl {
  background-color: #efefef;
  padding:20px;
  border-radius: 10px;
  margin-bottom: 30px;
}
.caption dl dt {
  font-weight:700;
  padding-top:10px;
}
.caption dl dd {
  /* padding-left: 1.0em; */
}

#footnote_box dt {
  font-size:15px !important;
  font-weight:700;
}
.caption-text {

}
.caption-text p {
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.5em;

}

.caption-img {
}
.caption-img p {
  text-align: left;
  margin:16px;
}

.caption-img img {
  max-width:100%;
  margin:0;
}
.caption-parameter {
  font-weight: 700;
  color: #06f;
  margin-top: 10px;
}

.icon_help {
  display: inline-block;
  width:20px;
  height:20px;
  border: 2px solid #ccc;
  color: #ccc !important;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  margin: 0 10px;
  line-height: 1.2em;
  cursor: default;
}


a.icon_help:hover {
  color:#f60 !important;
  border: 2px solid #f60;
}

.icon_help img {
  width:20px;
  height:20px;
  display: inline-block;
}


.caption-area h2 {
  font-size: 18px;
  border:0;
  margin-top:-30px;
  margin-left:20px;
  padding: 6px 0;
  line-height: 1.6em;
  cursor: pointer;
}

details {
  /* border: 1px solid #aaa; */
  /* border-radius: 4px; */
  /* padding: 0.5em 0.5em 0; */
}

summary {
  /* font-weight: bold; */
  /* margin: -0.5em -0.5em 0; */
  /* padding: 0.5em; */
}

details[open] {
  /* padding: 0.5em; */
}

details[open] summary {
  /* border-bottom: 1px solid #aaa; */
  /* margin-bottom: 0.5em; */
}
summary::marker {
  top:30px;

}

.word-deco {
  display: flex;
  flex-wrap:wrap;
  /* justify-content:space-between; */
  padding-left: 10px;
}
.setting-table tr td.word-deco p {
  padding:0px 0px 10px 10px;
}
.setting-table tr td.word-deco p:first-child {
  width: 6.0em;
  padding-right: 0;
}
.setting-table tr td.word-deco div {
  width:50%;
}

.input-small {
  width:9em !important;
}
.input-midium {
  width:20em !important;
}
.text-left {
  text-align: left !important;
}
/* 入力エラー */
/* input:invalid {
	background-color: lightpink !important;
} */


      /*-------------------------- レスポンシブ用CSS ここから -----------------------------------------*/
      @media screen and (max-width:640px) {
          /* ↓ここに個別のスマホ用スタイルを指定 */


          textarea {
            margin: 10px 0;
            padding:10px;
            width:100%;
          }

          p.file-select {
            margin: 30px 0;
            padding:10px;
            width:100%;
          }

          .common-article-area h4 {
            margin: 30px 0 6px;
          }
          .js-copy-wrap {
            margin-left: 0;
          }
          #js-copytext {
            width:270px;
          }


          /* 脚注 */

.caption {
  font-size:15px !important;
  margin: 10px 0;
}
   

          /* ↑ここまでに個別のスマホ用スタイルを指定 */
      }


      /*-------------------------- レスポンシブ用CSS ここまで ----------------------*/