/* New CSS */
/*
   カート、マイページ内のcgiに関係するフォーム周りのデザイン
*/

.floatleft {
	float: left;
}
.floatright {
	float: right;
}

.clearfix::after {
	clear: both;
	display: block;
	content: "";
	height: 0;
	width: 0;
}

#debug {
    border: 1px solid #CCC;
    margin: 10px;
    padding: 10px;
    background: #f4faff;
    display: inline-block;
}

/* 印刷イメージモーダルで背景に読み込み中表示 */
.previewloading {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    margin: 0;
    z-index: -1;
    text-align: center;
}
.blinking {
    animation:blink 1.5s ease-in-out infinite alternate;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    margin: 0;
    z-index: -1;
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/* W2Pの宛名アプリが隠れてしまうのでレイヤーを上に */
.slicknav_nav {
    z-index: 999;
}

#imgprevew {
    width: 450px;
    height: auto;
}

.onlypc {
    display: none;
}

.onlysp {
    display: block;
}

td.onlysp {
    display: table-cell;
}

@media screen and (min-width: 641px) {
    .onlypc {
        display: block;
    }

    td.onlypc {
        display: table-cell;
    }

    .onlysp {
        display: none;
    }
}

/* フォーム内のテキストのマージン */
.static {
    margin: 8px;
    display: inline-block;
}

/* sstyle2014.css内の修正でも可 */
@media screen and (min-width: 641px) {
    #order {
        width: 950px;
        margin-bottom: 20px;
        margin-top: 20px;
        overflow: auto;
    }
}

/* 喪中にあって、年賀本舗のstyle2014.cssにない */
@media screen and (min-width:641px) {
    #wrapper {
        width: 950px;
        margin-right: auto;
        margin-left: auto;
        clear: both;
        overflow: hidden;
    }

    .preview {
        text-align: center;
        margin-bottom: 20px;
    }

    .order-left {
        /* 商品ページの右側の印刷内容。0.9emだと文字が小さい（style2014.css内の修正でも可）  */
        float: left;
        width: 48%;
        text-align: left;
    }
}

/* 商品ページの右側の印刷内容。0.9emだと文字が小さい（style2014.css内の修正でも可）  */
.order-right table {
    font-size: initial;
}
/* 挨拶文のテキストエリアがはみ出し防ぐ（style2014.css内の修正でも可）  */
.order-right textarea {
    width: 95%;
}

/* フォーム「お支払い方法／備考欄」の枠のデザイン */
.form-border {
    background-color: #FFF;
    padding: 2%;
    border: 2px solid #D5E2FD;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (min-width: 641px) {
    .form-border {
        width: 91%;
    }
}

/* フォーム「お支払い方法／備考欄」のセレクトのレイアウト */
.form-select {
    margin-left: unset;
}

@media screen and (min-width: 641px) {
    .form-select {
        margin-left: 20px;
    }
}

/* フォーム「お支払い方法／備考欄」の枠の中のpタグ */
.form-border p {
    margin-top: 0;
}

/* フォームのテーブルの左の項目の幅（style2014.css内の修正でも可） */
.form-title {
    width: auto;
}

@media screen and (min-width: 641px) {
    #order .form-title {
        width: 110px;
    }

    #order #cart .form-title {
        width: 150px;
    }
}

/* フォームのテーブルの右のフォーム部分（style2014.css内の修正でも可） */
@media screen and (max-width: 640px) {
    .form-content {
        padding: 5px 5px 0 5px;
    }
}

/* フォーム「お名前入力」のふりがなを入力するボタンの幅（style2014.css内の修正でも可） */
.codebtn {
    width: unset;
}

/* フォームの見栄えの統一（style2014.css内の修正でも可） */
input[type="checkbox"] {
    margin: 10px 0;
}

input[type="radio"] {
    margin: 10px 0;
}

input[type="text"],
input[type="date"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="file"],
textarea {
    padding: 5px 8px;
    font-size: 1em !important;
    color: #333;
    vertical-align: middle;
    background-color: #fafafa;
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    margin: 2px;
}

select {
    color: #333;
    font-size: 1em !important;
    display: inline-block;
    width: auto !important;
    max-width: 100%;
    padding: 5px 20px 5px 8px !important;
    vertical-align: middle;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fafafa url(img/updown.png) no-repeat right 8px center;
    background-size: 8px 10px;
}

.btn {
    font-size: 1em !important;
    display: inline-block;
    padding: 5px 10px;
    color: #333;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-color: #eee;
    background-image: -webkit-linear-gradient(#fcfcfc, #eee);
    background-image: linear-gradient(#fcfcfc, #eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 2px !important;
}

/* 年賀本舗のフッターにある#companyとidが重なってしまったのでスタイルを強制上書き */
/* できれば年賀本舗のCSSを「footer #company」と変更してほしい */
input#company {
    width: 250px;
    line-height: inherit;
    margin: inherit;
    text-align: inherit;
    background-color: #fafafa;
    border: 1px solid #ccc;
}

/* マイページの保存メッセージ */
.msg_container {
    border: 1px solid #666;
    padding: 5px;
    font-size: 0.9em;
    line-height: 150%;
    color: #ff0000;
    margin: 10px 2.5% 10px 2.5%;
    background: #fff;
    font-weight: bold;
}

@media screen and (max-width: 640px) {
    .msg_container {
        margin: 10px 0;
    }
}

/* s_common/css/ssf_addition.css から移動 */

/* マイページ */
#mypage ul li {
    font-size: 14px;
    display: block;
    line-height: 36px;
    padding: 0px;
    margin: 5px;
    float: left;
    list-style-type: none;
    width: 132px;
    text-align: center;
    font-weight: bold;
    background-color: #06C;
    color: #FFF;
}

#mypage ul li a {
    color: #FFF;
    display: block;
    text-decoration: none;
}

#mypage ul li a:hover {
    background-color: #09F;
}

#mypage {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

#mypage div {
  font-size: 14px;
  line-height: 36px;
  padding: 0px;
  margin: 5px;
  width: 132px;
  text-align: center;
  font-weight: bold;
  background-color: #06C;
  color: #FFF;
}

#mypage div a {
  color: #FFF;
  display: block;
  text-decoration: none;
}

#atenabtn {
    display: flex;/*宣言*/
    justify-content: center;/*中央寄せ*/
    flex-wrap: wrap;/*改行あり*/
}

#atenabtn a {
    font-size: 14px;
    padding: 5px;
    margin: 5px;
    text-align: center;
    font-weight: bold;
    background-color: #fff;
    color: #000;
    display: block;
    border: 2px solid #666;
    border-radius: 5px;
}

#atenabtn .up {
      width: 30%;
}

#atenabtn .dn {
      width: 30%;
}

@media (max-width: 767px) {
    #atenabtn .up {
        width: 50%;
    }
    #atenabtn .dn {
        width: 100%;
    }
}

/* 年賀本舗のstyle2014.cssに無いようなので */
/* SSF追加定義  [2014.7～ 追加 sugino] ------ */

#order input[type="button"]:hover {
    cursor: pointer;
}

/* カート画面 ボタン */
#cart input[type="button"] {
    /*margin-left: 15px;*/
}

/* 確認メッセージ */
#order .validation_message {
    color: #ff0000;
}

.s_msg_min {
    color: #ff0000;
}

.validation_message,
.s_msg_container {
    color: #ff0000;
}

/*「お買い物を続ける」ボタン */
#order .continue:hover {
    cursor: pointer;
}

/*「購入手続き」ボタン */
#order .order-button:hover {
    cursor: pointer;
}

/* 動的・属性追加用 */
.hide {
    display: none;
}

/* 「必須」マーキング */
span.marking {
    margin-left: 5px;
    font-size: 0.8em;
    color: #ff0000;
}

/* あいさつ文・Window */
.remodal table {
    font-size: 0.9em;
    margin-bottom: 15px;
    width: 100%;
}

.remodal td.honbun_cell {
    cursor: pointer;
}

/* IMEモード ========================== */

/* 英数字入力モードで固定*/
.ime_disabled {
    ime-mode: disabled;
}

/* 初期値が英数字入力モード */
.ime_inactive {
    ime-mode: inactive;
}

/* 初期値が日本語入力モード */
.ime_active {
    ime-mode: active;
}