/* CI4デバッグツールバーの上部隙間を排除（開発環境のみ影響） */
#toolbarContainer,
.debug-bar {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
}

/*--------------------------------------------------------------------------------------------
■reset
  --------------------------------------------------------------------------------------------*/
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

p {
    display: block;
    /* inlineからblockへ、または必要に応じて調整 */
    margin: 1em 0;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before,
q:after {
    content: '';
}

abbr,
acronym {
    border: 0;
}

/*--------------------------------------------------------------------------------------------
■clearfix
  --------------------------------------------------------------------------------------------*/
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/*--------------------------------------------------------------------------------------------
■テキストクリア
  --------------------------------------------------------------------------------------------*/
.cleartext {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    height: 1px;
}

/*--------------------------------------------------------------------------------------------
■accordion
  --------------------------------------------------------------------------------------------*/
div.accordion.close div.accordion_item {
    display: none;
}

div.accordion {
    background-color: #e6e6e6;
    background-image: url(/img/icon/icon_minus.png);
    background-repeat: no-repeat;
    background-position: right 12px top 12px;
    background-position: 97% 12px;
    background-size: 20px 20px;
}

div.accordion.close {
    background-image: url(/img/icon/icon_plus.png);
    background-repeat: no-repeat;
    background-position: 97% 12px;
    background-size: 20px 20px;
}


/*--------------------------------------------------------------------------------------------
        ■ペイメント
  --------------------------------------------------------------------------------------------*/
.subtitle {
    margin-top: 20px;
    color: #008000;
    font-size: 16px;
    font-weight: bold;
}

.errortitle {
    margin-top: 20px;
    color: #ff0000;
    font-size: 16px;
}

.textblock {
    margin: 20px 0;
}

.center {
    text-align: center;
}

form {
    margin: 20px 0;
}

p {
    margin: 20px 0;
}

/*+-----------------------------------------------------------------------------------+
        ■インフォメーション一層ページ
  +-----------------------------------------------------------------------------------+*/
#infomationpage a {
    text-decoration: underline;
}


/*--------------------------------------------------------------------------------------------
■ページ基本設定
  --------------------------------------------------------------------------------------------*/
/* 自動改行を解除 */
* {
    word-break: break-all;
}

/* スクロールバーを常に表示 */
html {
    overflow-y: scroll;
    height: 100%;
}

body {
    font-size: 16px;
    line-height: 1.5;
    background: linear-gradient(135deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, transparent);
    background-size: 13px 13px;
    background-color: #d3d3d3;
    color: #555;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック  Medium", meiryo, sans-serif;
    max-width: 640px;
    min-width: 320px;
    margin: auto;
}

/* リンクのアンダーラインを消す */
a {
    text-decoration: none;
}

/* デフォルトのリンク色設定 */
a:link {
    color: #245FB3;
}

a:visited {
    color: #245FB3;
}

a:hover {
    color: #245FB3;
}

a:active {
    color: #245FB3;
}

/* リンク画像の外枠非を表示 */
a img {
    border: none;
}

/* チェックボックス縦位置調整 */
input,
select {
    vertical-align: 0.1em;
}

/*--------------------------------------------------------------------------------------------
■外枠
  --------------------------------------------------------------------------------------------*/
/* 外枠上部余白有り */
.box {
    width: 100%;
    text-align: center;
    clear: both;
    display: grid;
    grid-template-columns: repeat(3, 28%);
    justify-content: center;
    column-gap: 4%;
}

/* 外枠上部余白有り */
.olb_s {
    width: 100%;
    text-align: center;
    padding-top: 10px;
    clear: both;
}

/* 外枠上部余白無し */
.olb_f {
    width: 100%;
    text-align: center;
    clear: both;
}

.topbar_0 {
    width: 100%;
    height: auto;
    font-weight: bold;
    color: #000000;
    background-color: #000;
}

.underline_0 {
    width: 100%;
    border-bottom: solid 1px #808080;
    clear: both;
}

.pagetitle_0 {
    width: 100%;
    height: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border-bottom: solid 1px #fff;
    color: #FE008D;
    padding: 10px 0;
    background-color: #000;
    clear: both;
}

.pagetitle_02 {
    background: linear-gradient(to bottom, #414358, #3C3E50 30%, #20212C);
    width: 100%;
    height: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    box-shadow: 0 1px 6px #000, 0 -1px 6px #000;
    color: #FFF;
    padding: 10px 0;
    clear: both;
    text-shadow: 0 1px 0 #FFF;
}

.pagetitle_02 span {
    margin: 3%;
    text-shadow: 0 1px 0 #FFF;
}

.pagetitle_regist {
    background-color: #EEE;
    width: 100%;
    height: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    border-bottom: solid 1px #CCC;
    color: #a0a0a0;
    padding: 10px 0;
    clear: both;
}

.pagetitle_regist span {
    margin: 3%;
}

/*--------------------------------------------------------------------------------------------
    ■テキスト調整
  --------------------------------------------------------------------------------------------*/

/* パックページテキスト調整 */
.detail_text {
    font-size: 14px;
    line-height: 160%;
}

/* 赤文字センターテキスト */
.infored_text {
    color: #ff0000;
    text-align: center;
    line-height: 160%;
    padding: 5px 0;
}

/* 横調整 */
.text_c {
    text-align: center;
    line-height: 160%;
    padding: 5px 0;
    clear: both;
}

.text_l {
    text-align: left;
    line-height: 160%;
    padding: 5px 0;
    clear: both;
}

.text_r {
    text-align: right;
    line-height: 160%;
    padding: 5px 0;
    clear: both;
}

/* インフォページテキスト */
.info_text {
    font-size: 12px;
    line-height: 160%;
    clear: both;
}

.information_text {
    font-size: 100%;
    line-height: 160%;
    font-size: 14px;
    text-align: left;
    clear: both;
}

.infopagetext_02 {
    font-size: 12px;
}

/* 補足・注釈テキスト */
.supplement {
    font-size: 12px;
}

/* 強調テキスト */
.attention {
    font-weight: bold;
}

/*--------------------------------------------------------------------------------------------
    ■ボタンデザイン
  --------------------------------------------------------------------------------------------*/
/* ボタン共通（トップリンク） */
.button_toplink {
    width: 80%;
    height: 40px;
    margin: auto;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* グレーボタン */
.button_color_gray {
    background-color: #FFF;
    border: 1px solid #555;
    color: #666;
    box-shadow: none;
}

/* グレーボタン（控えめ立体感） */
.button_color_gray_soft {
    background: linear-gradient(to bottom, #fff, #f0f0f0);
    border: 1px solid #bbb;
    color: #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* アクセントボタン（ブランドカラー） */
.button_color_gray_accent {
    background: linear-gradient(to bottom, #ff6b9d, #e94560);
    border: 1px solid #c0392b;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(233, 69, 96, 0.3);
}

/* アウトラインボタン（枠線強調） */
.button_color_gray_outline {
    background-color: #fff;
    border: 2px solid #e94560;
    color: #e94560;
    font-weight: bold;
    box-shadow: none;
}

/* レッドボタン（会員登録等） */
.button_color_red {
    background: linear-gradient(to bottom, #e74c3c, #c0392b);
    border: 1px solid #c0392b;
    color: #FFF;
    font-weight: bold;
}

/* ダウンロード・送信ボタン */
.button_dl {
    width: 96%;
    height: 60px;
    margin: auto;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* グレーグラデーションボタン */
.button_color_04 {
    background: linear-gradient(to bottom, #ffffff, #f6f6f6 30%, #e0e0e0);
    border: 1px solid #999;
    color: #555;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    box-sizing: border-box;
}

/* テキストスタンダード */
.text_st {
    width: 100%;
    text-align: left;
    line-height: 160%;
    font-size: 16px;
    clear: both;
}

/*--------------------------------------------------------------------------------------------
    ■スペース調整
  --------------------------------------------------------------------------------------------*/
/*------- 行間スペーサー -------------------------------------------*/
.spacer_1 {
    width: 100%;
    height: 1px;
    clear: both;
}

.spacer_3 {
    width: 100%;
    height: 3px;
    clear: both;
}

.spacer_5 {
    width: 100%;
    height: 5px;
    clear: both;
}

.spacer_10 {
    width: 100%;
    height: 10px;
    clear: both;
}

.spacer_15 {
    width: 100%;
    height: 15px;
    clear: both;
}

.spacer_20 {
    width: 100%;
    height: 20px;
    clear: both;
}

.spacer_25 {
    width: 100%;
    height: 25px;
    clear: both;
}

.spacer_30 {
    width: 100%;
    height: 30px;
    clear: both;
}

.spacer_40 {
    width: 100%;
    height: 40px;
    clear: both;
}

.spacer_50 {
    width: 100%;
    height: 50px;
    clear: both;
}

.spacer_60 {
    width: 100%;
    height: 60px;
    clear: both;
}

/*------- ページサイドスペーサー -------------------------------------------*/
.ss {
    padding: 0 20px 0 20px;
    clear: both;
}

.sidespace {
    padding: 0 20px 0 20px;
    clear: both;
}

.pagesidespace {
    padding: 0 20px 0 20px;
    clear: both;
}

/*------- ページサイドスペースパーセント指定 -------------------------------------------*/
.ss2per {
    width: 96%;
    padding: 0 2% 0 2%;
    clear: both;
}

.ss3per {
    width: 94%;
    padding: 0 3% 0 3%;
    clear: both;
}

.ss5per {
    width: 90%;
    padding: 0 5% 0 5%;
    clear: both;
}

.ss10per {
    width: 80%;
    padding: 0 10% 0 10%;
    clear: both;
}

.ss15per {
    width: 70%;
    padding: 0 15% 0 15%;
    clear: both;
}

.ss_1per {
    width: 98%;
    padding: 0 1% 0 1%;
    clear: both;
}

.ss_2per {
    width: 96%;
    padding: 0 2% 0 2%;
    clear: both;
}

.ss_3per {
    width: 94%;
    padding: 0 3% 0 3%;
    margin-bottom: 10px;
    clear: both;
}

.ss_3per section {
    width: 30%;
    float: left;
    margin: 0 1.66% 5px 1.66%;
}

.ss_4per section img {
    aspect-ratio: 1 / 1;
    background-color: transparent;
    object-fit: cover;
}

.ss_4per section .layerbox img {
    aspect-ratio: auto;
    object-fit: contain;
}

.ss_4per {
    width: 94%;
    padding: 0 3%;
    clear: both;
}

.ss_4per section {
    width: 22%;
    float: left;
    margin: 0 1.5% 8px 1.5%;
}

.ss_5per {
    width: 96%;
    padding: 0 2% 0 2%;
    clear: both;
}

.ss_5per section {
    width: 17.5%;
    float: left;
    margin: 0 1.25% 8px 1.25%;
}

.ss_5per section img {
    aspect-ratio: 1 / 1;
    background-color: transparent;
    object-fit: cover;
}

.ss_7per {
    width: 86%;
    padding: 0 7% 0 7%;
    clear: both;
}

.ss_10per {
    width: 80%;
    padding: 0 10% 0 10%;
    clear: both;
}

.ss_15per {
    width: 70%;
    padding: 0 15% 0 15%;
    clear: both;
}

.sidespace10per {
    width: 80%;
    padding: 0 10% 0 10%;
    clear: both;
}

.pagesidespace10per {
    width: 80%;
    padding: 0 10% 0 10%;
    clear: both;
}

/*--------------------------------------------------------------------------------------------
    ■ストライプ
  --------------------------------------------------------------------------------------------*/
/*------- 太さ設定 -------------------------------------------*/
.stripe {
    height: auto;
    width: 100%;
    float: left;
    margin: 0;
    background-size: 20px 20px;
}

.stripe_5 {
    height: auto;
    width: 100%;
    float: left;
    margin: 0;
    background-size: 5px 5px;
}

.stripe_10 {
    height: auto;
    width: 100%;
    float: left;
    margin: 0;
    background-size: 10px 10px;
}

/*------- 方向設定 -------------------------------------------*/
/*-- 縦 --*/
.vertical {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

/*-- 横 --*/
.horizontal {
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

/*-- ギンガムチェック --*/
.picnic {
    background-color: white;
    background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
        linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}

/*-- 斜め --*/
.slash {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-size: 11px 11px;
}


/*--------------------------------------------------------------------------------------------
    ■背景色
  --------------------------------------------------------------------------------------------*/
/*------- 暖色 -------------------------------------------*/
.c_ff9900 {
    background-color: #FF9900;
}

.c_F0C8C8 {
    background-color: #F0C8C8;
}

/*------- 寒色 -------------------------------------------*/
.c_0000ff {
    background-color: #0000FF;
}

/*------- モノクロ -------------------------------------------*/
.c_333333 {
    background-color: #333333;
}

/*--------------------------------------------------------------------------------------------
    ■背景色グラデーション
  --------------------------------------------------------------------------------------------*/
/*------- 暖色 -------------------------------------------*/
.g_ef0057 {
    background: linear-gradient(to bottom, #ffb7d2, #EF0057);
}

.g_222222 {
    background: linear-gradient(to bottom, #999, #222);
}

/*------- モノクロ -------------------------------------------*/
.g_e0e0e0 {
    background: linear-gradient(to bottom, #ffffff, #f6f6f6 30%, #e0e0e0);
}

/*--------------------------------------------------------------------------------------------
        ■ページ装飾素材
  --------------------------------------------------------------------------------------------*/
/*------- ページタイトル -------------------------------------------*/
.pagetitle {
    width: 98%;
    height: auto;
    font-weight: bold;
    padding: 7px 0 7px 2%;
    background-color: #F0C8C8;
    border-top: solid 1px #ffffff;
    border-bottom: solid 1px #aaaaaa;
    clear: both;
}

/*------- ■アウトライン -------------------------------------------*/
.box_outline {
    margin: auto;
    display: box;
    display: flex;
}

.box_outline_100 {
    margin: auto;
    width: 100%;
    display: flex;
}

.outline_box {
    width: 100%;
    text-align: center;
    padding-top: 10px;
    clear: both;
}

/*------- アンダーライン -------------------------------------------*/
.underline {
    width: 100%;
    border-bottom: solid 1px;
    clear: both;
}

.borderline_02 {
    border: solid 1px #424857;
}

/* ボーダーなし */
.noborder {
    border: none;
}

/* 1pxライン */
.line {
    background-color: #DAD6BF;
    height: 1px;
    width: 100%;
    clear: both;
}

/*------- ラインカラー -------------------------------------------*/
.linecolor_cccccc {
    border-color: #ccc;
}

/*--------------------------------------------------------------------------------------------
■レイヤーアイコン
  --------------------------------------------------------------------------------------------*/
.layerbox {
    position: relative;
    width: 100%;
}

.new-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    z-index: 1;
    background: linear-gradient(to bottom left, #cc0000 50%, transparent 50%);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    font-style: italic;
    padding: 8px 5px 0 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    border-radius: 0 7px 0 0;
}

/*--------------------------------------------------------------------------------------------
    ■サムネイル装飾
  --------------------------------------------------------------------------------------------*/
/*------- パックページ角丸装飾 -------------------------------------------*/
.detail_radius {
    border: solid 2px #FFF;
    border-radius: 5px;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);
}

/*------- セール用 -------------------------------------------*/
.saleimgbox {
    position: relative;
    width: 100%;
}

.saleimgbox .icon {
    position: absolute;
    top: 0;
    left: 75%;
    width: 25%;
    animation-name: pulse;
    /* 実行する名前 */
    animation-duration: 0.7s;
    /* 0.3秒かけて実行 */
    animation-iteration-count: infinite;
    /* 何回実行するか。infiniteで無限 */
    animation-timing-function: ease-in-out;
    /* イーズインアウト */
    animation-direction: alternate;
    /* alternateにするとアニメーションが反復 */
    animation-delay: 0s;
    /* 実行までの待ち時間 */
}

/*------- 縦スライド -------------------------------------------*/
/*------- 左に小サムネイル、右にボタン -------------------------------------------*/
/* 左側エリア */
.randombox img {
    margin: 0;
    border-radius: 5px;
    border: solid 1px #FFF;
    box-shadow: 0 0 3px 1px #AAA;
    padding: 1px;
    box-sizing: border-box;
}

.randombox .column4 {
    padding: 0 1px;
    box-sizing: border-box;
}

/*--------------------------------------------------------------------------------------------
        ■ランダムレイアウト３カラム
  --------------------------------------------------------------------------------------------*/
/*------- layout_type_01 -------------------------------------------*/
.layout_type3_01 {
    width: 100%;
    clear: both;
}

.layout_type3_01>.thum_01 {
    width: 66%;
    float: left;
}

.layout_type3_01>.thum_02 {
    width: 33%;
    float: right;
}

.layout_type3_01>.thum_03 {
    width: 33%;
    float: right;
    margin-top: -3px;
}

/*------- layout_type_02 -------------------------------------------*/
.layout_type3_02 {
    width: 100%;
    clear: both;
}

.layout_type3_02>.thum_01 {
    width: 33%;
    float: left;
}

.layout_type3_02>.thum_02 {
    width: 33%;
    float: left;
    margin-left: 2px;
}

.layout_type3_02>.thum_03 {
    width: 33%;
    float: right;
}

/*------- layout_type_03 -------------------------------------------*/
.layout_type3_03 {
    width: 100%;
    clear: both;
}

.layout_type3_03>.thum_01 {
    width: 66%;
    float: right;
}

.layout_type3_03>.thum_02 {
    width: 33%;
    float: left;
}

.layout_type3_03>.thum_03 {
    width: 33%;
    float: left;
    margin-top: -3px;
}

/*--------------------------------------------------------------------------------------------
        ■ランダムレイアウト４カラム
  --------------------------------------------------------------------------------------------*/
/*------- layout_type_01 -------------------------------------------*/
.layout_type4_01 {
    width: 100%;
    clear: both;
    display: flex;
}

.layout_type4_01>.thum_01 {
    width: 25%;
    box-sizing: border-box;
    padding: 0 2px;
}

.layout_type4_01>.thum_02 {
    width: 25%;
    box-sizing: border-box;
    padding: 0 2px;
}

.layout_type4_01>.thum_03 {
    width: 25%;
    box-sizing: border-box;
    padding: 0 2px;
}

.layout_type4_01>.thum_04 {
    width: 25%;
    box-sizing: border-box;
    padding: 0 2px;
}

/*------- layout_type_02 -------------------------------------------*/
.layout_type4_02 {
    width: 100%;
    clear: both;
    display: flex;
}

.layout_type4_02>.left {
    width: 25%;
    box-sizing: border-box;
    padding: 0 2px;
}

.layout_type4_02>.center {
    box-sizing: border-box;
    padding: 0 2px;
    flex: 1;
}

.layout_type4_02>.right {
    width: 25%;
    box-sizing: border-box;
    padding: 0 2px;
}

/*------- layout_type_03 -------------------------------------------*/
.layout_type4_03 {
    width: 100%;
    clear: both;
    display: flex;
}

.layout_type4_03>.left {
    box-sizing: border-box;
    padding: 0 2px;
    flex: 1;
}

.layout_type4_03>.center {
    width: 25%;
    box-sizing: border-box;
    padding: 0 2px;
}

.layout_type4_03>.right {
    width: 25%;
    box-sizing: border-box;
    padding: 0 2px;
}

/*------- layout_type_03 -------------------------------------------*/
.layout_type4_04 {
    width: 100%;
    clear: both;
    display: flex;
}

.layout_type4_04>.left {
    width: 25%;
    box-sizing: border-box;
    padding: 0 2px;
}

.layout_type4_04>.center {
    width: 25%;
    box-sizing: border-box;
    padding: 0 2px;
}

.layout_type4_04>.right {
    box-sizing: border-box;
    padding: 0 2px;
    flex: 1;
}


/*--------------------------------------------------------------------------------------------
        ■インフォメーションコーナー
  --------------------------------------------------------------------------------------------*/
#informationcorner {
    width: 100%;
    box-sizing: border-box;
}

#informationcorner .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #ccc;
}

#informationcorner .info-grid-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
    color: #666;
    font-size: 13px;
    font-weight: normal;
    text-align: left;
    box-sizing: border-box;
    background-color: #FFF;
    transition: background-color 0.15s;
}

/* 奇数アイテム（左列）に右ボーダー */
#informationcorner .info-grid-item:nth-child(odd) {
    border-right: 1px solid #ccc;
}

#informationcorner .info-grid-item:active {
    background-color: #f0f0f0;
}

#informationcorner a.info-grid-item:link,
#informationcorner a.info-grid-item:visited,
#informationcorner a.info-grid-item:hover {
    color: #666;
    text-decoration: none;
}

#informationcorner .info-grid-label {
    flex: 1;
}

/* グローバルの a>span ルールをオーバーライド */
#informationcorner a>span {
    color: #666;
    text-decoration: none;
}

#informationcorner .info-grid-arrow {
    flex-shrink: 0;
    margin-left: 8px;
    opacity: 0.5;
    display: block;
}

/*--------------------------------------------------------------------------------------------
        ■検索コーナー
  --------------------------------------------------------------------------------------------*/
.search-banner-main {
    width: 100%;
}

.search-banner-sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2%;
}

.search-banner-sub img,
.search-banner-main img {
    display: block;
}

.search-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.search-grid-2col img {
    display: block;
    width: 100%;
}

.search-grid-2col-btn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.search-section {
    padding: 0 12px 10px;
    background: #fff;
}

.search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.search-btn,
.search-btn:link,
.search-btn:visited,
.search-btn:active,
.search-btn:hover {
    display: block;
    padding: 12px 8px;
    border: 1px solid #999;
    border-radius: 8px;
    background: #fff;
    color: #666 !important;
    text-align: center;
    font-size: 14px;
    text-decoration: none !important;
    box-sizing: border-box;
}

.search-btn--full {
    margin-bottom: 8px;
}

.hr_line {
    border: none;
    border-top: 1px solid #ddd;
    margin: 3px 12px;
}

/*--------------------------------------------------------------------------------------------
        ■FAQページ
  --------------------------------------------------------------------------------------------*/
#faq {
    --faq-row-padding: 13px;
}

/* アコーディオンセクションヘッダー */
.faq-section-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--faq-row-padding) 0 var(--faq-row-padding) 10px;
    box-sizing: border-box;
    color: inherit;
}

/* アコーディオン内リスト */
.faq-section-body {
    background-color: #FFF;
    padding-top: 5px;
}

.faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.faq-list li {
    /* border-bottomは#faq liのborder-topで代用 */
}

.faq-list li:last-child {
    border-bottom: none;
}

.faq-list li a {
    display: block;
    padding: 0;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
}

.faq-list li a:link,
.faq-list li a:visited {
    color: #333;
}

.faq-list li a:active {
    background-color: #f5f5f5;
}

/* お知らせリンク */
.faq-notice-link,
.faq-notice-link:link,
.faq-notice-link:visited,
.faq-notice-link:hover,
.faq-notice-link:active {
    display: block;
    text-decoration: none;
    color: inherit;
}

.faq-notice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--faq-row-padding, 13px) 10px;
    border-bottom: 1px solid #e6e6e6;
}

.faq-notice-alert {
    color: #F00;
}

/* faqcornertext内では .faqcornertext span (12px) が効くため、サイズ継承を明示 */
.faqcornertext .faq-notice-alert {
    font-size: inherit;
}

.faq-notice-arrow {
    flex-shrink: 0;
    margin-left: 8px;
    display: block;
}

/* 注意テキストエリア */
.faq-notice-text {
    padding: 20px 10px 0 10px;
    line-height: 160%;
    text-align: left;
}

/* ボタンエリア */
.faq-button-area {
    width: 86%;
    padding: 0 7%;
    text-align: center;
}

.faq-login-prompt {
    text-align: center;
    color: #B4123A;
    font-size: 12px;
}

.faq-btn {
    display: block;
    width: 94%;
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 140%;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.faq-btn-login {
    height: 60px;
    background: linear-gradient(to bottom, #EB6B8A, #B4123A);
    border: 3px solid #BD4862;
    color: #FFF;
    font-weight: bold;
}

.faq-btn-contact {
    height: 80px;
    background: linear-gradient(to bottom, #ffffff, #f6f6f6 30%, #e0e0e0);
    border: 1px solid #999;
    color: #000;
}

/* 未ログイン（クリック非推奨）：薄く表示 */
.faq-btn-contact-disabled {
    opacity: 0.35;
}

/* ログイン済バッジ */
.faq-login-status {
    display: block;
    width: 90%;
    box-sizing: border-box;
    background: #e0e0e0;
    color: #555;
    padding: 8px 20px;
    border-radius: 20px;
    margin: 10px auto;
    text-align: center;
    font-size: 14px;
}

.faq-btn-note {
    font-size: 14px;
    color: red;
    line-height: 100%;
}

/*--------------------------------------------------------------------------------------------
          ページ送り
  --------------------------------------------------------------------------------------------*/
.pagenavi {
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

.pagenavi .centerarea {
    width: 100%;
    clear: both;
    margin: auto;
}

.pagenavi .arrow {
    border: solid 1px #999;
    border-radius: 5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    color: #222;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    width: 90%;
    box-sizing: border-box;
    padding: 3px 0;
    margin: 0 5%;
    background-image: linear-gradient(to bottom, #FFF, #CFCFCF);
    text-decoration: none;
    font-size: 12px;
    float: left;
}

.pagenavi .focus0 {
    border: solid 1px #999;
    border-radius: 5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    color: #222;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    width: 18%;
    box-sizing: border-box;
    padding: 3px 0;
    margin: 0 1% 0 1%;
    background-image: linear-gradient(to bottom, #FFF, #CFCFCF);
    text-decoration: none;
    font-size: 12px;
    float: left;
}

.pagenavi .focus1 {
    border: solid 1px #999;
    border-radius: 5px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    color: #FFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    width: 18%;
    box-sizing: border-box;
    padding: 3px 0;
    margin: 0 1% 0 1%;
    background-image: linear-gradient(to bottom, #B9D0ED, #5284C1);
    text-decoration: none;
    font-size: 12px;
    float: left;
}

.pagenavi .adjust {
    width: 20%;
    float: left;
}

/*+-----------------------------------------------------------------------------------+
        ■アンケートコーナー
  +-----------------------------------------------------------------------------------+*/
.enq_textbox {
    width: 100%;
    margin-bottom: 5px;
    background-color: #552222;
    border: 1px solid #222222;
}

/*--------------------------------------------------------------------------------------------
        ■ウィジェット解説ページ
  --------------------------------------------------------------------------------------------*/
.wg_button_design {
    width: 70%;
    height: 40px;
    background: linear-gradient(to bottom, #ffffff, #f6f6f6 30%, #FFC5BE);
    border: 1px solid #999;
    font-weight: bold;
    color: #9E8E77;
    font-size: 14px;
    border-radius: 6px;
}

.wg_button_design_m {
    width: 70%;
    height: 40px;
    background: linear-gradient(to bottom, #ffffff, #999999 30%, #000000);
    border: 1px solid #999;
    font-weight: bold;
    color: #F00;
    font-size: 14px;
    border-radius: 6px;
}

.wg_tutorialtext {
    text-align: left;
    line-height: 160%;
    padding: 5px 0;
    font-size: 14px;
    clear: both;
}

.bgc_wg {
    width: 100%;
    background-color: #FFEFD6;
    clear: both;
}

/*--------------------------------------------------------------------------------------------
        ■共通アニメーション設定
  --------------------------------------------------------------------------------------------*/
/*------- 点滅 -------------------------------------------*/
@keyframes pulse {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}

/*------- 点滅 イーズインアウト -------------------------------------------*/
@keyframes pulse1 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*------- 2枚点滅 -------------------------------------------*/
@keyframes pulse2_1 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes pulse2_2 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/*------- スライド -------------------------------------------*/
@keyframes slide {
    from {
        left: 70%;
        /*左スペース*/
    }

    to {
        left: 75%;
        /*左スペース*/
    }
}

/*------- ２枚フェード -------------------------------------------*/
@keyframes fade2_01 {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 1.0;
    }

    90% {
        opacity: 1.0;
    }

    100% {
        opacity: 0;
    }
}

/*------- ３枚フェード -------------------------------------------*/
@keyframes fade3_01 {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 0;
    }

    43% {
        opacity: 1.0;
    }

    73% {
        opacity: 1.0;
    }

    74% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade3_02 {
    0% {
        opacity: 0;
    }

    63% {
        opacity: 0;
    }

    73% {
        opacity: 1.0;
    }

    95% {
        opacity: 1.0;
    }

    100% {
        opacity: 0;
    }
}

/*--------------------------------------------------------------------------------------------
        ■My Store（各サイトにコーナーとして使用）
  --------------------------------------------------------------------------------------------*/
/*------- テキストに角丸外枠指定 -------------------------------------------*/
.textoutline_area {
    width: auto;
    clear: both;
    padding: 5px 0 10px 0;
}

.textoutline_area span {
    border: solid 1px #384F76;
    border-radius: 15px;
    font-size: 12px;
    text-decoration: none;
    line-height: 210%;
    color: #384F76;
    padding: 3px 5px 3px 9px;
    margin-left: 5px;
    box-shadow: #999;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/*------- ジャンルで探すコーナー -------------------------------------------*/
.halfbox_l {
    width: 50%;
    float: left;
    border-right: solid 1px #CCCCCC;
    padding: 10px 0 10px 0;
}

.halfbox_r {
    width: 50%;
    float: right;
    padding: 10px 0 10px 0;
}

.halfbox_icon {
    width: 20%;
    float: left;
}

.halfbox_text {
    width: 80%;
    float: left;
    text-align: left;
    color: #000;
    margin-top: 3px;
    font-size: 14px;
}

/*------- ジャンルで探すコーナー(簡易) -------------------------------------------*/
.twocolumnmenu {
    width: 100%;
}

.twocolumnmenu .row {
    border-bottom: solid 1px;
}

.twocolumnmenu .bg {
    background: linear-gradient(to bottom, #FFFFFF, #DDDDDD);
}

.twocolumnmenu .l {
    width: 50%;
    float: left;
    border-right: solid 1px;
    padding: 10px 0 10px 0;
}

.twocolumnmenu .r {
    width: 50%;
    float: right;
    text-align: right;
    padding: 10px 0 10px 0;
}

.twocolumnmenu .icon {
    width: 14%;
    padding: 0 3%;
    float: left;
}

.twocolumnmenu .text {
    width: 67%;
    float: left;
    text-align: left;
    color: #000;
    margin-top: 3px;
    font-size: 14px;
}

.twocolumnmenu .arrow {
    width: 13%;
    float: right;
    text-align: left;
    margin-top: 3px;
    font-size: 14px;
}

.twocolumnmenu .bordercolor {
    border-color: #CCC;
}


/*--------------------------------------------------------------------------------------------
        ■special
  --------------------------------------------------------------------------------------------*/
/*------- ブラカス2012ランキングで使用 -------------------------------------------*/
.ranking_2012_text {
    color: #FFF;
}


/*------- boc初めてページ -------------------------------------------*/
#firstpage {
    background-color: #FFF;
    text-align: center;
    line-height: 150%;
}

#firstpage a {
    text-decoration: underline;
    color: #6495ED;
}

#firstpage .cornertitle {
    width: 95%;
    margin: 10px auto;
    border-radius: 6px;
    background: linear-gradient(to bottom, #87CEFA, #6495ED);
    border: 1px solid #C0C0C0;
    padding: 5px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    font-size: 14pt;
    color: #FFFFFF;
    text-align: left;
}

#firstpage .attention {
    color: #6495ED;
}

#firstpage .textarea {
    text-align: left;
    word-break: break-all;
}

#firstpage button {
    margin: 10px auto;
}


.topbar_1 {
    width: 98%;
    height: auto;
    font-weight: bold;
    text-align: left;
    clear: both;
    padding: 7px 0 7px 2%;
    background-color: #FFE7F9;
    border-top: solid 1px #ffffff;
    border-bottom: solid 1px #aaaaaa;
    border-radius: 7px 7px 0 0;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

.topbar_2 {
    width: 98%;
    height: auto;
    font-weight: bold;
    text-align: left;
    clear: both;
    padding: 7px 0 7px 2%;
    background-color: #C2D9D4;
    border-top: solid 1px #ffffff;
    border-bottom: solid 1px #aaaaaa;
    border-radius: 7px 7px 0 0;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

.pagetitle_1 {
    width: 100%;
    height: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    color: #444444;
    padding: 10px 0;
    background-color: #FFE7F9;
    clear: both;
}

.pagetitle_2 {
    width: 100%;
    height: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    color: #444444;
    padding: 10px 0;
    background-color: #C2D9D4;
    clear: both;
}

.pagetitle_3 {
    width: 100%;
    height: auto;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    border-top: solid 1px #666;
    border-bottom: solid 1px #666;
    color: #FFF;
    margin-top: 20px;
    padding: 5px 0;
    background: linear-gradient(to bottom, #666, #222);
    clear: both;
}

.outline_box2 {
    width: 100%;
    text-align: center;
    clear: both;
}

/*--------------------------------------------------------------------------------------------
        ■FAQ
  --------------------------------------------------------------------------------------------*/
#faq {
    width: 100%;
    line-height: 120%;
    background: #FFF;
}

#faq faqcornertext a {
    color: #0D00FF;
    text-decoration: underline;
}

#faq .headline_01 {
    font-size: 18px;
    height: auto;
}

#faq .headline_01 span {
    font-size: 17px;
}

#faq li {
    padding: var(--faq-row-padding, 13px) 30px var(--faq-row-padding, 13px) 20px;
    line-height: 120%;
    background-image: url(/img/icon/icon_yajirushi20.png);
    background-repeat: no-repeat;
    background-position: 97% center;
    background-size: 20px 20px;
    border-top: solid 1px #e6e6e6;
    text-align: left;
}

#faq .faqcorner {
    border-bottom: 1px solid #E6E6E6;
    background-color: white;
}

.faqcornertitle {
    color: #222;
    background-color: #CCC;
    margin: 10px -3% 5px;
    padding: 7px 5%;
    font-size: 18px;
    border-radius: 5px;
    border-bottom: solid 1px #aaaaaa;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

.faqcornertext {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 160%;
    text-align: left;
}

.faq2column_outline {
    margin-bottom: 10px;
}

.faq2column_outline img {
    border: solid 1px #999;
}

.faq2column_left {
    width: 48%;
    float: left;
}

.faq2column_right {
    width: 48%;
    float: right;
}

.faq2columntext {
    font-size: 11px;
    line-height: 120%;
}

/*------- 初心者ガイド　公式サイト移植用 -------------------------------------------*/
.listlink {
    width: 100%;
    padding: 10px 0;
}

.listlink .l {
    float: left;
}

.listlink .c {
    width: 80%;
    float: left;
    text-align: left;
    margin-left: 10px;
    margin-top: 1px;
}

.listlink .r {
    float: right;
}

h2 {
    color: #006600;
    font-weight: bold;
}

#guide .container {
    margin: 5px;
    padding: 5px;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    background: #FFF;
    /*background-image: linear-gradient(to bottom, #FFF 0%, #FFF 70%, #EEE 70%, #EEE 100%);*/
}

#guide .container .boxl {
    width: 65px;
}

#guide .container .boxl img {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    background: #FFF;
    border: solid 1px rgba(100, 100, 100, 0.1);
    margin-bottom: -6px;
}

#guide .container .boxr {
    width: 75%;
    text-align: left;
    color: #000;
    font-weight: bold;
    padding-left: 10px;
    font-size: 16px;
    line-height: 120%;
    box-sizing: border-box;
}

#adarea .container {
    margin: 5px;
    padding: 5px;
    border-radius: 3px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

#adarea .container .boxl {
    width: 80px;
}

#adarea .container .boxl img {
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    background: #FFF;
}

#adarea .container .boxc {
    width: 65%;
    padding: 0 10px;
    box-sizing: border-box;
}

#adarea .container .boxc .title {
    text-align: left;
    color: #000;
    font-weight: bold;
    font-size: 16px;
}

#adarea .container .boxc .price {
    text-align: left;
    color: #000;
    font-size: 14px;
    font-weight: bold;
}

#adarea .container .boxc .text {
    text-align: left;
    color: #666666;
    font-size: 14px;
}

#adarea .container .boxr {
    width: 10%;
    box-sizing: border-box;
}

#adarea .container .boxr .dlbutton {
    text-align: center;
    color: #03A1E8;
    font-weight: bold;
    font-size: 18px;
    color: black;
    border: 0;
    padding: 5px 0;
    margin-top: 16px;
    box-sizing: border-box;
}

.lead {
    color: #000;
    margin: 20px auto;
}

.faqcornertext hr {
    width: 100%;
    margin: 20px 0;
    border: 1px solid #cccccc;
    border-width: 1px 0 0 0;
}

.faqcornertext img {
    width: 90%;
    display: block;
    margin: 0 auto;
}

/* FAQ画像に外枠装飾（角丸＋影）を付けたい場合 class="img-frame" を img に付与 */
.faqcornertext img.img-frame {
    border-radius: 10px;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.5);
}

.faqcornertext span {
    font-size: 12px;
}

.faqcornertext a {
    color: #0005FF;
}

.headline_q {
    background: #FFC000;
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

.headline_q img {
    margin-top: -7px;
}

.headline_a {
    padding: 5px 10px;
    color: #000;
    font-weight: bold;
    margin: 0 -6%;
}

.page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    background: #7e7a7a;
    color: #fff !important;
    border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 12px;
    opacity: 0.8;
}

.page_title_area {
    width: 100%;
    position: static;
}

.page_title_area .title_wrap {
    width: 90%;
    position: absolute;
    text-align: left;
    margin: 5px 0 0 0;
    padding: 5px 0 0 5px;
    border-left: solid 5px #9DCE00;
}

.title_wrap .title1 {
    font-size: 22px;
    font-weight: bold;
    font-family: arial, sans-serif;
    color: #9DCE00;
}

.title_wrap .title2 {
    font-size: 12px;
    font-weight: bold;
    color: #999999;
}

.page_title_area .icon_wrap {
    float: right;
    width: 50%;
    text-align: right;
    position: relative;
    right: 20px;
}

.page_title_area .icon_wrap div {
    padding: 5px;
    float: right;
    text-align: center;
    line-height: 40%;
}

.page_title_area .icon_wrap div span {
    font-size: 10px;
    color: #aaa;
}

.linkpagetop_set {
    font-size: 12px;
    float: right;
    padding: 0 2% 0 2%;
    color: #222;
    text-shadow: 0 1px #FFF, 1px 1px #FFF;
}

/* 対応機種ページ */
.device_headline {
    background: #eee;
    padding: 5px 0;
}

/* 退会ページ改修 */
#member_leave_page .step_focus {
    width: 30%;
    border: solid 2px #CE0000;
    background: #CE0000;
    color: #FFF;
    padding: 3px;
    text-align: center;
}

#member_leave_page .step_nofocus {
    width: 30%;
    border: solid 2px #CE0000;
    color: #CE0000;
    padding: 3px;
    text-align: center;
}

#member_leave_page .step_allow {
    width: 5%;
    color: #CE0000;
}

#member_leave_page .bg h2 {
    border: solid 1px #CCC;
    padding: 5px;
    text-align: left;
    color: #666;
}

#member_leave_page .bg h3 {
    border-bottom: solid 1px #AAA;
    text-align: left;
    padding-bottom: 5px;
    margin: 10px 0px 20px;
}

#member_leave_page .bg .container_outline {
    border: solid 1px #AAA;
    padding: 5px;
    text-align: left;
}

#member_leave_page .bg .container_outline .container_box {
    border: solid 1px #AAA;
    padding: 5px;
}

#member_leave_page .bg .container_outline .container_text {
    border-color: #AAA;
    padding: 5px;
}

#member_leave_page form {
    margin: 10px 0;
}

#member_leave_page input {
    margin-right: 5px;
}

#member_leave_page .check_icon {
    background: #CE0000;
    color: #FFF;
    padding: 5px 10px;
    font-size: 12px;
    margin-right: 10px;
}

#member_leave_page .checkbox_a {
    background: #DBEEF4;
    color: #666;
    padding: 5px 10px;
    border: solid 1px #999;
}

#member_leave_page .checkbox_b {
    background: #DBEEF4;
    color: #222;
    padding: 0 10px;
    border: solid 1px #999;
}

#member_leave_page .button_01 {
    background: #CE0000;
    color: #FFF;
    padding: 5px 10px;
    font-size: 14px;
    margin-right: 10px;
    width: 70%;
    border-radius: 10px;
    height: 50px;
    border: none;
}

#member_leave_page .button_02 {
    background: #666;
    color: #FFF;
    padding: 5px 10px;
    font-size: 14px;
    margin-right: 10px;
    width: 70%;
    border-radius: 10px;
    height: 50px;
    border: none;
}

#member_leave_page ul {
    text-align: left;
    padding: 10px;
    line-height: 150%;
    font-size: 14px;
}

#member_leave_page ul li a {
    color: #33F;
    text-decoration: none;
}

#member_leave_page a {
    color: #33F;
    text-decoration: underline;
}

#member_leave_page .button_dl {
    width: 70%;
    height: 35px;
    margin: auto;
    font-size: 14px;
    border-radius: 3px;
    box-shadow: none;
}

/*--------------------------------------------------------------------------------------------
    ■ドコモメールサムネイル
  --------------------------------------------------------------------------------------------*/
.docomomail_thumbnail {
    border-radius: 7px;
    border: 3px solid #fff;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);
    background-color: transparent;
}

.docomomail_head_container {
    width: 100%;
    padding: 0 4%;
    box-sizing: border-box;
}

img.lwp_thumbnail,
.randombox img.lwp_thumbnail {
    border-radius: 7px;
    background-color: transparent;
    object-fit: cover;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);
    border: none;
    padding: 0;
}

/*--------------------------------------------------------------------------------------------
■ジャンルページタイトルエリア
--------------------------------------------------------------------------------------------*/
.corner_title_area {
    width: 94%;
    border-left: solid 5px #9DCE00;
    text-align: left;
    margin: 2px 0 0 5px;
    padding: 2px 0 2px 5px;
}

.corner_title_area .title1 {
    font-size: 22px;
    font-weight: bold;
    color: #9DCE00;
    font-family: arial, sans-serif;
    line-height: 1.1;
    margin-top: 3px;
    margin-bottom: -2px;
}

.corner_title_area .title2 {
    font-size: 12px;
    font-weight: bold;
    color: #999999;
}

.sankaku_icon {
    background-image: url('/img/page/mydroid/icon.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 24px 24px;
}

/*--------------------------------------------------------------------------------------------
■もっと見るボタン（ソース表現）
--------------------------------------------------------------------------------------------*/
a.more_link_btn {
    display: block !important;
    width: 90% !important;
    margin: 10px auto !important;
    padding: 15px 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 50px !important;
    background-color: #fff !important;
    color: #999 !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    clear: both !important;
}

/*------- ジャンル切替タブ -------------------------------------------*/
.genre-tabs {
    display: flex;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
}

.genre-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    text-decoration: none;
    color: #333;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    background: #f5f5f5;
    border-right: 1px solid #ccc;
    transition: background 0.15s;
}

.genre-tab:last-child {
    border-right: none;
}

.genre-tab.active {
    background: #fff;
    border: 2px solid #e53935;
    border-radius: 3px;
    color: #e53935;
    font-weight: bold;
    margin: -1px;
}

.genre-tab-label {
    font-size: 11px;
}

.genre-tab-count {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.genre-tab.active .genre-tab-count {
    color: #e53935;
}

/*--------------------------------------------------------------------------------------------
  ci4_sp.css - Additional extracted rules (auto-generated)
  --------------------------------------------------------------------------------------------*/
/*-- コーナー帯 --*/
.corner_title_01 {
    width: 100%;
    color: #666;
    text-align: left;
    border-top: solid 1px #EEE;
    font-family: GillSans;
    background: #FFF;
}

.corner_title_01 .title_a {
    font-size: 22px;
    padding: 15px 5px 0px;
    font-weight: lighter;
}

.corner_title_01 .title_b {
    font-size: 10px;
    padding: 2px 5px 7px;
}

/*------- コーナーエンド -------------------------------------------*/
/* コーナー閉じ角丸 */
.cornerend_radius {
    width: 100%;
    height: 10px;
    border-radius: 0 0 7px 7px;
    border-bottom: solid 1px #aaaaaa;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

/* 角丸 */
.underbar {
    width: 100%;
    height: 10px;
    background-color: #ffffff;
    border-radius: 0 0 7px 7px / 0 0 7px 7px;
    border-bottom: solid 1px #aaaaaa;
}

/* ラインカラー */
.linecolor {
    border-color: #cccccc;
}

.detail_img {
    border: solid 2px #FFF;
    border-radius: 5px;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.detail_headline {
    margin: 5px 10px 0 10px;
    text-align: center;
}

.comment_frame {
    width: 90%;
    padding: 10px;
    margin: auto;
    background-color: rgba(253, 234, 218, 0.2);
    border: solid 1px RGBA(204, 186, 163, 0.2);
    border-radius: 5px;
    text-align: justify;
    line-height: 130%
}

/*------- 正方形＆右にテキスト -------------------------------------------*/
.thumtype_001 {
    width: 100%;
    padding: 5px 0;
}

.thumtype_001 .thum {
    float: left;
    width: 24%;
    margin: 5px 0 -4px 1%;
}

.thumtype_001 .thum img {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

*/ .thumtype_001 .details {
    float: left;
    width: 65%;
}

.thumtype_001 .outline {
    margin: 0 3% 0 3%;
    text-align: left;
}

.thumtype_001 .title {
    font-weight: bold;
    font-size: 14px;
    margin-top: 2px;
}

.thumtype_001 .text {
    margin-top: 2px;
    font-size: 12px;
    line-height: 130%;
}

.thumtype_001 .arrow {
    width: 10%;
    float: right;
    font-size: 120%;
    margin-top: 35px;
    text-align: right;
}

/*------- 正方形＆右にテキスト -------------------------------------------*/
.thumtype_002 {
    width: 100%;
    text-align: center;
}

/*------- 正方形４つ並び -------------------------------------------*/
.thumbnail_4 {
    width: 100%;
    text-align: center;
    clear: both;
}

.thumbnailbox_4 {
    float: left;
    margin-left: 3.5%;
    width: 21%;
    text-align: center;
}

/*------- 角丸４つ並び -------------------------------------------*/
.radius4 {
    width: 100%;
    padding: 0px 10px;
    margin: 0 auto 0 auto;
}

.radius4 .thum {
    width: 24%;
    float: left;
    margin-right: 1%;
}

.radius4 .thum img {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

/*------- 正方形５つ並び -------------------------------------------*/
.thumbnailbox_5 {
    float: left;
    margin-left: 2%;
    width: 18%;
    text-align: center;
}

/*------- ３つ並びサムネイル -------------------------------------------*/
/* 外枠 */
.thumbnailbox_3 {
    width: 28%;
    margin: 0 2%;
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Grid内ではマージン不要（column-gapで制御）*/
.box .thumbnailbox_3 {
    width: 100%;
    margin: 0;
}

/* 外枠 */
.thumbnail_3 {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
}

.thumbnail_3 img {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

/* カテゴリアイコン */
.thumbnail_3icon {
    width: 100%;
    margin: 5px auto 0;
    text-align: center;
    box-sizing: border-box;
}

/* タイトル */
.thumbnail_3title {
    width: 100%;
    margin: 5px auto;
    text-align: center;
    font-size: 14px;
    line-height: 100%;
    box-sizing: border-box;
    clear: both;
}

/* テキスト */
.thumbnail_3text {
    width: 93%;
    margin: 0;
    text-align: left;
    padding: 5px 5%;
    font-size: 12px;
    line-height: 130%;
    box-sizing: border-box;
}

/* テキストタイプ２ */
.thumbnailbox_3 .text {
    width: 100%;
    margin: 0 0 0 -3px;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    font-size: 11px;
    line-height: 130%;
    color: #666;
    box-sizing: border-box;
}

.con_title_area {
    text-align: left;
    width: 100%;
    float: left;
    padding: 0;
    margin-bottom: 5px;
}

.con_icon {
    width: auto;
    float: left;
}

.con_text {
    width: auto;
    float: left;
    text-align: left;
}

.con_title_area .text {
    margin: 5px 0 0 2%;
    float: left;
    text-align: left;
    font-weight: bold;
}

/* コンテンツ紹介テキスト */
.con_text_area {
    width: 100%;
    margin: 5px auto 0 auto;
    padding-bottom: 5px;
    text-align: left;
    line-height: 160%;
    font-size: 14px;
    clear: both;
}

/* 大サムネイル用ボタン */
.ctl_thumbs {
    width: 100%;
    float: center;
}

/*------- きせかえ中サムネイル -------------------------------------------*/
/* コンテンツ中サムネイルエリア */
.ctm {
    width: 100%;
    margin: auto;
    clear: both;
}

.square_thum_area .thum {
    padding: 2px 0 0 2%;
    float: left;
    width: 23%;
    margin-bottom: -4px;
}

/*------- カテゴリグリッドレイアウト -------------------------------------------*/
.grid2 .l {
    float: left;
    width: 50%;
    text-align: center;
    border-right: 1px solid;
    border-bottom: 1px solid;
    box-sizing: border-box;
}

.grid2 .r {
    float: right;
    width: 50%;
    text-align: center;
    border-bottom: 1px solid;
}

.grid2 .f {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid;
}

.grid2 span {
    width: 90%;
    line-height: 150%;
    float: left;
    text-align: left;
    font-size: 16px;
    font-weight: normal;
    margin-left: 10px;
    margin-top: 3px;
    padding: 10px 0;
}

.grid2 .text {
    float: left;
    width: 85%;
}

.grid2 .arrow {
    float: right;
    width: 10%;
    padding-top: 10px;
    margin-right: 5px;
}

.grid2 .colortext {
    float: left;
    width: 75%;
}

.grid2 .colorbox {
    float: right;
    width: 20px;
    height: 20px;
    padding-top: 10px;
    margin-right: 20px;
}

.grid2 .colortext_r {
    float: right;
    width: 80%;
}

.grid2 .colorbox_l {
    float: left;
    width: 20px;
    height: 20px;
    padding-top: 10px;
    margin-right: 0;
}

.grid2 .color {
    border-color: #AAA;
    color: #222;
}

/*------- クラス指定DB統合版 -------------------------------------------*/
.contenticon_box span.icon:after {
    content: 'アイコンきせかえ';
    /*アイコンきせかえ*/
    border: solid 1px #C00;
    background-color: #FFF;
    padding: 1px 10px;
    border-radius: 5px;
}

.contenticon_box span.clock:after {
    content: "時計ウィジェット";
    /*時計ウィジェット*/
    border: solid 1px #C00;
    background-color: #FFF;
    padding: 1px 10px;
    border-radius: 5px;
}

.contenticon_box span.battery:after {
    content: "電池ウィジェット";
    /*電池ウィジェット*/
    font-size: 9px;
    border: solid 1px #C00;
    background-color: #FFF;
    padding: 1px 10px;
    border-radius: 5px;
}

.contenticon_box span.search:after {
    content: "検索ウィジェット";
    /*検索ウィジェット*/
    border: solid 1px #C00;
    background-color: #FFF;
    padding: 1px 10px;
    border-radius: 5px;
}

.contenticon_box span.widgetpack:after {
    content: "ウィジェットパック";
    /*ウィジェットパック*/
    border: solid 1px #C00;
    background-color: #FFF;
    padding: 1px 10px;
    border-radius: 5px;
}

.contenticon_box span.widgetmulti:after {
    content: "多機能ウィジェット";
    /*多機能ウィジェット*/
    border: solid 1px #C00;
    background-color: #FFF;
    padding: 1px 10px;
    border-radius: 5px;
}

.contenticon_box span.multi:after {
    content: "多機能ウィジェット";
    /*多機能ウィジェット*/
    border: solid 1px #C00;
    background-color: #FFF;
    padding: 1px 10px;
    border-radius: 5px;
}

.contenticon_box span.switch:after {
    content: "スイッチウィジェット";
}

/*------- ジャンルアイコン（最新） -------------------------------------------*/
.contenticon_box {
    color: #C00;
    font-size: 10px;
    margin: 2px 0 2px 0;
    width: 100%;
    clear: both;
}

.contenticon_box span:after {
    border: solid 1px #C00;
    background-color: #FFF;
    padding: 1px 10px;
    border-radius: 5px;
    display: inline-block;
    margin-right: 5px;
}

.contenticon_box span.sw:after {
    content: "スイッチウィジェット";
}

.contenticon_box span.paletteui:after,
.contenticon_box span.pui:after {
    content: "パレットUI";
}

.contenticon_box span.mlt:after,
.contenticon_box span.thema:after {
    content: "テーマ";
}

.contenticon_box span.call:after {
    content: "きせかえCALL";
}

.contenticon_box span.ioskisekae:after {
    content: "アイコンきせかえ";
}

.contenticon_box span.kisekae:after {
    content: "きせかえ";
}

.contenticon_box span.docomomail:after {
    content: "ドコモメール";
}

.contenticon_box span.decostamp:after {
    content: "デコメスタンプ";
}

.contenticon_box span.widget:after {
    content: "ウィジェット";
}

.contenticon_box span.widgetw:after {
    content: "時計ウィジェット";
}

.contenticon_box span.widgetb:after {
    content: "電池ウィジェット";
}

.contenticon_box span.widgetp:after {
    content: "ウィジェットパック";
}

.contenticon_box span.ktouch:after {
    content: "きせかえtouch";
}

.contenticon_box span.lwp:after {
    content: "ライブ壁紙";
}

.contenticon_box span.lux:after {
    content: "LIVE UX";
}

.contenticon_box span.lock:after {
    content: "ロック";
}

.contenticon_box span.wppack:after {
    content: "壁紙セット";
}

.contenticon_box span.shortcut:after {
    content: "ショートカット";
}

.contenticon_box span.commingsoon:after {
    content: "CommingSoon";
}

.contenticon_box span.free:after {
    content: "FREE";
    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3) inset, -1px -1px 0 rgba(0, 0, 0, 0.3) inset;
    background-color: #F4373C;
    color: #FFF;
}

.contenticon_box .contenticon_widget {
    width: 20%;
    border-radius: 5px;
    text-align: center;
    font-size: 10px;
    padding: 1px 3px 1px 3px;
    margin: 2px 2% 0 0;
    background-color: #002BFF;
    color: #FFF;
    float: left;
}

.contenticon_box .contenticon_ktouch {
    width: 28%;
    border-radius: 5px;
    padding: 1px 3px 1px 3px;
    text-align: center;
    font-size: 8px;
    margin: 2px 2% 0 0;
    background-color: #FFA800;
    color: #FFF;
    float: left;
}

.contenticon_box .contenticon_lwp {
    width: 50px;
    border-radius: 5px;
    text-align: center;
    font-size: 8px;
    padding: 1px 3px 1px 3px;
    margin: 2px 2% 0 0;
    background-color: #69B900;
    color: #FFF;
    float: left;
}

.contenticon_box .contenticon_pui {
    width: 25%;
    border-radius: 5px;
    padding: 1px 3px 1px 3px;
    text-align: center;
    font-size: 10px;
    margin: 2px 2% 0 0;
    background-color: #D1203D;
    color: #FFF;
    float: left;
}

.contenticon_box .contenticon_wppack {
    width: 25%;
    border-radius: 5px;
    padding: 1px 3px 1px 3px;
    text-align: center;
    font-size: 10px;
    margin: 2px 2% 0 0;
    background-color: #D1203D;
    color: #FFF;
    float: left;
}

.contenticon_box .contenticon_shortcut {
    width: 38%;
    border-radius: 5px;
    padding: 1px 3px 1px 3px;
    text-align: center;
    font-size: 10px;
    margin: 2px 2% 0 0;
    background-color: #FF7C80;
    color: #FFF;
    float: left;
}

.contenticon_box .contenticon_free {
    width: 15%;
    border-radius: 5px;
    padding: 1px 3px 1px 3px;
    text-align: center;
    font-size: 10px;
    margin: 2px 2% 0 0;
    background-color: #F00;
    color: #FFF;
    float: left;
}

.contenticon_box .contenticon_thema {
    width: 40px;
    height: 16px;
    border-radius: 5px;
    padding: 1px 3px 2px 3px;
    text-align: center;
    font-size: 10px;
    margin-top: 2px;
    background-color: #4FB8E1;
    color: #FFF;
    float: left;
}

/*------- レイアウト切替 -------------------------------------------*/
.rayoutchange {
    width: 100%;
    padding: 10px 0;
}

.rayoutchange .text {
    width: 60%;
    float: left;
    text-align: left;
    font-weight: bold;
    padding: 10px 0 0 2%;
    font-size: 20px;
}

.rayoutchange .icon {
    width: 40%;
    float: right;
}

.button_dl_02 {
    width: 70%;
    height: 50px;
    margin: auto;
    border-radius: 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    color: #0A5D00;
    font-weight: bold;
}

.button_toplink {
    width: 80%;
    height: 40px;
    margin: auto;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.button_100 {
    width: 100%;
    height: 40px;
    margin: auto;
    font-size: 14px;
    border-radius: 6px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.button_90 {
    width: 90%;
    height: 40px;
    margin: auto;
    font-size: 14px;
    border-radius: 6px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

/*------- 2ボタンフルサイズ　※簡易 -------------------------------------------*/
.button2_area {
    width: 100%;
    text-align: center;
}

.button2_area .l {
    float: left;
    width: 49%;
    height: 40px;
    font-size: 14px;
    border-radius: 6px;
    vertical-align: middle;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.button2_area .r {
    float: right;
    width: 49%;
    height: 40px;
    font-size: 14px;
    border-radius: 6px;
    vertical-align: middle;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

/* ドコモカラー */
.button_color_docomo {
    background: linear-gradient(to bottom, #EB6B8A, #B4123A);
    border: 3px solid #BD4862;
    color: #FFF;
    font-weight: bold;
}

/* グレー */
.button_color_04 {
    background: linear-gradient(to bottom, #ffffff, #f6f6f6 30%, #e0e0e0);
    border: 1px solid #999;
    color: #000000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    box-sizing: border-box;
}

/* 新規追加: フラットなボタンデザイン */
.button_flat {
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
    color: #595959 !important;
    /* 文字色をグレーに固定 */
    font-size: 14px;
    padding: 10px 5px;
    width: 100%;
    margin-bottom: 5px;
    display: block;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
}

.button_flat:hover {
    background: #F9F9F9;
}

/* オレンジ */
.button_color_05 {
    background: linear-gradient(to bottom, #F29440, #E87C23);
    border: 1px solid #FEC898;
    color: #fff;
}

/* ゴールド */
.button_color_07 {
    background: linear-gradient(to bottom, #F2CC26, #7F5706);
    border: 1px solid #AD843E;
    color: #FFF;
    text-shadow: 0 1px 0 #AD843E;
}

/* 退会ページ用ライトグレー */
.button_color_21 {
    background: linear-gradient(to bottom, #C0C0C0, #C0C0C0);
    border: 1px solid #999;
    color: #fff;
    color: #666;
}

/* ダウンロード */
.button_color_dl {
    background: linear-gradient(to bottom, #ffffff, #f6f6f6 30%, #e0e0e0);
    border: 1px solid #999;
    color: #0A5D00;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    box-sizing: border-box
}

/* nexiグレー */
.button_color_au {
    background: linear-gradient(to bottom, #FFAD32, #FF9500);
    border: 1px solid #FF9900;
    color: #FFF;
    text-shadow: 0 -1px 0 #F69300;
}

/* グレー */
.button_color04 {
    background: linear-gradient(to bottom, #ffffff, #f6f6f6 30%, #e0e0e0);
    border: 1px solid #999;
    color: #000000;
}

/*------- ハーフバナー -------------------------------------------*/
/* halfbanner left */
.hbl {
    float: left;
    margin: 0 auto;
    width: 47%;
    text-align: center;
    padding-left: 2%;
    line-height: 200%;
    font-size: 12px;
}

/* halfbanner right */
.hbr {
    float: right;
    margin: 0 auto;
    width: 47%;
    text-align: center;
    padding-right: 2%;
    line-height: 200%;
    font-size: 12px;
}

/*------- TOPページ -------------------------------------------*/
/* ランキングエリア作成 */
.rank_area {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ランキングアイコン */
.top_rank_icon {
    width: 24px;
    margin-right: 4px;
}

/* ランキングテキスト */
.top_rank_text {
    width: auto;
    font-weight: bold;
    color: #555;
}

/* ５並びサムネイルナンバー */
.rank_no_s {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 5px;
    clear: both;
    color: #555;
}



/*--------------------------------------------------------------------------------------------
          デバッグ用
  --------------------------------------------------------------------------------------------*/
/* sitelinkpage */
.sitelinkpage_a {
    color: #000;
}

/* リンクテキスト */
a:link,
a:visited,
a:hover,
a:active {
    color: #005A10;
}

a>span {
    color: #00F;
    text-decoration: underline;
}

/* 書式設定 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", meiryo, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background: #E7E7E7;
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;
    color: #555;
}

/*--------------------------------------------------------------------------------------------
          ページデザイン基本設定
  --------------------------------------------------------------------------------------------*/
/* 背景指定 */
.bgc_01 {
    background-color: #FFF;
    margin: auto;
    width: 100%;
    text-align: center;
    clear: both;
}

/* サイトID */
#siteid_01 {
    text-align: left;
    background: #FFF;
}

#sitelogo {
    float: left;
    width: 100%;
    font-size: 30px;
    padding: 0;
    font-weight: bold;
}

#sitelogo a:link {
    color: #FFF;
}

.iconbox {
    width: 11%;
    margin: 2px 1% 0 0;
    padding: 1px 2% 3px 2%;
    float: right;
    text-align: center;
    font-size: 9px;
    line-height: 1.2;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2),
        inset 1px 1px 0 rgba(0, 0, 0, 0.1),
        inset -1px -1px 1px rgba(0, 0, 0, 0.3);
}

.iconbox span {
    color: #434343;
}

/* 両サイドスペース */
.ss_01 {
    width: 90%;
    padding: 0 5%;
    clear: both;
}

.master_text_color {
    color: #595959;
}

.comment_color {
    color: #666;
}

/* コーナー外枠 */
.corner {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    border: 0;
}

/* コーナー背景色 */
.corner .bg {
    background-color: #FFF;
}

/* コーナーヘッダー角丸 */
.headline_01 {
    width: 100%;
    height: 20px;
    font-size: 16px;
    text-align: left;
    clear: both;
    padding: 9px 0 7px 0;
    border-top: solid 1px #FFF;
    border-bottom: solid 1px #CCC;
    background: #CCC;
    box-shadow: 0 -1px 3px 1px rgba(0, 0, 0, 0.2);
}

/* コーナーヘッダー内テキスト */
.headline_01 span {
    margin-left: 3%;
    vertical-align: super;
    font-size: 18px;
    color: #333;
    font-family: 'Archivo Narrow', sans-serif;
    text-shadow: 0 1px 0 #FFF;
}

/* 一層へのリンク背景 */
.linkbar_01 {
    background: linear-gradient(to bottom, #ffffff, #f6f6f6 30%, #e0e0e0);
    width: 100%;
    border-bottom: 1px solid #cccccc;
    padding: 10px 0;
    clear: both;
}

.corner .linecolor {
    border-color: #cccccc;
}

.linkbar_01 .l {
    float: left;
    margin-left: 10px;
}

.linkbar_01 .c {
    float: left;
    margin-left: 10px;
    margin-top: 2px;
    color: #000000;
}

.linkbar_01 .r {
    float: right;
    margin-right: 0;
}

.linkbar_02 {
    background: #9CCC00;
    width: 90%;
    border-radius: 20px;
    margin: auto;
    color: #FFF;
    font-weight: bold;
    height: 50px;
    border: none;
    font-size: 18px;
}

button.linkbar_02 {
    background: none;
    color: #9CCC00;
    border: solid 2px #9CCC00;
}

.fuukei_bg {
    background: #00B0F0;
}

.flower_bg {
    background: #FF5DAE;
}

.cool_bg {
    background: #0070C0;
}

.heart_bg {
    background: #FF5D61;
}

.wagara_bg {
    background: #E20000;
}

.unique_bg {
    background: #00B050;
}

/*--------------------------------------------------------------------------------------------
          ■一層ページ素材
  --------------------------------------------------------------------------------------------*/
/* 一層ページタイトル */
.pagetitle_01 {
    background-color: #EEEEEE;
    width: 100%;
    height: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    border-bottom: solid 1px #aaaaaa;
    color: #A0A0A0;
    padding: 10px 0;
    clear: both;
}

.pagetitle_01 span {
    margin: 3%;
}

/* アンダーライン */
.underline_01 {
    width: 100%;
    border-bottom: solid 1px;
    clear: both;
}

.linecolor_01 {
    border-color: #CCC;
}

/* ボタンカラー */
.button_color_01 {
    background: linear-gradient(to bottom, #ffffff, #f6f6f6 30%, #e0e0e0);
    border: 1px solid #999;
    color: #000000;
}

.mydesign_headline {
    background: #bbb;
}

/*--------------------------------------------------------------------------------------------
          インフォメーション
  --------------------------------------------------------------------------------------------*/
#informationcorner .color {
    background-color: #FFF;
    border-color: #AAA;
    color: #222;
}

/*--------------------------------------------------------------------------------------------
          コピーライト
  --------------------------------------------------------------------------------------------*/
#copyright {
    background-color: #000000;
    color: white;
    padding: 8px 0;
    text-align: center;
    font-size: 12px;
}

.more_button {
    width: 40%;
}