@charset "UTF-8";
/* ============================================================
   適用デバイス：すべて（xs,sm,md,lg）
   ============================================================ */
/* 適用対象：要素全体
   ============================================================ */
/* リンク */
a{color: #222;}
a:hover{text-decoration: none;}

/* bodyなど */
html{font-size: 10px;}
body{background: #f1f1f1;color: #222;font-size: 1.4rem;}

/* 見出し */
h1{font-weight: normal;}

/* 水平線 */
hr{border: none; border-top: 1px solid;}

/* 適用対象：クラス名を付けた要素
   ============================================================ */
.row{display: flex;flex-wrap: wrap;justify-content: space-around;}
.sample-img img{height: 350px;}
.shiyo{order: 2;}
.shiyo dt{float: left;}
.shiyo dd{margin-left: 6em;}
.shiyo dl ul{margin: 0;padding-left: 20px;}

/* ボタン */
.buy{width: 100%;text-align: center;}
.buy a{display: inline-block;  padding: 0 40px; height: 4rem; line-height: 4rem; text-align: center;background: #8ce6ff;border-radius: 20px;text-decoration: none;}
.buy a:hover{background: rgba(140, 230, 255,0.5)}

/* リスト関連 */
.title-list li a{margin-right: 1em;}
.name:after{border-radius: 5px;margin-left: 1.5em; padding: 0 3px;background: #1491D6; color: #fff;font-size: 80%;}
.less:after{content: "ネームレス"}
.less-book:after{content: "★ネームレス"}
.default{border-radius: 5px;margin-left: 1.5em; padding: 0 3px;background: #2CB4AD; color: #fff;font-size: 80%;}

/* ============================================================
   適用デバイス：タブレット(sm)・デスクトップ(md)・大画面デスクトップ(lg)
   ============================================================ */
@media all and (min-width: 768px) {
.container{width: 768px; margin: auto;} 
}