/* ========================================
   smart_common.css — スマホ用共通CSS
   bodyswap / possession / transformation
   全ページ共通のスタイルをまとめています
   ページ固有のスタイルは各ページの smart.css に残してください
   ======================================== */

@media screen and (max-width: 640px) {

/* ---- 表示切り替え ---- */
.sm_none { display: none !important; }
.pc_none { display: block !important; }

/* ---- Body ---- */
p { display: block; }

/* ---- 画像 ---- */
img {
  max-width: 100%;
  height: auto;
  width: auto;
}

/* ---- nav (.main-nav) 3列 ---- */
#nav {
  width: 100%;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav li {
  width: calc(33.33% - 6px);
}

.main-nav a {
  margin: 3px;
  border-radius: 100px;
  font-size: 13px;
  display: block;
  padding: 12px 0;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
}

/* ---- radialBtn (ぼ・ぽ・とら) ---- */

#radialBtnDemo {
  text-align: center;
  padding: 10px 0;  /* ← 上下の余白をここで確保 */
}

a.radialBtn {	/* CSS3????????? */	
  border-radius: 600px;	
  background-image: -moz-linear-gradient(-90deg,rgba(255,255,255,0.9),rgba(255,255,255,0));
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(255,255,255,0.9)), color-stop(1,rgba(255,255,255,0)));	
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);	
  transition: background-color, .5s;	
  box-shadow: 1px 1px 4px rgba(0,0,0,0.6);	

  color: #fff;
  font-size:40px;	
  display: inline;	
  text-decoration: none;	
  text-align: center;	
  line-height: 50px;	
  width: 100px;	
  height: 100px;
  margin: 10px 5px;
}

a.radialBtn:hover {		
background-color: #FFFF00;		
color: #333;	
}

/* ---- 新着 (#dl) ---- */
#dl {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 auto;
}

#dl dl {
  width: calc((80% - 16px) / 2);
  border: none;
  margin-right: 12px;
  padding: 5px 5px 10px;
  float: left;
  margin: 0 auto;
}

#dl dd {
  border-bottom-width: 10px;
  font-size: 100%;
  margin-top: 12px;
  margin-left: 12px;
  float: left;
}

#dl dt {
  line-height: 150%;
}

#dl dt img {
  margin-bottom: 5px;
  display: block;
  max-width: 100%;
}

/* ---- おすすめ (#tr1) ---- */
#tr1 {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}

#tr1 table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

#tr1 td {
  width: 100% !important;
  max-width: 100% !important;
  word-break: break-all;
  overflow: hidden;
}

#tr1 td img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-bottom: 5px;
  display: block;
}

/* ---- table 全般 ---- */
table {
  max-width: 100% !important;
  width: 100% !important;
  table-layout: fixed !important;
}

td {
  font-size: 20pt;
  max-width: 100% !important;
  word-break: break-all !important;
  overflow: hidden !important;
}

td img {
  max-width: 100% !important;
  height: auto !important;
}

/* ---- PAGE TOP ---- */
#page-top {
  position: fixed;
  bottom: 100px;
  right: 20px;
  font-size: 77%;
  z-index: 999;
}

#page-top a {
  opacity: .8;
  text-decoration: none;
  color: #fff;
  width: 100px;
  padding: 30px 0;
  text-align: center;
  display: block;
  border-radius: 5px;
}

#page-top a:hover {
  text-decoration: none;
}

/* ---- 移動ボタン (.square_btn) ---- */
.square_btn {
  font-size: 30px;
  display: inline-block;
  padding: 7px 20px;
  border-radius: 25px;
  text-decoration: none;
  color: #fff;
  text-align: center;
  transition: .4s;
}

.square_btn:link    { color: #fff; }
.square_btn:visited { color: #fff; }
.square_btn:hover   { color: #fff; }
.square_btn:active  { color: #fff; }

/* ---- .idou / .move ---- */
.idou a {
  font-size: 30px;
  margin: 24px auto;
  display: block;
}

.move {
  font-size: 30px;
  margin: 24px auto 80px;
  display: block;
}

.move p {
  margin: 24px auto;
}

/* ---- ドロワーメニュー (#slide_menu) ---- */
#slide_menu {
  position: fixed;
  top: 100px;
  right: -240px;
  left: auto;
  width: 170px;
  height: 60%;
  z-index: 999;
  user-select: none;
}

#slide_menu ul {
  list-style-type: none;
  padding: 0;
  position: relative;
}

#slide_menu ul li {
  color: black;
  font-weight: bold;
  font-size: 15px;
  border-left: solid 8px orange;
  background: whitesmoke;
  margin-bottom: 5px;
  line-height: 1.5;
  border-radius: 0 15px 15px 0;
  padding: 0.5em;
  list-style-type: none !important;
  user-select: none;
}

#slide_menu ul li a:link,
#slide_menu ul li a:visited,
#slide_menu ul li a:hover,
#slide_menu ul li a:active {
  color: #000000;
}

/* ---- ドロワーメニューボタン ---- */
.menu {
  position: fixed;
  right: 0;
  z-index: 10000;
}

#button {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 20px 0 10px;
  border-radius: 50%;
  background: #fff;
}

#button:hover { background: #fafafa; }

/* ---- 第2ドロワーメニュー (#slide_menu2) ---- */
#slide_menu2 {
  position: fixed;
  top: 30px;
  left: -240px;
  right: auto;
  width: 150px;
  height: 80%;
  z-index: 999;
  user-select: none;
}

#slide_menu2 ul {
  list-style-type: none;
  padding: 0;
  position: relative;
}

#slide_menu2 ul li {
  color: black;
  font-weight: bold;
  font-size: 15px;
  border-left: solid 8px yellow;
  background: whitesmoke;
  margin-bottom: 5px;
  line-height: 1.5;
  border-radius: 0 15px 15px 0;
  padding: 0.5em;
  list-style-type: none !important;
  user-select: none;
}

#slide_menu2 ul li a:link,
#slide_menu2 ul li a:visited,
#slide_menu2 ul li a:hover,
#slide_menu2 ul li a:active {
  color: #000000;
}

.menu2 {
  position: fixed;
  right: 0;
}

#button2 {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 20px 0 10px;
  border-radius: 50%;
  background: #fff;
}

#button2:hover { background: #fafafa; }

/* ---- フォントサイズユーティリティ ---- */
.size1 { font-size: 10px; }
.size2 { font-size: 20px; }
.size3 { font-size: 30px; }

/* ---- ランキング・割引 ---- */
.ranking {
  width: 140px;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 8px 0 10px;
  color: #fff;
}

.waribiki {
  width: 100%;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 6px 0 5px;
  color: #fff;
  background-color: #FF0000;
}

/* ---- hr ---- */
hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 12px 0;
}

}
/* @media 外 */
#radialBtnDemo p {
  display: inline-block;
  margin: 0 5px;
}