/*
ブロックエディター用のスタイルシートを読み込む 実際のウェブサイトには反映されないのでカスタム　CSSで追加

bodyと記述していた場合、それも自動的に.editor-styles-wrapperに置き換えてくれます。

エディター用スタイルの中では、特にセレクターを意識せずに記述しても、ブロックエディター内にだけ適用される形

editor-style.cssに@importがあると「@importが効かない」ではなく「editor-style.cssが効かな」くなります。

WordPressの編集画面ではその先祖要素はないため外しましょう。
*/

/* ブロックエディタで生成される strong 要素内のテキストにスタイルを指定 */
.editor-styles-wrapper strong {
    color: var(--main-text, #333);
    /* 他のスタイルも追加できます */
}

.dark-theme .editor-styles-wrapper strong {
    color: var(--link-color-red, #FF0099);
    /* 他のスタイルも追加できます */
}

 /*@import url('sample.css');*/


/* モバイルサイズの画面に対するスタイル */
@media (max-width: 768px) {
    .wp-block-image img {
        width: 100%;
    }
}

body {
  font-family: 'Inter', sans-serif
 }


table {
	width: 100%;
	height: auto;
}


.img {
	width: 100%;
	height: auto;
	}

.genshin_updated a img:hover{
border-color: #0bd;
}

.editor-styles-wrapper h4 {
  font-size: 1.125rem;
  line-height: 1.4;
  background: url(images/sprite.svg) no-repeat;
  background-size: 302px 900px;
  background-position: 0 -200px;
  border-block: 3px #f8bbd0 solid;
  padding: 10px 0 8px 25px;
  margin-bottom: 15px;
  fill: #000;
}

.editor-styles-wrapper h4 {
  position: relative;
  border-top: solid 2px #f8bbd0;
  border-bottom: solid 2px #f8bbd0;
  border-left: solid 2px #f8bbd0;
  border-right: solid 2px #f8bbd0;
  border-radius: 5px 5px 5px 5px;
  background: -webkit-repeating-linear-gradient(-45deg, #ffe6e6, #ffe6e6 3px, #ffd9d9 3px, #ffd9d9 7px, #ffe6e6 7px);
  background: repeating-linear-gradient(-45deg, #ffe6e6, #ffe6e6 3px, #ffd9d9 3px, #ffd9d9 7px, #ffe6e6 7px);
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
  color: #000;
}

.editor-styles-wrapper h4:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f0a7\ POINT';
  background: #f8bbd0;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  /*font-size: 0.7em;*/
  line-height: 1;
  letter-spacing: 0.05em;
}

.editor-styles-wrapper h6 {
    font-size: 1.125rem;
    line-height: 1.4;
    background: url(images/sprite.svg) no-repeat;
    background-size: 302px 900px;
    background-position: 0 -200px;
    border-block: 3px #f8bbd0 solid;
    padding:0.25em 0.5em;
    margin-bottom: 15px;
    fill: #000;
}


  /*Check*/
.editor-styles-wrapper h5 {
  position: relative;
  color: #000;
  outline: auto;
  outline-color: #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  padding: 0.25em 0.5em;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;

}

.editor-styles-wrapper h5:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f00c Check';
  background: #2196F3;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  /*font-size: 0.7em;*/
  line-height: 1;
  letter-spacing: 0.05em

}
/*Pont*/
.editor-styles-wrapper h4　{
  position: relative;
  border-top: solid 2px #f8bbd0;
  border-bottom: solid 2px #f8bbd0;
  border-left: solid 2px #f8bbd0;
  border-right: solid 2px #f8bbd0;
  border-radius: 5px 5px 5px 5px;
  background: -webkit-repeating-linear-gradient(-45deg, #ffe6e6, #ffe6e6 3px, #ffd9d9 3px, #ffd9d9 7px, #ffe6e6 7px);
  background: repeating-linear-gradient(-45deg, #ffe6e6, #ffe6e6 3px, #ffd9d9 3px, #ffd9d9 7px, #ffe6e6 7px);
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
  color: #000;
}


.editor-styles-wrapper h4:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f0a7\ POINT';
  background: #f8bbd0;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  /*font-size: 0.7em;*/
  line-height: 1;
  letter-spacing: 0.05em;
}



/* タイトルのスタイルを変更 */
.editor-post-title {
    font-family: 'Inter', sans-serif; /* フォントを変更 */
    font-size: 24px; /* フォントサイズを変更 */
    color: #333; /* フォントの色を変更 */
    font-style: italic; 
    font-size:30px;
}

/* 他のブロックのスタイルも変更可能 */
 .genshin_updated p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    /*color: #555;*/
    letter-spacing: normal;

}

 .post type p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #555;
    letter-spacing: normal;
}


/* 投稿管理画面ページのスタイル */
.type-post ol,
.edit-post-layout.interface-interface-skeleton:not(.post-type-genshin_updated) ol {
  counter-reset: number; /* 数字をリセット */
  list-style-type: none!important; /* 番号を一旦消す */
  padding: 0.3em 0.8em;
  border: solid 2px pink; /* 枠線の色をピンクに */
}

.type-post ol li,
.edit-post-layout.interface-interface-skeleton:not(.post-type-genshin_updated) ol li {
  border-bottom: dashed 1px pink; /* 下線の色をピンクに */
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}

.type-post ol li:before,
.edit-post-layout.interface-interface-skeleton:not(.post-type-genshin_updated) ol li:before {
  /* 数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /* 数字のデザイン変える */
  display: inline-block;
  background: pink; /* 背景色をピンクに */
  color: white;
  font-family: 'Avenir', 'Arial Black', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /* 上下中央寄せのため */
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* カスタム投稿ページのスタイル */
.type-genshin_updated ol{
  counter-reset: number;
  list-style-type: none !important;
  padding: 0.3em 0.8em;
  border: solid 2px pink;
}
.type-genshin_updated ol li{
  border-bottom: dashed 1px pink;
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}
.type-genshin_updated ol li:before{
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  background: pink;
  color: #fff;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

/* type-genshin_updated_j 用 番号付きリスト */
/* ===== Genshin Update News JP 専用 ===== */
.type-genshin_updated_jp ol{
  counter-reset: jnum !important;
  list-style: none !important;
  margin: 0;
  padding: .3em .8em;
  border: 2px solid pink;
}
.type-genshin_updated_jp ol > li{
  position: relative;
  border-bottom: 1px dashed pink;
  padding: .5em .5em .5em 34px;
  line-height: 1.6;
}
.type-genshin_updated_jp ol > li:last-child{ border-bottom: none; }
.type-genshin_updated_jp ol > li::before{
  counter-increment: jnum;
  content: counter(jnum);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center;
  border-radius: 50%;
  background: pink; color: #fff; font-weight: 700; font-size: 15px;
  font-family: "Avenir","Arial Black","Arial",sans-serif;
}


/* リストのドットスタイル */
/*.type-post ul,
.edit-post-layout.interface-interface-skeleton:not(.post-type-genshin_updated) ul {
  counter-reset: number; /* 数字をリセット */
  /*list-style-type: none!important; /* リストスタイルを消す */
  /*padding: 0.3em 0.8em;
  border: solid 2px pink; /* 枠線の色をピンクに */
/*}
*/

/*.type-post ul li,
.edit-post-layout.interface-interface-skeleton:not(.post-type-genshin_updated) ul li {
  border-bottom: dashed 1px pink; /* 下線の色をピンクに */
  /*position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}*/



/*.type-post ul li::before,
.edit-post-layout.interface-interface-skeleton:not(.post-type-genshin_updated) ul li::before {
  /* ドットを表示 */
  /*position: absolute;
  content: "●"; /* ドットを表示 */
  /* デザイン変更 */
  /*display: inline-block;
  background: pink; /* 背景色をピンクに */
  /*color: pink;
  font-family: 'Avenir', 'Arial Black', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /* 上下中央寄せ */
  /*top: 50%;
  transform: translateY(-50%);
}*/


/* 管理画面 ul li */
/*.edit-post-layout.interface-interface-skeleton:not(.post-type-genshin_updated) ul {
  counter-reset: number; /* 数字をリセット */
  /*list-style-type: none!important; /* リストスタイルを消す */
  /*padding: 0.3em 0.8em;
  border: solid 2px pink;
}

.edit-post-layout.interface-interface-skeleton:not(.post-type-genshin_updated) ul li {
  border-bottom: dashed 1px pink;
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}

/*.edit-post-layout.interface-interface-skeleton:not(.post-type-genshin_updated) ul li:before {
  content: "●"; /* ドットを表示 */
  /* デザイン変更 */
  /*display: inline-block;
  background: pink;
  color: pink;
  font-family: 'Avenir', 'Arial Black', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
  /*padding-left: 7px; /* 記号の間隔を調整 */
  /*margin-right: 10px; /* 記号とテキストの間隔を調整 */
  /*width: 25px; /* 丸の幅 */
  /*height: 25px; /* 丸の高さ */
  /*line-height: 25px; /* テキストの行の高さ */
/*}

/* カスタム投稿ページのスタイル */
.genshin_updated .genshin_updated_jp ol,
.edit-post-layout.post-type-genshin_updated.interface-interface-skeleton ol {
  counter-reset: number; /* 数字をリセット */
  list-style-type: none!important; /* 番号を一旦消す */
  padding: 0.3em 0.8em;
  border: solid 2px #ffb107; /* オレンジの枠線 */
}

.genshin_updated .genshin_updated_jp ol li,
.edit-post-layout.post-type-genshin_updated.interface-interface-skeleton ol li {
  border-bottom: dashed 1px #ffb107; /* オレンジの下線 */
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}

.genshin_updated .genshin_updated_jp ol li:before,
.edit-post-layout.post-type-genshin_updated.interface-interface-skeleton ol li:before {
  /* 数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /* 数字のデザイン変える */
  display: inline-block;
  background: #ffb107;
  color: white;
  font-family: 'Avenir', 'Arial Black', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /* 上下中央寄せのため */
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* カスタム投稿ページ ul li */
/*.genshin_updated ul,
.edit-post-layout.post-type-genshin_updated.interface-interface-skeleton ul {
  counter-reset: number; /* 数字をリセット */
  /*list-style-type: none!important; /* リストスタイルを消す */
  /*padding: 0.3em 0.8em;
  border: solid 2px #ffb107; /* 枠線の色を変更 */
/*}

.genshin_updated ul li,
.edit-post-layout.post-type-genshin_updated.interface-interface-skeleton ul li {
  border-bottom: dashed 1px #ffb107; /* 下線の色を変更 */
  /*position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}

.genshin_updated ul li::before,
.edit-post-layout.post-type-genshin_updated.interface-interface-skeleton ul li::before {
  /* ドットを表示 */
  /*position: absolute;
  content: "●"; /* ドットを表示 */
  /* デザイン変更 */
  /*display: inline-block;
  background: #ffb107; /* 背景色を変更 */
  /*color: #ffb107; /* テキストの色を変更 */
  /*font-family: 'Avenir', 'Arial Black', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px
}


/* カスタム投稿タイプgenshin_updatedの編集画面のスタイル 反映されていない */
/*.edit-post-layout.post-type-genshin_updated.interface-interface-skeleton ul {
  padding: 0.3em 0.8em;
  border: solid 2px #ffb107; /* オレンジの枠線 */
/*}

.edit-post-layout.post-type-genshin_updated.interface-interface-skeleton ul li {
  border-bottom: dashed 1px #ffb107; /* オレンジの下線 */
  /*position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}

.edit-post-layout.post-type-genshin_updated.interface-interface-skeleton ul li::before {
  /* 番号をつける */
  /*content: "●"; /* ここで記号を指定 */
  /* 数字のデザイン変える */
  /*display: inline-block;
  background: #ffb107; /* オレンジの背景色 */
  /*color: white;
  font-family: 'Avenir', 'Arial Black', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
  /*padding-left: 7px; /* 記号の間隔を調整 */
  /*margin-right: 10px; /* 記号とテキストの間隔を調整 */
  /*width: 25px; /* 丸の幅 */
  /*height: 25px; /* 丸の高さ */
  /*line-height: 25px; /* テキストの行の高さ */
/*}




/* =========================================================
   design17 responsive-table（フル修正版）
   - PC: 4列（Description を広めに）
   - SP: 1列カード、画像も本文も常に100%
   - ライト/ダーク両対応（.dark-theme か OS設定）
   ========================================================= */

/* トークン */
:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#666666;
  --surface:#f7f7f7;
  --row-alt:#fafafa;
  --border:#e5e5e5;
  --label-bg:#eeeeee;
  --label-fg:#555555;
  --link:#111111;
}
.dark-theme{
  --bg:#0f1115;
  --fg:#e6e6e6;
  --muted:#a0a0a0;
  --surface:#191c22;
  --row-alt:#14171d;
  --border:#2a2f39;
  --label-bg:#1f232c;
  --label-fg:#c8c8c8;
  --link:#dcdcdc;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115;
    --fg:#e6e6e6;
    --muted:#a0a0a0;
    --surface:#191c22;
    --row-alt:#14171d;
    --border:#2a2f39;
    --label-bg:#1f232c;
    --label-fg:#c8c8c8;
    --link:#dcdcdc;
  }
}

/* ベース（PC） */
.design17.responsive-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--border);
  font:400 16px/1.6 ui-sans-serif,system-ui,"Inter",Arial,sans-serif;
}
.design17.responsive-table th,
.design17.responsive-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
  word-break:break-word;
}
.design17.responsive-table thead th{
  text-align:left;
  font-weight:600;
  background:var(--surface);
  color:var(--fg);
}
.design17.responsive-table tbody tr:nth-child(even){ background:var(--row-alt); }
.design17.responsive-table tbody tr:last-child td{ border-bottom:0; }

/* 列幅（PC）：Description を広げる */
@media (min-width:641px){
  .design17.responsive-table thead th:nth-child(1),
  .design17.responsive-table tbody td:nth-child(1){ width:10%; }  /* Title */

  .design17.responsive-table thead th:nth-child(2),
  .design17.responsive-table tbody td:nth-child(2){ width:30%; }  /* Description（広め） */

  .design17.responsive-table thead th:nth-child(3),
  .design17.responsive-table tbody td:nth-child(3){ width:16%; }  /* Image */

  .design17.responsive-table thead th:nth-child(4),
  .design17.responsive-table tbody td:nth-child(4){ width:20%; }  /* Text */
}

/* 画像は常に100%（PC/モバイル共通） */
.design17.responsive-table td:nth-child(3){ text-align:center; }
.design17.responsive-table td:nth-child(3) a{ display:inline-block; width:100%; }
.design17.responsive-table td:nth-child(3) img{
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--bg);
}

/* リンクは控えめ（モノクロ） */
.design17.responsive-table a{
  color:var(--link);
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.design17.responsive-table a:hover{ opacity:.85; }

/* ========== モバイル（≤640px） ========== */
@media (max-width:640px){
  /* thead非表示、行をカード化（1カラム・全幅100%） */
  .design17.responsive-table thead{ display:none; }

  .design17.responsive-table,
  .design17.responsive-table tbody,
  .design17.responsive-table tr,
  .design17.responsive-table td{
    display:block;
    width:100%;
  }

  .design17.responsive-table tbody tr{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:10px;
    margin:14px 0;
    padding:8px 12px;
  }

  .design17.responsive-table td{
    border:none;
    border-bottom:1px solid var(--border);
    padding:30px 0 12px; /* 上にラベル分の余白 */
    position:relative;
    max-width:100%;
  }
  .design17.responsive-table td:last-child{
    border-bottom:none;
    padding-bottom:0;
  }

  /* 旧 ::before を無効化（保険） */
  .design17.responsive-table td::before{ content:none !important; }

  /* ラベルは ::after（逆指定）で固定。PCヘッダーと一致 */
  .design17.responsive-table td::after{
    content:"";
    position:absolute;
    top:8px; left:0;
    padding:3px 8px;
    border-radius:6px;
    font:600 12px/1 ui-sans-serif,system-ui,Arial;
    letter-spacing:.02em;
    color:var(--label-fg);
    background:var(--label-bg);
  }
  .design17.responsive-table td:nth-child(1)::after{ content:"Title"; }
  .design17.responsive-table td:nth-child(2)::after{ content:"Description"; }
  .design17.responsive-table td:nth-child(3)::after{ content:"Image"; }
  .design17.responsive-table td:nth-child(4)::after{ content:"Text"; }

  /* コンテンツも絶対100% */
  .design17.responsive-table td > *,
  .design17.responsive-table td:nth-child(3) a,
  .design17.responsive-table td:nth-child(3) img{
    max-width:100%;
    width:100%;
  }
  .design17.responsive-table td:nth-child(3){



    .custom-table {
        width: 100%;
        border-collapse: collapse;
    }
    .custom-table th, .custom-table td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    .custom-table th {
        background-color: #f2f2f2;
        text-align: left;
    }



/* 新しいギャラリーのスタイル */
.gallary-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.gallary-item {
    width: 30%; /* カラムの幅を調整 */
    margin-bottom: 20px;
    text-align: center;
}

.gallary-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を領域にフィットさせる */
    border: solid 1px #ffffff;
}

.gallary-item p {
    padding: 10px;
    background: #ffffff;
}


.post-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.post-list {
  width: 48%; /* Adjust as needed for spacing between items */
  margin-bottom: 20px; /* Add margin between items */
}

.post-list a {
  display: block;
  text-decoration: none;
  color: #333;
}

.post-list img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd; /* Optional: Add a border to images */
}

@media (max-width: 768px) {
  .post-list {
    width: 100%; /* Make it full-width on smaller screens */
  }
}


:root {
  --bg: #fff; --fg: #111; --border: #ddd; --overlay: rgba(0,0,0,.6);
}
.dark-theme {
  --bg:#0f1115; --fg:#e6e6e6; --border:#2a2f39; --overlay:rgba(0,0,0,.8);
}

/* PCカレンダー */
#calendar-pc {
  max-width: 1000px;
  margin: 20px auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}

/* モバイルカレンダー */
#calendar-mobile {
  max-width: 100%;
  margin: 20px auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}

/* イベント折り返し */
.fc-event-title {
  white-space: normal;
  word-break: break-word;
  font-weight: 600;
}
.fc .fc-event-time { display: none; }

/* モーダル */
.gwc-modal { position: fixed; inset: 0; display: none; z-index: 1000; }
.gwc-modal[aria-hidden="false"] { display: block; }
.gwc-modal__backdrop { position: absolute; inset: 0; background: var(--overlay); }
.gwc-modal__dialog {
  position: relative;
  max-width: 600px; width: 92%;
  margin: 10vh auto;
  background: var(--bg); color: var(--fg);
  border-radius: 10px; padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.gwc-modal__close {
  position: absolute; top: 8px; right: 8px;
  border: 0; background: transparent;
  font-size: 22px; cursor: pointer;
  color: var(--fg);
}
.gwc-modal__eyecatch {
  width: 100%; border-radius: 6px; margin-bottom: 10px;
  border: 1px solid var(--border);
}
.gwc-modal__title { font-size: 1.2rem; font-weight: 700; margin: 10px 0; cursor: pointer; }
.gwc-modal__meta { font-size: .9rem; color: #666; margin-bottom: 8px; }
.gwc-modal__link { display: inline-block; margin-top: 10px; color: var(--fg); text-decoration: underline; }

/* =========================
   design17 responsive-table: 画像がスマホでデカすぎる対策
   ========================= */
@media (max-width: 600px){
  .design17.responsive-table td:nth-child(3) a{
    width: auto !important;
    display: inline-block !important;
  }
  .design17.responsive-table td:nth-child(3) img{
    width: 80px !important;
    max-width: 80px !important;
    height: auto !important;
    display: block !important;
  }
  .design17.responsive-table td:nth-child(3){
    text-align: center !important;
  }
}