/**************************************************** 全ての要素をリセット 各ブラウザの表示を統一するための設定です *****************************************************/ html { overflow-y: scroll; word-break: break-all; } 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; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; } table { border-collapse: collapse; border-spacing: 0; margin-top: 15px; /*-- 追加 --*/ } caption, th, p { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; text-align: left; } img, abbr, acronym, fieldset { border: 0; } li { list-style-type: none; } img { vertical-align: middle; } .line { font-size: 1px; line-height: 1px; } /*--- default */ body { color: #333; font-size: 16px; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.4; background: #fafafa; } body td, body th { font-size: 14px; } table { border-collapse: collapse; } /***************************************************** 商品カートの詳細説明文・表スタイル *****************************************************/ div#product_spec { text-align: left; font-size: 14px; font-weight: 600; color: #909090; background: #fafafa; border-top: 0px solid #fff6c6; border-right: 0px solid #c0c0c0; border-left: 4px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; padding: 5px 0 2px 6px; } body div.detailTxt td, body th { font-size: 12px; padding: 4px 8px; /*-- 追加 --*/ border: 1px #c8c8c8 solid; /*-- 追加←表がぐちゃぐちゃになるのでコメントアウト --*/ /* line-height: 3px; */ } body div.detailTxt { line-height: 22px; margin-left: 10px; } body div.detailTxt span { font-weight: bold; } @media screen and (max-width: 769px) { body div.detailTxt { margin-left: 0; } } /***************************************************** 基本設定、リンクカラーなど *****************************************************/ #wrap { width: 100%; height: 100%; } #wrapper { width: 100%; margin: 20px auto 0; /*padding-top: 180px;*/ } #makebanner { display: none; /* width: 960px; margin-top: 40px; background: #ffffff; */ } a:link { color: #196BC7; text-decoration: none; } a:visited { color: #196BC7; text-decoration: underline; } a:hover { color: #f78500; text-decoration: underline; } a:active { color: #ed1c24; text-decoration: underline; } /* clearfix */ .clear:after { visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0; } * html .clear { zoom: 1; } /* IE6 */ *:first-child + html .clear { zoom: 1; } /* IE7 */ .pad10 { padding: 10px; } a:hover img { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } /***************************************************** ヘッダ #header *****************************************************/ #headerWrap { width: 100%; background: #fff url(///images/original_design_default/samplesource/3/body_bg.png) repeat-x bottom; text-align: center; padding-bottom: 15px; margin-top: -20px; /*position: fixed;*/ z-index: 999; } #header { width: 960px; position: relative; margin: 0 auto; } #head { margin-bottom: 5px; min-height: 75px; height: auto !important; height: 75px; } #header h1 { margin-top: 5px; } #h_logo { padding-top: 31px; padding-bottom: 8px; float: left; width: 360px; text-align: left; } #h_right { position: absolute; float: left; margin-top: 45px; width: 656px; } #shop_cartinf { float: right; width: 285px; height: 80px; padding: 0 0 5px 0; margin-right: -5px; border: #e8e8e8 1px solid; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } /* サブナビゲーション */ #subNav { position: absolute; top: 5px; right: 0; text-align: right; height: 14px; } #subNav img { vertical-align: top; } #subNav li { display: inline-block; *display: inline; *zoom: 1; margin-left: 4px; vertical-align: top; } #subNav .M_loginBtn { display: block; width: 55px; height: 14px; background: url(///images/original_design_default/samplesource/3/hNav01.png) no-repeat 0 0; text-indent: -9999em; text-align: left; overflow: hidden; } #subNav .M_logoutBtn { display: block; width: 67px; height: 14px; background: url(///images/original_design_default/samplesource/3/hNav01_out.png) no-repeat 0 0; text-indent: -9999em; text-align: left; float: left; overflow: hidden; } #subNav .M_loginBtn:hover, #subNav .M_logoutBtn:hover { background-position: 0 -14px; } #subNav .M_helloMsg { float: left; font-size: 11px; margin-right: 5px; margin-top: 1px; line-height: 14px; } .hd_menu .mypage .M_helloMsg { display: none; } #cart { position: absolute; top: 30px; right: 0; } /* 電話番号 */ #telnum, #M_basketTemp1 { float: right; } #telnum { padding: 0 10px; } #telnum p { margin: 4px auto 0; } #telnum em { /*font-family:Arial, Helvetica, sans-serif;*/ font-weight: bold; font-size: 20px; color: #c90000; } /* 買い物カゴ */ #M_basketTemp1 .M_headItem { text-align: left; } #cl_estimate_link { display: block; width: 205px; height: 50px; padding: 13px 10px 15px; /* border-color: #46b8da; */ /* background: #3fc2e8; */ border-color: #aaaaaa; background: #aaaaaa; border: 0 solid transparent; color: #fff; white-space: nowrap; color: #FFF; font-size: 15px; text-decoration: none; text-shadow: 1px 1px 2px #666; transition: all 0.5s ease; } #cl_estimate_link:hover { opacity: 0.8; } #cl_estimate_history_link { display: block; width: 205px; height: 50px; margin: 0 10px; padding: 13px 10px 15px; /* background: #ffab00; */ background: #aaaaaa; border: 0 solid transparent; color: #fff; white-space: nowrap; color: #FFF; font-size: 15px; text-decoration: none; text-shadow: 1px 1px 2px #666; transition: all 0.5s ease; } #cl_estimate_history_link:hover { opacity: 0.8; } @media screen and (max-width: 1024px) { #r_basket .btnWrap .btnOrder { margin-top: 10px; } #r_basket .btnWrap .btnOrder a { margin-bottom: 20px; } .btnWrap { display: flex; flex-wrap: wrap; flex-direction: column; } #cl_estimate_history_link { margin: 0 10px; } #cl_estimate_link { margin: 0; } } @media screen and (max-width: 414px) { #cl_estimate_history_link { margin: 10px 0; } } /* グローバルナビゲーション */ #gNav { width: 960px; height: 50px; margin: 0 auto; } #gNav li { float: left; index-z: 989999; } #gNav li a { display: block; width: 192px; height: 50px; text-indent: -9999em; overflow: hidden; } #gNav li#gNav01 a { background: url(///images/original_design_default/samplesource/3/gNav01.png) no-repeat top; } #gNav li#gNav02 a { background: url(///images/original_design_default/samplesource/3/gNav02.png) no-repeat top; } #gNav li#gNav03 a { background: url(///images/original_design_default/samplesource/3/gNav03.png) no-repeat top; } #gNav li#gNav04 a { background: url(///images/original_design_default/samplesource/3/gNav04.png) no-repeat top; } #gNav li#gNav05 a { background: url(///images/original_design_default/samplesource/3/gNav05.png) no-repeat top; } #gNav li#gNav01 a:hover, #gNav li#gNav02 a:hover, #gNav li#gNav03 a:hover, #gNav li#gNav04 a:hover, #gNav li#gNav05 a:hover { background-position: 0 -50px; } /* グローバルナビゲーション 17.05.08追記分 */ #gNav2 { width: 960px; height: 50px; margin: 0 auto; } #gNav2 li { float: left; index-z: 989999; } #gNav2 li a { display: block; width: 107px; height: 50px; text-indent: -9999em; overflow: hidden; } #gNav2 li#gNav06 a, #gNav2 li#gNav08 a, #gNav2 li#gNav09 a, #gNav2 li#gNav11 a, #gNav2 li#gNav12 a, #gNav2 li#gNav14 a, { width: 107px; } #gNav2 li#gNav07 a, #gNav2 li#gNav10 a, #gNav2 li#gNav13 a { width: 106px; } #gNav2 li#gNav06 a { background: url(../img/gNav06.png) no-repeat top; } #gNav2 li#gNav07 a { background: url(../img/gNav07.png) no-repeat top; } #gNav2 li#gNav08 a { background: url(../img/gNav08.png) no-repeat top; } #gNav2 li#gNav09 a { background: url(../img/gNav09.png) no-repeat top; } #gNav2 li#gNav10 a { background: url(../img/gNav10.png) no-repeat top; } #gNav2 li#gNav11 a { background: url(../img/gNav11.png) no-repeat top; } #gNav2 li#gNav12 a { background: url(../img/gNav12.png) no-repeat top; } #gNav2 li#gNav13 a { background: url(../img/gNav13.png) no-repeat top; } #gNav2 li#gNav14 a { background: url(../img/gNav14.png) no-repeat top; } #gNav2 li#gNav06 a:hover, #gNav2 li#gNav07 a:hover, #gNav2 li#gNav08 a:hover, #gNav2 li#gNav09 a:hover, #gNav2 li#gNav10 a:hover, #gNav2 li#gNav11 a:hover, #gNav2 li#gNav12 a:hover, #gNav2 li#gNav13 a:hover, #gNav2 li#gNav14 a:hover { background-position: 0 -50px; } /* http: ../img/gNav06.jpg */ /***************************************************** 左コンテンツ #leftContents *****************************************************/ #leftContents { width: 180px; } #leftContents .section { margin-bottom: 25px; } /* インターンシップ募集バナー用 終わったら外す */ #l_search.section { margin-bottom: 0; } .inner { border-top: none; } /* 検索input */ #l_search h2 { margin-bottom: 8px; } #l_search .search_input { width: 140px; float: left; display: block; height: 18px; } #l_search a.keywordSearch { display: block; width: 31px; height: 26px; background: #A59D95 url((../img/l_searchBtn.png) no-repeat center 2px; float: left; text-indent: -9999em; } #l_search a.keywordSearch:hover { background-position: 0 -20px; } #l_search .detailSearch { margin-top: 5px; } /* カテゴリー */ #l_category table { width: 180px; } #l_category table td { text-align: left; } /* 会員メニュー */ #l_member ul { text-align: right; margin-bottom: 5px; } #l_member li { display: inline; font-size: 11px; background: url((../img/listIconR.png) no-repeat left; padding-left: 12px; margin-left: 2px; } #l_member li a { color: #333; } /* カレンダー */ #l_calendar table:nth-child(5), #l_calendar table:nth-child(2) { margin-bottom: 5px; border-collapse: collapse; } #l_calendar table:nth-child(5) tbody tr td, #l_calendar table:nth-child(2) tbody tr td { border: 1px solid #e0e0e0; } #l_calendar table:nth-child(1), #l_calendar table:nth-child(4) { border-bottom: 3px solid #d7605e; font-size: 12px; margin-top: 25px; margin-bottom: 3px; } /* 中央揃え */ #l_owner, #l_banner { text-align: center; } #l_owner table, #l_banner table { margin: 0 auto; } /* 投票 */ #wrapper #makebanner #leftContents #l_poll input { border: 0px solid #fff; } #l_poll a img { display: none; } #l_poll a { display: block; } #l_poll a#poll_b01 { width: 125px; background: url((../img/poll_b01.png) no-repeat 0 0; height: 25px; margin-bottom: 5px; } #l_poll a#poll_b02 { width: 71px; background: url((../img/poll_b02.png) no-repeat 0 0; height: 21px; } #l_poll a#poll_b01:hover { background-position: 0 -25px; } #l_poll a#poll_b02:hover { background-position: 0 -21px; } #l_poll b { color: #333; } /* 掲示板 */ #l_board table { width: 100%; } #l_board table td { text-align: left; } #l_board img { display: none; } /* バナー */ #l_banner img { margin-bottom: 5px; } /***************************************************** メインコンテンツ #rightContents *****************************************************/ .rightContents { width: 740px; margin-left: -10px; } .rightContents .section { margin-bottom: 30px; } /*---------------------------------------------------- 中央画面 #top ----------------------------------------------------*/ #r_shopintro { float: left; } .r_left { float: left; width: 520px; } .r_right { float: right; width: 220px; } .titleMgn { margin-bottom: 10px; } /* 新着 */ #r_new.section td { color: #661e00; } #r_new .lims table { margin: 10px auto; width: 170px; } #r_new .lims table .woong td { text-align: center; font-weight: bold; padding-top: 5px; color: #ba0000; } #r_new .lims table .woong td a { font-weight: normal; } #r_new .lims table .woong td img { margin-left: 5px; } /* おすすめ */ #r_recommend.section td { color: #661e00; } #r_recommend .lims table { margin: 10px auto; width: 170px; } #r_recommend .lims table .woong td { text-align: center; font-weight: bold; padding-top: 2px; color: #ba0000; } #r_recommend .lims table .woong td a { font-weight: normal; } #r_recommend .lims table .woong td img { margin-left: 5px; } #r_recommend .lims table .woong td a b { margin-top: -10px; font-weight: normal; font-size: 11px; } /* ランキング */ #r_ranking { display: flex; flex-wrap: wrap; justify-content: flex-start; /* margin: 0 0 -10px; */ margin: 0 0 0px; } #r_ranking .rankList { position: relative; width: calc((100% - 4em - 1px) / 5); margin: 8px 1em 0 0; } #r_ranking .rankList:last-of-type { margin-right: 0; } @media screen and (max-width: 769px) { #r_ranking { margin: 0 0 40px; } #r_ranking #rank5.rankList { margin-right: 1em !important; } } #r_ranking .rankList .rankName { font-size: 12px; padding: 5px 10px; } #r_ranking #rank5.rankList { margin-right: 0; } #r_ranking em { display: block; position: absolute; text-indent: -9999em; } #r_ranking .rankImg { margin: 5px auto; } #r_ranking em { width: 34px; height: 51px; } #r_ranking #rank1 em { background: url(../img/ranking.png) no-repeat 0 0; } #r_ranking #rank2 em { background: url(../img/ranking.png) no-repeat -144px 0; } #r_ranking #rank3 em { background: url(../img/ranking.png) no-repeat -288px 0; } #r_ranking #rank4 em { background: url(../img/ranking.png) no-repeat -432px 0; } #r_ranking #rank5 em { background: url(../img/ranking.png) no-repeat -576px 0; } #r_ranking p { text-align: left; } #r_ranking .rankPrice { font-weight: bold; /*color:#661e00;*/ color: #ed0000; } /*.rankList#rank1 { margin-left: 20px; } */ /* レビュー */ #r_review #M_reviewView, #r_review #M_reviewView table { width: 100%; margin: 0; } #r_review #M_reviewPart #M_reviewView .M_reviewList td.M_reviewReadText { width: 300px; padding-right: 20px; } #r_review #M_reviewPart #M_reviewView th { display: none; } /* お知らせ */ #r_news table td { background: #f2efeb; } #r_news #pager table td { background: #fff; } #r_news table td.line { height: 1px; } #r_news table table { width: 700px } #r_news img { margin-bottom: 2px; } #r_news td.woong { padding: 0px 3px 0px 0; border-bottom: 1px dotted #b2b2b2; } /* スペシャル */ #r_special table table { margin-top: 16px; } #r_special td.line { display: none; } #r_special.section td { color: #661e00; } #r_special table table td { padding-bottom: 8px; } #r_special table tr td table tr td a img { height: 150px; width: 150px; } #r_special.section td.woong { color: #ed0000; } /*最近チェックした商品*/ #r_recent .price { color: #661e00; font-weight: bold; } #r_recent #recent .itemBox, #r_recent #recent .itemBox table, #r_recent #recent td.itemImg { width: 170px; } #r_recent #recent { margin-top: 16px; } #r_recent #recent .line { width: 10px; } #r_recent #recent .name a { word-break: break-all; } #r_recent #recent .line img { display: none; } #r_recent .itemBox p { text-align: left; } /*---------------------------------------------------- 商品カテゴリーと商品詳細　共通 ----------------------------------------------------*/ .pankuzu { text-align: left; background: #f2efeb; border: 1px solid #d6d3cf; line-height: 20px; margin-bottom: 30px; } .pankuzu a { padding: 0 5px; font-size: 11px; color: #333; } .pankuzu font { color: #333; font-size: 11px; } /*---------------------------------------------------- 商品カテゴリー #category ----------------------------------------------------*/ /* カテゴリー */ #category #r_subGroup.section, #category #r_categoryImg.section { -moz-border-radius: 5px; /* 古いFirefox */ -webkit-border-radius: 5px; /* 古いSafari,Chrome */ border-radius: 5px; /* CSS3 */ border: 1px #e0e0e0 solid; /* 枠線の装飾 */ background-color: #f9f9f9; /* 背景色 */ margin-bottom: 20px; } #category #r_categoryRecommend table table b { color: #661e00; } /* 検索結果と並び替え */ #r_resultInfo { font-size: 11px; margin: 20px auto 10px; } .total { float: left; } .listSort { floar: right; text-align: right; } .listSort li { display: inline; } /* カテゴリーリスト */ #category .innerList { overflow: hidden; _zoom: 1; letter-spacing: -.40em; text-align: left; display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0; } #category .innerList li { vertical-align: top; letter-spacing: normal; /* 文字間を通常に戻す */ width: calc((100% - 3em - 1px) / 4); margin: 0 1em 0 0; display: inline-block; / display: inline; /* IE用ハック */ / zoom: 1; /* IE用ハック */ margin-bottom: 16px; } #category .innerList li:nth-of-type(4n) { margin-right: 0; } @media screen and (max-width: 769px) { #category .innerList { align-items: stretch; } #category .innerList li { vertical-align: top; letter-spacing: normal; /* 文字間を通常に戻す */ width: calc((100% - 1em - 1px) / 2); margin: 0 1em 0 0; display: inline-block; / display: inline; /* IE用ハック */ / zoom: 1; /* IE用ハック */ margin-bottom: 16px; } #category .innerList li:nth-of-type(2n) { margin-right: 0; } } #category .innerBox { margin: 3px 3px 3px -6px; text-align: left; } #category .name { margin: 5px 0; } #category .imgWrap { text-align: center; } #category .price span { padding: 0 2px; } #category .price { font-weight: bold; /*color:#661e00;*/ color: #ba0000; font-size: 16px; text-align: center; } #category .consumerPrice { font-size: 11px; color: #a59d95; text-decoration: line-through; } #category .else { text-align: left; } #category .else li { float: none; width: auto; display: none; } #category .M_lumpinput { text-align: right; } #category .content { border-top: 1px dashed #b2b2b2; padding: 10px 0; margin: 10px auto; border-bottom: 1px dashed #b2b2b2; font-size: 12px; } #category .btnWrap { margin: 10px auto 5px; text-align: center; } #category .btnWrap img { margin-left: 1px; } /*---------------------------------------------------- 商品詳細 #detail ----------------------------------------------------*/ .innerBox .detail p.price { color: #ed0000; } #itemLink { margin-bottom: 30px; font-size: 16px; } .item_prev { float: left; background: url((../img/listIconL.png) no-repeat left; padding-left: 14px !important; } .item_next { float: right; background: url((../img/listIconR.png) no-repeat right; padding-right: 14px !important; } #itemImg { float: left; width: 420px; } #itemInfo { float: right; width: calc(100% - 460px); } .M_imageWrap { width: 100% !important; } .M_imageWrap .M_imageCatalog table { width: 100%; margin: 0 !important; } .M_imageMain { height: 450px !important; } .M_imageMain img { width: 100%; height: auto; } @media screen and (max-width: 769px) { #itemImg { float: none; width: 100% !important; margin: 0 0 40px; text-align: center; } .M_imageWrap { width: 90% !important; margin: 0 auto; } .M_imageWrap .M_imageCatalog table { width: 100%; margin: 0 !important; } #itemInfo { float: none; width: 100% !important; } #viewButton { margin: 15px 0 20px !important; } } /* [INFO]タグ */ #detailInfo table { width: 100%; margin-bottom: 10px; } #detailInfo table td { height: auto; text-align: left; } #itemInfo #detailInfo table font { color: #cc0000; } #itemInfo ul li { font-size: 12px; line-height: 1.5em; } #itemInfo p { margin-bottom: 10px; } #detailInfo table input { margin-right: 5px; } #detailInfo table table td a img { vertical-align: auto; } #detailInfo #M_usualValue td { /*font-size:18px; padding:10px 0; 　　　　color:#3e3e3e;*/ font-size: 25px; padding: 10px 0; color: #c90000; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bolder; } #detailInfo #M_usualValue td input { font-size: 25px; padding: 10px 0; color: #c90000; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bolder; /*color:#3e3e3e;*/ } #wrapper #makebanner #detailInfo #M_usualValue, #wrapper #makebanner #detailInfo #M_price2, #wrapper #makebanner #detailInfo #M_taxview { border: none; width: auto; font-weight: bold; font-size: 25px; width: 120px; color: #c90000; font-family: Arial, Helvetica, sans-serif; } #detailInfo #M_usualValue .m_price {} #detailInfo #M_usualValue { font-weight: bold; } #detailInfo #M_taxview { width: auto; } #wrapper #makebanner #detailInfo .M_inventory input { border: none; } #wrapper #makebanner #detailInfo .M_inventory table.stockList th { background: #f2efeb; border: 1px solid d6d3cf; } #wrapper #makebanner #detailInfo .M_inventory table.stockList td { border: 1px solid d6d3cf; text-align: center; } #r_detailWrap { margin-bottom: -50px; } @media screen and (max-width: 1024px) { #r_detailWrap { display: flex; flex-wrap: wrap; justify-content: space-between; } #itemImg { float: none !important; width: 260px; } .M_imageWrap { width: 100% !important; } #itemInfo { float: none !important; width: calc(100% - 280px); } } /* 拡大画像ボタン */ #viewButton { text-align: right; } /* 商品名 */ /* #detail h2 { margin-bottom: 20px; font-size: 15px; color: #403c39; } */ #makebanner #detail #r_recent { border-top: 0px solid #fff; } /* 商品詳細 */ #detail .detailTxt { /* border-top:1px dotted #b2b2b2; */ /* border-bottom:1px dotted #b2b2b2; */ padding: 10px 0; margin-bottom: 20px; } #detail .detailTxt a:link { text-decoration: underline; } /* メールリンク */ #r_contact { margin: 10px 0 10px -5px; } #r_contact li { float: left; margin-left: 4px; } /* SNS */ #r_sns { margin-top: 10px; } #r_sns li { float: left; } /* カートにいれるボタン */ /* .innerBox .detail .btnWrap { background:url((../img/basketBg.png) repeat;padding:5px 1px 5px 10px;margin:1px 3px 0 0;text-align:justify;text-justify:inter-ideograph;} */ #basketBtn { width: 430px; max-width: 100%; margin-top: 10px; margin: 10px 0; display: flex; flex-wrap: wrap; justify-content: space-between; /*background: url((../img/basketBg.png) repeat;*/ } #basketBtn a { display: flex; justify-content: center; align-items: center; height: 56px; text-align: center; } #basketBtn a:hover{ opacity: 0.8; } #basketBtn .cartBtn { width: 100%; } #basketBtn img{ height: auto; max-width: 90%; } #basketBtn .cartBtn a{ background-color: #CC0001; } #basketBtn .favariteBtn { width: calc(50% - 2.5px); margin: 5px 0; } #basketBtn .favariteBtn a{ background-color: #F8F8F8; border: 1px solid #999; } #basketBtn .officeBtn { width: 100%; margin-bottom: 5px; } #basketBtn .officeBtn a{ background-color: #EB3D01; } #basketBtn .otherBtn { width: 100%; } #basketBtn .otherBtn a{ background-color: #425081; } #basketBtn .nostockBtn{ width: 100%; position: relative; margin-bottom: 5px; } #basketBtn .nostockBtn span{ background-color: #F8F8F8; border: 1px solid #999; color: #999; font-size: 16px; font-weight: bold; display: flex; justify-content: center; align-items: center; height: 56px; text-align: center; } #basketBtn .nostockBtn a{ display: flex; justify-content: flex-end; align-items: flex-end; top: 0; left: 0; right: 0; bottom: 0; position: absolute; text-decoration: none; font-weight: bold; padding: 5px; } #basketBtn .nostockBtn a:hover{ background-color: rgba(255,255,255,0.2); } @media screen and (max-width: 769px) { #basketBtn { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } #basketBtn .cartBtn { float: none; } #basketBtn .cartBtn img { height: auto; } #basketBtn .buyBtn { float: none; margin-right: 0; } #basketBtn .buyBtn img { width: 100%; height: auto; } #basketBtn .favariteBtn img{ max-width: 80%; } } /* 追加商品説明文 */ #r_detailExt { width: 100%; margin-bottom: 0; clear: both; } #r_detailExt table[bordercolor="#ffffff"] td { border: solid 4px white; } /* 追加商品画像 */ #r_addImg li { float: left; width: 33%; text-align: center; } #r_addImg li p { width: 200px; margin: 5px auto 0; } /* レビュー */ #detail #r_review { margin-bottom: 40px; } #detail #r_review #M_review { margin-top: 16px; } #detail #r_review #M_review td { text-align: left; } /* 商品グループ */ #r_group h3 { border-bottom: 2px solid #D6D3CF; color: #403C39; } #r_group #M_group { width: 100%; margin: 16px auto; border-collapse: collapse; } #r_group #M_group .itemBox, #r_group #M_group .itemBox table, #r_group #M_group td.itemImg { width: 170px; } #r_group #M_group .itemBox { vertical-align: top; } #r_group #M_group .itemImg { text-align: center; } #r_group #M_group .line { width: 10px; } #r_group #M_group .line img { display: none; } #r_group .itemBox p { text-align: left; } #r_group .price { color: #661E00; font-weight: bold; } /* 最近チェックした商品 */ #detail #r_recent { border-top: 1px dashed #b2b2b2; padding-top: 20px; } /*---------------------------------------------------- ログインフォーム関係 .loginForm ----------------------------------------------------*/ .loginForm { margin-top: 20px; } .loginForm h3 { font-size: 14px; margin-bottom: 20px; background: url((../img/h3title.png) no-repeat left; padding-left: 14px; color: #403c39; } .loginForm .section { text-align: center; } .btnWrap { margin-top: 20px; text-align: center; } .loginForm .leadTxt { margin-bottom: 30px; } .loginForm .lostpass { text-align: center; font-size: 11px; margin-top: 5px; } .loginForm .formTable { margin: 20px auto 0; width: 400px; } .loginForm .formTable th, .loginForm .formTable td { border: 1px solid #d6d3cf; padding: 6px 8px; } .loginForm .formTable th { background: #f2efeb; width: 120px; } .loginForm .formTable .inputTd input { width: 250px !important; } #wrapper #makebanner input { padding: 2px; } /*---------------------------------------------------- 会員ログイン #memberlogin ----------------------------------------------------*/ #memberLogin .btnWrap { overflow: hidden; _zoom: 1; } #memberLogin .btnWrap div { float: left; width: 360px; padding-bottom: 20px; } #memberLogin .btnWrap #newMember { border-right: 1px dotted #b2b2b2; } #memberLogin .btnWrap p { margin: 20px; } /*---------------------------------------------------- 注文履歴ログイン #orderlogin ----------------------------------------------------*/ /*---------------------------------------------------- パスワード紛失 #orderlogin ----------------------------------------------------*/ /*---------------------------------------------------- 約款 #contract ----------------------------------------------------*/ #contractBox { width: 700px; height: 280px; overflow: auto; border: 1px solid #b2b2b2; padding: 10px; text-align: left; margin-top: 20px; } /*---------------------------------------------------- 会員登録修正フォーム #member ----------------------------------------------------*/ #memberForm #M_entryForm { margin: 30px 10px 20px; width: 660px; border-top: 1px solid #d6d3cf; border-left: 1px solid #d6d3cf; *position: relative; } #memberForm #M_entryForm th, #memberForm #M_entryForm td { padding: 8px; } #memberForm #M_entryForm td { background: #fff; border: 1px solid #d6d3cf; border-top: none; *position: relative; } #memberForm #M_entryForm th { background: #f2efeb; width: 160px; border-bottom: 1px solid #d6d3cf; *position: relative; } #memberForm .M_txt { font-size: 11px; margin-left: 10px; } #memberForm #mailreceiveN, #memberForm #sex1 { margin-left: 10px; } #memberForm .M_ex, #memberForm .M_info { font-size: 11px; color: #666; } #memberForm .M_post { display: block; width: 96px; height: 22px; background: url((../img/r_postBtn.png) no-repeat; float: left; text-indent: -9999em; overflow: hidden; _zoom: 1; } #memberForm #r_leave img { display: none; } #memberForm #r_leave a { display: block; background: url((../img/memberjoin_escape.png) no-repeat; width: 95px; height: 21px; margin-top: 8px; } /*---------------------------------------------------- パスワード変更フォーム #M_changepw ----------------------------------------------------*/ #makebanner #M_changepw { border: 1px solid #d6d3cf; } /*---------------------------------------------------- ポイント #point ----------------------------------------------------*/ #r_pointData { border: 1px solid #d6d3cf; background: #f2efeb; padding: 10px; margin: 20px 60px 30px; } #r_pointData p { text-align: center; } #r_pointData strong { font-size: 15px; font-weight: bold; color: #cc0000; } #r_pointList table { border-collapse: separate; width: 400px; margin: 0 0 0 180px; border-spacing: 0; } #r_pointList td { border: 1px solid #fff; padding: 8px; text-align: center; } #r_pointList td font { font-size: 13px; } /*---------------------------------------------------- 商品検索 #search ----------------------------------------------------*/ #r_searchName { margin: 20px 0 20px; } #r_searchName font { color: #333; font-weight: bold; } #r_searchInput { background: #f2efeb; padding: 10px; } #r_searchInput table { width: 100%; background: #fff; word-break: break-all; word-wrap: break-all; } #r_searchInput .btnWrap { margin-top: 10px; } #r_searchInput th, #r_searchInput td { border: 1px solid #d6d3cf; padding: 6px 8px; } #r_searchInput th { background: #f2efeb; width: 15%; } #r_searchInput td { width: 35%; } #r_searchInput td input { width: 100px; } #r_searchInput #searchBrand input, #r_searchInput #searchProduct input, #r_searchInput #searchContent input, #r_searchInput #searchCode input { width: 230px; } #r_searchList table, #r_pager table { width: 100%; } .searchResult { font-size: 14px; margin-bottom: 20px; background: url((../img/searchIcon.png) no-repeat left; padding-left: 20px; } #r_searchList .innerList { overflow: hidden; _zoom: 1; letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */ text-align: left; } #r_searchList .innerList li { vertical-align: top; letter-spacing: normal; /* 文字間を通常に戻す */ width: 25%; /* 商品数が4つなので100%÷4=25% */ display: inline-block; /display: inline; /* IE用ハック */ /zoom: 1; /* IE用ハック */ margin-bottom: 16px; } #r_searchList .innerBox { margin: 10px; padding: 10px; } #r_searchList .name { margin: 5px 0; } #r_searchList .imgWrap { text-align: center; } #r_searchList .price { font-weight: bold; color: #ed0000; } #r_searchList .else { text-align: left; } #r_searchList .else li { float: none; width: auto; display: none; } #r_searchList .btnWrap { margin: 5px auto 5px; background: #e6e6e6; text-align: center; } @media screen and (max-width: 769px) { #r_searchInput tr { display: flex; flex-direction: column; } #r_searchInput tr th { width: 100%; border-bottom: none; } #r_searchInput tr td { width: 100%; padding: 10px!important; border-bottom: none; } #r_searchInput tr:last-of-type td:last-of-type { border-bottom: 1px #c8c8c8 solid;; } #r_searchInput tr td input { width: 100px; } #r_searchInput #searchBrand input, #r_searchInput #searchProduct input, #r_searchInput #searchContent input, #r_searchInput #searchCode input { width: 100%; } #r_searchInput .btnWrap { margin: 20px auto!important; } #r_searchList .innerList li { width: 50%; } #r_searchList ul li div div.detail p.name a { height: auto!important; } } /*---------------------------------------------------- 買い物カゴ #basket ----------------------------------------------------*/ #r_basket { margin-bottom: 30px; } #basket { /*margin: 75px 0 0;*/ margin: 0 0 0 1em; } #basketTable { width: 100%; margin-top: 30px; } #basketTable th, #basketTable td { text-align: center; border-bottom: 1px solid #e8e4df; padding: 6px; } #basketTable th { border-bottom: 1px solid #e8e4df; background: #f2efeb; white-space: nowrap; } #basketTable td { border-bottom: none !important; } #basketTable .basketNum { width: 30px; padding: 0; } #basketTable .basketImg { width: 56px; } #basketTable .basketName { width: 400px; text-align: left; } .quantityWrap { display: table; } .quantityInput, .basketQunantity, .quantityAmend { display: table-cell; vertical-align: middle; padding: 0 2px; } #basketTable .basketQuantity td { border: none; padding: 0; } #basketTable .basketPoint { width: 70px; } #basketTable .basketPrice { width: 70px; } #basketTable .basketOption { text-align: left; margin-top: 4px; } #basketTable .basketHaisou { padding: 0; } #basketTable .carriageWrap { margin: 4px 0; } #basketTable .basketHaisou p { text-align: right; } #basketTable .basketHaisou .carriageMsg1 { color: #cc0000; } #basketTable .basketHaisou .carriageMsg2 { font-size: 11px; } #basketTable .basketBtns { width: 80px; } #basketTable .basketBtns img { margin-bottom: 2px; } #basketTable .basketTotal { text-align: right; background: #ebebeb; border-top: 3px solid #e8e4df; } #basketTable .basketTotal em { font-weight: bold; font-size: 15px; color: #cc0000; } #basketTable .basketEmpty p { text-align: center; margin: 10px auto; } #r_basket .btnWrap .btnBack { float: left; padding-top: 5px; margin-left: 10px; } #r_basket .btnWrap .btnOrder { display: flex; flex-wrap: wrap; justify-content: center; float: right; } .basket_option_mulopt_box { margin: -15px 0 6px 0 !important; } .basket_option_mulopt_box select{ width: 100%; } @media screen and (max-width: 769px) { #basket { margin-left: 0; } #basketTable { margin-top: 0 !important; } td.woong:before { content: "買い物かご"; display: block; margin: 0 0 20px; padding: 20px 0 0; color: #333; font-size: 24px; font-weight: bold; border-top: 3px double #333; } td.woong img { display: none; } #basketTable .basketNum { display: none !important; } #basketTable tr { margin: 0 0 20px; } #basketTable tr:first-of-type th:last-of-type { table-layout: fixed; width: 20%; } .basket_option_mulopt_box { margin: 0 !important; } .basket_option_mulopt_box select { width: 100%; padding: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #999; background: #eee; background: url(/design/img/icon_arrow.png) right 50% no-repeat #FFF; background-size: 14px; font-size: 16px; height: auto; } #r_basket .btnWrap .btnBack { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 0 10px; } #r_basket .btnWrap .btnBack { float: none; } #r_basket .btnWrap .btnBack a { width: calc((100% - 1em - 1px) / 2); margin: 0 1em 0 0; } #r_basket .btnWrap .btnBack a:nth-of-type(2n) { margin-right: 0; } #r_basket .btnWrap .btnOrder { float: none; display: flex; flex-wrap: wrap; justify-content: center; margin-right: 0; } #basketTable tr:first-of-type { display: none; } #basketTable tr:nth-of-type(2n) {} #basketTable tr td { display: block !important; width: 100% !important; } .basketImg { border-top: 1px solid #e8e4df; } .basketImg img { width: 50%; margin: 10px 0 20px; } #basketTable .basketImg:after { content: "商品情報"; display: block; padding: 5px 10px; background: #f2efeb; font-size: 16px; border-bottom: 1px solid #e8e4df; white-space: nowrap; } #basketTable .basketQuantity:before { content: "数量"; display: block; margin: 0 0 15px; padding: 5px 10px; background: #f2efeb; font-size: 16px; border-bottom: 1px solid #e8e4df; white-space: nowrap; } #basketTable .basketPoint:before { content: "ポイント"; display: block; margin: 0 0 15px; padding: 5px 10px; background: #f2efeb; font-size: 16px; border-bottom: 1px solid #e8e4df; white-space: nowrap; } #basketTable .basketPrice:before { content: "価格"; display: block; margin: 0 0 15px; padding: 5px 10px; background: #f2efeb; font-size: 16px; border-bottom: 1px solid #e8e4df; white-space: nowrap; } #basketTable .basketBtns { margin: 0 0 40px; } } /* お気に入りリスト */ #wishTable { width: 100%; margin-top: 8px; } #wishTable th, #wishTable td { text-align: center; border-bottom: 1px solid #e8e4df; padding: 6px; } #wishTable th { border-bottom: 1px solid #e8e4df; background: #f2efeb; } #wishTable .wishName { text-align: left; width: 240px; } #wishTable .wishQuantity input { margin-right: 4px; } /*---------------------------------------------------- お知らせ #news ----------------------------------------------------*/ #r_news { margin-top: 0px; /* margin-top:30px; */ } #r_news #newsHead { text-align: left; border-bottom: 2px solid #b2b2b2; padding: 4px 0; font-size: 15px; } #r_news #newsHead span { margin-right: 10px; font-size: 11px; color: #999; } #r_news #newsContents { text-align: left; padding: 40px 20px; border-bottom: 1px dashed #b2b2b2; margin-bottom: 20px; } #r_news #newsAccess { text-align: right; font-size: 11px; color: #999; margin-top: 20px; } #r_news #newsNext { text-align: right; font-size: 11px; margin-bottom: 10px; } #r_news #newsList { margin-bottom: 20px; } #r_news #newsList .line { background: #fff; } #r_news #newsList .lims { padding: 10px 0; background: #fff; border-bottom: 1px dashed #b2b2b2; } /*---------------------------------------------------- ご利用ガイド #guideMain ----------------------------------------------------*/ #wrapper #guideMain { margin: 0 auto; width: 950px; } /*---------------------------------------------------- カタログ #catalog ----------------------------------------------------*/ #catalog .ctlg_text { margin-top: 24px; } #r_catalog .catalogCart { text-align: right; margin: 8px 0; } /***************************************************** フッタ #footer *****************************************************/ #wrapper .pageTop a { margin-top: 60px; float: right; display: block; text-indent: -9999em; background: url((../img/pagetop.png) no-repeat 0 0; width: 80px; height: 9px; line-height: 0.7; } #wrapper .pageTop a:hover { background-position: 0 -9px; } #footerWrap { width: 100%; /*background: #fff url(../img/body_bg6.png) repeat-x bottom;*/ text-align: center; } #footer { width: 960px; margin: 0 auto; padding: 20px 0; font-size: 11px; } #f_nav { overflow: hidden; _zoom: 1; float: left; } #f_nav li { display: inline; padding-right: 1em; } #f_info { float: right; width: 400px; text-align: right; } #f_info a { color: #666; } /***************************************************** 利用規約簡略 *****************************************************/ .buytext { width: 100%; padding: 0 2px 10px 15px; } .wakutext { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; height: auto; padding: 10px; border: 1px solid #a2a3ea; } .wakutext > * { width: calc((100% - 2em - 1px) / 2); margin: 0 1.5em 0 0; } @media screen and (max-width: 769px) { .wakutext { flex-direction: column; } .wakutext > * { width: 100%; } } #by_txt1 { text-align: left; font-size: 14px; } #by_txt2 { margin-right: 0; text-align: left; font-size: 14px; } .menuTabLight { width: 100%; margin: 5px 0 10px 3px; padding: 2px 5px; border-width: 0 0 0 5px; border-color: #250da0; border-style: solid; background: #e9e5fb; color: #000000; line-height: 140%; font-weight: bold; } .cr_text { display: block; } .cr_text1 { width: 670px; height: 1px; float: left; } .shop_guide { width: 720px; border-color: #a2a3ea; border-width: 0px; border-style: solid; padding: 3px; margin: 5px; } .shop_icon { float: left; margin: 5px 6px 0 6px; } /********************************************************************************** /* * simplyScroll 2 - a scroll-tastic jQuery plugin * * //logicbox.net/jquery/simplyscroll * * Copyright (c) 2009-2012 Will Kelly - //logicbox.net * * Dual licensed under the MIT and GPL licenses. * * Last revised: 31/01/2012 * */ /* Default/Master classes Example markup format (for horizontal scroller) Note all DIVs are generated and should not be hard-coded
*/ .simply-scroll-container { /* Container DIV - automatically generated */ position: relative; } .simply-scroll-clip { /* Clip DIV - automatically generated */ position: relative; overflow: hidden; } .simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */ overflow: hidden; margin: 0; padding: 0; list-style: none; } .simply-scroll-list li { padding: 0; margin: 0; list-style: none; } .simply-scroll-list li img { border: none; display: block; } .simply-scroll-btn { position: absolute; background-image: url(buttons.png); width: 42px; height: 44px; z-index: 3; cursor: pointer; } .simply-scroll-btn-left { left: 6px; bottom: 6px; background-position: 0 -44px; } .simply-scroll-btn-left.disabled { background-position: 0 0 !important; } .simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus { background-position: 0 -88px; } .simply-scroll-btn-right { right: 6px; bottom: 6px; background-position: -84px -44px; } .simply-scroll-btn-right.disabled { background-position: -84px 0 !important; } .simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus { background-position: -84px -88px; } .simply-scroll-btn-up { right: 6px; top: 6px; background-position: -126px -44px; } .simply-scroll-btn-up.disabled { background-position: -126px 0 !important; } .simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus { background-position: -126px -88px; } .simply-scroll-btn-down { right: 6px; bottom: 6px; background-position: -42px -44px; } .simply-scroll-btn-down.disabled { background-position: -42px 0 !important; } .simply-scroll-btn-down:hover, .simply-scroll-btn-down:focus { background-position: -42px -88px; } .simply-scroll-btn-pause { right: 6px; bottom: 6px; background-position: -168px -44px; } .simply-scroll-btn-pause:hover, .simply-scroll-btn-pause:focus { background-position: -168px -88px; } .simply-scroll-btn-pause.active { background-position: -84px -44px; } .simply-scroll-btn-pause.active:hover, .simply-scroll-btn-pause.active:focus { background-position: -84px -88px; } /* Custom class modifications - override classees .simply-scroll is default */ .simply-scroll { /* Customisable base class for style override DIV */ width: 740px; height: 280px; margin-bottom: 1em; } .simply-scroll .simply-scroll-clip { width: 740px; height: 280px; } .simply-scroll .simply-scroll-list {} .simply-scroll .simply-scroll-list li { float: left; width: 290px; height: 200px; } .simply-scroll .simply-scroll-list li img {} .simply-scroll .simply-scroll-btn {} .simply-scroll .simply-scroll-btn-left {} .simply-scroll .simply-scroll-btn-left.disabled {} .simply-scroll .simply-scroll-btn-left:hover {} .simply-scroll .simply-scroll-btn-right {} .simply-scroll .simply-scroll-btn-right.disabled {} .simply-scroll .simply-scroll-btn-right:hover {} .simply-scroll .simply-scroll-btn-up {} .simply-scroll .simply-scroll-btn-up.disabled {} .simply-scroll .simply-scroll-btn-up:hover {} .simply-scroll .simply-scroll-btn-down {} .simply-scroll .simply-scroll-btn-down.disabled {} .simply-scroll .simply-scroll-btn-down:hover {} /* Vertical scroller example */ .vert { /* wider than clip to position buttons to side */ width: 780px; height: 500px; margin-bottom: 1.5em; } .vert .simply-scroll-clip { width: 740px; height: 400px; } .vert .simply-scroll-list {} .vert .simply-scroll-list li { width: 740px; height: 80px; } .vert .simply-scroll-list li img {} .vert .simply-scroll-btn {} .vert .simply-scroll-btn-up { /* modified btn pos */ right: 0; top: 0; } .vert .simply-scroll-btn-up.disabled {} .vert .simply-scroll-btn-up:hover {} .vert .simply-scroll-btn-down { /* modified btn pos */ right: 0; top: 52px; } .vert .simply-scroll-btn-down.disabled {} .vert .simply-scroll-btn-down:hover {} /* NOTE left-right classes wouldn't be needed on vertical scroller */ /**********************************************************************************/ /*********************************customize-start*****************************************/ #r_new table:nth-child(2) { margin-left: 0px; } /* トップページ　商品枠設定　開始*/ #r_new table:nth-child(2) tbody tr td table, #r_recommend table:nth-child(2) tbody tr td table, #r_categoryList ul li { table-layout: fixed; word-wrap: break-word; /*height:300px;*/ padding-left: 10px; margin: 5px; border: #9a9a9a dashed 1px; background: #fff; } /*トップページ　商品枠設定　終わり　*/ #r_searchList .innerBox { table-layout: fixed; word-wrap: break-word; margin: 10px; border: #9a9a9a dashed 1px; /*height:220px;*/ } #r_new table:nth-child(2) tbody tr td table tbody tr td a, #r_recommend table:nth-child(2) tbody tr td table tbody tr td a { overflow: hidden; font-size: 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } #r_searchList ul li div div.detail p.name a { overflow: hidden; font-size: 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; height: 66px; } #r_new table:nth-child(2) tbody tr td table tbody tr td, #r_recommend table:nth-child(2) tbody tr td table tbody tr td { font-size: 16px; } #r_news table tbody tr:nth-child(2) td table tbody tr td:nth-child(1) { font-size: 11px; } #r_searchList ul li div div.detail p.price { text-align: center; font-weight: bold; color: #ba0000; font-size: 16px; } #r_searchList ul li div div.detail p.price:before { padding-left: -43px; content: "価格:"; font-size: 10px; color: red; } caption, th, p { text-align: left; color: #333; } #r_subGroup table { margin: 3px 5px 5px -10px; } @media screen and (max-width: 769px) { #r_subGroup { padding: 10px; } #r_subGroup table { margin: 0; } } #l_category div { border: #d0d0d0 solid 1px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: #fff; box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1); } #l_category div table { margin-top: -30px; margin-bottom: 15px; } /*#makebanner tbody tr:nth-child(1) td:nth-child(2) { padding-left: 11px; }*/ /*上段 アプライドタイムズロゴ*/ /*#ap_guide { position: absolute; margin: 1px; width: 286px; float: right; margin-top: 39px; margin-left: 676px; }*/ #ap_times { position: absolute; margin: 1px; width: 135px; float: right; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); margin-top: 25px; margin-left: 824px; height: 90px; } #ap_ｇ { position: absolute; margin: 1px; width: 135px; float: right; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); margin-top: 25px; margin-left: 676px; height: 90px; } /********** Link画像 hover →拡大 ************** a img { -moz-transition: -moz-transform 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear; -o-transition: -o-transform 0.3s linear; -ms-transition: -ms-transform 0.3s linear; transition: transform 0.3s linear; } a img:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } ********** Link画像 hover →拡大 END **********/ #h_logo a img { padding-top: 7px; } #h_logo h2 { padding-top: 0; } select { height: 1.5em; width: 20.5em; } option { width: 8em; white-space: normal; } #r_news table tbody tr:nth-child(2) { box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.1); border: solid 1px #acacac; } #r_sns a:link, a:visited { text-decoration: none; } #r_new table:nth-child(2) tbody tr td table tbody tr td a, #r_recommend table:nth-child(2) tbody tr td table tbody tr td a { margin: 2px 1px; } #header_cart { width: 750px; height: 193px; position: fixed; left: auto; top: 0px; z-index: 10000; border-bottom: 1px solid #cccccc; background: rgba(255, 255, 255, 1.50); box-shadow: 2px 8px 5px 3px rgba(0, 0, 0, 0.05); border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin: 0 auto; display: none; } #header_cart div { margin: 0 auto; } #header_cart #header_cart_img { position: fixed; width: 100px; height: 100px; float: left; margin-left: 40px; } #header_cart #header_cart_productname { float: left; margin-left: 150px; width: 430px; height: 80px; text-align: left; position: fixed; z-index: 99999; top: 10px; font-size: 20px; font-weight: bold; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } #header_cart #header_cart_buy { float: left; margin-left: 590px; position: fixed; height: auto; top: 55px; text-align: left; z-index: 99999; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } #header_cart #header_cart_price { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-top: 20px; margin-left: 580px; color: #c90000; font-size: 24px; font-weight: bolder; } #header_cart #header_cart_price:after { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; content: "円";
margin-left: 5px; font-weight: bold; font-size: 15px; color: #c90000; } #M_price1.m_price, #M_price2.m_price{ font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; margin-left: 0px; color: #c90000; font-size: 24px; font-weight: bolder; width: 150px; } #M_price1.m_price:after, #M_price2.m_price:after{ font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; content: "円"; font-weight: bold; font-size: 15px; color: #c90000; } #header_cart #header_cart_options { float: left; width: 750px; margin-left: 0; padding-bottom: 5px; position: fixed; height: auto; background-color: #fff; top: 100px; text-align: left; z-index: 99999; } #header_cart_options select { margin-top: 2px; margin-left: 2px; } #header_cart #app_recommend_support img { width: 740px; float: left; margin-top: 3px; } #header_cart #app_recommend_support01 img { width: 185px; float: left; margin-top: 3px; } #header_cart #app_recommend_support02 img { width: 185px; float: left; margin-top: 3px; margin-left: 3px; } #header_cart #app_recommend_support03 img { width: 185px; float: left; margin-top: 3px; margin-left: 3px; } #header_cart #app_recommend_support04 img { width: 185px; float: left; margin-top: 3px; margin-left: 3px; } .fixed { position: fixed; top: 0; left: 0; width: 760px; margin: 0 auto; left: auto; } #scroll_info { position: fixed; left: 10%; font-size: 10px; } .support_menu { width: 730px; float: left; height: 120px; } .support_spec { text-align: left; font-size: 16px; font-weight: 600; color: #909090; background: #fafafa; border-top: 0px solid #fff6c6; border-right: 0px solid #c0c0c0; border-left: 4px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; padding: 5px 0 2px 6px; } p.coution_option { margin-bottom: 5px; color: #630001; float: left; border: 1px dotted #c0c0c0; padding: 2px 2px 2px 10px; background: #f0f0f0; } /** 新着情報 **/ div.new_arrival { width: 950px; height: 240px; text-align: left; border: 1px solid #9a9a9a; box-sizing: border-box; overflow-y: scroll; overflow-x: hidden; } div.new_arrival dd { text-indent: 1em; } /** 記事 **/ ul#article_main { list-style: none; width: 760px; /*float: left;*/ padding: 0; margin: 0; margin-bottom: 10px; } li.article_waku { position: relative; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.3); border: 1px solid #e3e3e3; width: 238px; height: 180px; float: left; margin-right: 10px; margin-bottom: 10px; } li.article_waku a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -999px; } .article_img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; } .article_date { text-align: left; font-family: Roboto, "Droid Sans", "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size: 13px; color: #808080; margin-bottom: 10px; padding-left: 5px; padding-top: -2px; position: absolute; top: 1px; right: 1px; background: rgba(255, 255, 255, 0.8); } .article_txt { text-align: left; color: #000; font-family: Roboto, "Droid Sans", "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-weight: bold; font-size: 14px; padding: 2px 5px; } /** 記事終わり **/ /*-----------------------------------------------------*/ /* RightBanner 用 */ /*-----------------------------------------------------*/ #RightBanner img { max-height: auto; width: auto; } /*-----------------------------------------------------*/ /* RightBanner 用 終わり */ /*-----------------------------------------------------*/ /*-----------------------------------------------------*/ /* TOPページ メインビジュアル JS 用 */ /*-----------------------------------------------------*/ /** * BxSlider v4.0 - Fully loaded, responsive content slider * //bxslider.com * * Written by: Steven Wanderski, 2012 * //stevenwanderski.com * (while drinking Belgian ales and listening to jazz) * * CEO and founder of bxCreative, LTD * //bxcreative.com */ /** RESET AND LAYOUT ===================================*/ .bx-wrapper { position: relative; margin: 0 auto 60px; padding: 0; *zoom: 1; } .bx-wrapper li { text-align: center; } .bx-wrapper img { max-width: 100%; display: block; margin-left: auto; margin-right: auto; } /** THEME ===================================*/ .bx-wrapper .bx-viewport { -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; background: #fff; } .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; left: 0; } /* LOADER */ .bx-wrapper .bx-loading { min-height: 50px; background: url(images/bx_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } /* PAGER */ .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px; } .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager.bx-default-pager a, .bx-wrapper .bx-pager.bx-default-pager p { background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; background: url(images/controls.png) no-repeat 0 -32px; } .bx-wrapper .bx-next { right: 10px; background: url(images/controls.png) no-repeat -43px -32px; } .bx-wrapper .bx-prev:hover { background-position: 0 0; } .bx-wrapper .bx-next:hover { background-position: -43px 0; } .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 9999; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(images/controls.png) -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(images/controls.png) -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: center; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } /* IMAGE CAPTIONS */ .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666; width: 100%; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } * html .bx-wrapper .bx-caption { bottom: 6px; } .bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; } .bx-wrapper .bx-pager { bottom: -76px !important; } .bx-wrapper .bx-pager a, .bx-wrapper .bx-pager p { display: block; margin: 2px; padding: 0; border: solid #eee 2px; } .bx-wrapper .bx-pager a:hover, .bx-wrapper .bx-pager a.active { border: solid #b33636 2px; } .bx-wrapper { margin-bottom: 10px !important; } /*独自の修正*/ /* 読み込みが終わるまで非表示 */ .bxslider li, .bxslider p, .bxslider a { display: none; } /* JSが展開されたら表示 */ .bx-viewport .bxslider li, .bx-viewport .bxslider p, .bx-viewport .bxslider a { display: block !important; } .bx-pager-item { margin: 0; } .mainvisualSlider { width: auto; height: auto; border: none; background: #fff; } /*独自の修正 ここまで*/ /*-----------------------------------------------------*/ /* TOPページ メインビジュアル JS 用 ここまで */ /*-----------------------------------------------------*/ /*-----------------------------------------------------*/ /*BTO中間ページ用*/ /*-----------------------------------------------------*/ #btoFeature h1 { margin: 32px 0 32px 0; padding: 8px; font-size: 24px; text-align: left; color: #333333; background: #B2B2FF; border-bottom: solid 2px #ccccff; } #btoFeature h2 { margin: 16px 0 16px 0; padding: 7px 12px 1px 12px; font-size: 18px; text-align: left; color: #333333; border-bottom: solid 8px #7FA0FF; } #btoFeature.win7 h2 { border-bottom: solid 8px #7FFF8E; } #btoFeature h3 { margin: 4px 0 4px 0; padding: 4px 7px 1px 7px; font-size: 16px; text-align: left; color: #333333; background: none; border-bottom: solid 4px #7FA0FF; } #btoFeature.win7 h3 { border-bottom: solid 4px #7FFF8E; } #btoFeature > div { margin: 32px 0 32px 0; } #btoFeature div.btoFeatureMainvisual, #btoFeature div.btoFeatureLead, #btoFeature div.btoFeatureBanner { margin: 0; } .btoFeatureMainvisual, .btoFeatureBanner { text-align: center; } .btoFeatureLead p, .btoFeatureText p { padding: 8px; line-height: 2.4; } #btoFeature div.btoFeatureTextBottomSmall { margin-bottom: 16px; } .btoFeatureText > div.clear img { float: left; margin: 8px; } /*BTO中間ページ用 オススメモデル一覧*/ .btoFeaturePickupSentence { width: 756px; margin: auto; } .btoFeaturePickupSentence > div { float: left; width: 242px; margin: 4px; border: solid 1px #777777; } .btoFeaturePickup p { line-height: 1.2; color: #171717; } .btoFeaturePickup img { float: left; margin: 4px; } .btoFeaturePickupBold { float: right; padding: 2px 4px 0 4px; } .btoFeaturePickupBold p { text-align: right; font-size: 16px; font-weight: bold; } .btoFeaturePickupName p { float: right; padding: 4px 4px 0 0; text-align: right; } .btoFeaturePickupPrice p { float: right; text-align: right; font-size: 24px; font-weight: bold; color: #ba0000; } /*BTO中間ページ用 オススメモデル一覧 透明ボタン*/ .btoFeaturePickupSentence > div > div.clear { position: relative; } .btoFeaturePickupSentence > div > div.clear:hover { opacity: 0.8; } .btoFeaturePickupButton { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 900; } .btoFeaturePickupButton a, .btoFeaturePickupButton p { display: block; width: 100%; height: 100%; text-decoration: none; } .btoFeaturePickup001 > div:hover p, .btoFeaturePickup002 > div:hover p, .btoFeaturePickup003 > div:hover p { color: #F78500; } .btoFeaturePickup001 > div:hover .btoFeaturePickupPrice p, .btoFeaturePickup002 > div:hover .btoFeaturePickupPrice p, .btoFeaturePickup003 > div:hover .btoFeaturePickupPrice p { color: #ba0000; } /*BTO中間ページ用 カテゴリーボタン*/ #btoTower { width: 756px; margin: auto; } .btoFeatureCategory { float: left; width: 33%; margin: 0; padding: 0; } .btoFeatureCategory p { padding: 0; text-align: center; } .btoFeatureCategory a { width: 244px; font-size: 16px; font-weight: bold; color: #555555; } .btoFeatureCategory a:before { content: ""; position: relative; top: 3px; display: inline-block; width: 18px; height: 18px; margin-right: 2px; background: url(../img/arrow_down.gif) no-repeat; } .btoFeatureCategory a:hover:before { background: url(../img/arrow_down_hover.gif) no-repeat; } .btoFeatureCategory a:hover { color: #f78500; text-decoration: none; } .win7 .btoFeatureCategory { width: 378px; } .btoFeatureCategoryGaming { float: left; width: 50%; margin: auto; border-top: solid 1px #7FA0FF; } /*BTO中間ページ用 性能一覧表*/ #btoFeature div.btoGraph { margin-top: 0; } .bto .btoGraph table.btoGraph1-4, .bto .btoGraph table.btoGraph2-2, .bto .btoGraph table.btoGraph3-1, .win7 .btoGraph table.btoGraph1-1, .win7 .btoGraph table.btoGraph2-2 { margin-bottom: 16px; } .btoGraph table { margin: 16px auto 32px auto; border-collapse: collapse; text-align: center; line-height: 1.4; border: solid 2px #777777; } .btoGraph th { padding: 4px; width: 92px; text-align: center; color: #444444; font-weight: bold; vertical-align: middle; border: solid 1px #777777; border-right: solid 2px #777777; } .btoGraph td { padding: 4px; width: 153px; text-align: center; vertical-align: top; color: #444444; border: solid 1px #777777; } .bto .btoGraph1-4 td, .bto .btoGraph3-1 td { width: 639px; } .bto .btoGraph2-2 td, .bto .btoGraph4-1 td, .win7 .btoGraph1-1 td, .win7 .btoGraph2-2 td { width: 207px; } tr.btoGraphImg { border-bottom: solid 2px #777777; } tr.btoGraphImg td { padding: 0; } /*#makebanner tbody tr:nth-child(1) td:nth-child(2){padding-left:11px;}対策*/ tr.btoGraphImg td { padding: 0 !important; } .btoGraph tbody td { padding-left: 4px !important; } .btoGraphPrice td { font-size: 16px; font-weight: bold; color: #ba0000; } tr.btoGraphPrice { border-bottom: solid 2px #777777; } tr.btoGraphGray1 { background: #cccccc; } tr.btoGraphGray2 { background: #e0e0e0; } tr.btoGraphMore { border-top: solid 2px #777777; } tr.btoGraphMore a { font-size: 16px; font-weight: bold; } /*BTO中間ページ用 目次へ戻る*/ div#mokuzi { height: 0; padding: 0; margin: 0; } .btoGraphGoMokuzi { text-align: right; margin-bottom: 16px; } .btoGraphGoMokuzi a:before { content: ""; position: relative; top: 2px; display: inline-block; width: 16px; height: 16px; padding-right: 2px; background: url(../img/arrow_up.gif) no-repeat; } .btoGraphGoMokuzi a:hover:before { background: url(../img/arrow_up_hover.gif) no-repeat; } /*-----------------------------------------------------*/ /*BTO中間ページ用 終わり*/ /*-----------------------------------------------------*/ /*-----------------------------------------------------*/ /*各メーカー中間ページ用*/ /*.lgFeature →LG gram用*/ /*.djiFeature →DJI用*/ /*.msiFeature →MSI用*/ /*.ryzenFeature →RYZEN用*/ /*.intelcpuFeature →IntelCPU用*/ /*-----------------------------------------------------*/ #mainFeature { margin-top: -5px; background: #FAFAFA; } #mainFeature a:hover img { opacity: 0.5; } #featureTopImg { position: relative; margin: 0 auto 16px auto; text-align: center; } .featureTopImgText { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 960px; height: 240px; } .featureTopImgText p { height: inherit; margin: auto; text-align: center; line-height: 240px; color: #ffffff; font-size: 32px; } .featureSection { margin: 16px 0; } .featureSection p { line-height: 2.4; } .featureSectionTitle { position: relative; } /*中間ページ h1~h3*/ .featureSection h1 { /*margin: 8px 0 8px 0;*/ position: relative; padding: 8px 8px; margin-bottom: 8px; text-align: left; font-size: 20px; font-weight: bold; color: #444444; z-index: 900; border-left: 6px #AC1847 solid; } .featureSection h2, .featureTop h2 { position: relative; margin: 8px 0; padding: 8px 8px; text-align: left; font-size: 16px; color: #333333; z-index: 950; border-left: 6px #333333 solid; } .featureSection h3 { position: relative; margin: 8px 0; padding: 8px; text-align: left; font-size: 16px; color: #333333; z-index: 950; border-left: 6px #333333 solid; } .featureSectionTitle:after { position: absolute; top: 90%; content: ""; display: block; height: 10%; width: 100%; z-index: 850; background: -webkit-gradient(linear, left top, right top, from(#B26B83), color-stop(0.5, #B26B83), to(#fafafa)); background: -moz-linear-gradient(left, #B26B83, #B26B83, #fafafa); background: -ms-linear-gradient(left, #B26B83, #B26B83, #fafafa); background: linear-gradient(left, #B26B83, #B26B83, #fafafa); } .featureSectionSentenceTitle:after { position: absolute; top: 90%; content: ""; display: block; height: 10%; width: 100%; z-index: 850; background: -webkit-gradient(linear, left top, right top, from(#cccccc), color-stop(0.5, #cccccc), to(#fafafa)); background: -moz-linear-gradient(left, #cccccc, #cccccc, #fafafa); background: -ms-linear-gradient(left, #cccccc, #cccccc, #fafafa); background: linear-gradient(left, #cccccc, #cccccc, #fafafa); } /*中間ページ 紹介文*/ .featureSectionSentence > div { /*margin: 16px 0;*/ } .featureSectionSentenceTitle { position: relative; } .featureSectionSentenceImgLeft, .featureSectionSentenceTextLeft { float: left; } .featureSectionSentenceImgRight, .featureSectionSentenceTextRight { float: right; } .featureSectionSentenceTextLeft, .featureSectionSentenceTextRight { width: 484px; margin: 0 0 8px 0; } .featureLead p, .featureSectionSentenceText p { padding: 0; line-height: 2.4; font-size: 12px; } .featureSectionSentenceImg img { margin: 4px 8px 8px 8px; } /*中間ページ 紹介文 ピックアップ*/ .featureSectionSentencePickup { margin: 0; background: #2a2a2a; } .featureSectionSentencePickup > div { float: left; } .featureSectionSentencePickupImg { margin: 16px; } .featureSectionSentencePickupText { margin: 4px 8px; width: 642px; } .featureSectionSentencePickupText p { color: #ffffff; } /*中間ページ 詳細はこちらボタン*/ .featureSectionSentenceTextNext p { text-align: center; } .featureSectionSentenceTextNext a { display: block; width: 100%; color: #ffffff; background: #555555; } .featureSectionSentenceTextNext a:hover { color: #f78500; background: #FFE7CC; } /*中間ページ用 オススメモデル一覧*/ .featurePickupSentence { width: 756px; margin: auto; } .featurePickupSentence > div { float: left; width: 242px; margin: 4px; border: solid 1px #777777; } .featurePickup p { line-height: 1.2; color: #171717; } .featurePickup img { float: left; margin: 4px; } .featurePickupBold { float: right; padding: 2px 4px 0 4px; } .featurePickupBold p { text-align: right; font-size: 16px; font-weight: bold; } .featurePickupName p { float: right; padding: 4px 4px 0 0; text-align: right; } .featurePickupPrice p { float: right; text-align: right; font-size: 24px; font-weight: bold; color: #ba0000; } /*BTO中間ページ用 オススメモデル一覧 透明ボタン*/ .featurePickupSentence > div > div.clear { position: relative; } .featurePickupSentence > div > div.clear:hover { opacity: 0.6; } .featurePickupButton { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 900; } .featurePickupButton a, .featurePickupButton p { display: block; width: 100%; height: 100%; text-decoration: none; } .featurePickup001 > div:hover p, .featurePickup002 > div:hover p, .featurePickup003 > div:hover p { color: #f78500; } .featurePickup .featurePickup001 > div:hover .featurePickupPrice p, .featurePickup .featurePickup002 > div:hover .featurePickupPrice p, .featurePickup .featurePickup003 > div:hover .featurePickupPrice p { color: #FF0000; } /*中間ページ 商品一覧*/ .featureSectionItems > div { margin: 0 auto; width: 728px; } .featureSectionItem { position: relative; float: left; margin: 5px 10px 16px 10px; border: 1px grey dashed; } /*商品一覧の透明ボタン*/ .featureSectionItemButton { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 900; } .featureSectionItemButton a, .featureSectionItemButton p { display: block; width: 100%; height: 100%; text-decoration: none; } /*商品一覧の各商品*/ .featureSectionItemImg { width: 160px; } .featureSectionItemText { width: 160px; } .featureSectionItemName p { word-wrap: break-word; line-height: 1.4; text-align: center; text-decoration: underline; } .featureSectionItemName p:link { color: #403c39; } .featureSectionItemName a:visited { color: #9e948d; } .featureSectionItemPrice p { color: #ba0000; font-size: 16px; font-weight: bold; } .featureSectionItemPrice p { text-align: center; } .featureSectionItem:hover a, .featureSectionItem:hover p { color: #f78500; text-decoration: none; } .featureSectionItem:hover img { opacity: 0.8; } .featureSectionItem:hover .featureSectionItemPrice p { opacity: 0.5; color: #ba0000; } /*中間ページ用 ラインナップ表*/ #feature div.featureGraph { margin-top: 0; } .featureGraph table { margin: 16px auto 32px auto; border-collapse: collapse; text-align: center; line-height: 1.4; border: solid 2px #777777; } .featureGraph th { padding: 4px; width: 92px; text-align: center; color: #444444; font-weight: bold; vertical-align: middle; border: solid 1px #777777; border-right: solid 2px #777777; } .featureGraph td { padding: 4px; width: 153px; text-align: center; vertical-align: top; color: #444444; border: solid 1px #777777; } .featureGraph a { display: block; } tr.featureGraphImg { border-bottom: solid 2px #777777; } tr.featureGraphImg td { padding: 0; } /*#makebanner tbody tr:nth-child(1) td:nth-child(2){padding-left:11px;}対策*/ .featureGraph td { padding-left: 0 !important; } .featureGraphPrice td { font-size: 16px; font-weight: bold; color: #ba0000; } tr.featureGraphPrice { border-bottom: solid 2px #777777; } tr.featureGraphGray1 { background: #cccccc; } tr.featureGraphGray2 { background: #e0e0e0; } tr.featureGraphMore { border-top: solid 2px #777777; } tr.featureGraphMore a { font-size: 16px; font-weight: bold; } /*BTO中間ページ用 目次へ戻る*/ div#mokuzi { height: 0; padding: 0; margin: 0; } .featureGraphGoMokuzi { margin-bottom: 16px; padding-bottom: 32px; width: 180px; text-align: right; } .featureGraphGoMokuzi a:before { content: ""; position: relative; top: 2px; display: inline-block; width: 16px; height: 16px; padding-right: 2px; background: url(../img/arrow_up.gif) no-repeat; } .featureGraphGoMokuzi a:hover:before { background: url(../img/arrow_up_hover.gif) no-repeat; } /* DJI用 .djiFeature */ .djiFeature h1 { margin: 32px 0 8px 0; } .djiFeature h2 { margin: 16px 0 8px 0; } .djiFeature h3 { margin: 8px 0; } .djiFeature .featureTopImgText { width: 750px; height: 200px; text-shadow: -1px -1px 5px rgba(0, 0, 0, 0.3), -1px 1px 5px rgba(0, 0, 0, 0.3), 1px -1px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(0, 0, 0, 0.3); } .djiFeature .featureTopImgText p { line-height: 200px; } .djiFeature .featureSectionSentenceTextLeft, .djiFeature .featureSectionSentenceTextRight { margin: 0; padding: 0 4px; width: 370px; } .djiFeature .featureSectionSentenceText p { padding: 8px 0; line-height: 2.0; } .djiFeature .featureSectionSentenceImg img { margin: 0; } .djiFeature .featureSectionSentencePickup { background: #2e2e2e; } .djiFeature .featureSectionSentencePickupText { width: 450px; } /* DJI用 .djiFeature ここまで */ /* LG用 .lgFeature */ .lgFeature #featureTopImg img { border: solid 2px #AC1847; } .lgFeature .featureTopImgText { width: 750px; height: 200px; } .lgFeature .featureTopImgText p { line-height: 200px; } .lgFeature .featureSectionSentenceTextLeft, .lgFeature .featureSectionSentenceTextRight { /*width: 628px;*/ width: 498px; } .lgFeature .featureSectionSentenceTextNext a { background: #AC1847; } .lgFeature .btoGraph table.btoGraph1-2 { margin-bottom: 16px; } .lgFeature .featureGraph1-1 td, .lgFeature .featureGraph1-2 td { width: 207px; } .lgFeature .featureGraphGoMokuzi { width: 100px; margin: 8px 0 8px 600px; padding-bottom: 16px; } /* LG用 .lgFeature ここまで */ /* lg用 ※HDD1TBプレゼントキャンペーン .lgFeature */ .lgFeature span { font-size: 12px; color: #AC1847; text-decoration: underline; } .lgFeature #featureTopImg > img { margin-bottom: 16px; } /*.lgFeature .featureGraph1-1 tbody tr:nth-child(9) td, .lgFeature .featureGraph1-2 tbody tr:nth-child(9) td:nth-child(3n-1) { background: #FFCDDD; }*/ .lgFeature .featureGraph1-1 thead tr:nth-child(2) td, .lgFeature .featureGraph1-2 thead tr:nth-child(2) td:nth-child(3n-1) { position: relative; } .lgFeature .featureGraph1-1 thead tr:nth-child(2) td span:after, .lgFeature .featureGraph1-2 thead tr:nth-child(2) td:nth-child(3n-1) span:after { content: ""; z-index: 9000; position: absolute; top: 0; right: 0; width: 180px; height: 180px; background: url(../img/lg_180x180.png) } /* LG用 ※HDD1TBプレゼントキャンペーン .lgFeature ここまで */ /* msi用 .msiFeature */ .msiFeature span { font-weight: bold; color: red; } .msiFeature #featureTopImg img { margin: 4px auto 0 auto; } .msiFeature .featureLead p { padding: 0 8px 16px 8px; color: #ffffff; } .msiFeature .featureSection { margin: 0; padding: 0; } .msiFeature .featureSection h1 { margin: 8px; color: #ffffff; border-left: 6px #E60014 solid; } .msiFeature .featureSection h2 { margin: 8px; border-left: 6px #666666 solid; } .msiFeature .featureSectionTitle { padding-top: 16px; } .msiFeature .featurePickupTitle { position: relative; } .msiFeature .featurePickupTitle h2 { font-size: 20px; color: #ffffff; border-left: 6px #E60014 solid; } .msiFeature .featureSectionTitle:after { width: 741px; margin: 0 8px; background: -webkit-gradient(linear, left top, right top, from(#902934), color-stop(0.5, #902934), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, #902934, #902934, rgba(0, 0, 0, 0)); background: -ms-linear-gradient(left, #902934, #902934, rgba(0, 0, 0, 0)); background: linear-gradient(left, #902934, #902934, rgba(0, 0, 0, 0)); } .msiFeature .featurePickupTitle:after { position: absolute; top: 90%; content: ""; display: block; height: 10%; width: 100%; z-index: 850; } .msiFeature .featureSectionSentence .featureSectionSentenceTitle:after, .msiFeature .featureSectionTitle.featureH2:after { width: 741px; margin: 0 8px; background: -webkit-gradient(linear, left top, right top, from(#333333), color-stop(0.5, #333333), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, #333333, #333333, rgba(0, 0, 0, 0)); background: -ms-linear-gradient(left, #333333, #333333, rgba(0, 0, 0, 0)); background: linear-gradient(left, #333333, #333333, rgba(0, 0, 0, 0)); } .msiFeature .featurePickupTitle:after { width: 741px; margin: 0 8px; background: -webkit-gradient(linear, left top, right top, from(#902934), color-stop(0.5, #902934), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, #902934, #902934, rgba(0, 0, 0, 0)); background: -ms-linear-gradient(left, #902934, #902934, rgba(0, 0, 0, 0)); background: linear-gradient(left, #902934, #902934, rgba(0, 0, 0, 0)); } .msiFeature .featureBlack, .msiFeature .featureTop { position: relative; z-index: 1000; } .msiFeature .featureTop { width: 100%; height: 320px; background: url(../img/msi750x320.png), #000000 no-repeat; } .msiFeature .featureLead { position: absolute; top: 112px; left: 12px; width: 260px; } .msiFeature .featureTop { margin-bottom: 16px; } .msiFeature .featureSection { margin-top: 16px; } .msiFeature .featureSectionSentence { padding: 16px 0; } .msiFeature .featureSectionSentence p { padding: 0 8px; color: #ffffff; } .msiFeature .featureSectionTitle h2, .msiFeature .featureSectionSentence h2 { color: #ffffff; } .msiFeature .featureSectionSentence, .msiFeature .featurePickup, .msiFeature .featureBlack { background: url(../img/msi_background.jpg) no-repeat; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), color-stop(0.4, rgba(0, 0, 0, 0)), color-stop(0.6, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.7))), url(../img/msi_background.jpg); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(../img/msi_background.jpg); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(../img/msi_background.jpg); background: linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(../img/msi_background.jpg); background-repeat: repeat; } .msiFeature .featureSectionMokuzi { margin: 8px auto; width: 616px; } .msiFeature .featureSectionMokuzi001, .msiFeature .featureSectionMokuzi002 { margin: 8px 0; } .msiFeature .featureSectionMokuzi > div { text-align: center; } .msiFeature .featurePickup { margin: 0; padding: 16px 0; } .msiFeature .featurePickup001, .msiFeature .featurePickup002, .msiFeature .featurePickup003 { background: #444444; } .msiFeature .featurePickup p { color: #ffffff; } .msiFeature .featurePickup001 { background: url(/../img/GP62.png) bottom left no-repeat, #444444; } .msiFeature .featurePickup002 { background: url(/../img/GP62.png) bottom left no-repeat, #444444; } .msiFeature .featurePickup003 { background: url(/../img/GL62.png) bottom left no-repeat, #444444; } .msiFeature .featurePickupName, .msiFeature .featurePickupBold, .msiFeature .featurePickupPrice { width: 100%; } .msiFeature .featurePickupName span { font-size: 18px; } .msiFeature .featurePickupSentence > div { border-color: #dddddd; } .msiFeature .featurePickupBold p { font-size: 14px; } .msiFeature .featurePickupPrice p { color: #FF0000; } .msiFeature .featureGraph table { border-color: #dddddd; } .msiFeature .featureGraph th, .msiFeature .featureGraph td { position: relative; color: #FFFFFF; border-color: #dddddd; vertical-align: middle; } .msiFeature .featureGraphImg { border-color: #dddddd; } .msiFeature .featureGraphPrice td { color: #ff0000; } .msiFeature tr.featureGraphGray1 { background: #333333; } .msiFeature tr.featureGraphGray2 { background: #444444; border-color: #dddddd; } .msiFeature tr.featureGraphMore a { color: #ffffff; } .msiFeature td.msi_new a:after { content: ""; position: absolute; top: 0; left: 0; width: 180px; height: 180px; background: url(../img/msi_new.png) no-repeat; } .msiFeature td.msi_limited a:after { content: ""; position: absolute; top: 0; left: 0; width: 180px; height: 180px; background: url(../img/msi_limited.png) no-repeat; } .msiFeature td.msi_new.msi_limited a:after { background: url(../img/msi_new.png), url(../img/msi_limited.png) no-repeat; } .msiFeature td.msi_new a:hover:after, .msiFeature td.msi_limited a:hover:after { opacity: 0.7; } .msiFeature .msi_limited:after {} .msiFeature .featureGraphGoMokuzi a:hover, .msiFeature .featureGraphMore a:hover { color: #f78500; } .msiFeature .featureGraphGoMokuzi { margin: 8px 0 8px 550px; padding-bottom: 16px; } .msiFeature .featureGraphGoMokuzi a { color: #ffffff; } .msiFeature .featureGraphGoMokuzi a:before { background: url(../img/arrow_up_toumei.png) no-repeat; } .msiFeature .featureGraphGoMokuzi a:hover:before { background: url(../img/arrow_up_hover_toumei.png) no-repeat; } /* msi用 .msiFeature 終わり*/ /* RYZEN用 .ryzenFeature */ .ryzenFeature span { font-weight: bold; color: orange; } .ryzenFeature #featureTopImg img { margin: 4px auto 0 auto; } .ryzenFeature .featureLead p { padding: 0 8px 16px 8px; color: #ffffff; } .ryzenFeature .featureSection h1 { margin: 8px; padding-bottom: 16px; color: #ffffff; border-left: 6px orange solid; } .ryzenFeature .featureSection h2 { margin: 8px; border-left: 6px #ffffff solid; } .ryzenFeature .featurePickupTitle h2 { font-size: 20px; color: #ffffff; border-left: 6px orange solid; } .ryzenFeature .featureSection h3 { margin: 24px 8px 16px 8px; padding: 4px 8px; color: #fff; border-left: 6px #ffffff solid; } .ryzenFeature .featureSectionBanner { width: 100%; height: 100px; } .ryzenFeature .featureSectionBanner001, .ryzenFeature .featureSectionBanner003 { display: table; float: left; height: 100px; background: #F78500; } .ryzenFeature .featureSectionBanner001 { background: url(../img/ryzen7box72x60.png) no-repeat, #F78500; background-position: center 8px; width: 250px; } .ryzenFeature .featureSectionBanner002 { background: url(../img/ryzen5box72x60.png) no-repeat, #F78500; background-position: center 8px; width: 250px; } .ryzenFeature .featureSectionBanner003 { background: url(../img/ryzen7pc72x60.png) no-repeat, #F78500; background-position: center 8px; width: 250px; } .ryzenFeature .featureSectionBanner a { display: table-cell; text-align: center; vertical-align: bottom; padding-bottom: 8px; width: 250px; color: #fff; font-size: 18px; font-weight: bold; } .ryzenFeature .featureSectionBanner001:hover a, .ryzenFeature .featureSectionBanner002:hover a, .ryzenFeature .featureSectionBanner003:hover a, .ryzenFeature .featureSectionBanner001:hover, .ryzenFeature .featureSectionBanner002:hover, .ryzenFeature .featureSectionBanner003:hover { color: #fff; opacity: 0.7; } .ryzenFeature .featureSectionTitle { padding-top: 16px; } .ryzenFeature .featurePickupTitle, .ryzenFeature .featureGraphTitle { position: relative; } .ryzenFeature .featurePickupTitle:after, .ryzenFeature .featureGraphTitle:after { position: absolute; top: 90%; content: ""; display: block; height: 10%; width: 100%; z-index: 850; } .ryzenFeature .featureSectionTitle:after { width: 741px; margin: 0 8px; background: -webkit-gradient(linear, left top, right top, from(#B2561B), color-stop(0.5, #B2561B), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, #B2561B, #B2561B, rgba(0, 0, 0, 0)); background: -ms-linear-gradient(left, #B2561B, #B2561B, rgba(0, 0, 0, 0)); background: linear-gradient(left, #B2561B, #B2561B, rgba(0, 0, 0, 0)); } .ryzenFeature .featureSectionSentence .featureSectionSentenceTitle:after, .ryzenFeature .featurePickupTitle:after, .ryzenFeature .featureGraphTitle:after { width: 741px; margin: 0 8px; background: -webkit-gradient(linear, left top, right top, from(#ccc), color-stop(0.5, #ccc), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, #ccc, #ccc, rgba(0, 0, 0, 0)); background: -ms-linear-gradient(left, #ccc, #ccc, rgba(0, 0, 0, 0)); background: linear-gradient(left, #ccc, #ccc, rgba(0, 0, 0, 0)); } .ryzenFeature .featurePickupTitle:after { background: -webkit-gradient(linear, left top, right top, from(#B2561B), color-stop(0.5, #B2561B), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, #B2561B, #B2561B, rgba(0, 0, 0, 0)); background: -ms-linear-gradient(left, #B2561B, #B2561B, rgba(0, 0, 0, 0)); background: linear-gradient(left, #B2561B, #B2561B, rgba(0, 0, 0, 0)); } .ryzenFeature .featureBlack, .ryzenFeature .featureTop { position: relative; z-index: 1000; } .ryzenFeature .featureTop { width: 100%; height: 320px; margin-bottom: 16px; background: #1a1711; } .ryzenFeature .featureSection { margin-top: 16px; } .ryzenFeature .featureSection.featureBlack { margin-top: 0; } .ryzenFeature .featureSectionSentence { padding: 16px 0; } .ryzenFeature .featureSectionSentence p { padding: 0 8px; color: #ffffff; } .ryzenFeature .featureSectionSentence h2 { color: #ffffff; } .ryzenFeature .featureSectionSentence, .ryzenFeature .featurePickup, .ryzenFeature .featureBlack { background: #808080; background: url(../img/ryzen_background2.jpg); background: -webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 0.7)), color-stop(0.4, rgba(0, 0, 0, 0)), color-stop(0.6, rgba(0, 0, 0, 0)), to(rgba(80, 80, 80, 0.7))), url(../img/ryzen_background2.jpg); background: -moz-linear-gradient(top, rgba(80, 80, 80, 0.7), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(80, 80, 80, 0.7)), url(../img/ryzen_background2.jpg); background: -ms-linear-gradient(top, rgba(80, 80, 80, 0.7), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(80, 80, 80, 0.7)), url(../img/ryzen_background2.jpg); background: linear-gradient(top, rgba(80, 80, 80, 0.7), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(80, 80, 80, 0.7)), url(../img/ryzen_background2.jpg); background-position: 15px 15px; background-repeat: repeat; } .ryzenFeature .featurePickup { margin: 0; padding: 16px 0; } .ryzenFeature .featurePickup001, .ryzenFeature .featurePickup002, .ryzenFeature .featurePickup003 { background: #444444; background: url(../img/ryzen_background3.jpg); background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 43, 43, 0.3)), color-stop(0.4, rgba(0, 0, 0, 0)), color-stop(0.6, rgba(0, 0, 0, 0)), to(rgba(43, 43, 43, 0.3))), url(../img/ryzen_background3.jpg); background: -moz-linear-gradient(top, rgba(80, 80, 80, 0.3), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(80, 80, 80, 0.3)), url(../img/ryzen_background3.jpg); background: -ms-linear-gradient(top, rgba(80, 80, 80, 0.3), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(80, 80, 80, 0.3)), url(../img/ryzen_background3.jpg); background: linear-gradient(top, rgba(80, 80, 80, 0.3), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(80, 80, 80, 0.3)), url(../img/ryzen_background3.jpg); background-position: 15px 15px; background-repeat: repeat; } .ryzenFeature .featurePickup p { color: #ffffff; } .ryzenFeature .featurePickupSentence > div { border-color: #dddddd; } .ryzenFeature .featurePickupPrice p { color: orange; } .ryzenFeature .featurePickup001 > div:hover p, .ryzenFeature .featurePickup002 > div:hover p, .ryzenFeature .featurePickup003 > div:hover p, .ryzenFeature .featurePickup001 > div:hover .featurePickupPrice p, .ryzenFeature .featurePickup002 > div:hover .featurePickupPrice p, .ryzenFeature .featurePickup003 > div:hover .featurePickupPrice p { color: orange; } .ryzenFeature .featureGraph table { margin: auto 8px; border-color: #888; } .ryzenFeature table.featureGraph1-3 { margin: auto; } .ryzenFeature .featureGraph th { width: 80px; } .ryzenFeature .featureGraph th, .ryzenFeature .featureGraph td, .ryzenFeature .featureGraph tr.featureGraphImg, .ryzenFeature .featureGraph tr.featureGraphPrice, .ryzenFeature .featureGraph tr.featureGraphMore { vertical-align: middle; color: #FFFFFF; border-color: #888; } .ryzenFeature .featureGraph tr:nth-child(2), .ryzenFeature .featureGraph tr:nth-child(4), .ryzenFeature .featureGraph tr:nth-child(6), .ryzenFeature .featureGraph tr:nth-child(8), .ryzenFeature .featureGraph tr:nth-child(10) { background: rgba(255, 255, 255, 0.1) } .ryzenFeature .featureGraph thead tr, .ryzenFeature .featureGraph thead th, .ryzenFeature .featureGraph thead td, .ryzenFeature .featureGraph tbody tr, .ryzenFeature .featureGraph tbody th, .ryzenFeature .featureGraph tbody td { border-bottom: none; border-top: none; } .ryzenFeature .featureGraph1-1 td { width: 211px; } .ryzenFeature .featureGraph1-2 td { width: 157px; } .ryzenFeature .featureGraph1-3 td { width: 640px; } .ryzenFeature .featureGraphPrice td { color: orange; } .ryzenFeature .featureGraph1-3 tr.featureGraphPrice { border-bottom: solid 2px #888; } .ryzenFeature tr.featureGraphGray1 { background: #2a2a2a; } .ryzenFeature tr.featureGraphMore a { color: #ffffff; } .ryzenFeature tr.featureGraphMore span { color: #888; font-size: 16px; text-decoration: line-through; } .ryzenFeature .featureGraphGoMokuzi a:hover, .ryzenFeature .featureGraphMore a:hover { color: orange; } .ryzenFeature .featureGraphGoMokuzi { margin: 8px 0 8px 550px; padding: 0 8px 16px 0; } .ryzenFeature .featureGraphGoMokuzi a { color: #ffffff; } .ryzenFeature .featureGraphGoMokuzi a:before { background: url(../img/arrow_up_toumei.png) no-repeat; } .ryzenFeature .featureGraphGoMokuzi a:hover:before { background: url(../img/arrow_up_hover_toumei.png) no-repeat; } /* RYZEN用 .ryzenFeature 終わり*/ /* IntelCPU用 .intelcpuFeature */ div#mainFeature.intelcpuFeature { background: #F5F5F5; } .intelcpuFeature span { font-size: 16px; font-weight: bold; color: #333; } .intelcpuFeature .featureTop { width: 100%; height: auto; margin-bottom: 16px; } .intelcpuFeature #featureTopImg img { margin: 4px auto 0 auto; } .intelcpuFeature .featureLead p { padding: 0 8px 16px 8px; color: #333; } .intelcpuFeature .featureLeadImgCpu { margin: auto; width: 740px; } .intelcpuFeature .featureLeadImgCpu:after { margin-bottom: 8px; } .intelcpuFeature .featureLeadImgCpu > div { float: left; margin: 16px 0 0 0; padding: 0; } .intelcpuFeature .featureLeadImgCpu a, .intelcpuFeature .featureLeadImgCpu p { float: none; } .intelcpuFeature .featureLeadImgCpu > div:hover p { color: #F78500; } .intelcpuFeature h1 { position: relative; padding: 8px 8px; margin: 8px; text-align: left; font-size: 20px; font-weight: bold; color: #333; z-index: 900; background: #D9E4ED; border-left: solid 4px rgba(0, 113, 197, 1.00); } .intelcpuFeature h2 { margin: 8px; color: #333; border-left: 4px rgba(0, 113, 197, 1.00) solid; } .intelcpuFeature .featureLeadImgTitle h2 { font-size: 20px; margin: 24px 8px 0 8px; } .intelcpuFeature .featurePickupTitle h2 { font-size: 20px; } .intelcpuFeature .featureLeadImgTitle h3 { position: relative; margin: 8px 0; padding: 8px; text-align: left; font-size: 16px; color: #333333; z-index: 950; border-left: 6px #333333 solid; } .intelcpuFeature .featureSection h3, .intelcpuFeature .featureLeadImgTitle h3 { margin: 24px 8px 0 8px; padding: 4px 8px; color: #333; border-left: 4px rgba(0, 113, 197, 1.00) solid; } .intelcpuFeature .featureSectionTitle { padding-top: 16px; } .intelcpuFeature .featureLeadImgTitle.featureH2, .intelcpuFeature .featurePickupTitle, .intelcpuFeature .featureGraphTitle { position: relative; } .intelcpuFeature .featureLeadImgTitle.featureH2:after, .intelcpuFeature .featurePickupTitle:after, .intelcpuFeature .featureGraphTitle.featureH2:after { position: absolute; top: 90%; content: ""; display: block; height: 10%; width: 100%; z-index: 850; } .intelcpuFeature .featureSectionTitle:after { background: none; } .intelcpuFeature .featureSectionTitle.featureH2:after, .intelcpuFeature .featureSectionSentence .featureSectionSentenceTitle:after, .intelcpuFeature .featurePickupTitle:after, .intelcpuFeature .featureGraphTitle.featureH2:after, .intelcpuFeature .featureLeadImgTitle:after { width: 741px; margin: 0 8px; background: -webkit-gradient(linear, left top, right top, from(#D9E4ED), color-stop(0.5, #D9E4ED), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, #D9E4ED, #D9E4ED, rgba(0, 0, 0, 0)); background: -ms-linear-gradient(left, #D9E4ED, #D9E4ED, rgba(0, 0, 0, 0)); background: linear-gradient(left, #D9E4ED, #D9E4ED, rgba(0, 0, 0, 0)); } .intelcpuFeature .featureTop { position: relative; z-index: 1000; } .intelcpuFeature .featureSection { margin-top: 16px; } .intelcpuFeature .featureSectionSentence { padding: 16px 0; } .intelcpuFeature .featureSectionSentence p { padding: 0 8px; color: #333; } .intelcpuFeature .featurePickup { margin: 0; padding: 16px 0; } .intelcpuFeature .featurePickup001 { background: url(../img/i7_background.jpg) no-repeat; } .intelcpuFeature .featurePickup002 { background: url(../img/i5_background.jpg) no-repeat; } .intelcpuFeature .featurePickup003 { background: url(../img/i3_background.jpg) no-repeat; } .intelcpuFeature .featurePickup p { color: #333; } .intelcpuFeature .featurePickupSentence > div { border-color: rgba(0, 113, 197, 1.00); } .intelcpuFeature .featurePickupImg img { margin-left: 10px; opacity: 0.2; } .intelcpuFeature .featurePickupName2 p { float: right; padding: 0 4px 0 0; width: 230px; text-align: right; color: #001B73; font-size: 20px; font-weight: bold; } .intelcpuFeature .featurePickupBold b { font-size: 14px; } .intelcpuFeature .featurePickup001 > div:hover p, .intelcpuFeature .featurePickup002 > div:hover p, .intelcpuFeature .featurePickup003 > div:hover p, .intelcpuFeature .featurePickup001 > div:hover span, .intelcpuFeature .featurePickup002 > div:hover span, .intelcpuFeature .featurePickup003 > div:hover span { color: #623400; } .intelcpuFeature .featureGraphTitle h2 { margin: 24px 8px 16px 8px; font-size: 18px; } .intelcpuFeature .featureGraph table { margin: 8px 8px 0 8px; border-color: #f5f5f5; } .intelcpuFeature table.featureGraph1-1 td { vertical-align: middle; } .intelcpuFeature .featureGraph thead th, .intelcpuFeature .featureGraph thead td { color: #fff; border-color: #f5f5f5; background: rgba(0, 113, 197, 1.00); } .intelcpuFeature .featureGraph th { width: 80px; border-width: 1px; } .intelcpuFeature .featureGraph tbody th, .intelcpuFeature .featureGraph tbody td, .intelcpuFeature .featureGraph tr.featureGraphImg, .intelcpuFeature .featureGraph tr.featureGraphPrice, .intelcpuFeature .featureGraph tr.featureGraphMore { vertical-align: middle; color: #333; border-color: #f5f5f5; border-top: none; border-bottom: none; } .intelcpuFeature .featureGraph tr:nth-child(2), .intelcpuFeature .featureGraph tr:nth-child(4), .intelcpuFeature .featureGraph tr:nth-child(6), .intelcpuFeature .featureGraph tr:nth-child(8), .intelcpuFeature tr.featureGraphMore { background: #D9E4ED; } .intelcpuFeature .featureGraph2-1 td, .intelcpuFeature .featureGraph2-4 td, .intelcpuFeature .featureGraph2-6 td { width: 319px; } .intelcpuFeature .featureGraph2-2 td { width: 218px; } .intelcpuFeature .featureGraph2-3 td { width: 160px; } .intelcpuFeature .featureGraph2-5 td { width: 640px; } .intelcpuFeature tr.featureGraphPrice td { color: #ba0000; } .intelcpuFeature tr.featureGraphMore a { color: #333; } .intelcpuFeature .featureGraphGoMokuzi a:hover, .intelcpuFeature .featureGraphMore a:hover { color: orange; } .intelcpuFeature .featureGraphGoMokuzi { margin: 8px 0 8px 550px; padding: 0 8px 16px 0; } .intelcpuFeature .featureGraphGoMokuzi a { color: #333; } .intelcpuFeature .featureGraphGoMokuzi a:before { background: url(../img/arrow_up_333.png) no-repeat; } .intelcpuFeature .featureGraphGoMokuzi a:hover:before { background: url(../img/arrow_up_hover_toumei.png) no-repeat; } /* IntelCPU用 .intelcpuFeature 終わり*/ /* GoW4推奨PC用 .gow4 */ #mainFeature.gow4 { float: right; width: 700px; background: #ffffff; } .gow4 h1 { font-size: 30px; font-weight: bold; line-height: 1.5; text-align: center; } .gow4 h2 { margin-top: 48px; font-size: 28px; font-weight: bold; line-height: 1.2; text-align: center; } .gow4 .feature_lead p { margin-top: 32px; } /* GoW4 紹介文 */ .gow4 .feature_pickup { position: relative; margin: 32px 0; } .gow4 .feature_pickup p { position: absolute; bottom: 0px; width: 400px; height: 150px; color: #FFF; font-size: 16px; line-height: 1.5; } .gow4 .feature_pickup span { font-weight: bold; font-size: 30px; } .gow4 .feature_pickup01 p, .gow4 .feature_pickup03 p { left: 32px; } .gow4 .feature_pickup02 p, .gow4 .feature_pickup04 p { right: 32px; text-align: right; } /* Gow4 表 */ .gow4 .feature_graph__left, .gow4 .feature_graph__right { float: left; width: 350px; } .gow4 table { margin: 12px; width: 320px; } .gow4 tr { display: block; position: relative; } .gow4 tr:after { content: ""; position: absolute; bottom: 0; left: -10px; width: 340px; border-bottom: 1px solid #333; } .gow4 td { margin: 0 !important; padding: 8px 0; height: 48px; font-size: 14px; line-height: 1.2; vertical-align: middle; } .gow4 td:nth-child(1) { width: 110px; } .gow4 td:nth-child(2) { width: 210px; text-align: right; } .gow4 tr:first-child td, .gow4 tr:last-child td { width: 320px; } .gow4 tr:first-child td a, .gow4 tr:nth-child(2) td a, .gow4 tr:nth-child(28) td a, .gow4 tr:last-child td a { font-weight: bold; font-size: 18px; } .gow4 tr:last-child td a { display: block; margin: -16px; padding: 16px; } .gow4 .gow4_center { text-align: center; } .gow4 .gow4_price a { display: block; margin: -16px; padding: 16px; color: #ba0000; font-weight: bold; text-decoration: underline; } .gow4 td:hover .gow4_center, .gow4 tr:hover td.gow4_price a { opacity: 0.7; } .gow4 td.gow4_line3 { height: 64px; } .gow4 td.gow4_line5 { height: 96px; } .gow4 td.gow4_line11 { height: 192px; } /* copyright */ .gow4 .gow4_copyright p { color: #333; text-align: right; } /* GoW4推奨PC用 .gow4 終わり */ /* World of Tanks 用 独自ページ .wot */ #mainFeature.wot { float: right; width: 740px; background: #000; } .wot h1 { margin: 32px 32px; color: #fff; font-size: 30px; font-weight: bold; line-height: 1.5; text-align: center; text-shadow: 1px 1px 8px rgba(255, 255, 255, 0.1), -1px 1px 8px rgba(255, 255, 255, 0.1), 1px -1px 8px rgba(255, 255, 255, 0.1), -1px -1px 8px rgba(255, 255, 255, 0.1); } .wot h2, .wot h3 { margin: 32px 32px 8px 32px; color: #ccc; font-weight: bold; font-size: 24px; line-height: 1.5; text-align: center; text-shadow: 1px 1px 8px rgba(255, 255, 255, 0.1), -1px 1px 8px rgba(255, 255, 255, 0.1), 1px -1px 8px rgba(255, 255, 255, 0.1), -1px -1px 8px rgba(255, 255, 255, 0.1); } .wot p, .wot th, .wot td { color: #ccc; font-weight: normal; font-size: 16px; border: none; text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.2), -1px 1px 4px rgba(255, 255, 255, 0.2), 1px -1px 4px rgba(255, 255, 255, 0.2), -1px -1px 4px rgba(255, 255, 255, 0.2); } .wot a { color: #F99; font-weight: bold; font-size: 16px; text-decoration: none; text-shadow: 1px 1px 4px rgba(255, 0, 0, 0.2), -1px 1px 4px rgba(255, 0, 0, 0.2), 1px -1px 4px rgba(255, 0, 0, 0.2), -1px -1px 4px rgba(255, 0, 0, 0.2); } .wot a:hover { text-decoration: underline; } .wot span { color: #FFFF00; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 4px rgba(255, 255, 0, 0.2), -1px 1px 4px rgba(255, 255, 0, 0.2), 1px -1px 4px rgba(255, 255, 0, 0.2), -1px -1px 4px rgba(255, 255, 0, 0.2); } .wot #feature_top__img, .wot .feature_pickup { text-align: center } .wot .feature_lead p { color: #ccc; margin: 32px 32px 48px 32px; } /* wot 紹介文 */ .wot .feature_pickup { position: relative; margin: 16px 0; } .wot .feature_pickup h3 { margin: 48px 0 0 0; text-shadow: 1px 1px 4px #000, -1px 1px 4px #000, 1px -1px 4px #000, -1px -1px 4px #000; } .wot .feature_pickup p { margin: 0; text-shadow: 1px 1px 4px #000, -1px 1px 4px #000, 1px -1px 4px #000, -1px -1px 4px #000; } .wot .feature_pickup > div { position: absolute; bottom: 40px; width: 400px; height: 150px; } .wot .feature_pickup01 { margin: 32px 0; padding: 0; text-align: center; } .wot .feature_pickup01 p, .wot .feature_pickup01 h3 { padding: 0 32px; } .wot .feature_pickup01 > div { position: relative; top: auto; bottom: auto; width: 700px; } .wot .feature_pickup02 > div { right: 32px; } .wot .feature_pickup03 > div { left: 32px; } .wot .feature_pickup04 > div { right: 32px; top: 0; } .wot .feature_pickup01 p, .wot .feature_pickup01 h3, .wot .feature_pickup03 p, .wot .feature_pickup03 h3 { text-align: left; } .wot .feature_pickup02 p, .wot .feature_pickup02 h3, .wot .feature_pickup04 p, .wot .feature_pickup04 h3 { right: 32px; text-align: right; } /* 表 */ .wot .feature_graph { padding: 32px; } .wot table { margin: auto; width: 676px; } .wot tr { border-bottom: solid 1px #ccc; } .wot tr:first-child { border-top: solid 1px #ccc; } .wot tr:hover { background: #222; } .wot th { padding: 8px 8px; text-align: left; } .wot td { padding: 8px 8px; text-align: center; } /* ページ内リンク */ .wot .featureGraphGoMokuzi { margin-top: 16px; width: auto; } .wot .featureGraphGoMokuzi a { text-align: right; } .wot .featureGraphGoMokuzi a:hover { opacity: 0.7; } .wot .featureGraphGoMokuzi a:before { display: none; } .wot .featureGraphGoMokuzi a:hover:before { display: none; } /* 商品ページリンク */ .wot .feature_buy a { display: block; margin: 16px 32px; padding: 16px; text-align: center; background: #333; } .wot .feature_buy a:hover { opacity: 0.7; } /* 購入ページへのナビ（右） */ .wot #wot_right_nav { position: fixed; bottom: 80px; right: 0; padding: 16px; width: 250px; background: #000; border: solid 1px #b00; border-right: none; border-radius: 3px 0 0 3px; box-shadow: 8px 8px 0 0 rgba(200, 0, 0, 0.3); z-index: 12000; } .wot #wot_right_nav:hover p, .wot #wot_right_nav:hover a, .wot #wot_right_nav:hover img { opacity: 0.7; } .wot #wot_right_nav a { display: block; margin: -16px; padding: 16px; text-align: center; } .wot #wot_right_nav:hover a, .wot #wot_right_nav:hover span { text-decoration: underline; } .wot #wot_right_nav p { text-align: center; } /* World of Tanks 用 独自ページ .wot ここまで */ /* ffxiv推奨PC用 .ffxiv */ #mainFeature.ffxiv { float: right; width: 700px; background: #ffffff; } .ffxiv h1 { font-size: 30px; font-weight: bold; line-height: 1.5; text-align: center; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } .ffxiv h2 { margin-top: 48px; font-size: 28px; font-weight: bold; line-height: 1.2; text-align: center; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } .ffxiv p, .ffxiv td { text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .ffxiv a { display: block; color: #000; text-decoration: none; } .ffxiv a:hover { text-decoration: underline; } .ffxiv .feature_lead p { margin-top: 32px; } /* ffxiv 紹介文 */ .ffxiv .feature_pickup { position: relative; margin: 32px 0; } .ffxiv .feature_pickup p { position: absolute; bottom: 16px; padding: 8px; width: 500px; height: auto; color: #FFF; font-size: 16px; line-height: 1.5; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5), -1px 1px 5px rgba(0, 0, 0, 0.5), 1px -1px 5px rgba(0, 0, 0, 0.5), -1px -1px 5px rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5); } .ffxiv .feature_pickup span { font-weight: bold; font-size: 30px; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5), -1px 1px 5px rgba(0, 0, 0, 0.5), 1px -1px 5px rgba(0, 0, 0, 0.5), -1px -1px 5px rgba(0, 0, 0, 0.5); } .ffxiv .feature_pickup01 p, .ffxiv .feature_pickup03 p { left: 16px; } .ffxiv .feature_pickup02 p, .ffxiv .feature_pickup04 p { right: 16px; text-align: right; } /* ffxiv 表 */ .ffxiv .feature_graph { padding: 16px; } .ffxiv table { margin: 12px 0; width: 100%; } .ffxiv tr { border-bottom: 1px solid #333; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .ffxiv td { margin: 0 !important; padding: 16px 1%; height: 48px; font-size: 14px; line-height: 1.2; vertical-align: middle; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .ffxiv td img { width: 100%; } .ffxiv td .ffxiv__h2 { position: relative; } .ffxiv td h2 { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 16px 0; width: auto; } .ffxiv td:first-child { width: 19%; } .ffxiv td:nth-child(n+2) { width: 25%; text-align: right; } .ffxiv tr:first-child td { width: 100%; text-align: center; } .ffxiv tr:first-child td a, .ffxiv tr:nth-child(3) td a, .ffxiv tr:nth-child(28) td a, .ffxiv tr:last-child td a { margin: -16px -1%; padding: 16px 1%; font-weight: bold; font-size: 18px; } .ffxiv tr:last-child td a { margin: -16px -1%; padding: 16px 1%; } .ffxiv .ffxiv_price a { display: block; margin: -16px -1%; padding: 16px 1%; color: #ba0000; font-size: 16px; font-weight: bold; } .ffxiv tr:nth-child(n+2):hover { background: #ccc; } .ffxiv tr:nth-child(3):hover a, .ffxiv tr:last-child:hover a { text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } .ffxiv td:nth-child(n+2):hover { background: #888; } /* FFXIV推奨PC用 .ffxiv 終わり */ /* プレミアムウィーク .premium_201706_senden */ #mainFeature.premium_201706_senden { background: #fff; } .premium_201706_senden #feature { padding-bottom: 300px; background: url(../img/premium_201706_bg.jpg); } .premium_201706_senden p, .premium_201706_senden a, .premium_201706_senden td { margin: 16px auto; padding: 16px 0; color: #fff; font-size: 24px; line-height: 1.5; text-align: center; text-decoration: none; text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); } .premium_201706_senden a { color: #aaa; } .premium_201706_senden a:hover { text-decoration: underline; } .premium_201706_senden h1, .premium_201706_senden h2, .premium_201706_senden span { margin: 16px auto; padding: 16px 0 0 0; color: #fff; font-size: 28px; line-height: 1.5; text-align: center; text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); } .premium_201706_senden span { color: #F00; } .premium_201706_senden h1 { padding: 4px; width: 450px; border-bottom: solid 4px #fff; border-top: solid 4px #fff; } .premium_201706_senden h2 { padding: 0; width: 450px; border-bottom: solid 4px #c00; } .premium_201706_senden table { margin: auto; } .premium_201706_senden table:nth-child(4) { width: 500px; } .premium_201706_senden td { width: 50%; vertical-align: top; font-size: 20px; font-weight: bold; margin: 0 16px; padding: 0 16px; } .premium_201706_senden td:nth-child(n+2) { padding: 0 16px 16px 16px; } .premium_201706_senden > div { margin: 16px; } .premium_201706_senden .feature_title p { padding: 0; } .premium_201706_senden .feature_lead_002 { padding: 16px 0; } /* 情熱！プレミアムウィーク カウントダウン */ /* ティッカー .timer_img_001 */ /* カテゴリ及び商品詳細ページ .timer_img_002 */ .premiumweek_category_banner { width: 740px; height: auto; } .timer_img_001, .timer_img_002 { float: left; position: relative; display: block; } .timer_img_001 { width: 1200px; } .timer_img_002 { width: 720px; height: 100px; } /* マウスオーバーで半透明 2018.11.19 コメントアウト .timer_img_001:hover, .timer_img_002:hover { opacity: 0.9; } .timer_img_001 img:hover, .timer_img_002 img:hover { opacity: 0.9; } */ .timer_img_001 a.TimeLeft, .timer_img_002 a.TimeLeft, .timer_img_001 a.TimeLeft001, .timer_img_002 a.TimeLeft001 { position: absolute; bottom: 13px; right: 0; margin: auto; color: yellow; font-weight: bold; font-size: 12px; text-align: center; text-decoration: none; } .timer_img_001 a.TimeLeft, .timer_img_001 a.TimeLeft001 { bottom: 10px; right: 150px; font-size: 32px; } .timer_img_001 .TimeLeft span, .timer_img_002 .TimeLeft span, .timer_img_001 .TimeLeft001 span, .timer_img_002 .TimeLeft001 span { font-size: 24px; } .M_infoTable { position: relative; } .M_option-group { padding-bottom: 2px; } .M_infoTable .M_quantity-wrap { padding-bottom: 30px; position: relative; } .M_option-group select { width: 100%; padding: 3px; height: auto; } @media screen and (max-width: 769px) { .M_infoTable .M_addcode { font-size: 15px; top: 0; position: relative; } .M_option-group { padding-bottom: 8px; } .M_option-group select { width: 100%; padding: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #999; background: #eee; background: url(/design/img/icon_arrow.png) right 50% no-repeat #FFF; background-size: 14px; font-size: 16px; } } /*-----------------------------------------------------*/ /*各メーカー中間ページ用 終わり*/ /*-----------------------------------------------------*/ /* アプライド OGP用画像 */ #custom_logo { display: none; } /* アプライド OGP用画像 ここまで */ /* アプライドメンバーズカードの説明用ページ .memberscard */ #mainFeature.memberscard { text-align: left; background: #fff; } .memberscard p { font-size: 12px; margin: 0 32px 32px 32px; padding: 0 0 32px 0; border-bottom: solid 1px #ccc; } .memberscard h1 { font-size: 20px; margin: 32px; padding: 16px 16px 8px 16px; border-bottom: solid 5px #ccc; } .memberscard h2 { font-size: 18px; margin: 0 32px 16px 32px; padding: 12px 16px 8px 16px; border-bottom: solid 4px #ccc; } .memberscard h3 { font-size: 16px; margin: 0 32px 16px 32px; padding: 8px 16px; border-bottom: solid 3px #ccc; } .memberscard span { font-weight: bold; } .memberscard img { margin: 0 32px 16px 32px; border: solid 1px #ccc; } /* アプライドメンバーズカードの説明用ページ .memberscard ここまで */ /* アプライドネット会員登録の説明用ページ .membernet */ #mainFeature.membernet { text-align: left; background: #fff; } .membernet p { font-size: 16px; margin: 8px 40px; padding: 8px; } .membernet a { margin: 0; color: #fff; font-size: 20px; font-weight: bold; display: inline-block; padding: 0.5em 64px; text-decoration: none; background: #496FFF; /*ボタン色*/ border-bottom: solid 4px #243A8C; border-radius: 2px; } .membernet a:hover { margin-top: 4px; color: #88A1FF; border-bottom: none; } .membernet h1 { color: #000; font-size: 20px; font-weight: bold; margin: 16px 32px; padding: 12px 16px 4px 16px; border-bottom: solid 5px rgba(0, 0, 0, 0.4); } .membernet h2 { color: #000; font-size: 18px; font-weight: bold; margin: 16px 32px; padding: 12px 16px 4px 16px; border-bottom: solid 4px rgba(0, 0, 0, 0.4); } .membernet h3 { font-size: 16px; margin: 16px 32px; padding: 8px 16px 4px 16px; border-bottom: solid 3px rgba(0, 0, 0, 0.2); } .membernet span { font-weight: bold; } .membernet img { margin: 0 32px 16px 32px; border: solid 1px rgba(0, 0, 0, 0.2); } .membernet .linkBtn { text-align: center; } .membernet .feature_top, .membernet .feature_001, .membernet .feature_002 { margin: 8px 0 32px 0; padding: 8px 0; border-radius: 5px; } .membernet .feature_pickup01, .membernet .feature_pickup02 { margin: 0 0 64px 0; } /* アプライドネット会員登録の説明用ページ .membernet ここまで */ /*-----------------------------------------------------*/ /*コラム一覧独自ページ用*/ /*-----------------------------------------------------*/ #mainFeature .feature_column { margin-left: 16px; background-color: #fff; } .column_ume h1 { display: block; text-align: left; margin: 32px auto 16px 0; padding: 8px; width: 300px; color: #fff; font-size: 24px; border-bottom: solid 4px #ccc; text-shadow: 1px 1px 0 rgba(0, 0, 0, 1), -1px 1px 0 rgba(0, 0, 0, 1), 1px -1px 0 rgba(0, 0, 0, 1), -1px -1px 0 rgba(0, 0, 0, 1), 1px 1px 5px rgba(0, 0, 0, 0.3), -1px 1px 5px rgba(0, 0, 0, 0.3), 1px -1px 5px rgba(0, 0, 0, 0.3), -1px -1px 5px rgba(0, 0, 0, 0.3); } .column_ume h2 { text-align: left; font-size: 18px; } .column_ume span { display: block; padding-left: 32px; width: 650px; font-size: 18px; font-weight: bold; line-height: 1.5; text-align: left; background: #ddd; } .column_ume .feature_column_title { padding: 0 16px 0 0; } .column_ume ul.feature_column_ul li { position: relative; overflow: hidden; margin: 5px 0 0 0; width: 650px; height: 100px; text-align: left; } .column_ume ul.feature_column_ul li:after { content: ""; position: absolute; bottom: 0; left: 0; width: 650px; border-top: solid 5px #fff; border-bottom: solid 1px #ccc; } .column_ume ul.feature_column_ul li.feature_column_month { margin-top: 22px; height: 50px; } .column_ume ul.feature_column_ul a { position: absolute; top: 36px; left: 25px; padding: 0 8px; max-width: 600px; color: #000; font-size: 14px; line-height: 22px; text-align: left; background: rgba(255, 255, 255, 0.7) } .column_ume ul.feature_column_ul img { position: absolute; top: -50px; left: 0; opacity: 0.5; width: auto; height: 200px; } /*-----------------------------------------------------*/ /*コラム一覧独自ページ用 終わり*/ /*-----------------------------------------------------*/ /*-----------------------------------------------------*/ /* 左カラム 修正用 */ /*-----------------------------------------------------*/ /* カテゴリメニューの間隔調整 */ #l_category .catName { padding-top: 16px; } #l_category .catName a { text-decoration: none; pointer-events: none; } #l_category .disHid { display: none; } /* カテゴリメニューの間隔調整 ここまで */ #leftContents iframe#twitter-widget-1 { height: 350px !important; } #leftContents #u_0_3, #leftContents ._10b4 { max-height: 220px !important; } /*-----------------------------------------------------*/ /* 左カラム 修正用 ここまで*/ /*-----------------------------------------------------*/ /*-----------------------------------------------------*/ /* メインカラム 修正用 */ /*-----------------------------------------------------*/ .margintop16px { margin-top: 16px !important; } .margintop32px { margin-top: 32px !important; } .marginbottom0px { margin-bottom: 0px !important; } .marginbottom8px { margin-bottom: 8px !important; } .marginbottom32px { margin-bottom: 32px !important; } .marginleft0px { margin-left: 0 !important; } .marginleft12px { margin-left: 12px !important; } /* r_news アプネットTOPページ お知らせ 用 */ #r_news { text-align: left; } #r_news > table { width: 740px; margin: 0 !important; } #r_news > table > tbody > tr > td > img { margin-bottom: 8px; } #r_news > table > tbody > tr:nth-child(3n-2) > td { background: none; } #r_news > table > tbody > tr:nth-child(3n-1) > td { display: block; height: 150px; overflow-y: scroll; } #r_news > table > tbody > tr:nth-child(3n-1) { box-shadow: none; } .rightContents #r_news.section { margin-bottom: 0; } /* r_news アプネットTOPページ お知らせ 用 ここまで */ div#r_shopintro { background-color: #FFF; } /*ul#article_main { margin-left: 12px; }*/ li.article_waku { position: relative; height: 119px; box-shadow: none; border-color: #9a9a9a; } div.article_date { position: absolute; top: 0; right: 0; } div.article_txt { position: absolute; bottom: 0; left: 0; word-wrap: break-word; background: rgba(255, 255, 255, 0.70); } li.article_waku:hover div.article_date, li.article_waku:hover div.article_txt { opacity: 0.5; } div#r_ranking { margin-left: 20px; } div#r_ranking img.titleMgn { margin-left: -20px; } div#r_special tbody tr:nth-child(3n-2) td img { margin-left: 20px; } #r_recent table#recent { /*margin-left: 16px;*/ width: 750px; } /* メインカラム 過去のコラム（お得情報！）一覧 */ div.column_old { text-align: right; } div.column_old a {} /* メインカラム アプライドセレクト */ .customselect { width: 740px; /* margin-left: 16px;*/ } .customselect li { float: left; margin: 4px 4px 32px 4px; } /*-----------------------------------------------------*/ /* メインカラム 修正用 ここまで*/ /*-----------------------------------------------------*/ /*-----------------------------------------------------*/ /* フッター 修正用 */ /*-----------------------------------------------------*/ #footer_banner { margin: auto; width: 960px; height: auto; padding-bottom: 16px; } #footer_banner img { margin: 4px; } div.footer_banner_title { margin: 40px 0 8px 0; } .footer_banner_01, .footer_banner_02, .footer_banner_03, .footer_banner_04 { float: left; text-align: center; margin-bottom: 64px; } .footer_banner_01 > div, .footer_banner_02 > div, .footer_banner_03 > div, .footer_banner_04 > div { display: inline; margin: auto; width: auto; text-align: left; } .footer_banner_04 > div { display: block; width: 957px; } /*-----------------------------------------------------*/ /* フッター 修正用 ここまで*/ /*-----------------------------------------------------*/ /*-----------------------------------------------------*/ /* 独自ページ ワードプレス風記事 修正 */ /*-----------------------------------------------------*/ .post { font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W5', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, verdana, geneva, sans-serif; } .post h1.title { font-size: 1.7em; font-weight: bold; line-height: 1.4em; color: #fff; padding: 0.7em; margin: 0 0 25px 0; text-align: left; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4); background-color: #cc0000; } .post p { margin-bottom: 20px; color: #6E6D6D; font-size: 14px; line-height: 22px; } .post span { color: #6E6D6D; } /*-----------------------------------------------------*/ /* 修正 ここまで*/ /*-----------------------------------------------------*/ /*-----------------------------------------------------*/ /* 新しいヘッダー */ /*-----------------------------------------------------*/ #headerWrap { margin-top: 0; padding-top: 8px; } #wrapper, #wrapper > table { margin-top: 0; } #nHeader { width: 100%; background: #fff; } #nHeader p, #nHeader span { color: #333; font-size: 12px; line-height: 1.3; } #nHeader a { color: #777; font-size: 14px; line-height: 1.3; text-decoration: none; } #nHeader a:hover { opacity: 0.7; } #nHeader a:visited { color: #777; } #nHeader .nHeader_top { margin: 0 auto 16px auto; width: 960px; } #nHeader .nLogo { float: left; width: 250px; text-align: left; } #nHeader .nLogo img:nth-child(1) { margin: 8px 0 4px 0; } #nHeader .nLogo img:nth-child(2) { float: right; margin: 8px 4px 0 0; width: auto; height: 30px; } #nHeader .nLogo p { padding-left: 8px; } #nHeader .nText { float: left; width: 250px; } #nHeader .nText01 { margin-top: 16px; } #nHeader .nText01 p { font-size: 14px; } #nHeader .nText02 { margin-top: 4px; } #nHeader .nText02 a { font-size: 12px; } #nHeader .nText02 table { margin-top: 0; } #nHeader .nText02-01 td, #nHeader .nText02-02 td { padding: 4px 0 0 0; text-align: left; } #nHeader .nText02-01 td:first-child, #nHeader .nText02-02 td:first-child { padding-right: 8px; width: 140px; } #nHeader .nText02-01 td img, #nHeader .nText02-02 td img, #nHeader .nLogin td img { padding: 0 4px 1px 0; vertical-align: bottom; } #nHeader .nHeader_center { float: left; width: 150px; } #nHeader .nLogin { width: 150px; height: 34px; margin: 4px 0 3px 0; } #nHeader .nLogin table { margin-top: 13px; } #nHeader .nLogin td { width: 150px; text-align: left; } #nHeader .nLogin td:first-child { padding-bottom: 2px; } #nHeader .nLogin td p { display: none; float: left; width: 50px; height: 20px; } #nHeader .nLogin td a { font-size: 12px; } #nHeader .nCart { position: relative; z-index: 20000; width: 150px; height: 50px; box-sizing: border-box; float: left; } #nHeader .M_headBasket { float: left; margin: 0; } #nHeader #M_basketOpenedBox { z-index: 20000; } #nHeader .nContact, #nHeader .nGroups { float: left; margin-top: 6px; margin-left: 16px; padding-left: 16px; width: 130px; border-left: solid 1px #ccc; } #nHeader .nContact { padding: 0; margin-left: 8px; border: none; } #nHeader .nContact a, #nHeader .nGroups a { display: block; padding: 6px 8px 4px 8px; width: 112px; height: 33px; border: solid 1px #ccc; } #nHeader .nContact span, #nHeader .nGroups span { display: block; color: #777; font-size: 14px; font-weight: bold; text-align: left; line-height: 1.2; } #nHeader .nContact a:first-child { margin-bottom: 4px; background: url(../img/contact_01.png) no-repeat 9px; } #nHeader .nContact a:nth-child(2) { background: url(../img/contact_02.png) no-repeat 9px; } #nHeader .nGroups a:first-child { margin-bottom: 4px; background: url(../img/group.png) no-repeat; } #nHeader .nGroups a:nth-child(2) { background: url(../img/shop.png) no-repeat; } #nHeader .nContact a:hover span, #nHeader .nGroups a:hover span { opacity: 0.7; } /*旧グロナビ*/ #nHeader #ngNav { background: rgb(51, 51, 51); } #nHeader #ngNav > div { margin: auto; width: 960px; } #nHeader #ngNav a:hover, #nHeader #ngNav p:hover { opacity: 1.0; } #nHeader ul.gNav_ul li { position: relative; z-index: 9999; float: left; margin: 0; padding: 0; width: 120px; height: 40px; background: rgb(51, 51, 51); } #nHeader ul.gNav_ul a, #nHeader ul.gNav_ul p { display: block; position: relative; margin: 0; padding: 0; width: 120px; height: 40px; color: #FFF; font-size: 14px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; transition: 0.2s; } #nHeader ul.gNav_ul > li:after { content: ""; position: absolute; top: 5px; right: 0; height: 30px; border-left: solid 1px #999; } #nHeader ul.gNav_ul > li:first-child:before { content: ""; position: absolute; top: 5px; left: 0; height: 30px; border-left: solid 1px #999; } #nHeader ul.gNav_ul > li:hover > p { cursor: default; } #nHeader ul.gNav_ul > li:hover > p, #nHeader ul.gNav_ul > li:hover > a { position: absolute; top: 0; left: 0; width: 120px; height: 40px; color: #333; line-height: 40px; background: rgb(200, 200, 200); } /* ドロップダウンメニュー */ #nHeader .gNav_ul > li { position: relative; } #nHeader .gNav_ul > li > div { overflow: hidden; position: absolute; top: 40px; width: 960px; height: 0; } #nHeader .gNav_ul > li:first-child > div { left: 0px; } #nHeader .gNav_ul > li:nth-child(2) > div { left: -120px; } #nHeader .gNav_ul > li:nth-child(3) > div { left: -240px; } #nHeader .gNav_ul > li:nth-child(4) > div { left: -360px; } #nHeader .gNav_ul > li:nth-child(5) > div { left: -480px; } #nHeader .gNav_ul > li:nth-child(6) > div { left: -600px; } #nHeader .gNav_ul > li:nth-child(7) > div { left: -720px; } #nHeader .gNav_ul > li:nth-child(8) > div { left: -840px; } #nHeader .gNav_ul > li:hover > div { overflow: visible; padding: 16px 0; width: 960px; height: auto; background: #666; } #nHeader .gNav_ul > li > div > ul { position: relative; } #nHeader .gNav_ul > li > div > ul > li { position: relative; width: 240px; height: 0; background: #666; transition: 0.2s; } #nHeader .gNav_ul > li > div > ul > li:after { content: ""; position: absolute; top: 5px; right: 0; height: 30px; border-right: solid 1px #ccc; } #nHeader .gNav_ul > li > div > ul > li:nth-child(4n+1):after, #nHeader .gNav_ul > li:nth-child(3) > div > ul > li:nth-child(2):after { border-right: none; } #nHeader .gNav_ul > li:first-child > div > ul > li:first-child:after, #nHeader .gNav_ul > li:nth-child(2) > div > ul > li:first-child:after { border-right: solid 1px #ccc; } #nHeader .gNav_ul > li > div > ul > li > div { content: ""; position: absolute; bottom: 0; right: 30px; width: 420px; height: 0px; border-bottom: solid 1px #ccc; } #nHeader .gNav_ul > li:nth-child(1) > div > ul > li > div, #nHeader .gNav_ul > li:nth-child(2) > div > ul > li > div, #nHeader .gNav_ul > li:nth-child(4) > div > ul > li > div, #nHeader .gNav_ul > li:nth-child(5) > div > ul > li > div, #nHeader .gNav_ul > li:nth-child(6) > div > ul > li > div, #nHeader .gNav_ul > li:nth-child(7) > div > ul > li > div { width: 180px; } #nHeader .gNav_ul > li > div > ul > li { overflow: hidden; height: 0; } #nHeader .gNav_ul > li:nth-child(n+3) > div > ul > li:first-child, #nHeader .gNav_ul > li:nth-child(3) > div > ul > li:nth-child(2), #nHeader .gNav_ul > li:nth-child(3) > div > ul > li:nth-child(3), #nHeader .gNav_ul > li:nth-child(7) > div > ul > li:nth-child(5) { width: 960px; background: #888; box-sizing: border-box; } /* #nHeader .gNav_ul > li:nth-child(3) > div > ul > li:nth-child(3) { width: 480px; box-sizing: border-box; } */ #nHeader .gNav_ul > li:nth-child(3) > div > ul > li:nth-child(1), #nHeader .gNav_ul > li:nth-child(3) > div > ul > li:nth-child(2), #nHeader .gNav_ul > li:nth-child(7) > div > ul > li:nth-child(2), #nHeader .gNav_ul > li:nth-child(7) > div > ul > li:nth-child(3), #nHeader .gNav_ul > li:nth-child(7) > div > ul > li:nth-child(4) { margin-bottom: 16px; } #nHeader .gNav_ul > li:hover > div > ul > li { height: 40px; } #nHeader .gNav_ul > li > div > ul > li:hover { background: #eee !important; } #nHeader .gNav_ul > li > div > ul > li > a { position: relative; width: auto; color: #fff; } #nHeader .gNav_ul > li > div > ul > li:hover > a { color: #000; } /*2018.09.10 新グロナビ*/ #nHeader .glnav1808Wrap { position: relative; margin: 16px auto; width: 960px; z-index: 1000; } #nHeader .glnav1808 .glnav1808-li-con a { color: white; font-size: 14px; } #nHeader .clearfix { display: block !important; } #nHeader .glnav1808-li { position: relative; display: block; float: left; width: 16.666%; height: 60px; background-color: #4c4c4c; } #nHeader .glnav1808-li:hover { background-color: #ccc; } #nHeader .glnav1808-li-titWrap { width: 100%; height: 100%; } #nHeader .glnav1808_title { display: table; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; text-decoration: none; border: none; } #nHeader .glnav1808_title p { display: table-cell; color: #fff; text-align: center; font-weight: bold; vertical-align: middle; } #nHeader .glnav1808-li:hover .glnav1808_title p { color: #000; } #nHeader .glnav1808-li-con { width: 0px; height: 0px; overflow: hidden; transition-property: height; transition-duration: 0; transition-delay: 0.1s; } #nHeader .glnav1808-li:hover .glnav1808-li-con { position: absolute; display: block; top: 60px; width: 600%; /*height: 300px;*/ background-color: #4c4c4c; z-index: 1100; } #nHeader .glnav1808-li_01 .glnav1808-li-con { left: 0; height: 185px; } #nHeader .glnav1808-li_02 .glnav1808-li-con { left: -100%; height: 385px; } #nHeader .glnav1808-li_03 .glnav1808-li-con { left: -200%; height: 185px; } #nHeader .glnav1808-li_04 .glnav1808-li-con { left: -300%; height: 185px; } #nHeader .glnav1808-li_05 .glnav1808-li-con { left: -400%; height: 185px; } #nHeader .glnav1808-li_06 .glnav1808-li-con { left: -500%; height: 245px; } #nHeader .glnav1808-li-con_1 > ul, #nHeader .glnav1808-li-con_3 > ul, #nHeader .glnav1808-li-con_5 > ul, #nHeader .glnav1808-li-con_6 > ul { padding: 16px 4%; text-align: left; } #nHeader .glnav1808-li-con_1 > ul > li, #nHeader .glnav1808-li-con_3 > ul > li { float: left; display: block; margin: 0 1% 0 0; width: 24%; color: #333; } #nHeader .glnav1808-li-con_1 > ul > li.glnav1808-li-con_1_right_line, #nHeader .glnav1808-li-con_3 > ul > li.glnav1808-li-con_3_right_line { position: relative; margin-right: 2%; } #nHeader .glnav1808-li-con_1_right_line:after, #nHeader .glnav1808-li-con_3_right_line:after { content: ""; position: absolute; top: 0; right: -5%; margin: 0; width: 1px; height: 100%; border-right: dotted 1px #fff; box-sizing: border-box; } #nHeader .glnav1808-li-con_1 > ul > li:last-child, #nHeader .glnav1808-li-con_3 > ul > li:last-child { margin-right: 0; } #nHeader .glnav1808-li-con_2 > div, #nHeader .glnav1808-li-con_4 > div, #nHeader .glnav1808-li-con_6 > div { padding: 16px 3%; text-align: left; } #nHeader .glnav1808-li-con_2_01-in-yoto { margin-left: 16px; } #nHeader .glnav1808-li-con_2_01-in-yoto-tit { font-size: 18px; color: white; font-weight: bold; } #nHeader .glnav1808-li-con_2_01-in-yoto-con-li { margin-left: 8px; } #nHeader .glnav1808-li-con_2_01-in-yoto-con-li:nth-child(1) { margin-left: 0px; } #nHeader .glnav1808-li-con_2_02-in { padding-top: 8px; margin-top: 8px; border-top: dotted 1px #fff; } #nHeader .glnav1808-li-con_2_02-in-li { margin-left: 16px; } #nHeader .glnav1808-li-con_2_02-in-li:nth-child(1) { margin: 0 24px; } #nHeader .glnav1808-li-con_5 ul li, #nHeader .glnav1808-li-con_6 ul li { float: left; width: 290px; text-align: left; margin-bottom: 8px; } #nHeader .glnav1808-li-con_6-gd { padding-top: 16px; margin-top: 8px; border-top: dotted 1px #fff; } /*arrowのスタイル*/ #nHeader .fas { margin-right: 3px; color: #06fbfd; } /*グロナビタイトル色の変更*/ #nHeader .glnav1808-li_01 .glnav1808_title p { color: #06fbfd; } /* ドロップダウンメニュー ここまで */ /* グロナビだけ固定表示 */ .fixed { position: fixed; top: 0; width: 100%; z-index: 10000; } i.fas.fa-angle-right { padding-left: 0.5em; } /*-----------------------------------------------------*/ /* 新しいヘッダー ここまで */ /*-----------------------------------------------------*/ /*-----------------------------------------------------*/ /* 商品分類ページ、商品詳細ページ バナー */ /*-----------------------------------------------------*/ .sakura_banner_iframe { width: 740px; height: 758px; } .wagon_sale_iframe { width: 740px; height: 320px; } .detailInfo_ttl01 { font-size: 17px; font-weight: bold; color: #cc0000; width: 80%; text-align: left; margin-top: 10px; } .detailInfo_quantity a{ display: inline-block; padding: 0 5px; background-color: #DDD; text-decoration: none; color: #111; } .detailInfo_quantity a:hover{ opacity: 0.8; } .detailInfo_price{ color: #cc0000; font-size: 25px; font-weight: bold; margin: 10px 0; } .detailInfo_detail_tbl{ font-size: 14px; width: 430px!important; max-width: 100%; } .detailInfo_detail_tbl table{ margin-top: 10px; } .detailInfo_addcode{ margin-top: 5px; } @media screen and (max-width: 781px) { .detailInfo_ttl01{ width: 100%; font-size: 15px; } .detailInfo_detail_tbl{ width: 100%!important; } } /*-----------------------------------------------------*/ /* 商品分類ページ、商品詳細ページ バナー ここまで */ /*-----------------------------------------------------*/ /*-----------------------------------------------------*/ /* 特集・キャンペーン一覧 */ /*-----------------------------------------------------*/ .campaign p { margin-bottom: 16px; font-size: 16px; text-align: center; } .campaign h2 { display: block; text-align: center; margin: 32px auto 16px auto; padding: 8px; width: 300px; color: #fff; font-size: 24px; border-bottom: solid 4px #ccc; text-shadow: 1px 1px 0 rgba(0, 0, 0, 1), -1px 1px 0 rgba(0, 0, 0, 1), 1px -1px 0 rgba(0, 0, 0, 1), -1px -1px 0 rgba(0, 0, 0, 1), 1px 1px 5px rgba(0, 0, 0, 0.3), -1px 1px 5px rgba(0, 0, 0, 0.3), 1px -1px 5px rgba(0, 0, 0, 0.3), -1px -1px 5px rgba(0, 0, 0, 0.3); } .campaign iframe { border: none; width: 760px; /*いずれこのサイズに → height: 360px;*/ height: 500px; } .campaign #campaign, .campaign #feature { margin-top: -40px; padding-top: 40px; } /* TOPページのインラインフレーム用 */ iframe.feature_campaign_001 { border: none; width: 760px; height: 455px; } iframe.feature_campaign_002 { border: none; width: 760px; height: 740px; } iframe.feature_campaign_003 { display: block; margin: auto; border: none; width: 740px; height: 70px; } /*-----------------------------------------------------*/ /* 特集・キャンペーン一覧 ここまで */ /*-----------------------------------------------------*/ /*-----------------------------------------------------*/ /* ティッカー バナー */ /*-----------------------------------------------------*/ #bottom_nav { position: fixed; bottom: 0; left: 0; width: 100%; height: auto; z-index: 9999; } #bottom_nav > div { position: relative; } #bottom_nav .bottom_nav__img { width: 960px; height: inherit; /* background: rgba(0, 0, 0, 0.7); */ } #bottom_nav .bottom_nav__img > div { display: inline-block; margin: 0 auto; width: 960px; } #bottom_nav img {} #bottom_nav #bottom_button { float: left; margin: 0; width: 24px; height: 24px; } #bottom_nav button { padding: 0; width: 24px; height: 24px; border: none; background: none; cursor: pointer; } #bottom_nav button img:hover { opacity: 0.7; } /*-----------------------------------------------------*/ /* ティッカー バナー ここまで */ /*-----------------------------------------------------*/ .eight-entry-con { width: 960px; } .eight-entry-con .section-margin { margin-bottom: 60px; } .eight-entry-con > .eyecatch { margin-bottom: 30px; } .eight-entry-con img { height: auto; max-width: 100%; } .eight-entry-con h1 { font-size: 2.2em; font-weight: normal; color: #000000; padding: 0.7em; margin: 0 0 25px 0; background: #eee; } .eight-entry-con h2 { font-size: 2rem; font-weight: normal; margin: 30px 0 20px; } .eight-entry-con h3 { border-bottom: 3px solid #005E99; color: #005E99; font-size: 1.4rem; padding: 10px 0; margin-bottom: 20px; margin-top: 20px; } .eight-entry-con h4 { font-size: 1.3em; font-weight: bold; margin: 12px 0 8px 0; } .eight-entry-con h5 { font-size: 1.3em !important; font-weight: bold; padding: 3px; font-size: 1.0em; margin: 1.0em 0 0.2em 0 } .eight-entry-con p { padding: 0; margin-bottom: 10px; } /* ==== section === */ .base-select h2.head-special { background-color: #F60; border-left: 60px solid #C30; color: #FFF; margin: 40px 0 30px; line-height: 120%; position: relative; padding: 15px 20px; } .section-select h2 { background-color: #005E99; color: #FFF; height: 60px; margin: 40px 0 30px; position: relative; padding: 20px 20px 0 80px; } .section-select h2 .icon-select { background-color: #B7CCD9; color: #005E99; display: flex; align-items: center; /*-縦-*/ justify-content: center; /*-横-*/ flex-direction: column; /*-上から下-*/ position: absolute; left: 0; bottom: 0; width: 60px; height: 60px; } .section-select h2 .icon-select .text { display: block; font-size: 0.5rem; line-height: 1.5rem; } .section-select .btn-con, .base-select .btn-con { text-align: center; margin-top: 30px; } .section-select h2 .icon-select .num { display: block; } .section-lineup { background-color: #F9FAFB; margin: 50px -20px -10px -20px; padding: 30px; } .section-lineup h2 { border-bottom: 3px solid #005E99; color: #005E99; font-size: 1.3rem; padding: 10px 0 5px; } /* ==== ft === */ .eight-ft-bnr-bg { background-color: rgba(0, 0, 0, 0.2); } .eight-ft-bnr-con { width: 1000px; margin: 30px auto 0; padding: 20px; } .eight-ft-bnr-list { display: flex; flex-wrap: wrap; } .eight-ft-bnr-list li { margin-right: 10px; margin-bottom: 10px; width: calc((100% - 40px) / 5); } .eight-ft-bnr-list li:nth-child(5n) { margin-right: 0; } .eight-ft-bnr-list li img { height: auto; max-width: 100%; } /* ==== shopdetail === */ .eight-shopdetail-spec-table { border-top: 1px solid rgba(40, 80, 150, 0.1); } .eight-shopdetail-spec-table tr { border-left: 3px solid rgba(40, 80, 150, 0.4); background-color: rgba(40, 80, 150, 0.05); } .eight-shopdetail-spec-table tr:nth-child(odd) { border-left-color: rgba(40, 80, 150, 0.3); background-color: rgba(40, 80, 150, 0.01); } .eight-shopdetail-spec-table td { border-right: 1px solid rgba(40, 80, 150, 0.1); border-bottom: 1px solid rgba(40, 80, 150, 0.1); font-size: 1.2rem; padding: 10px 18px !important; } .eight-shopdetail-spec-table th { border-right: 1px solid rgba(40, 80, 150, 0.1); border-bottom: 1px solid rgba(40, 80, 150, 0.1); background-color: rgba(40, 80, 150, 0.05); font-weight: bold; font-size: 1.2rem; padding: 10px 16px !important; text-align: left; } .eight-shopdetail-spec-table th.name-width { width: 30%; } /*---------------------------------------------------------------------------- ****************************************************************************** ** contents ****************************************************************************** ----------------------------------------------------------------------------*/ /* ==== contents === */ .eight-entry-con { width: 960px; } .eight-entry-con .section-margin { margin-bottom: 60px; } .eight-entry-con > .eyecatch { margin-bottom: 30px; } .eight-entry-con img { height: auto; max-width: 100%; } .eight-entry-con h1 { font-size: 2.2em; font-weight: normal; color: #000000; padding: 0.7em; margin: 0 0 25px 0; background: #eee; } .eight-entry-con h2 { font-size: 2rem; font-weight: normal; margin: 30px 0 20px; } .eight-entry-con h3 { border-bottom: 3px solid #005E99; color: #005E99; font-size: 1.4rem; padding: 10px 0; margin-bottom: 20px; margin-top: 20px; } .eight-entry-con h4 { font-size: 1.3em; font-weight: bold; margin: 12px 0 8px 0; } .eight-entry-con h5 { font-size: 1.3em !important; font-weight: bold; padding: 3px; font-size: 1.0em; margin: 1.0em 0 0.2em 0 } .eight-entry-con p { padding: 0; margin-bottom: 10px; } /* ==== section === */ .base-select h2.head-special { background-color: #F60; border-left: 60px solid #C30; color: #FFF; margin: 40px 0 30px; line-height: 120%; position: relative; padding: 15px 20px; } .section-select h2 { background-color: #005E99; color: #FFF; height: 60px; margin: 40px 0 30px; position: relative; padding: 20px 20px 0 80px; } .section-select h2 .icon-select { background-color: #B7CCD9; color: #005E99; display: flex; align-items: center; /*-縦-*/ justify-content: center; /*-横-*/ flex-direction: column; /*-上から下-*/ position: absolute; left: 0; bottom: 0; width: 60px; height: 60px; } .section-select h2 .icon-select .text { display: block; font-size: 0.5rem; line-height: 1.5rem; } .section-select .btn-con, .base-select .btn-con { text-align: center; margin-top: 30px; } .section-select h2 .icon-select .num { display: block; } .section-lineup { background-color: #F9FAFB; margin: 50px -20px -10px -20px; padding: 30px; } .section-lineup h2 { border-bottom: 3px solid #005E99; color: #005E99; font-size: 1.3rem; padding: 10px 0 5px; } /* ==== ft === */ .eight-ft-bnr-bg { background-color: rgba(0, 0, 0, 0.2); } .eight-ft-bnr-con { width: 1000px; margin: 30px auto 0; padding: 20px; } .eight-ft-bnr-list { display: flex; flex-wrap: wrap; } .eight-ft-bnr-list li { margin-right: 10px; margin-bottom: 10px; width: calc((100% - 40px) / 5); } .eight-ft-bnr-list li:nth-child(5n) { margin-right: 0; } .eight-ft-bnr-list li img { height: auto; max-width: 100%; } /* ==== shopdetail === */ .eight-shopdetail-spec-table { border-top: 1px solid rgba(40, 80, 150, 0.1); } .eight-shopdetail-spec-table tr { border-left: 3px solid rgba(40, 80, 150, 0.4); background-color: rgba(40, 80, 150, 0.05); } .eight-shopdetail-spec-table tr:nth-child(odd) { border-left-color: rgba(40, 80, 150, 0.3); background-color: rgba(40, 80, 150, 0.01); } .eight-shopdetail-spec-table td { border-right: 1px solid rgba(40, 80, 150, 0.1); border-bottom: 1px solid rgba(40, 80, 150, 0.1); font-size: 1.2rem; padding: 10px 18px !important; } .eight-shopdetail-spec-table th { border-right: 1px solid rgba(40, 80, 150, 0.1); border-bottom: 1px solid rgba(40, 80, 150, 0.1); background-color: rgba(40, 80, 150, 0.05); font-weight: bold; font-size: 1.2rem; padding: 10px 16px !important; text-align: left; } .eight-shopdetail-spec-table th.name-width { width: 30%; } /* ==== recycletoner === */ .recycletoner-box { display: flex; justify-content: space-between; } .recycletoner-box .item { width: calc((100% - 40px)/3); } .recycletoner-box .title { font-size: 1.5rem; font-weight: bold; margin: 10px 0; text-align: center; } .recycletoner-box2 { display: flex; justify-content: space-between; margin-bottom: 20px; } .recycletoner-box2 .item { width: calc((100% - 50px)/5); } .recycletoner-box2 .title { font-size: 0.9rem; font-weight: bold; text-align: center; } .recycletoner-box2 p { font-size: 0.8rem; line-height: 1.4; } /* page176 */ .voice-message { background-color: #FCFCFC; border: 3px solid #CCC; border-radius: 5px; padding: 1rem; margin-bottom: 20px; } /*---------------------------------------------------------------------------- ****************************************************************************** ** common ****************************************************************************** ----------------------------------------------------------------------------*/ /* ==== align === */ .anker-internal {} .anker-hover a:hover { opacity: 0.8; } /* ==== align === */ .align-C { text-align: center !important; } .align-L { text-align: left !important; } .align-R { text-align: right !important; } .ver-align-T { vertical-align: top !important; } .ver-align-M { vertical-align: middle !important; } .ver-align-M { vertical-align: bottom !important; } /* ==== btn === */ .btn { box-shadow: inset 0px -5px 0px rgba(0, 0, 0, 0.1); border-radius: 4px; border: none; color: #222; display: inline-block; font-weight: bold; padding: 10px 20px; margin: 0 auto; text-align: center; text-decoration: none; opacity: 0.8; } .btn:hover { box-shadow: none; opacity: 1; } .btn.bg-blue { background-color: #1866B4; color: #FFF; } .btn.bg-green { background-color: #7A9F2D; color: #FFF; } .btn.font-XL { padding-top: 16px; padding-bottom: 16px; } /* ==== color === */ .color-R { color: #FF3333 !important; font-weight: bold !important; } .color-O { color: orange !important; font-weight: bold !important; } .color-B { color: #00557f !important; font-weight: bold !important; } .color-BK { color: #333 !important; font-weight: bold !important; } .color-G { color: green !important; font-weight: bold !important; } /* ==== clear === */ .clearfix:after { content: ""; display: block; clear: both; } .crr { font-size: 0; line-height: 0; padding: 0; margin: 0; clear: both; } /* ==== dl === */ dl.dl-B dd { padding-bottom: 5px; border-bottom: 1px dotted #CCC; } /* ==== flex === */ .flex { display: flex; } .flexwrap { flex-wrap: wrap; justify-content: space-between; } .flexstart { flex-wrap: wrap; justify-content: flex-start; } .flexrow { flex-direction: row; } .flexrowreverse { flex-direction: row-reverse } /* ==== font === */ .font-S { font-size: 0.9em !important; line-height: 1.2em; } .font-XS { font-size: 0.8em !important; line-height: 1.1em; } .font-XXS { font-size: 0.7em !important; line-height: 1em; } .font-L { font-size: 1.2em !important; line-height: 1.8em; } .font-XL { font-size: 1.35em !important; line-height: 2.2em; } .font-XXL { font-size: 1.5em !important; line-height: 2.4em; } /* ==== img === */ .img-hover img:hover { opacity: 0.8; } /* ==== margin === */ .margin-T0 { margin-top: 0px !important; } .margin-T5 { margin-top: 5px !important; } .margin-T10 { margin-top: 10px !important; } .margin-T15 { margin-top: 15px !important; } .margin-T20 { margin-top: 20px !important; } .margin-T30 { margin-top: 30px !important; } .margin-T40 { margin-top: 40px !important; } .margin-B0 { margin-bottom: 0px !important; } .margin-B5 { margin-bottom: 5px !important; } .margin-B10 { margin-bottom: 10px !important; } .margin-B15 { margin-bottom: 15px !important; } .margin-B20 { margin-bottom: 20px !important; } .margin-B30 { margin-bottom: 30px !important; } .margin-B40 { margin-bottom: 40px !important; } /* ==== table === */ table.table-B { border-top: 1px solid rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.1); margin-top: 10px; margin-bottom: 10px; } table.table-B td { border-right: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 10px; } table.table-B th { border-right: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); background-color: #efefef; font-weight: bold; padding: 10px; text-align: center; } table.table-D { margin-top: 10px; margin-bottom: 10px; } table.table-D td { border-bottom: 1px dotted rgba(0, 0, 0, 0.1); padding: 10px 5px; } table.table-D th { border-bottom: 1px dotted rgba(0, 0, 0, 0.1); font-weight: bold; padding: 10px 5px; text-align: left; } /* ==== ul,ol === */ ul.ul { list-style-type: disc; margin-bottom: 20px; margin-left: 1.5em; margin-top: 20px; } ul.ul li { margin-left: 5px; } ul.ul-B { margin-left: 0 !important; } ul.ul-B li { border-bottom: 1px dotted #CCC; list-style: none; padding-bottom: 5px; padding-top: 5px } ul.ul-I { margin-left: 0; } ul.ul-I li { display: inline-block; } ol.ol { margin-bottom: 20px; margin-left: 1.5em; margin-top: 20px; } ol.ol li { margin-left: 5px; } ol.ol-li { border-bottom: 1px dotted #CCC; padding-bottom: 5px; padding-top: 5px; } /*---------------------------------------------------------------------------- ****************************************************************************** min-width: 781px ****************************************************************************** ----------------------------------------------------------------------------*/ @media screen and (min-width: 781px) { /* ==== display === */ .pc-display { display: block; } .pc-display-inlineblock { display: inline-block; } .pc-display-inline { display: inline; } .tab-display { display: none; } .tab-display-inlineblock { display: none; } .tab-display-inline { display: none; } .sp-display { display: none; } .sp-display-inlineblock { display: none; } .sp-display-inline { display: none; } /* ==== float === */ .float-L { float: left !important; } .float-R { float: right !important; } /* ==== flex === */ .flex-split2, .flex-split3, .flex-split4, .flex-split5 { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 10px 0; } .flex-split2 > *, .flex-split3 > *, .flex-split4 > *, .flex-split5 > * { margin-right: 10px; margin-bottom: 10px; } .flex-split2 > *:nth-child(2n), .flex-split3 > *:nth-child(3n), .flex-split4 > *:nth-child(4n), .flex-split5 > *:nth-child(5n) { margin-right: 0; } .flex-split2 > * { width: calc((100% - 11px) /2); } .flex-split3 > * { width: calc((100% - 21px) /3); } .flex-split4 > * { width: calc((100% - 31px) /4); } .flex-split5 > * { width: calc((100% - 41px) /5); } /* ==== img === */ .img-C { display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; } .img-L { float: left; margin-bottom: 10px; margin-right: 10px; } .img-R { float: right; margin-bottom: 10px; margin-left: 10px; } .img-L, .img-R { text-align: center; } /* ==== width === */ .width-1 { width: 9% !important; } .width-2 { width: 19% !important; } .width-3 { width: 29% !important; } .width-4 { width: 39% !important; } .width-5 { width: 48% !important; } .width-6 { width: 59% !important; } .width-7 { width: 69% !important; } .width-8 { width: 79% !important; } .width-9 { width: 89% !important; } .width-10 { width: 100% !important; } } /*---------------------------------------------------------------------------- ****************************************************************************** max-width: 780px ****************************************************************************** ----------------------------------------------------------------------------*/ @media screen and (max-width: 780px) and (min-width: 581px) { /* ==== display === */ .pc-display { display: none; } .pc-display-inlineblock { display: none; } .pc-display-inline { display: none; } .tab-display { display: block; } .tab-display-inlineblock { display: inline-block; } .tab-display-inline { display: inline; } /* ==== img === */ .img-C, .img-L, .img-R { display: block; float: none; margin: 0 auto 10px; } /* ==== split === */ .split-2, .split-3, .split-4, .split-5, .split-6, .split-7, .split-8, .split-9, .split-10 { width: 100% !important; } .tab-split-2 { width: 48% !important; } .tab-split-3 { width: 31.33% !important; } .tab-split-4 { width: 23% !important; } .tab-split-5 { width: 18% !important; } .tab-split-6 { width: 14.66% !important; } .tab-split-7 { width: 12.22% !important; } .tab-split-8 { width: 10.5% !important; } .tab-split-9 { width: 9.11% !important; } .tab-split-10 { width: 8% !important; } /* ==== width === */ .width-1, .width-2, .width-3, .width-4, .width-5, .width-6, .width-7, .width-8, .width-9, .width-10 { width: 100% !important; } .tab-width-1 { width: 9% !important; } .tab-width-2 { width: 19% !important; } .tab-width-3 { width: 29% !important; } .tab-width-4 { width: 39% !important; } .tab-width-5 { width: 48% !important; } .tab-width-6 { width: 59% !important; } .tab-width-7 { width: 69% !important; } .tab-width-8 { width: 79% !important; } .tab-width-9 { width: 89% !important; } .tab-width-10 { width: 100% !important; } } /*---------------------------------------------------------------------------- ****************************************************************************** max-width: 480px ****************************************************************************** ----------------------------------------------------------------------------*/ @media screen and (max-width: 580px) { /* ==== display === */ .pc-display { display: none; } .pc-display-inlineblock { display: none; } .pc-display-inline { display: none; } .sp-display { display: block; } .sp-display-inlineblock { display: inline-block; } .sp-display-inline { display: inline; } /* ==== smartphone === */ .sp-table-area { box-shadow: -3px 0 5px rgba(0, 0, 0, 0.2) inset; margin-bottom: 20px; margin-top: 20px; overflow: auto; } .sp-table-area table { margin: 0 !important; min-width: 680px; } /* ==== split === */ .split-2, .split-3, .split-4, .split-5, .split-6, .split-7, .split-8, .split-9, .split-10 { width: 100% !important; } .sp-split-2 { width: 48% !important; } .sp-split-3 { width: 31.33% !important; } .sp-split-4 { width: 23% !important; } .sp-split-5 { width: 18% !important; } .sp-split-6 { width: 14.66% !important; } .sp-split-7 { width: 12.22% !important; } .sp-split-8 { width: 10.5% !important; } .sp-split-9 { width: 9.11% !important; } .sp-split-10 { width: 8% !important; } /* ==== width === */ .width-1, .width-2, .width-3, .width-4, .width-5, .width-6, .width-7, .width-8, .width-9, .width-10 { width: 100% !important; } .sp-width-1 { width: 9% !important; } .sp-width-2 { width: 19% !important; } .sp-width-3 { width: 29% !important; } .sp-width-4 { width: 39% !important; } .sp-width-5 { width: 48% !important; } .sp-width-6 { width: 59% !important; } .sp-width-7 { width: 69% !important; } .sp-width-8 { width: 79% !important; } .sp-width-9 { width: 89% !important; } .sp-width-10 { width: 100% !important; } } /* ==== width === */ .width_001 { width: 1%; } .width_002 { width: 2%; } .width_003 { width: 3%; } .width_004 { width: 4%; } .width_005 { width: 5%; } .width_006 { width: 6%; } .width_007 { width: 7%; } .width_008 { width: 8%; } .width_009 { width: 9%; } .width_010 { width: 10%; } .width_011 { width: 11%; } .width_012 { width: 12%; } .width_013 { width: 13%; } .width_014 { width: 14%; } .width_015 { width: 15%; } .width_016 { width: 16%; } .width_017 { width: 17%; } .width_018 { width: 18%; } .width_019 { width: 19%; } .width_020 { width: 20%; } .width_021 { width: 21%; } .width_022 { width: 22%; } .width_023 { width: 23%; } .width_024 { width: 24%; } .width_025 { width: 25%; } .width_026 { width: 26%; } .width_027 { width: 27%; } .width_028 { width: 28%; } .width_029 { width: 29%; } .width_030 { width: 30%; } .width_031 { width: 31%; } .width_032 { width: 32%; } .width_033 { width: 33%; } .width_034 { width: 34%; } .width_035 { width: 35%; } .width_036 { width: 36%; } .width_037 { width: 37%; } .width_038 { width: 38%; } .width_039 { width: 39%; } .width_040 { width: 40%; } .width_041 { width: 41%; } .width_042 { width: 42%; } .width_043 { width: 43%; } .width_044 { width: 44%; } .width_045 { width: 45%; } .width_046 { width: 46%; } .width_047 { width: 47%; } .width_048 { width: 48%; } .width_049 { width: 49%; } .width_050 { width: 50%; } .width_051 { width: 51%; } .width_052 { width: 52%; } .width_053 { width: 53%; } .width_054 { width: 54%; } .width_055 { width: 55%; } .width_056 { width: 56%; } .width_057 { width: 57%; } .width_058 { width: 58%; } .width_059 { width: 59%; } .width_060 { width: 60%; } .width_061 { width: 61%; } .width_062 { width: 62%; } .width_063 { width: 63%; } .width_064 { width: 64%; } .width_065 { width: 65%; } .width_066 { width: 66%; } .width_067 { width: 67%; } .width_068 { width: 68%; } .width_069 { width: 69%; } .width_070 { width: 70%; } .width_071 { width: 71%; } .width_072 { width: 72%; } .width_073 { width: 73%; } .width_074 { width: 74%; } .width_075 { width: 75%; } .width_076 { width: 76%; } .width_077 { width: 77%; } .width_078 { width: 78%; } .width_079 { width: 79%; } .width_080 { width: 80%; } .width_081 { width: 81%; } .width_082 { width: 82%; } .width_083 { width: 83%; } .width_084 { width: 84%; } .width_085 { width: 85%; } .width_086 { width: 86%; } .width_087 { width: 87%; } .width_088 { width: 88%; } .width_089 { width: 89%; } .width_090 { width: 90%; } .width_091 { width: 91%; } .width_092 { width: 92%; } .width_093 { width: 93%; } .width_094 { width: 94%; } .width_095 { width: 95%; } .width_096 { width: 96%; } .width_097 { width: 97%; } .width_098 { width: 98%; } .width_099 { width: 99%; } .width_100 { width: 100%; } /* ==== margin padding === */ .margin_padding_0 { margin: 0px !important; padding: 0px !important; } .padding_T0 { padding-top: 0px !important; } .padding_T5 { padding-top: 5px !important; } .padding_T10 { padding-top: 10px !important; } .padding_T15 { padding-top: 15px !important; } .padding_T20 { padding-top: 20px !important; } .padding_T30 { padding-top: 30px !important; } .padding_T40 { padding-top: 40px !important; } .padding_B0 { padding-bottom: 0px !important; } .padding_B5 { padding-bottom: 5px !important; } .padding_B10 { padding-bottom: 10px !important; } .padding_B15 { padding-bottom: 15px !important; } .padding_B20 { padding-bottom: 20px !important; } .padding_B30 { padding-bottom: 30px !important; } .padding_B40 { padding-bottom: 40px !important; } .padding_L0 { padding-left: 0px !important; } .padding_L5 { padding-left: 5px !important; } .padding_L10 { padding-left: 10px !important; } .padding_L15 { padding-left: 15px !important; } .padding_L20 { padding-left: 20px !important; } .padding_L30 { padding-left: 30px !important; } .padding_L40 { padding-left: 40px !important; } .padding_R0 { padding-right: 0px !important; } .padding_R5 { padding-right: 5px !important; } .padding_R10 { padding-right: 10px !important; } .padding_R15 { padding-right: 15px !important; } .padding_R20 { padding-right: 20px !important; } .padding_R30 { padding-right: 30px !important; } .padding_R40 { padding-right: 40px !important; } .margin_T0 { margin-top: 0px !important; } .margin_T5 { margin-top: 5px !important; } .margin_T10 { margin-top: 10px !important; } .margin_T15 { margin-top: 15px !important; } .margin_T20 { margin-top: 20px !important; } .margin_T30 { margin-top: 30px !important; } .margin_T40 { margin-top: 40px !important; } .margin_B0 { margin-bottom: 0px !important; } .margin_B5 { margin-bottom: 5px !important; } .margin_B10 { margin-bottom: 10px !important; } .margin_B15 { margin-bottom: 15px !important; } .margin_B20 { margin-bottom: 20px !important; } .margin_B30 { margin-bottom: 30px !important; } .margin_B40 { margin-bottom: 40px !important; } .margin_B50 { margin-bottom: 50px !important; } .margin_B60 { margin-bottom: 60px !important; } .margin_B400 { margin-bottom: 400px !important; } .margin_L0 { margin-left: 0px !important; } .margin_L5 { margin-left: 5px !important; } .margin_L10 { margin-left: 10px !important; } .margin_L15 { margin-left: 15px !important; } .margin_L20 { margin-left: 20px !important; } .margin_L30 { margin-left: 30px !important; } .margin_L40 { margin-left: 40px !important; } .margin_R0 { margin-right: 0px !important; } .margin_R5 { margin-right: 5px !important; } .margin_R10 { margin-right: 10px !important; } .margin_R15 { margin-right: 15px !important; } .margin_R20 { margin-right: 20px !important; } .margin_R30 { margin-right: 30px !important; } .margin_R40 { margin-right: 40px !important; } /* ==== clear === */ .crr { font-size: 0; line-height: 0; padding: 0; margin: 0; clear: both; } /* ==== float === */ .float_L { float: left; } .float_R { float: right; } /* ==== align === */ .align_C { text-align: center !important; } img.align_C { display: block; margin: 0 auto; } table.align_C td, table.align_C th { text-align: center; } .align_L { text-align: left !important; } .align_R { text-align: right !important; } .align_T { vertical-align: top !important; } .align_M { vertical-align: middle !important; } /* ==== font === */ .font_SS { font-size: 0.8em !important; } .font_S { font-size: 0.9em !important; } .font_XS { font-size: 0.8em !important; } .font_XXS { font-size: 0.7em !important; } .font_L { font-size: 1.1em !important; } .font_XL { font-size: 1.2em !important; } .font_XXL { font-size: 1.3em !important; } .color_R { color: #FF3333 !important; font-weight: bold !important; } .color_O { color: orange !important; font-weight: bold !important; } .color_B { color: #00557f !important; font-weight: bold !important; } .color_G { color: green !important; font-weight: bold !important; } /* ==== table === */ .table_B { border-top: 1px solid #D7D7D7; border-left: 1px solid #D7D7D7; } .table_B td { border-right: 1px solid #D7D7D7; border-bottom: 1px solid #D7D7D7; vertical-align: top; } .table_B th { border-right: 1px solid #D7D7D7; border-bottom: 1px solid #D7D7D7; background-color: #F2F2F2; text-align: center; font-weight: bold; } .table_B02 {} .table_B02 td { padding: 5px; border-bottom: 1px dotted #D7D7D7; } .table_B02 th { padding: 5px; border-bottom: 1px dotted #D7D7D7; text-align: left; font-weight: bold; } .vertical-align_T td, .vertical-align_T th { vertical-align: top; } /* ==== ul === */ .ul_B li { border-bottom: 1px dotted #CCC; list-style-type: disc; } ul.check li { font-size: 1.4em; font-weight: bold; list-style: circle; } .ol_B li { border-bottom: 1px dotted #CCC; } /* ==== hr === */ div.hr { height: 10px; margin-bottom: 10px; border-bottom: 1px dotted #999; } div.hr:before { content: ""; clear: both; } .m_price { color: #ff0000; } /*汎用クラス*/ .mg0 { margin: 0px !important; } .mgt0 { margin-top: 0px !important; } .mgt8 { margin-top: 8px !important; } .mgt16 { margin-top: 16px !important; } .mgt24 { margin-top: 24px !important; } .mgt32 { margin-top: 32px !important; } .mgt40 { margin-top: 40px !important; } .mgt48 { margin-top: 48px !important; } .mgt56 { margin-top: 56px !important; } .mgt64 { margin-top: 64px !important; } .mgt72 { margin-top: 72px !important; } .mgr0 { margin-right: 0px !important; } .mgr8 { margin-right: 8px !important; } .mgr16 { margin-right: 16px !important; } .mgr24 { margin-right: 24px !important; } .mgr32 { margin-right: 32px !important; } .mgr40 { margin-right: 40px !important; } .mgr48 { margin-right: 48px !important; } .mgr56 { margin-right: 56px !important; } .mgr64 { margin-right: 64px !important; } .mgr72 { margin-right: 72px !important; } .mgb0 { margin-bottom: 0px !important; } .mgb8 { margin-bottom: 8px !important; } .mgb16 { margin-bottom: 16px !important; } .mgb24 { margin-bottom: 24px !important; } .mgb32 { margin-bottom: 32px !important; } .mgb40 { margin-bottom: 40px !important; } .mgb48 { margin-bottom: 48px !important; } .mgb56 { margin-bottom: 56px !important; } .mgb64 { margin-bottom: 64px !important; } .mgb72 { margin-bottom: 72px !important; } .mgl0 { margin-left: 0px !important; } .mgl8 { margin-left: 8px !important; } .mgl16 { margin-left: 16px !important; } .mgl24 { margin-left: 24px !important; } .mgl32 { margin-left: 32px !important; } .mgl40 { margin-left: 40px !important; } .mgl48 { margin-left: 48px !important; } .mgl56 { margin-left: 56px !important; } .mgl64 { margin-left: 64px !important; } .mgl72 { margin-left: 72px !important; } /*ついで買い導線*/ .tuide .tuide-li { float: left; } /*バナーリスト*/ .bnrList .bnrList-li { /* 20190607 float必要なくなってきたので解除 */ /* float: left;*/ margin: 8px auto 0 auto; } .side{ padding: 0 20px 20px 20px !important; } .SideBnrList .SideBnrList-li { margin-top: 8px; } .SideBnrList .SideBnrList-li:first-child { margin-top: 0px; } .bnrList .bnrList-li_even { float: left; margin-top: 8px; margin-right: 8px; } .bnrList .bnrList-li_even:nth-child(even) { margin-right: 0; } .bnrList .bnrList-li_three { float: left; margin-top: 8px; margin-right: 8px; } .bnrList .bnrList-li_three:nth-child(3n) { margin-right: 0; } /*さくらバナーの横幅調整ここから*/ .bnrList { width: 940px; } .bnrList img { width: 100%; } .tuide.clearfix { margin-top: 20px; } .tuide.clearfix > ul.bnrList-ul { width: 940px; } .tuide.clearfix > ul.bnrList-ul > li.bnrList-li > a > img { width: 100%; } /*さくらバナーの横幅調整ここまで*/ /*新タイトルデザイン*/ .l1Tit { position: relative; display: block; margin: 32px 0 16px 0; padding-left: 38px; height: 30px; vertical-align: middle; color: #fff; font-size: 20px; line-height: 1.7; background-image: url(../img/custom_logo_h1_test1.png); background-position: left top; background-repeat: no-repeat; } .l1Tit_fot { position: relative; display: block; margin: 32px 0 16px 0; padding-left: 38px; height: 30px; vertical-align: middle; color: #fff; font-size: 20px; line-height: 1.7; background-image: url(../img/custom_logo_h1_test1.png); background-position: left top; background-repeat: no-repeat; } .l1Tit_fot02 { position: relative; display: block; margin: 32px 0 16px 0; padding-left: 38px; height: 30px; vertical-align: middle; color: #fff; font-size: 20px; line-height: 1.7; background-image: url(../img/custom_logo_h1_mini.png); background-position: left top; background-repeat: no-repeat; } .l2Tit { position: relative; display: block; margin: 32px 0 16px 0; padding-left: 38px; height: 30px; vertical-align: middle; color: #333; font-size: 18px; line-height: 1.8; border-bottom: solid 4px #cc2929; box-sizing: border-box; } .l2Tit:before { content: url(../img/custom_logo_h2_test1.gif); position: absolute; top: 0; left: 0; width: 30px; height: 30px; } .l1TitSide { position: relative; display: block; margin: 0 0 8px 0; padding-left: 16px; height: 30px; vertical-align: middle; color: #fff; font-size: 16px; line-height: 1.7; background-image: url(../img/custom_title_left.png); background-position: left top; background-repeat: no-repeat; } /* 新新タイトルデザイン */ h1.h1tit { margin: 36px 0 12px 0; padding: 8px 16px; font-size: 16px; color: #fff; background: #4c4c4c; } h2.h2tit { margin: 36px 0 12px 0; padding: 0px 16px; font-size: 16px; color: #000; border-bottom: solid 3px #4c4c4c; } .h1TitSide { position: relative; display: block; margin: 0 0 8px 0; padding: 0 16px; height: 38px; vertical-align: middle; color: #fff; font-size: 16px; line-height: 38px; background: #4c4c4c; } .h1Tit_fot { position: relative; display: block; margin: 32px 0 16px 0; padding-left: 16px; height: 38px; vertical-align: middle; color: #fff; font-size: 16px; line-height: 38px; background: #4c4c4c; } .h1Tit_fot02 { position: relative; display: block; margin: 32px 0 16px 0; padding-left: 16px; height: 38px; vertical-align: middle; color: #fff; font-size: 16px; line-height: 38px; background: #4c4c4c; } /*左ナビのクーポン*/ .coupon { position: relative; height: 304px; width: 180px; margin-bottom: 16px; } .coupon-img { position: absolute; top: 0px; left: 0px; z-index: 100; margin-top: 0 !important; } .coupon-input { position: absolute; top: 189px; left: 11px; z-index: 110; width: 150px; border: none; font-size: 22px; text-align: center; } .coupon-button { position: absolute; top: 220px; left: 20px; z-index: 110; } /*********************************customize-end****************************************/ /**********　リニューアル追加分 20190604　****************************************/ body { font-family: "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-font-smoothing: subpixel-antialiased; background: #fff; font-size: 12px; } .rightContents { width: 950px; } #headerWrap { background: #fff; padding-bottom: 30px; } #hd { width: 1200px; margin-left: auto; margin-right: auto; overflow: hidden; padding: 10px 0 15px; font-size: 11px; } #hd #logo { float: left; text-align: left; } #hd #logo p { margin-bottom: 5px; } #hd .right { float: right; text-align: right; } .hd_menu table { margin-left: auto; } .hd_menu p, .hd_menu span { display: inline-block; } .hd_menu span a { color: #1a1a1a; text-decoration: none; } .hd_menu span.cart { margin-left: 15px; } #hd .search { margin-top: 10px; } #hd .search .send, #hd .search .input { display: inline-block; vertical-align: middle; } #hd .search .send { margin-right: 15px; } #hd .search .input { border: 1px solid #888; height: auto; overflow: hidden; } #hd .search .input input { font-size: 14px; line-height: 24px; padding: 5px; border: 0; width: 370px; } #hd #MakeShopTopSearchButton { float: right; background: url("../imghd_search.png") 0 0 no-repeat; width: 81px; height: 34px; font-size: 0; } #hd_nav { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; position: relative; } #hd_nav ul { width: 1200px; margin: 0 auto; } #hd_nav ul li .nav { position: relative; } #hd_nav ul li { font-size: 13px; font-weight: bold; float: left; width: 200px; } #hd_nav ul li a { display: table; width: 100%; text-decoration: none; color: #333; } #hd_nav ul li a:after { position: absolute; display: block; content: ""; width: 100%; height: 0; left: 0; bottom: 0; background: url("../imghd_line.png") center center no-repeat; transition-duration: .3s; } #hd_nav ul li:hover a:after { height: 5px; } #hd_nav ul li a span { display: table-cell; height: 65px; vertical-align: middle; } #hd_nav ul li .menu { position: absolute; top: 65px; left: 0; width: 100%; padding-bottom: 40px; background: rgba(0, 0, 0, .3); z-index: 1000; display: none; } #hd_nav ul li:hover .menu { display: block; } #hd_nav ul li .menu .in { width: 1200px; margin: 0 auto; } #hd_nav ul li .menu .in table { width: 100%; table-layout: fixed; margin-top: 2px; } #hd_nav ul li .menu .in table th, #hd_nav ul li .menu .in table td { border: none; vertical-align: top; } #hd_nav ul li .menu .in table th { background: #333; padding: 25px; } #hd_nav ul li .menu .in table th p { color: #fff; margin: 10px 0; font-weight: normal; font-size: 11px; line-height: 18px; } #hd_nav ul li .menu .in table td { background: #fff; border-left: 1px solid #ccc; } #hd_nav ul li .menu .in table td .pc { padding: 25px; } #hd_nav ul li .menu .in table td .pc .n { font-size: 20px; font-weight: bold; margin-top: 5px; } #hd_nav ul li .menu .in table td .pc p { font-size: 14px; font-weight: bold; text-align: center; color: #000; } #hd_nav ul li .menu .in table td .genre { text-align: left; margin-top: 20px; } #hd_nav ul li .menu .in table td .genre p { text-align: left; font-size: 14px; border-bottom: 1px solid #000; margin: 10px 0; padding: 5px; } #hd_nav ul li .menu .in table td .genre a { display: block; color: #000; font-size: 13px; line-height: 1.4; margin: 5px 0; font-weight: normal; } #hd_nav ul li .menu .in table td .genre a:hover { color: #005bea; } #hd_nav ul li .menu .in .reason { padding: 3px; background: #fff; } #hd_nav ul li .menu .in .reason .title { text-align: center; background: #000; font-weight: bold; font-size: 15px; padding: 10px; color: #fff; } #hd_nav ul li .menu .in .list { padding: 10px 15px; } #hd_nav ul li .menu .in dl { border-top: 1px solid #ccc; display: table; width: 100%; } #hd_nav ul li .menu .in dl:first-child { border-top: none; } #hd_nav ul li .menu .in dl dt, #hd_nav ul li .menu .in dl dd { display: table-cell; vertical-align: middle; text-align: left; padding: 8px 0; font-weight: normal; color: #000; } #hd_nav ul li .menu .in dl dt { width: 30px; } #hd_nav ul li .menu .in dl dt span { display: inline-block; background: #000; color: #fff; width: 20px; line-height: 20px; font-weight: bold; font-size: 11px; text-align: center; } #slider { background: #e9f1fd; display: none; } #slider ul { width: 1200px; margin: 0 auto; position: relative; } #slider .slick-dots { position: absolute; bottom: 4px; left: 0; } #slider .slick-dots button { width: 10px; height: 10px; font-size: 0; border-radius: 50%; background: #cccccc; } #slider .slick-dots .slick-active button, #slider .slick-dots button:hover { background: #005bea; } #slider .slick-dots button:before { content: none; } #makebanner, #wrapper { width: 1200px; } #side { width: 210px; } #side .title { font-weight: bold; color: #fff; background: #005bea; padding: 10px; font-size: 15px; text-align: center; } #side .side_bnr { margin-bottom: 10px; } #side_cat { margin-bottom: 30px; } #side_cat li { font-size: 13px; border: 1px solid #e6e6e6; border-top: none; position: relative; text-align: left; } #side_cat li a { display: block; text-decoration: none; color: #1a1a1a; padding: 3px 17px; transition-duration: .3s; background-color: #fff; } #side_cat li:hover > a { background-color: #f2f2f2; } #side_cat > li > a img, #side_cat > li > a span { display: inline-block; vertical-align: middle; } #side_cat > li > a span { margin-left: 15px; } #side_cat > li > a { background: url("../imgside_arw1.png") 90% center no-repeat; } #side_cat > li:hover > a { background-image: url("../imgside_arw2.png"); } #side_cat li ul { display: none; width: 210px; position: absolute; left: 208px; top: 0; z-index: 1000; } #side_cat li ul li a { padding: 12px 15px; } #side_cat li:hover > ul { display: block; } /*カテゴリ第二階層一旦非表示ここから*/ /* #side_cat >li > ul > li > ul > li { display: none; } */ /*カテゴリ第二階層一旦非表示ここまで*/ #top_center { width: 950px; } #top_center section { margin-bottom: 60px; } #top_center section h1 { margin-bottom: 30px; } #mokuteki .in .top_cat { float: left; margin-right: 18px; margin-bottom: 15px; position: relative; } #mokuteki .in .top_cat:nth-child(4n) { margin-right: 0; } #mokuteki .in .top_cat a { display: block; border: 2px solid #e6e6e6; text-decoration: none; width: 220px; height: 220px; color: #1a1a1a; } #mokuteki .in .top_cat .index { border: 2px solid #005bea; text-decoration: none; width: 220px; height: 220px; color: #fff; background: #005bea; } #mokuteki .in .top_cat .index h1 { text-align: center; font-size: 22px; margin-bottom: 15px; margin-top: 8px; } #mokuteki .in .top_cat .index h1:after { display: block; content: ""; width: 35px; height: 1px; margin: 15px auto 0; background: #fff; } #mokuteki .in .top_cat .index p { color: #fff; text-align: center; font-size: 14px; } #mokuteki .in .top_cat .index p.small { margin-top: 50px; font-size: 10px; } #mokuteki .in .top_cat a dl { padding: 15px 5px; } #mokuteki .in .top_cat a dl dt { font-size: 17px; font-weight: bold; margin-bottom: 5px; } #mokuteki .in .top_cat a dl dd { font-size: 12px; } #mokuteki .in .top_cat a:after { position: absolute; content: ""; display: block; top: 0; left: 0; background: url("../imgcategory_border.png") center center no-repeat; width: 100%; height: 100%; opacity: 0; transition-duration: .3s; } #mokuteki .in .top_cat a:hover:after { opacity: 1; } #tokusyu ul li { float: left; margin-right: 18px; margin-bottom: 15px; } #tokusyu ul li:nth-child(4n) { margin-right: 0; } #tokusyu ul li:nth-child(6) { margin-right: 0; } #news li.article_waku { width: 224px; height: 130px; box-sizing: border-box; margin-right: 18px; margin-bottom: 18px; } #news li.article_waku:nth-child(4n) { margin-right: 0; } #news .article_txt { padding: 5px; font-size: 13px; } #news .article_date { font-size: 11px; padding: 5px; } #ft_menu { margin-top: 50px; background: #e0ebfc; width: 100%; } #ft_menu .in { width: 1180px; overflow: hidden; margin: 0 auto; padding: 50px 10px; background: #e0ebfc; } #ft_menu .in .ft { float: left; text-align: left; margin-left: 43px; } #ft_menu .in .ft:first-child { margin-left: 0; } #ft_menu .in .ft .title { font-weight: bold; font-size: 15px; margin-bottom: 10px; } #ft_menu .in .ft ul li { line-height: 2; margin-bottom: 10px; } #ft_menu .in .ft ul li a { color: #1a1a1a; text-decoration: none; } #ft_menu .in .ft p, #ft_menu .in .ft .bnr { margin-top: 10px; } #ft_menu .in .ft p { font-size: 11px; line-height: 2; color: #333; } #ft_menu .in .ft .bnr:first-child { margin-top: 28px; } #copy { background: #005bea; } #copy .in { padding: 10px; background: #005bea; width: 1180px; margin: 0 auto; } #copy p { text-align: center; color: #fff; margin: 10px 0; } #copy p a { color: #fff; } #ft_wrap { display: none; } /* 最近チェックした商品 --------------------------------------*/ #top_center #recent, #top_center #recent * { display: block; } #top_center #recent { overflow: hidden; } #top_center #recent a { color: #1a1a1a; text-decoration: none; } #top_center #recent p { line-height: 1.5; text-align: left; margin: 10px 0; } #top_center #recent p.price { text-align: right; font-weight: bold; font-size: 15px; color: #eb1d25; } #top_center #recent td.line { display: none; } #top_center #recent td.itemBox { width: 224px; float: left; box-sizing: border-box; margin-left: 17px; } #top_center #recent td.itemBox:first-child { margin-left: 0; } #top_center #recent td.itemImg { display: table; width: 224px; height: 224px; } #top_center #recent td.itemImg a { display: table-cell; text-align: center; vertical-align: middle; border: 1px solid #ccc; padding: 10px; } #top_center #recent td.itemImg img { display: inline-block; } /* ランキング --------------------------------------*/ #r_ranking p { margin: 5px 0; } #r_ranking a { color: #1a1a1a; text-decoration: none; } /* #r_ranking .rankList { width: 174px; float: left; margin: 0 0 0 20px; position: relative; } */ #r_ranking .rankList:first-child { margin-left: 0; } #r_ranking .rankList > em { position: absolute; top: 0; left: 15px; width: 34px; height: 51px; z-index: 10; } #r_ranking .rankImg { display: table; width: 100%; height: 174px; margin: 0; } #r_ranking .rankImg a { display: table-cell; border: 1px solid #ccc; text-align: center; vertical-align: middle; } #r_ranking .rankImg img { display: inline-block; width: 70%; } #r_ranking .rankPrice { text-align: right; font-size: 15px; } #r_ranking #rank1 em { background: url("../assets/img/rank1.png"); } #r_ranking #rank2 em { background: url("../assets/img/rank2.png"); } #r_ranking #rank3 em { background: url("../assets/img/rank3.png"); } #r_ranking #rank4 em { background: url("../assets/img/rank4.png"); } #r_ranking #rank5 em { background: url("../assets/img/rank5.png"); } #recommend .reco_layout, #history .reco_layout, #ranking .reco_layout { position: relative; float: left; width: calc((100% - 4em - 1px) / 5) !important; margin: 8px 1em 0 0 !important; padding: 0; text-align: center; } #recommend .reco_layout:nth-of-type(6n), #history .reco_layout:nth-of-type(6n), #ranking .reco_layout:nth-of-type(6n) { margin-right: 0 !important; } #ranking .reco_layout .reco_ranking_no { position: absolute; top: 0; left: 15px; width: 34px; height: 51px; z-index: 10; display: block; text-indent: -9999em; } #ranking .reco_layout:nth-of-type(2n) .reco_ranking_no { background: url("assets/img/rank1.png"); } #ranking .reco_layout:nth-of-type(3n) .reco_ranking_no { background: url("assets/img/rank2.png"); } #ranking .reco_layout:nth-of-type(4n) .reco_ranking_no { background: url("assets/img/rank3.png"); } #ranking .reco_layout:nth-of-type(5n) .reco_ranking_no { background: url("assets/img/rank4.png"); } #ranking .reco_layout:nth-of-type(6n) .reco_ranking_no { background: url("assets/img/rank5.png"); } #recommend .reco_item, #history .reco_item, #ranking .reco_item { display: table; width: 100%; height: 174px; margin: 0; } #recommend .reco_item a, #history .reco_item a, #ranking .reco_item a { display: table-cell; border: 1px solid #ccc; text-align: center; vertical-align: middle; } #recommend .reco_item img.reco_img, #history .reco_item img.reco_img, #ranking .reco_item img.reco_img { display: inline-block; width: 70% !important; } #recommend div.reco_goods, #history div.reco_goods, #ranking div.reco_goods { text-align: left; } #recommend div.reco_price, #history div.reco_price, #ranking div.reco_price { color: #ed0000 !important; font-size: 15px !important; font-weight: bold !important; text-align: right !important; } @media screen and (max-width: 769px) { #recommend div.reco_layout, #history div.reco_layout, #ranking div.reco_layout { float: none !important; width: 100% !important; padding: 0 !important; text-align: center !important; } #recommend .reco_item img.reco_img, #history .reco_item img.reco_img, #ranking .reco_item img.reco_img { display: inline-block; width: 40% !important; padding: 25px 0; } } #float { position: fixed; right: 10px; bottom: 30px; z-index: 300; /*display: none;*/ } #float ul { border: 1px solid #ccc; background: #fff; padding: 10px; } #float ul li { margin-top: 5px; } #float ul li:first-child { margin-top: 0; } @media screen and (max-width: 769px) { #float { display: none!important; } } #bottom_nav { z-index: 200; } /*　イーレコメンドスタイル調整　*/ #wrap #recommend, #wrap #pickup, #wrap #history, #wrap #ranking { margin: 80px 0; } #wrap #recommend div.reco_layout, #wrap #pickup div.reco_layout, #wrap #history div.reco_layout, #wrap #ranking div.reco_layout { width: 174px; margin: 0 0 0 20px; position: relative; } #wrap #recommend div.reco_layout:nth-child(2), #wrap #pickup div.reco_layout:nth-child(2), #wrap #history div.reco_layout:nth-child(2), #wrap #ranking div.reco_layout:nth-child(2) { margin-left: 0; } #wrap #ranking div.reco_layout .reco_ranking_no { width: 34px; height: 51px; position: absolute; top: 0; left: 15px; font-size: 0; z-index: 10; } #wrap #ranking div.reco_layout:nth-child(2) .reco_ranking_no { background: url("../assets/img/rank1.png"); } #wrap #ranking div.reco_layout:nth-child(3) .reco_ranking_no { background: url("../assets/img/rank2.png"); } #wrap #ranking div.reco_layout:nth-child(4) .reco_ranking_no { background: url("../assets/img/rank3.png"); } #wrap #ranking div.reco_layout:nth-child(5) .reco_ranking_no { background: url("../assets/img/rank4.png"); } #wrap #ranking div.reco_layout:nth-child(6) .reco_ranking_no { background: url("../assets/img/rank5.png"); } #wrap #recommend div.reco_item, #wrap #pickup div.reco_item, #wrap #history div.reco_item, #wrap #ranking div.reco_item { display: table; width: 174px; height: 174px; } #wrap #recommend div.reco_item a, #wrap #pickup div.reco_item a, #wrap #history div.reco_item a, #wrap #ranking div.reco_item a { display: table-cell; text-align: center; vertical-align: middle; border: 1px solid #ccc; } #wrap #recommend div.reco_item a img, #wrap #pickup div.reco_item a img, #wrap #history div.reco_item a img, #wrap #ranking div.reco_item a img { display: inline-block; } #wrap #recommend div.reco_title, #wrap #pickup div.reco_title, #wrap #history div.reco_title, #wrap #ranking div.reco_title { padding: 0; height: 45px; margin-bottom: 30px; } #wrap #recommend div.reco_title { background: url("../imgtitle_bar6.png") center center no-repeat; } #wrap #pickup div.reco_title { background: url("../imgtitle_bar7.png") center center no-repeat; } #wrap #history div.reco_title { background: url("../imgtitle_bar4.png") center center no-repeat; } #wrap #ranking div.reco_title { background: url("../imgtitle_bar5.png") center center no-repeat; } #wrap #recommend div.reco_title p.reco_para, #wrap #pickup div.reco_title p.reco_para, #wrap #history div.reco_title p.reco_para, #wrap #ranking div.reco_title p.reco_para { display: none; } #wrap #recommend div.reco_goods, #wrap #pickup div.reco_goods, #wrap #history div.reco_goods, #wrap #ranking div.reco_goods { text-align: left; margin: 10px 0; } #wrap #recommend div.reco_goods a, #wrap #pickup div.reco_goods a, #wrap #history div.reco_goods a, #wrap #ranking div.reco_goods a { color: #1a1a1a; text-decoration: none; } #wrap #recommend div.reco_price, #wrap #pickup div.reco_price, #wrap #history div.reco_price, #wrap #ranking div.reco_price { text-align: right; font-weight: bold; font-size: 15px; } #guideLink ul { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 0 -1em; } #guideLink li { width: calc( (100% - 4em - 1px ) / 5); margin: 0 1em 1em 0; border: 1px solid #e6e6e6; border-collapse: separate; border-radius: 5px; } #guideLink li:nth-child(5n) { margin-right: 0; } #guideLink a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 10px; font-size: 13px; font-weight: bold; text-align: center; text-decoration: none; transition-duration: .3s; vertical-align: middle; } #guideLink a:hover { background: #005bea; color: #fff; } @media screen and (max-width: 414px) { #guideLink li { width: calc( (100% - 1em - 1px ) / 2)!important; } #guideLink li:nth-child(5n) { margin-right: 1em!important; } #guideLink li:nth-child(2n) { margin-right: 0!important; } } #guideMain { font-size: 13px; line-height: 22px; } #guideMain p { color: #000; margin: 15px 0; } #guideMain .indent p { text-indent: -1em; margin: 5px 0 5px 1em; } #guideMain a { color: #005bea; } #guideMain .section { padding: 5px; margin: 40px 0; } #guideMain h3 { font-size: 22px; margin-bottom: 20px; } #guideMain h3 span { color: #005bea; display: inline-block; margin-right: 15px; } #guideMain h4 { color: #005bea; font-size: 14px; font-weight: bold; margin-bottom: 12px; margin-top: 32px; } #guideMain .smartphone { background: #f2f2f2; border-radius: 10px; margin: 15px 0; padding: 20px; text-align: left; } .table_base { width: 100%; } .table_base th, .table_base td { border: 1px solid #e6e6e6; box-sizing: border-box; color: #000; font-size: 13px; padding: 10px 15px; } .table_base th { background: #f2f2f2; min-width: 118px; text-align: center; vertical-align: middle; white-space: nowrap; } .table_base .red { color: #f00; } .recicle_table, .price_table td { text-align: center; } .price_table .area { text-align: left; width: 190px; } .size_table td { text-align: left; } .rank_table { table-layout: fixed; text-align: center; } .rank_table .h { text-align: left; } .rank_table .d { color: #f00; font-weight: bold; } .recicle_table .plus { border-top: none; border-bottom: none } .recicle_table .red { font-weight: bold; } #compasation .list { color: #000; text-align: left; } #compasation .list-child { padding-left: 1.5em; } /* 独自ページ -----------------------------------------*/ .free_section .title { padding: 50px 0; } .free_section .title_m { text-align: center; /*font-size: 30px;*/ font-size: 2.4em; color: #000; width: 80%; margin: 0 auto 5px; padding: 0 0 5px; border-bottom: 1px solid #000; } .free_section .title_s { text-align: center; font-size: 15px; color: #000; letter-spacing: 2px; } .free_section .title_s_1 { text-align: center; font-size: 15px; color: #fff; letter-spacing: 2px; } .free_section.support { background: #000; padding: 40px 0 50px; } .free_section.support .title_m { width: 80%; margin: 0 auto; border-bottom: 1px solid #fff; color: #fff; } .free_section.border { padding-bottom: 60px; } /* バリカタs -----------------------------------------*/ .barikata_main { text-align: center; /* background: url("../imgbarikata_bg.jpg") center center no-repeat; */ background: url("../img/newwind_top_bk01.jpg") center center no-repeat; background-size: cover; } .barikata_anker { width: 1200px; margin: 50px auto; } .barikata_anker ul { text-align: center; } .barikata_anker li { display: inline-block; font-size: 17px; line-height: 95px; font-weight: bold; width: 357px; margin: 8px 5px; } .barikata_anker a { display: block; background: #000; color: #fff; text-decoration: none; } .barikata_anker a:hover { background: #005bea; } .barikata_anker a img { display: inline-block; margin-right: 20px; } .reason_list { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; width: 1200px; margin: 0 auto; } .reason_list .re { position: relative; padding: 1px; } .reason_list dl { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; margin-bottom: 15px; } .reason_list dt { margin: 0 15px; } .reason_list dd { text-align: left; font-weight: bold; font-size: 23px; } .reason_list .item { width: 585px; margin-bottom: 60px; } .reason_list .image { margin-bottom: -25px; } .reason_list .tx { background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .3); padding: 25px 20px; margin: 0 20px; position: relative; z-index: 5; } .reason_list .tx p { font-size: 13px; line-height: 22px; color: #000; } .reason_list .button { width: 300px; font-size: 13px; line-height: 56px; margin: 20px auto; } #page_barikata a { color: #333333; text-decoration: none; transition: all 0.5s ease; } #page_barikata .button a { display: block; padding: 0 20px; background: url("../imgbarikata_arw2.png") right 30px center no-repeat #000; color: #fff; text-decoration: none; transition: all 0.5s ease; } #page_barikata .button a:hover { background-color: #0044b0; } .support_list { width: 1200px; margin: 0 auto; } .support_list .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; margin-bottom: 40px; } .support_list dl { text-align: left; color: #fff; margin-left: 30px; } .support_list dt { font-size: 22px; font-weight: bold; border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 10px; } .support_list dt strong { color: #fff; display: inline-block; margin-right: 15px; font-size: 2em; } .support_list dd { font-size: 13px; line-height: 22px; } .recommend_list { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: center; width: 1320px; margin: 0 auto; } .recommend_list h4 { text-align: center; font-size: 22px; margin-bottom: 15px; } .recommend_list .item { width: 386px; margin: 0 20px; } .recommend_list .item .image img { max-width: 380px; max-height: 230px; height: auto; width: auto; } .recommend_list dl { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; margin: 25px 4px; } .recommend_list dt { background: #000; color: #fff; font-size: 13px; line-height: 16px; padding: 5px; white-space: nowrap; } .recommend_list dd { font-size: 22px; line-height: 27px; margin-left: 20px; font-weight: bold; text-align: left; } .recommend_list p { font-size: 13px; line-height: 20px; color: #000; } .recommend_list .spec { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; text-align: left; margin: 20px 0; font-size: 12px; line-height: 20px; } .recommend_list .spec .r { margin-left: 40px; } .recommend_list .price { color: #f00; font-weight: bold; font-size: 20px; text-align: left; } .recommend_list .button { margin-top: 20px; } .recommend_list .button a { font-weight: bold; font-size: 15px; line-height: 75px; } .recommend_list_4 { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; width: 1200px; margin: 0 auto; } .recommend_list_4 h4 { text-align: center; font-size: 22px; margin-bottom: 15px; } .recommend_list_4 .item { width: 24%; } .recommend_list_4 .item .image img { max-width: 380px; max-height: 230px; height: auto; width: auto; } .recommend_list_4 dl { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; margin: 25px 4px; } .recommend_list_4 dt { background: #000; color: #fff; font-size: 13px; line-height: 16px; padding: 5px; white-space: nowrap; } .recommend_list_4 dd { font-size: 22px; line-height: 27px; margin-left: 20px; font-weight: bold; text-align: left; } .recommend_list_4 p { font-size: 13px; line-height: 20px; color: #000; } .recommend_list_4 .spec { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; text-align: left; margin: 20px 0; font-size: 12px; line-height: 20px; } .recommend_list_4 .spec .r { margin-left: 40px; } .recommend_list_4 .price { color: #f00; font-weight: bold; font-size: 20px; text-align: left; } .recommend_list_4 .button { margin-top: 20px; } .recommend_list_4 .button a { font-weight: bold; font-size: 15px; line-height: 75px; } .select_list { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; width: 1200px; margin: 0 auto; } #page_barikata .select_list a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; line-height: 28px; text-align: left; padding: 25px 20px; } .select_list a .icon { margin-right: 20px; } .select_list .item { width: 590px; margin: 10px 0; } .series_list { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; width: 1200px; margin: 0 auto; } #bari5{ background:#000; color:#FFF; } #bari5 .title_m{ color: #FFF; border-color: #FFF; } .hpc_about { font-size: 16px; line-height: 1.6; margin-bottom: 20px; color:#FFF; } .bari5_con { width: 1200px; margin: 0 auto; } .bari5_con h3 { text-align: center; font-size: 2rem; margin-bottom: 30px; padding-top: 10px; } .merit_list, .demerit_list { margin-bottom: 30px; display: flex; justify-content: space-between; } .merit_list_card, .demerit_list_card { box-shadow: 0 0 5px rgb(0 0 0 / 30%); padding: 20px; width: calc(100% / 2 - 20px); background:#FFF; color:#333; } .merit_list_card h4 , .demerit_list_card h4 { font-size: 1.5rem; margin-bottom: 20px; } .merit_list_card p , .demerit_list_card p { font-size: 1.1rem; } .merit_list_card , .demerit_list_card { box-shadow: 0 0 5px rgb(0 0 0 / 30%); padding: 20px; width: calc(100% / 2 - 20px); } .merit_list_card h4 , .demerit_list_card h4 { font-size: 1.8rem; margin-bottom: 20px; display: flex; align-items: center; border-bottom:1px solid #ccc; padding-left:20px; } .merit_list_no, .demerit_list_no { font-size: 3.8rem; font-weight: bold; margin-right: 25px; font-style: italic; } .merit_list_no { color: #005bea; } .demerit_list_no { color: #c20d0d; } .merit_list_card p , .demerit_list_card p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 10px; } .merit_list_card ul{ margin: 1em 0; padding-left: 40px; } .merit_list_card li{ list-style-type: disc; font-size:1.1rem; margin-bottom:5px; } @media screen and (max-width: 1024px) { .barikata_main img { width: 100%; } #bari3 .recommend_list { width: 100%; } #bari3 .recommend_list .item { width: calc((100% - 2em - 1px) / 3); margin: 0 0 0 1em; } #bari3 .recommend_list .item:nth-of-type(3n) { margin-right: 1em; } #bari3 .recommend_list_4 { width: 100%; } #bari3 .recommend_list_4 .item { width: calc((100% - 1em - 1px) / 2); margin: 0 0 0 1em; } #bari3 .recommend_list_4 .item:nth-of-type(4n) { margin-right: 1em; } #bari1 .reason_list { width: 100%; } #bari1 .item { width: calc((100% - 3em - 1px) / 2) !important; margin: 0 0 2em 1em; } #bari1 .item:nth-of-type(2n) { margin-right: 1em; } #bari1 .item img { width: 100%; } #bari2 .support_list { width: 96%; margin: 0 auto; } #bari4 .select_list { width: 96%; margin: 0 auto; } #bari4 .select_list .item { width: calc((100% - 1em - 1px) / 2); margin: 0 1em 1em 0; } #bari4 .select_list .item:nth-of-type(2n) { margin-right: 0; } #bari6 .series_list { flex-wrap: nowrap; width: 100%; } #bari6 .series_list .item { width: calc((100% - 2em - 1px) / 3); margin: 0 0 0 1em; } #bari6 .series_list .item:nth-of-type(3n) { margin-right: 1em; } #bari6 .series_list .item img { width: 100%; } } @media screen and (max-width: 414px) { #bari1 .reason_list { flex-wrap: wrap; flex-direction: column; width: 96%; margin: 0 atuo; } #bari1 .item { width: 100% !important; margin: 0 0 2em; } #bari1 .item:last-of-type { margin-bottom: 4em; } #bari4 .select_list .item { width: 100%; margin: 0 0 1em; } #bari4 .select_list .item:last-of-type { margin-bottom: 0; } #bari6 .series_list { flex-wrap: wrap; flex-direction: column; width: 96%; margin: 0 atuo; } #bari6 .series_list .item { width: 100%; margin: 0 0 1em; } #bari6 .series_list .item:nth-of-type(3n) { margin-bottomt: 0; } #bari6 .series_list .item img { width: 100%; } } /* MSI -----------------------------------------*/ #msi_page { background: #000; } #msi_page .content_main { padding-top: 100px; } #msi_page .content_inner { width: 1320px; margin: 0 auto; } .msi_link ul { width: 1100px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; justify-content: center; } .msi_link ul li { width: 350px; margin-right: 25px; } .msi_link.clm4 ul li { width: 260px; margin-right: 20px; } .msi_link ul li:last-child { margin-right: 0; } .msi_link ul a { position: relative; text-align: center; width: 100%; height: 100%; padding: 25px; border: 2px solid #dc0a17; text-decoration: none; color: #fff; font-size: 17px; font-weight: bold; line-height: 1.3; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; justify-content: center; -webkit-align-items: center; box-sizing: border-box; transition: all 0.5s ease; } .msi_link ul a:hover { background: #dc0a17; color: #fff; } .msi_link ul a span { background-image: url("../imglink_btn_icon02.png"); background-repeat: no-repeat; background-position: left center; display: inline-block; padding-left: 30px; } h2.msih2 { margin-bottom: 68px; text-align: center; font-size: 30px; color: #fff; } h2.msih2 span { position: relative; padding-bottom: 20px; } h2.msih2 span:after { content: ""; width: 90px; height: 5px; margin-left: -45px; background: #dc0a17; position: absolute; left: 50%; bottom: 0; } h3.msih3 { text-align: center; font-size: 20px; color: #fff; } .msi_lineup_content { padding-top: 90px; } .msi_lineup_column { padding: 75px 0 100px; border-bottom: 1px solid #e6e6e6; } .msi_lineup_column:last-child { border-bottom: none; } .msi_lineup_wrap { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; } .msi_lineup_box { width: calc((100% - 3em - 1px) / 3); margin: 55px 1.5em 0 0; } .msi_lineup_box:nth-child(3n) { margin-right: 0; } .msi_lineup_box .image { background: #ffffff; margin-bottom: 20px; padding: 30px 0; text-align: center; } .msi_lineup_box .txt { padding: 0 10px; color: #fff; } .msi_lineup_box .txt p { color: #fff; font-size: 12px; line-height: 21px; min-height: 150px; } .msi_lineup_box h3 { margin-bottom: 22px; font-size: 22px; text-align: center; letter-spacing: 2px; } .msi_lineup_box dl dt, .msi_lineup_box dl dd { display: inline-block; line-height: 1.3; } .msi_lineup_box a { text-decoration: none; color: #fff; } .msi_lineup_btn { text-align: center; margin-top: 20px; } .msi_lineup_btn a { background-image: url("../imgbtn_icon02.png"); background-repeat: no-repeat; background-position: right 30px center; width: 360px; height: 75px; display: table; margin: 0 auto; padding: 15px; text-decoration: none; color: #fff; font-size: 15px; font-weight: bold; letter-spacing: 1px; box-sizing: border-box; transition: all 0.5s ease; } .msi_lineup_btn a span { display: table-cell; vertical-align: middle; } .msi_lineup_btn.type01 a { background-color: #dc0a17; } .msi_lineup_btn.type01 a:hover { background-color: #a50811; } .msi_lineup_btn.type02 a { background-image: url("../imgbtn_icon02_2.png"); background-color: #ffffff; color: #dc0a17; } .msi_lineup_btn.type02 a:hover { background-color: #e6e6e6; } .msi_lineup_btn + .lg_lineup_btn { margin-top: 8px; } .movie2Col { display: table; width: 100%; } .movie2Col li { display: table-cell; } #msi_page .feature_content { padding: 90px 0; color: #fff; } #msi_page .feature_content .feature_wrap { padding-bottom: 60px; } #msi_page .feature_content .feature_box { display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-align-items: center; margin-bottom: 40px; } #msi_page .feature_content .feature_box:last-child { margin-bottom: 0; } #msi_page .feature_box h3 { padding: 0 8px 18px; margin-bottom: 18px; border-bottom: 1px solid #666666; text-align: left; font-size: 23px; } #msi_page .feature_box h3 span { padding-right: 10px; color: #ac204b; } #msi_page .feature_box .txtbox { padding-left: 30px; } #msi_page .feature_box .txtbox p { color: #fff; padding: 0 8px; font-size: 13px; line-height: 23px; } #msi_page .support_content { background: #1a1a1a; padding: 90px 0; color: #fff; } #msi_page .support_content .support_box { display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-align-items: center; margin-bottom: 40px; } #msi_page .support_content .support_box:last-child { margin-bottom: 0; } #msi_page .support_box h3 { padding: 0 8px 18px; margin-bottom: 18px; border-bottom: 1px solid #666666; text-align: left; font-size: 22px; } #msi_page .support_box h3 span { padding-right: 10px; color: #ac204b; } #msi_page .support_box .txtbox { width: 100%; padding-left: 30px; } #msi_page .support_box .txtbox p { color: #fff; padding: 0 8px; font-size: 13px; line-height: 23px; } @media screen and (max-width: 1024px) { #msi_page .content_inner { width: 98%; } .msi_main_img { width: 100%; } .msi_link ul { width: 100%; } .msi_link ul li { width: calc((100% - 2em - 1px) / 3); margin: 0 0 0 1em; } .msi_link ul li:nth-of-type(3n) { margin-right: 1em !important; } .msi_link.clm4 ul li { width: calc((100% - 1em - 1px) / 4); margin: 0 0 0 1em; } .msi_link.clm4 ul li:nth-of-type(4n) { margin-right: 1em; margin-left: 0; } .msi_lineup_box { width: calc((100% - 4em - 1px) / 3); margin: 55px 0 0 1em; } .msi_lineup_box:nth-child(3n) { margin-right: 1em; } .msi_lineup_btn a { width: 100%; } .msi_lineup_box .image img { width: 100%; } } /* トップページ　見出しh1 --------------------------------------*/ #mokuteki h1, #ranking h1 { margin-bottom: 30px; } /* トピックス#topics --------------------------------------*/ #topics .container { width: 950px; font-size: 1.5em; background: repeating-linear-gradient(#fbfbfc, #fbfbfc 5px, #f8f8fa 0, #f8f8fa 10px); } #topics .container .box { width: 890px; margin: 10px auto; } #topics h1 { text-align: center; font-size: 22px; padding: 30px 0 0 0; position: relative; display: inline-block; margin-bottom: 1em; } #topics h1:before { content: ''; position: absolute; bottom: -10px; display: inline-block; width: 30px; height: 2px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: black; border-radius: 2px; } #topics .area_waku { float: left; margin-right: 10px; margin-bottom: 15px; position: relative; } #topics .area_waku:nth-child(2n) { margin-right: 0; } #topics .area_waku:last-child { margin-bottom: 50px; } #topics .area_waku a { display: block; width: 440px; height: 120px; color: #1a1a1a; background-color: white; text-decoration: none; } #topics .area_waku { box-shadow: 0 0 5px 0 #999; width: 440px; height: 120px; color: #fff; } #topics img { float: left; width: 140px; height: 120px; object-fit: cover; margin-right: 20px; } #topics .area_waku dex h1:after { display: block; content: ""; width: 35px; height: 1px; margin: 15px auto 0; background: #fff; } #topics .area_waku dex p { color: #fff; text-align: center; font-size: 14px; } #topics .area_waku dex p.small { margin-top: 50px; font-size: 10px; } #topics .area_waku a dl { padding: 20px 5px; } #topics .area_waku a dl dt { font-size: 14px; font-weight: bold; margin-bottom: 10px; padding: 0 10px; text-align: left; } #topics .area_waku a dl dd { font-size: 12px; float: right; background-color: #B7282C; border-radius: 10px; padding: 0px 10px; vertical-align: middle; color: #fff; } #topics .area_waku a:after { position: absolute; content: ""; display: block; opacity: 0.7; transition-duration: .3s; } #topics .area_waku a:hover:after { opacity: 1; } #topics .btn_backnumber { float: right; padding: 5px 20px; margin: -35px 0 0 0; background-color: #000000; } #topics .btn_backnumber a { text-decoration: none; color: #ffffff; font-size: 10px; font-weight: 700; } /* トピックス#topics_sp　スマホ --------------------------------------*/ ＃topics_sp .column li { margin-bottom: 10px; border-bottom: 1px dotted #cccccc; font-size: 0.8em; } /* 商品ページ バリカタの説明 --------------------------------------*/ .about_barikta { margin: 20px 0; } .about_barikta h1 { font-size: 2.2em; color: #333333; text-align: center; } .about_barikta .marker { background: linear-gradient(transparent 60%, #ffff66 60%); } .about_barikta .box01 img { width: 100%; margin-bottom: 40px; } .about_barikta .box01 p { font-size: 1.2em; } .about_barikta .box02 p { width: 90%; text-align: left; margin: 20px auto 60px; } .about_barikta p { margin-bottom: 1em; color: #333333; } /* .about_barikta h2 { padding: 18px; font-size: 1.4em !important; color: #333333; background-color: #f7f5f5; border-bottom: #333333 solid 1px; border-left: #333333 solid 10px; margin-bottom: 40px; } */ .about_barikta h3 { color: #005ab3; font-weight: 700; } /* .about_barikta h3:before { content: "■"; color: #005ab3; margin-right: 8px; } */ table.gamespec { padding: 14px 10px; border: solid 1px #C0C0C0; border-collapse: collapse; margin: 1em 0; } table.gamespec tr { background-color: #fafafa; } table.gamespec caption { font-weight: 700; color: #333333; margin-bottoｍ: 5px; } /* LGgram2020 -----------------------------------------*/ #lggram2020 .main_inner { margin: 0 auto; } #lggram2020 .main_inner img { width: 100%; } #lggram2020 .entry_btn { margin-top: 60px; text-align: center; font-weight: bold; font-size: 20px; } #lggram2020 .entry_btn a { background-image: url("../imgbtn_icon.png"); background-repeat: no-repeat; background-position: right 30px center; background-color: #449b70; width: 530px; display: inline-block; padding: 30px; text-decoration: none; color: #fff; box-sizing: border-box; } #lggram2020 .entry_btn a:hover { background-color: #780025; } #lggram2020 .content_main { padding-top: 100px; } #lggram2020 .content_inner { width: 1320px; margin: 0 auto; } #lggram2020 .content_link ul { width: 1100px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; justify-content: center; -webkit-align-items: center; align-items: stretch; } #lggram2020 .content_link ul li { width: 350px; margin-right: 25px; letter-spacing: 2px; } #lggram2020 .content_link ul li:last-child { margin-right: 0; } #lggram2020 .content_link ul a { position: relative; text-align: center; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 35px 25px; border: 2px solid #449b70; text-decoration: none; color: #000; font-size: 16px; font-weight: bold; transition: all 0.5s ease; } #lggram2020 .content_link ul a:hover { background: #449b70; color: #fff; } #lggram2020 .content_link ul a span { background-image: url("../imglink_btn_icon.png"); background-repeat: no-repeat; background-position: left center; display: inline-block; padding-left: 20px; } #lggram2020 .content_link ul a:hover span { background-image: url("../imglink_btn_icon02.png"); } #lggram2020 h2 { margin-bottom: 68px; text-align: center; font-size: 30px; } #lggram2020 h2 span { position: relative; padding-bottom: 20px; } #lggram2020 h2 span:after { content: ""; width: 90px; height: 5px; margin-left: -45px; background: #449b70; position: absolute; left: 50%; bottom: 0; } #lggram2020 h3 { text-align: center; font-size: 26px; } #lggram2020 .reason_content { padding: 90px 0; } #lggram2020 .reason_wrap { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; } #lggram2020 .reason_wrap .reason_box { margin: 30px 0; margin-right: 30px; } #lggram2020 .reason_box:nth-child(2n) { margin-right: 0; } #lggram2020 .reason_box .txtbox { background: #fff; position: relative; width: 515px; margin: -50px auto 0; padding: 40px 50px; box-shadow: 0 0 8px rgba(0, 0, 0, .2); box-sizing: border-box; border-top: solid 6px #449b70; } #lggram2020 .reason_box .txtbox p { font-size: 13px; line-height: 23px; } #lggram2020 .reason_box .txtbox h3 { margin-bottom: 14px; font-size: 20px; } #lggram2020 .support_content { background: url("../imglggram_support_bg.jpg"); background-size: cover; padding: 90px 0; color: #fff; } #lggram2020 .support_content .support_box { display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-align-items: center; margin-bottom: 40px; } #lggram2020 .support_content .support_box:last-child { margin-bottom: 0; } #lggram2020 .support_box h3 { padding: 0 8px 18px; margin-bottom: 18px; border-bottom: 1px solid #666666; text-align: left; font-size: 22px; font-weight: bold; } #lggram2020 .support_box h3 span { padding-right: 10px; color: #449b70; } #lggram2020 .support_box .txtbox { width: 100%; padding-left: 30px; } #lggram2020 .support_box .txtbox p { padding: 0 8px; font-size: 13px; line-height: 23px; color: #fff; } #lggram2020 .lineup_content { padding-top: 90px; } #lggram2020 .lineup_column { padding: 75px 0 100px; border-bottom: 1px solid #e6e6e6; } #lggram2020 .lineup_column:last-child { border-bottom: none; } #lggram2020 .lineup_wrap { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; } #lggram2020 .lineup_box { width: calc((100% - 3em - 1px) / 3); margin: 55px 1.5em 0 0; } #lggram2020 .lineup_box:nth-child(3n) { margin-right: 0; } #lggram2020 .lineup_box .image { margin: 0 auto 20px; width: 308px; } #lggram2020 .lineup_box .image img { width: 100%; height: auto; } #lggram2020 .lineup_box .txt { padding: 0 10px; } #lggram2020 .lineup_box h3 { margin-bottom: 22px; font-size: 22px; letter-spacing: 2px; text-align: center; } #lggram2020 .lineup_box p { color: #000; display: block; font-size: 12px; line-height: 20px; } #lggram2020 .lineup_box a { color: #000; text-decoration: none; } #lggram2020 .lineup_btn { text-align: center; margin-top: 20px; } #lggram2020 .lineup_btn a { background-image: url("../imgbtn_icon.png"); background-repeat: no-repeat; background-position: right 15px center; width: 100%; height: 75px; display: table; margin: 0 auto; padding: 15px; font-size: 15px; font-weight: bold; text-decoration: none; color: #fff; box-sizing: border-box; transition: all 0.5s ease; } #lggram2020 .lineup_btn a span { display: table-cell; vertical-align: middle; } #lggram2020 .lineup_btn.type01 a { background-color: #449b70; } #lggram2020 .lineup_btn.type01 a:hover { background-color: #2a7552; } #lggram2020 .lineup_btn.type02 a { background-color: #2f2e46; } #lggram2020 .lineup_btn.type02 a:hover { background-color: #1a192e; } #lggram2020 .lineup_btn.type03 a { background-color: #ee5c02; } #lggram2020 .lineup_btn.type03 a:hover { background-color: #e33b01; } #lggram2020 .lineup_btn + .lineup_btn { margin-top: 8px; } #lggram2020 .lineup_model_wrap { margin-top: 45px; } #lggram2020 .lineup_model_box { background: url("../imgmodel_box_bg.jpg") no-repeat left center; width: 740px; margin: 0 auto; } #lggram2020 .lineup_model_box .txt_box { width: 445px; margin-left: auto; padding: 30px 15px; text-align: center; line-height: 1.3; box-sizing: border-box; } #lggram2020 .lineup_model_box .txt_box p { text-align: center; font-weight: bold; font-size: 15px; line-height: 1.4; color: #333; } #lggram2020 .lineup_model_box .txt_box .mod_lrtxt { margin-top: 20px; font-size: 26px; font-weight: bold; color: #449b70; } #lggram2020 .lineup_model_box .lineup_model_btn { margin-top: 30px; text-align: center; } #lggram2020 .lineup_model_box .lineup_model_btn a { background-image: url("../imgbtn_icon.png"); background-repeat: no-repeat; background-position: 200px center; background-color: #4d4d4d; width: 240px; display: inline-block; padding: 15px; text-decoration: none; color: #fff; box-sizing: border-box; } #lggram2020 .lineup_model_box .lineup_model_btn a:hover { background-color: #3a3a3a; } #lggram2020 .reason_movie { display: flex; flex-wrap: wrap; justify-content: space-between; width: 1200px; margin: 0 auto 80px; } #lggram2020 .reason_movie .item { margin-bottom: 20px; } #lggram2020 .reason_movie .item p { font-size: 1.2em; font-weight: 700; } /* 商品ページ -----------------------------------------*/ .productpage-attention { background-color: #fafafa; border: #c0c0c0 solid 1px; color: #282828; font-weight: 700; padding: 5px 10px; margin-bottom: 10px; } .productpage-attention span { color: #e68a25; } .caution { margin-top: 10px; } .productpage-text { margin: 30px 0; } .productpage-text h1 { padding: 16px; font-size: 1.2em !important; color: #333333; background-color: #f7f5f5; border-bottom: #333333 solid 1px; border-left: #333333 solid 10px; margin-bottom: 20px; text-align: left; } .productpage-text h3 { font-size: 1.2em; color: #005ab3; font-weight: 700; } .productpage-text p, .productpage-text table { margin-bottom: 20px; } .productpage-text table { border: 1px #ddd solid; cellpadding: 5; cellspacing: 0; } @media screen and (max-width: 769px) { .productpage-text .img_text { flex-direction: column; } .productpage-text .img_text .text02 { padding-left: 0; } .productpage-text .img_text img { margin-left: 0; } } /* パーツ説明(テキスト＆写真) */ .img_text { display: flex; justify-content: space-between; align-items: flex-start; } .img_text img { margin: 0 0 40px 20px; } .img_text p { line-height: 2em; font-weight: 500; margin-bottom: 40px; } h3.text03 { font-size: 1.4em !important; color: #005ab3; font-weight: 700; margin: 10px 0 20px !important; line-height: 1.4; } .img_text .text02 { padding-left: 10px; } /* resusePC 50%ポイント還元 -----------------------------------------*/ #resusePC .main_area { width: 1200px; margin: 0 auto; } #resusePC .main01 { background-color: #0a7cd4; background-size: 10px 10px; background-image: linear-gradient(45deg, #0a80d6 25%, #0a80d6 25%, transparent 25%, transparent 75%, #0a80d6 75%, #0a80d6 75%), linear-gradient(-45deg, #0a80d6 25%, #0a80d6 25%, transparent 25%, transparent 75%, #0a80d6 75%, #0a80d6 75%); text-align: center; padding: 40px 10px; margin: 20px; } #resusePC .main02 { width: 1200px; margin: 0 auto; } #resusePC .main03 { width: 1200px; margin: 0 auto; } #resusePC .main04 { width: 1200px; margin: 0 auto; } #resusePC .resusePC_quality { background-color: #fdfcf2; max-width: none; } #resusePC .resusePC_quality .content_inner { padding: 80px 0; width: 1200px; margin: 0 auto; } #resusePC .resusePC_quality .content_inner .quality_box { margin-bottom: 60px; } #resusePC .leftborder { font-size: 2em; padding: 10px 0; border-bottom: #555555 dotted 5px; margin-bottom: 30px; } #resusePC .leftborder span.left { display: block; border-left: solid 8px #ffcc00; padding-left: 20px; } #resusePC .resusePC_quality .content_inner .quality_box .txtbox { float: left; width: 660px; margin-right: 40px; font-size: 1.3em; line-height: 1.8em; } #resusePC .resusePC_point { margin: 0 auto 80px; width: 1200px; } #resusePC .resusePC_point h2 { margin-bottom: 20px; } #resusePC .resusePC_point h3 { font-size: 1.8em; text-align: center; } #resusePC .resusePC_point .item_box { display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-around; margin-top: 20px; } #resusePC .resusePC_point .item_box .item_img { border: #dddddd solid 1px; width: 290px; height: 290px; margin-bottom: 10px; } #resusePC .resusePC_point ul { margin-bottom: 30px; text-align: left; } #resusePC .resusePC_point ul li { list-style-type: none; line-height: 1.8em; font-size: 1.3em; } #resusePC .resusePC_page { width: 1200px; margin: 0 auto; text-align: center; } #resusePC .resusePC_page .page_btn { width: 400px; display: block; padding: 20px 0; margin: 20px auto; background-color: #001c58; color: #fff; font-weight: 700; font-size: 1.8em; border-radius: 40px; } #resusePC .resusePC_page .page_image { border: #dddddd solid 1px; width: 600px; margin: 0 auto 40px; } #resusePC .resusePC_page .page_btn a { color: #ffffff; text-decoration: none; } #resusePC .resusePC_page .page_btn a:hover { opacity: 0.7; } #resusePC .resusePC_page .text { font-size: 3em; font-weight: 700; text-align: center; } /* 商品詳細画面管理 SNSボタン -----------------------------------------*/ #r_sns ul li { margin-right: 3px; } /*商品ページ内 バナー2つ並び -----------------------------------------*/ .product_bnr2 { margin: 20px 0 0 0; } .product_bnr2 .inner { display: flex; justify-content: space-between; } .img { margin-bottom: 20px; } .p_bold { margin-bottom: 0!important; font-weight: 700; color: #333; } @media screen and (max-width: 480px) { /* 480px以下に適用されるCSS（スマホ用） */ .product_bnr2 .inner { display: block; } } /*商品ページ内 バナー2つ並び -----------------------------------------*/ /* LGgram2021 -----------------------------------------*/ #lggram2021 .main_inner { margin: 0 auto; } #lggram2021 .main_inner img { width: 100%; } #lggram2021 .entry_btn { margin-top: 60px; text-align: center; font-weight: bold; font-size: 20px; } #lggram2021 .entry_btn a { background-image: url("../imgbtn_icon.png"); background-repeat: no-repeat; background-position: right 30px center; background: linear-gradient(70deg, #40B6D2, #8BAEEF); width: 530px; display: inline-block; padding: 30px; text-decoration: none; color: #fff; box-sizing: border-box; } #lggram2021 .entry_btn a:hover { background-color: #780025; } #lggram2021 .content_main { padding-top: 100px; } #lggram2021 .content_inner { width: 1320px; margin: 0 auto; } #lggram2021 .content_link ul { width: 1100px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; justify-content: center; -webkit-align-items: center; align-items: stretch; } #lggram2021 .content_link ul li { width: 350px; margin-right: 25px; letter-spacing: 2px; } #lggram2021 .content_link ul li:last-child { margin-right: 0; } #lggram2021 .content_link ul a { position: relative; text-align: center; display: flex; justify-content: center; align-items: center; /* height: 100%; padding: 35px 25px; border: 2px solid linear-gradient(70deg, #40B6D2, #8BAEEF); */ text-decoration: none; color: #000; font-size: 16px; font-weight: bold; transition: all 0.5s ease; } #lggram2021 .content_link ul a:hover { color: #f73861; } #lggram2021 .content_link ul a span { background-image: url("../img/page/lg2021/link_btn_icon02.png"); background-repeat: no-repeat; background-position: left center; display: inline-block; padding-left: 20px; } /* #lggram2021 .content_link ul a:hover span { background-image: url("../imglink_btn_icon02.png"); } */ #lggram2021 h2 { margin-bottom: 68px; text-align: center; font-size: 30px; } #lggram2021 h2 span { position: relative; padding-bottom: 20px; } #lggram2021 h2 span:after { content: ""; width: 90px; height: 5px; margin-left: -45px; background: linear-gradient(70deg, #40B6D2, #8BAEEF); position: absolute; left: 50%; bottom: 0; } #lggram2021 h3 { text-align: center; font-size: 26px; } #lggram2021 .reason_content { padding: 90px 0; } #lggram2021 .reason_wrap { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; } #lggram2021 .reason_wrap .reason_box { margin: 30px 0; margin-right: 30px; } #lggram2021 .reason_box:nth-child(2n) { margin-right: 0; } #lggram2021 .reason_box .txtbox { background: #fff; position: relative; width: 515px; margin: -50px auto 0; padding: 40px 50px; box-shadow: 0 0 8px rgba(0, 0, 0, .2); box-sizing: border-box; border-top: solid 6px linear-gradient(70deg, #40B6D2, #8BAEEF); } #lggram2021 .reason_box .txtbox p { font-size: 13px; line-height: 23px; } #lggram2021 .reason_box .txtbox h3 { margin-bottom: 14px; font-size: 20px; } #lggram2021 .support_content { background: url("../imglggram_support_bg.jpg"); background-size: cover; padding: 90px 0; color: #fff; } #lggram2021 .support_content .support_box { display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-align-items: center; margin-bottom: 40px; } #lggram2021 .support_content .support_box:last-child { margin-bottom: 0; } #lggram2021 .support_box h3 { padding: 0 8px 18px; margin-bottom: 18px; border-bottom: 1px solid #666666; text-align: left; font-size: 22px; font-weight: bold; } #lggram2021 .support_box h3 span { padding-right: 10px; color: linear-gradient(70deg, #40B6D2, #8BAEEF); } #lggram2021 .support_box .txtbox { width: 100%; padding-left: 30px; } #lggram2021 .support_box .txtbox p { padding: 0 8px; font-size: 13px; line-height: 23px; color: #fff; } #lggram2021 .lineup_content { padding-top: 90px; } #lggram2021 .lineup_column { padding: 75px 0 100px; border-bottom: 1px solid #e6e6e6; } #lggram2021 .lineup_column:last-child { border-bottom: none; } #lggram2021 .lineup_wrap { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; } #lggram2021 .lineup_box { width: calc((100% - 3em - 1px) / 3); margin: 55px 1.5em 0 0; } #lggram2021 .lineup_box:nth-child(3n) { margin-right: 0; } #lggram2021 .lineup_box .image { margin: 0 auto 20px; width: 308px; } #lggram2021 .lineup_box .image img { width: 100%; height: auto; } #lggram2021 .lineup_box .txt { padding: 0 10px; } #lggram2021 .lineup_box h3 { margin-bottom: 22px; font-size: 22px; letter-spacing: 2px; text-align: center; } #lggram2021 .lineup_box p { color: #000; display: block; font-size: 12px; line-height: 20px; } #lggram2021 .lineup_box a { color: #000; text-decoration: none; } #lggram2021 .lineup_btn { text-align: center; margin-top: 20px; } #lggram2021 .lineup_btn a { background-image: url("../imgbtn_icon.png"); background-repeat: no-repeat; background-position: right 15px center; width: 100%; height: 75px; display: table; margin: 0 auto; padding: 15px; font-size: 15px; font-weight: bold; text-decoration: none; color: #fff; box-sizing: border-box; transition: all 0.5s ease; } #lggram2021 .lineup_btn a span { display: table-cell; vertical-align: middle; } #lggram2021 .lineup_btn.type01 a { background: linear-gradient(70deg, #40B6D2, #8BAEEF); } #lggram2021 .lineup_btn.type01 a:hover { background-color: #2a7552; } #lggram2021 .lineup_btn.type02 a { background-color: #2f2e46; } #lggram2021 .lineup_btn.type02 a:hover { background-color: #1a192e; } #lggram2021 .lineup_btn.type03 a { background-color: #ee5c02; } #lggram2021 .lineup_btn.type03 a:hover { background-color: #e33b01; } #lggram2021 .lineup_btn + .lineup_btn { margin-top: 8px; } #lggram2021 .lineup_model_wrap { margin-top: 45px; } #lggram2021 .lineup_model_box { background: url("../imgmodel_box_bg.jpg") no-repeat left center; width: 740px; margin: 0 auto; } #lggram2021 .lineup_model_box .txt_box { width: 445px; margin-left: auto; padding: 30px 15px; text-align: center; line-height: 1.3; box-sizing: border-box; } #lggram2021 .lineup_model_box .txt_box p { text-align: center; font-weight: bold; font-size: 15px; line-height: 1.4; color: #333; } #lggram2021 .lineup_model_box .txt_box .mod_lrtxt { margin-top: 20px; font-size: 26px; font-weight: bold; color: linear-gradient(70deg, #40B6D2, #8BAEEF); } #lggram2021 .lineup_model_box .lineup_model_btn { margin-top: 30px; text-align: center; } #lggram2021 .lineup_model_box .lineup_model_btn a { background-image: url("../imgbtn_icon.png"); background-repeat: no-repeat; background-position: 200px center; background-color: #4d4d4d; width: 240px; display: inline-block; padding: 15px; text-decoration: none; color: #fff; box-sizing: border-box; } #lggram2021 .lineup_model_box .lineup_model_btn a:hover { background-color: #3a3a3a; } #lggram2021 .reason_movie { display: flex; flex-wrap: wrap; justify-content: space-between; width: 1200px; margin: 0 auto; } #lggram2021 .reason_movie .item { margin-bottom: 20px; } #lggram2021 .reason_movie .item p { font-size: 1.2em; font-weight: 700; } /* lgultrapc2021 -----------------------------------------*/ #lgultrapc2021 .main_inner { margin: 0 auto; } #lgultrapc2021 .main_inner img { width: 100%; } #lgultrapc2021 .entry_btn { margin-top: 60px; text-align: center; font-weight: bold; font-size: 20px; } #lgultrapc2021 .entry_btn a { background-image: url("../imgbtn_icon.png"); background-repeat: no-repeat; background-position: right 30px center; background: linear-gradient(70deg, #f73861, #F69320); width: 530px; display: inline-block; padding: 30px; text-decoration: none; color: #fff; box-sizing: border-box; } #lgultrapc2021 .entry_btn a:hover { background-color: #780025; } #lgultrapc2021 .content_main { padding-top: 100px; } #lgultrapc2021 .content_inner { width: 1320px; margin: 0 auto; } #lgultrapc2021 .content_link ul { width: 1100px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; justify-content: center; -webkit-align-items: center; align-items: stretch; } #lgultrapc2021 .content_link ul li { width: 350px; margin-right: 25px; letter-spacing: 2px; } #lgultrapc2021 .content_link ul li:last-child { margin-right: 0; } #lgultrapc2021 .content_link ul a { position: relative; text-align: center; display: flex; justify-content: center; align-items: center; /* height: 100%; padding: 35px 25px; border: 2px solid linear-gradient(70deg, #f73861, #F69320); */ text-decoration: none; color: #000; font-size: 16px; font-weight: bold; transition: all 0.5s ease; } #lgultrapc2021 .content_link ul a:hover { color: #f73861; } #lgultrapc2021 .content_link ul a span { background-image: url("../img/link_btn_icon01.png"); background-repeat: no-repeat; background-position: left center; display: inline-block; padding-left: 20px; } /* #lgultrapc2021 .content_link ul a:hover span { background-image: url("../imglink_btn_icon02.png"); } */ #lgultrapc2021 h2 { margin-bottom: 68px; text-align: center; font-size: 30px; } #lgultrapc2021 h2 span { position: relative; padding-bottom: 20px; } #lgultrapc2021 h2 span:after { content: ""; width: 90px; height: 5px; margin-left: -45px; background: linear-gradient(70deg, #f73861, #F69320); position: absolute; left: 50%; bottom: 0; } #lgultrapc2021 h3 { text-align: center; font-size: 26px; } #lgultrapc2021 .reason_content { padding: 90px 0; } #lgultrapc2021 .reason_wrap { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; } #lgultrapc2021 .reason_wrap .reason_box { margin: 30px 0; margin-right: 30px; } #lgultrapc2021 .reason_box:nth-child(2n) { margin-right: 0; } #lgultrapc2021 .reason_box .txtbox { background: #fff; position: relative; width: 515px; margin: -50px auto 0; padding: 40px 50px; box-shadow: 0 0 8px rgba(0, 0, 0, .2); box-sizing: border-box; border-top: solid 6px linear-gradient(70deg, #f73861, #F69320); } #lgultrapc2021 .reason_box .txtbox p { font-size: 13px; line-height: 23px; } #lgultrapc2021 .reason_box .txtbox h3 { margin-bottom: 14px; font-size: 20px; } #lgultrapc2021 .support_content { background: url("../imglggram_support_bg.jpg"); background-size: cover; padding: 90px 0; color: #fff; } #lgultrapc2021 .support_content .support_box { display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-align-items: center; margin-bottom: 40px; } #lgultrapc2021 .support_content .support_box:last-child { margin-bottom: 0; } #lgultrapc2021 .support_box h3 { padding: 0 8px 18px; margin-bottom: 18px; border-bottom: 1px solid #666666; text-align: left; font-size: 22px; font-weight: bold; } #lgultrapc2021 .support_box h3 span { padding-right: 10px; color: linear-gradient(70deg, #f73861, #F69320); } #lgultrapc2021 .support_box .txtbox { width: 100%; padding-left: 30px; } #lgultrapc2021 .support_box .txtbox p { padding: 0 8px; font-size: 13px; line-height: 23px; color: #fff; } #lgultrapc2021 .lineup_content { padding-top: 90px; } #lgultrapc2021 .lineup_column { padding: 75px 0 100px; border-bottom: 1px solid #e6e6e6; } #lgultrapc2021 .lineup_column:last-child { border-bottom: none; } #lgultrapc2021 .lineup_wrap { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; } #lgultrapc2021 .lineup_box { width: calc((100% - 3em - 1px) / 3); margin: 55px 1.5em 0 0; } #lgultrapc2021 .lineup_box:nth-child(3n) { margin-right: 0; } #lgultrapc2021 .lineup_box .image { margin: 0 auto 20px; width: 308px; } #lgultrapc2021 .lineup_box .image img { width: 100%; height: auto; } #lgultrapc2021 .lineup_box .txt { padding: 0 10px; } #lgultrapc2021 .lineup_box h3 { margin-bottom: 22px; font-size: 22px; letter-spacing: 2px; text-align: center; } #lgultrapc2021 .lineup_box p { color: #000; display: block; font-size: 12px; line-height: 20px; } #lgultrapc2021 .lineup_box a { color: #000; text-decoration: none; } #lgultrapc2021 .lineup_btn { text-align: center; margin-top: 20px; } #lgultrapc2021 .lineup_btn a { background-image: url("../imgbtn_icon.png"); background-repeat: no-repeat; background-position: right 15px center; width: 100%; height: 75px; display: table; margin: 0 auto; padding: 15px; font-size: 15px; font-weight: bold; text-decoration: none; color: #fff; box-sizing: border-box; transition: all 0.5s ease; } #lgultrapc2021 .lineup_btn a span { display: table-cell; vertical-align: middle; } #lgultrapc2021 .lineup_btn.type01 a { background: linear-gradient(70deg, #f73861, #F69320); } #lgultrapc2021 .lineup_btn.type01 a:hover { background-color: #2a7552; } #lgultrapc2021 .lineup_btn.type02 a { background-color: #2f2e46; } #lgultrapc2021 .lineup_btn.type02 a:hover { background-color: #1a192e; } #lgultrapc2021 .lineup_btn.type03 a { background-color: #ee5c02; } #lgultrapc2021 .lineup_btn.type03 a:hover { background-color: #e33b01; } #lgultrapc2021 .lineup_btn + .lineup_btn { margin-top: 8px; } #lgultrapc2021 .lineup_model_wrap { margin-top: 45px; } #lgultrapc2021 .lineup_model_box { background: url("../imgmodel_box_bg.jpg") no-repeat left center; width: 740px; margin: 0 auto; } #lgultrapc2021 .lineup_model_box .txt_box { width: 445px; margin-left: auto; padding: 30px 15px; text-align: center; line-height: 1.3; box-sizing: border-box; } #lgultrapc2021 .lineup_model_box .txt_box p { text-align: center; font-weight: bold; font-size: 15px; line-height: 1.4; color: #333; } #lgultrapc2021 .lineup_model_box .txt_box .mod_lrtxt { margin-top: 20px; font-size: 26px; font-weight: bold; color: linear-gradient(70deg, #f73861, #F69320); } #lgultrapc2021 .lineup_model_box .lineup_model_btn { margin-top: 30px; text-align: center; } #lgultrapc2021 .lineup_model_box .lineup_model_btn a { background-image: url("../imgbtn_icon.png"); background-repeat: no-repeat; background-position: 200px center; background-color: #4d4d4d; width: 240px; display: inline-block; padding: 15px; text-decoration: none; color: #fff; box-sizing: border-box; } #lgultrapc2021 .lineup_model_box .lineup_model_btn a:hover { background-color: #3a3a3a; } #lgultrapc2021 .reason_movie { display: flex; flex-wrap: wrap; justify-content: space-between; width: 1200px; margin: 0 auto; } #lgultrapc2021 .reason_movie .item { margin-bottom: 20px; } #lgultrapc2021 .reason_movie .item p { font-size: 1.2em; font-weight: 700; } /* オンラインサポート202104 -----------------------------------------*/ @charset "utf-8"; #onlinesp202104 html { font-size: 62.5%; } #onlinesp202104 body { box-sizing: border-box; color: #333333; } #onlinesp202104 main { position: relative; /* top: 60px;*/ } #onlinesp202104 div,p img { max-width: 100%; vertical-align: bottom; } #onlinesp202104 .display-none{ display:none; } #onlinesp202104 .fadein { opacity : 0; transform : translate(0, 100px); transition : all 1.5s; } #onlinesp202104 .fadein.active{ opacity : 1; transform : translate(0, 0); } #onlinesp202104 .fade_off { opacity: 0; -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -o-transition: all 1.5s; -ms-transition: all 1.5s; transition: all 1.5s; } #onlinesp202104 .fade_on { opacity: 1; } @media screen and (max-width: 768px) { } #onlinesp202104 .imgfix { max-width: 100%; } /* レスポンシブ表示/非表示切り替え */ .pc { display:block; } .pc_menu { display:block; } .pc-i { display:inline; } .sp { display:none; } .menu { display:none; } @media screen and (max-width: 980px) { .pc_menu { display:none; } .menu { display:block } } @media screen and (max-width: 768px) { .pc { display:none; } .pc-i { display:none; } .sp { display:block; } } /* ゴシックのみ指定(游ゴシック体, 'Yu Gothic', YuGothic除外) */ #onlinesp202104 .f-Gothic { font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; } /* 明朝体指定 */ #onlinesp202104 .f-mincho { font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; } /* #all_bg { top: 60px; } */ /* 共通Wrapper ----------------------------------------- */ #onlinesp202104 .wrapper { width: 100%; } #onlinesp202104 .wrapper-block { max-width: 1200px; margin: 0 auto; text-align: center; } /* 両側に隙間をあけたい場合 */ #onlinesp202104 .wrapper-block_space { max-width: 1200px; margin: 0 auto; padding: 0px; } /* section { padding: 100px 0; } */ #onlinesp202104 .container { width: 100%; padding: 0; text-align: center; } /* 両側に隙間をあけたい場合 */ #onlinesp202104 .container_space { width: 100%; padding: 0 2%; text-align: center; } .container-w100_flex { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-evenly; } .container-w100_flexbwn { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; align-items: center; } .container-w100_flexend { display: flex; width: 100%; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .container-w100_flex_center { display: flex; width: 100%; flex-wrap: wrap; justify-content: center; align-items: center; } .container-w100_flex_start { display: flex; width: 100%; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; } @media screen and (max-width: 1200px) { .wrapper-block { width: 94%; margin: 0 auto; } .wrapper-block_space { width: 94%; margin: 0 auto; } section { padding: 0 0 10%; } } @media screen and (max-width: 768px) { section { } .container { } } /*共通モジュール*/ .ptb_120 { padding: 120px 0; } .pt_120 { padding-top: 120px 0; } .pb_120 { padding-bottom: 120px 0; } .mb_120{ margin-bottom: 120px; } .mb_80{ margin-bottom: 80px; } .mb_40{ margin-bottom: 40px; } .cmn-3c-box { width: 30%; } @media screen and (max-width: 768px) { .cmn-3c-box { width: 80%; margin: 0 auto 10% auto; } } .cmn-imgbox{ border: 1px dotted #222222; } .cmn-blueline-box { width: 100%; border: 2px solid #007ad7; background-color: #FFFFFF; padding: 15px; } .cmn-whiteline-box { width: 100%; border: 1px dotted #222222; background-color: #FFFFFF; padding: 7px; } .cmn-blue-box { width: 100%; background-color: #007ad7; padding: 5px 0; text-align: center; color: #FFFFFF; font-size: 24px; } .cmn-white-box { width: 100%; padding: 25px 0 22px 0; text-align: center; color: #222222; font-size: 20px; } .cmn-txt-box { padding: 20px 0 15px 0; font-size: 18px; text-align: left; line-height: 1.5; } .cmn-linktxt-box { width: 80%; margin: 0 auto; font-size: 16px; } @media screen and (max-width: 768px) { .cmn-linktxt-box { width: 95%; margin: 0 auto; font-size: 16px; } .cmn-txt-box { padding: 20px 0 5px 0; font-size: 14px; text-align: left; line-height: 1.5; } } .link_support { width: 100%; } .cmn-blue-box_s { width: 100%; background-color: #007ad7; padding: 5px 0 7px 0; text-align: center; color: #FFFFFF; font-size: 16px; } .cmn-white-box_s { width: 100%; padding: 25px 0 22px 0; border-bottom: 0px solid #222222; text-align: center; color: #222222; font-size: 16px; } .cmn-white-box_s02 { width: 100%; padding: 25px 0 22px 0; border-bottom: 0px solid #222222; text-align: center; color: #222222; font-size: 16px; } .cmn-txt-box_s { width: 100%; padding: 20px 0 15px 0; font-size: 14px; text-align: left; line-height: 1.5; } .cmn-border { width: 100%; height: 1px; border-bottom: 1px dotted #222222; margin: 0 auto; } .cmn-borders { width: 30%; height: 1px; background-color: #222222; margin: 0 auto; } .cmn-movie-txt { display: inline-block; width: 90px; margin-right: 20px; padding: 3px 0 2px 0; background-color: #FFFFFF; font-size: 12px; color: #007ad7; text-align: center; border: 1px dotted #222222; } .link_plandetail { display: inline-block; width: 75%; margin: 0 auto; padding: 10px; background-color: #007ad7; text-align: center; color: #FFFFFF; font-size: 24px; font-weight: 600; } .link_plandetail_top { display: inline-block; width: 75%; height: 80px; margin: 0 auto; padding: 30px 10px 10px 10px; background-color: #d5a33f; background-image: url(../images/inq_online.png); background-position: 10% 50%; background-size: 8%; background-repeat: no-repeat; text-align: center; color: #FFFFFF; font-size: 24px; font-weight: 600; } @media screen and (max-width: 1200px) { .link_plandetail_top { width: 90%; padding: 30px 10px 10px 10px; background-color: #d5a33f; background-image: url(../images/inq_online.png); background-size: 7%; } } @media screen and (max-width: 768px) { .link_plandetail_top { display: inline-block; width: 90%; margin: 0 auto; padding: 25px 0 0 50px; background-color: #d5a33f; background-image: url(../images/inq_online.png); background-position: 5% 50%; background-size: auto 70%; background-repeat: no-repeat; text-align: center; color: #FFFFFF; font-size: 18px; font-weight: 600; } .link_support { margin-bottom: 10%; } .link_plandetail { display: inline-block; width: 100%; margin: 0 auto; padding: 10px; background-color: #007ad7; text-align: center; color: #FFFFFF; font-size: 24px; font-weight: 600; } } .link_application { display: inline-block; width: 80%; margin: 10px auto 0 auto; padding: 10px; background-color: #007ad7; text-align: center; color: #FFFFFF; font-size: 20px; font-weight: 600; } .link_application_h { display: inline-block; width: 90%; margin: 10px auto 0 auto; padding: 10px; background-color: #007ad7; text-align: center; color: #FFFFFF; font-size: 20px; font-weight: 600; } .link_application_h { display: inline-block; width: 100%; margin: 10px auto 0 auto; padding: 10px; background-color: #007ad7; text-align: center; color: #FFFFFF; font-size: 16px; font-weight: 600; } .link_app_year { display: inline-block; width: 80%; margin: 10px auto 0 auto; padding: 10px; background-color: #007ad7; text-align: center; color: #FFFFFF; font-size: 12px; font-weight: 600; margin-bottom: 20px; } .link_app_year:last-child { margin-bottom: 0px; } .link_tanpin { display: inline-block; width: 50%; margin: 5px auto 0 auto; padding: 5px 0; text-align: center; background-color: #007ad7; font-size: 12px; color: #FFFFFF; } .link_detail { display: inline-block; height: 30px; border: 1px solid #0e487f; margin-top: 20px; padding: 7px 40px 5px 15px; color: #0e487f; background-color: #FFFFFF; background-image: url(../images/link_tri.png); background-position: 95% 50%; background-size: 15%; background-repeat: no-repeat; } .link_detail_online { display: inline-block; height: 30px; font-size: 16px; border: 1px solid #0e487f; margin-bottom: 20px; padding: 7px 50px 5px 15px; color: #0e487f; background-color: #FFFFFF; background-image: url(../images/link_tri.png); background-position: 95% 50%; background-size: 15%; background-repeat: no-repeat; } .link_detail_online_movie { display: inline-block; height: 30px; font-size: 16px; border: 1px solid #0e487f; margin-bottom: 20px; padding: 7px 50px 5px 15px; color: #0e487f; background-color: #FFFFFF; background-image: url(../images/movie_icon_pc.png); background-position: 95% 50%; background-size: 15%; background-repeat: no-repeat; } #link_detail_service { display: inline-block; height: 30px; border: 1px solid #0e487f; margin-top: 20px; padding: 3px 70px 5px 15px; color: #0e487f; background-color: #FFFFFF; background-image: url(../images/link_tri.png); background-position: 95% 50%; background-size: 12%; background-repeat: no-repeat; } #link_detail_servicemem { display: inline-block; height: 30px; border: 1px solid #0e487f; margin-top: 20px; padding: 3px 85px 5px 15px; color: #0e487f; background-color: #FFFFFF; background-image: url(../images/link_tri.png); background-position: 95% 50%; background-size: 12%; background-repeat: no-repeat; } #link_detail_serviceonline { display: inline-block; height: 30px; border: 1px solid #0e487f; margin-top: 20px; padding: 3px 70px 5px 15px; color: #0e487f; background-color: #FFFFFF; background-image: url(../images/link_tri.png); background-position: 95% 50%; background-size: 12%; background-repeat: no-repeat; } .link_detail_movie { display: inline-block; height: 30px; border: 1px solid #0e487f; margin-top: 20px; padding: 7px 40px 5px 15px; color: #0e487f; background-color: #FFFFFF; background-image: url(../images/movie_icon_pc.png); background-position: 95% 60%; background-size: 12%; background-repeat: no-repeat; } #link_detail_service { display: inline-block; height: 30px; border: 1px solid #0e487f; margin-top: 20px; padding: 3px 70px 5px 15px; color: #0e487f; background-color: #FFFFFF; background-image: url(../images/link_tri.png); background-position: 95% 50%; background-size: 12%; background-repeat: no-repeat; } @media screen and (max-width: 768px) { #link_detail_service { padding: 7px 70px 5px 15px; } #link_detail_servicemem { padding: 7px 65px 5px 5px; } #link_detail_serviceonline { padding: 7px 70px 5px 15px; } .link_tanpin { width: 170px; margin: 5px auto 0 auto; padding: 5px 0; } } .plan-planbox { width: 100%; padding: 40px; text-align: center; } .plan-planbox_std { background-color:#6fa5d9; padding: 20px; } .plan-planbox_gold { background-color:#dda73e; padding: 20px; } .plan-planbox_platinum { background-color:#333333; padding: 20px; } .plan-planbox_name { font-size: 30px; font-weight: 600; color: #FFFFFF; padding: 20px 0; } .plan-planbox_detail { font-size: 18px; color: #FFFFFF; margin-bottom: 20px; } .plan-planbox_detail_h { border-bottom: 1px dotted #FFFFFF; padding-bottom: 20px; font-size: 18px; color: #FFFFFF; margin-bottom: 40px; } .plan-planbox_feebox { width: 100%; padding: 15px; margin-bottom: 20px; background-color: #FFFFFF; } .plan-planbox_feebox_h { width: 100%; padding: 20px 15px; margin-bottom: 20px; background-color: #FFFFFF; } .plan-planbox_feebox_l { font-size: 42px; font-weight: 600; } .plan-planbox_feebox_m { font-size: 18px; } .plan-planbox_feebox_s { font-size: 14px; } /*.line { border-top: 2px solid #EEEEEE; }*/ .bg-blue { background-color: #007ad7; } /* h2 { font-size: 36px; } .service-ttl { margin-bottom: 20px; } */ h2.service-ttl { font-size: 36px; margin-bottom: 20px; border-top: none!important; } .service-box { width: 50%; margin: 0 auto 80px auto; } .service-icon { width: 180px; height: 30px; padding: 7px 5px 5px 5px; color: #FFFFFF; text-align: center; font-size: 18px; } .service-std { background-color: #6fa5d9; } .service-gold { background-color: #dda73e; } .service-plattinum { background-color: #333333; } .service-mainbox { align-items: center; } .service-lead_txt { width: 60%; text-align: left; } .service-lead_img { width: 35%; border: 1px dotted #222222; padding: 7px; } .service-lead{ font-size: 28px; margin-bottom: 20px; line-height: 1.2; text-align: left; } .service-lead_sub { font-size: 18px; line-height: 1.5; text-align: left; } .service-lead_link { font-size: 18px; text-align: right; } .service-lead_desc { font-size: 14px; margin-top: 20px; text-align: right; } .service-expbox_bg { background-color: #edf2f6; padding: 20px; } .service-pointbox-ttl { margin-bottom: 20px; font-size: 22px; font-weight: 600; padding: 15px; color: #222222; border-bottom: 1px dotted #222222; } .service-pointlead_img { width: 20%; } .service-pointlead_sub { width: 75%; font-size: 18px; line-height: 1.5; text-align: left; } .service_strong { background-color: #007ad7; font-size: 22px; font-weight: 600; color: #FFFFFF; } .plan-planbox_desc { font-size: 12px; padding-top: 5px; text-align: center; background-color: #FFFFFF; } @media screen and (max-width: 768px) { .service-box { width: 90%; margin: 0 auto 10% auto; } .service-icon { width: 30%; padding: 9px 5px 7px 5px; color: #FFFFFF; text-align: center; font-size: 12px; } .service-lead { text-align: center; } .service-lead_txt { width: 100%; text-align: left; } .service-lead_img { width: 80%; margin: 20px auto 0 auto; border: 1px dotted #222222; padding: 7px; } .service-lead_link { margin: 0 auto; font-size: 16px; } .service-pointlead_img { width: 50%; margin: 0 auto; } .service-pointlead_sub { width: 100%; font-size: 18px; line-height: 1.5; text-align: left; } } @media screen and (min-width: 2000px) { #mainvisual-area { background-position: 50% 30%; background-size: 100% auto; } } @media screen and (max-width: 1200px) { #mainlogo_box { margin-left: 10px; } #mainvisual-area { background-position: 130% 60%; background-size: auto 115%; background-repeat: no-repeat; } #mainvisual { height: 300px; padding-bottom: calc(735/1200*100%); } #mainvisual_ttl{ position: absolute; width: 60%; top: 150px; right: 0px; } } @media screen and (max-width: 768px) { #mainlogo_box { margin-top: 5px; margin-left: -30px; } #mainlogo_size { width: 75%; } #mainvisual-area { background-position: 100% 60%; background-size: auto 120%; background-repeat: no-repeat; } #mainvisual_ttl{ position: absolute; width: 60%; top: 70px; right: 0px; } } @media screen and (max-width: 420px) { #mainvisual_ttl{ position: absolute; width: 75%; top: 60px; right: 0px; } } /* サブキャッチ帯 */ /* #leadtxt-area { background-color: #007ad7; padding: 30px; } #leadtxt-area_txt { color: #FFFFFF; font-size: 36px; text-align: center; } .lead-area_txt { font-size: 18px; margin-bottom: 40px; line-height: 1.5; text-align: left; } */ /* @media screen and (max-width: 768px) { #leadtxt-area { background-color: #007ad7; padding: 4%; } #leadtxt-area_txt { color: #FFFFFF; font-size: 22px; text-align: center; } } */ /* リードコンテンツ領域 */ .lead-area-result_ttl { text-align: center; font-size: 24px; /* margin-bottom: 20px;*/ margin-bottom: 40px; } .lead-area-result_num { text-align: center; margin-bottom: 20px; font-size: 24px; } .lead-area-result_chara { font-size: 36px; font-weight: 600; } .lead-area-result_number { font-size: 60px; font-weight: 600; color: #007ad7; } .lead-area-result_disc { font-size: 12px; text-align: right; } .lead-area_midashi { font-size: 30px; margin-bottom: 60px; text-align: center; } #ap-result-area { background-color: #edf2f6; } #lead-area-result-area { background-color: #d9e9ea; } #bnrarea-bg { background-color: #d9e9ea; } @media screen and (max-width: 768px) { #lead-area-result_box .cmn-3c-box { width: 100%; } .lead-area_midashi { line-height: 32px; } } /* プラン冒頭 */ #plantop-titlearea { background-color: #007ad7; } #plantop-titlearea_title { align-items: center; } #plantop-titlearea_img { width: 45%; text-align: center; } #plantop-titlearea_txt { width: 50%; background-color: #007ad7; text-align: center; } @media screen and (max-width: 768px) { #plantop-titlearea_img { width: 80%; margin: 5% auto 10% auto; } #plantop-titlearea_txt { width: 100%; } } #plantop-detailarea { width: 100%; padding: 45px 25px 25px 25px; background-color: #FFFFFF; } @media screen and (max-width: 768px) { #plantop-detailarea .cmn-3c-box { width: 100% } .plan-planbox_std { padding: 10px; } } #plantop-detailarea_midashi { font-size: 28px; margin-bottom: 20px; text-align: center; } #plantop-detailarea_midashi_sub { font-size: 24px; margin-bottom: 20px; text-align: center; } #plantop-detailarea_midashi_desc { font-size: 14px; margin-bottom: 40px; text-align: center; } .plantop-planbox_plannamebox { display: inline-block; width: 100%; padding: 15px; margin-bottom: 20px; background-color: #FFFFFF; text-align: center; font-size: 24px; color: #222222; } .plantop-planbox_plannamebox:hover { background-color: #007ad7; color: #FFFFFF; } .plantop-prembox { background-color: #edf2f6; padding: 20px; margin-bottom: 20px; } .plantop-prembox_ttl { align-items: center; } .plantop-prembox_ttl01 { width: 27%; font-size: 18px; background-color: #0e487f; text-align: center; padding: 10px; color: #FFFFFF; } .plantop-prembox_ttl02 { width: 29%; font-size: 18px; text-align: right; } .plantop-prembox_ttl03 { width: 36%; font-size: 32px; font-weight: 600; text-align: left; } .plantop-prembox_detail { align-items: center; background-color: #edf2f6; padding: 20px 20px 0px 20px; } .plantop-prembox_detail-box { width: 48%; } .plantop-prembox_detail-box_link { text-align: right; } .plantop-prembox_detail-box_txt { font-size: 18px; text-align: left; line-height: 1.2; } .plantop_howtolink { width: 60%; margin: 0 auto 60px auto; display: inline-block; border: 1px dotted #222222; padding: 15px; font-size: 22px; font-weight: 600; color: #007ad7; background-color: #FFFFFF; } .plantop_howtolink:hover { color: #FFFFFF; background-color: #007ad7; transition: 0.5s; } @media screen and (max-width: 768px) { .plantop-prembox_ttl01 { width: 100%; font-size: 18px; background-color: #0e487f; text-align: center; padding: 10px; color: #FFFFFF; margin-bottom: 10px; } .plantop-prembox_ttl02 { width: 100%; font-size: 18px; text-align: center; margin-bottom: 10px; } .plantop-prembox_ttl03 { width: 100%; font-size: 26px; font-weight: 600; text-align: center; margin-bottom: 10px; } .plantop-prembox_detail-box_link { text-align: center; margin-bottom: 20px; } .plantop-prembox_detail-box { width: 100%; } .plantop_howtolink { width: 100%; } } .plantop-point-ttl { margin-bottom: 20px; padding: 0 20px 15px 0px; font-size: 22px; font-weight: 600; border-bottom: 1px dotted #FFFFFF; color: #FFFFFF; text-align: center; } .plantop-point-txt { font-size: 18px; color: #FFFFFF; text-align: left; line-height: 1.2; } @media screen and (max-width: 768px) { .plan-planbox_std_sp { background-color:#6fa5d9; padding: 20px 20px 0px 20px; } .plan-planbox_gold_sp { background-color:#dda73e; padding: 20px 20px 0px 20px; } .plan-planbox_platinum_sp { background-color:#333333; padding: 20px 20px 0px 20px; } } /* AI */ /* 電話リモート */ .remote-inrmidashi { text-align: center; font-size: 28px; color: #222222; margin-bottom: 40px; } .remote-operation { width: 48%; } .remote-icon { width: 18%; text-align: center; margin-bottom: 20px; } #remote_disc { font-size: 12px; text-align: right; } @media screen and (max-width: 768px) { .remote-icon { width: 46%; text-align: center; margin-bottom: 20px; } } /* pickup */ .pickup-2c-box_l { width: 30% } .pickup-2c-box_r { width: 65% } @media screen and (max-width: 768px) { .pickup-2c-box_l { width: 80%; margin: 0 auto 10% auto; } .pickup-2c-box_r { width: 80%; margin: 0 auto; } } /* 下部プラン */ .planbtm-boxwidth { width: 32%; } #planbtm-title-box { width: 80%; margin: 0 auto 80px auto; } #planbtm-title-inrbox { align-items: center; justify-content: center; } #planbtm-title-box_cap { font-size: 21px; font-weight: 600; color: #007ad7; padding: 10px 20px; margin-right: 30px; background-color: #FFFFFF; } #planbtm-title-box_ttl { font-size: 30px; font-weight: 600; color: #FFFFFF; } #planbtm-title-box_desc { font-size: 14px; margin-top: 20px; text-align: center; color: #FFFFFF; } .planbtm-underline { padding-bottom: 10px; border-bottom: 1px solid #FFFFFF; } .planbtm-fee-box { justify-content: center; align-items: center; } .planbtm-fee-box_menu { margin-right: 10px; padding-top: 7px; font-size: 14px; color: #FFFFFF; } .planbtm-fee-box_menu_h { padding-bottom: 10px; margin-right: 10px; font-size: 14px; color: #FFFFFF; } .planbtm-fee-box_fee { margin-right: 10px; padding-top: 5px; font-size: 26px; font-weight: 600; color: #FFFFFF; } .planbtm-fee-box_fee-m { font-size: 10px; font-weight: 400; color: #FFFFFF; } .planbtm-fee-box_off { width: 40px; height: 40px; border-radius: 3px; background-color: #FFFFFF; text-align: center; font-size: 12px; font-weight: 600; color: #007ad7; padding: 8px 3px 5px 3px; } .planbtm-fee-box_year { font-size: 14px; color: #FFFFFF; margin: 10px auto 0px auto; } #planbtm-detail-box { background-color: #FFFFFF; text-align: center; padding: 40px; color: #222222; } .planbtm-detail-box_ttl { font-size: 28px; margin-bottom: 20px; } .planbtm-detail-box_ttl_desc { font-size: 14px; margin-bottom: 40px; } .planbtm-detail-box-servicebox { width: 50%; margin: 0 auto 40px auto; } .planbtm-detail-box_cmnttl { padding: 15px 0; border-bottom: 1px solid #DDDDDD; } .planbtm-detail-box_cmn { padding: 15px 0; border-bottom: 1px solid #DDDDDD; } .planbtm-detail-box_cmn:hover { background-color: #fcffe8; } .planbtm-detail-box_sptttl { width:75%; font-size: 20px; text-align: center; color: #FFFFFF; font-weight: 600; background-color: #007ad7; padding: 20px 0; } .planbtm-detail-box_planname-s { font-size: 10px; } .planbtm-detail-box_std { background-color:#6fa5d9; font-weight: 600; padding: 5px; } .planbtm-detail-box_gold { background-color:#dda73e; font-weight: 600; color: #FFFFFF; padding: 5px; } .planbtm-detail-box_platinum { background-color:#333333; font-weight: 600; color: #FFFFFF; padding: 5px; } .planbtm-detail-box_name01 { width: 75%; text-align: left; } .planbtm-detail-box_plan { width: 8%; font-size: 20px; text-align: center; padding: 15px 0; } .planbtm-detail-box_planname { font-size: 18px; padding-bottom: 10px; } .planbtm-detail-box_desc { font-size: 14px; } .planbtm-pointbox { border: 1px dotted #FFFFFF; background-color: #007ad7; padding: 15px; } #plantop-pointbox { width: 95%; margin: 0 auto 40px auto; } .planbtm-pointinrbox { padding: 15px; background-color: #007ad7; text-align: left; font-size: 18px; line-height: 1.2; color: #FFFFFF; } .planbtm-pointlead_box { width: 75%; } .planbtm-pointlead_img { width: 20%; } .planbtm-pointlead_txt { font-size: 20px; color: #fff; padding-bottom: 15px; border-bottom: 1px dotted #FFFFFF; margin-bottom: 20px; line-height: 1.5; text-align: left; } .planbtm-pointlead_sub { font-size: 18px; color: #fff; line-height: 1.5; text-align: left; } .planbtm-detail-box_sptttl02 { width: 63%; font-size: 20px; text-align: center; color: #FFFFFF; font-weight: 600; background-color: #007ad7; padding: 20px 0; } #planbtm-detail-box_bg-pc { background-image: url(../images/bg-icon_pc.png); background-position: 25% 50%; background-size: 8%; background-repeat: no-repeat; } #planbtm-detail-box_bg-sp { background-image: url(../images/bg-icon_sp.png); background-position: 25% 50%; background-size: 3%; background-repeat: no-repeat; } .planbtm-detail-box_subname { width: 100%; padding: 10px 0; text-align: center; background-color: #d9e9ea; font-size: 18px; } .planbtm-detail-box_name02 { width: 63%; text-align: left; } .planbtm-detail-box_costttl { width: 12%; text-align: center; font-size: 14px; color: #FFFFFF; background-color: #007ad7; padding: 16px 0; } .planbtm-detail-box_cost { width: 12%; text-align: center; font-size: 14px; } .planbtm-detail-box_spcost { display: none; } .planbtm-hr { width: 50%; margin: 0 auto 20px auto; height: 1px; border-bottom: 1px dotted #FFFFFF; } .planbtm_h_monthbox { width: 24%; } .planbtm_y_monthbox { width: 75%; padding-bottom: 20px; } .planbtm_y_monthbox .cmn-3c-box { width: 32%; } .planbtm_howtolink { width: 60%; margin: 0 auto 60px auto; display: inline-block; border: 1px dotted #FFFFFF; padding: 15px; font-size: 22px; font-weight: 600; color: #FFFFFF!important; background-color: #007ad7; } .planbtm_howtolink:hover { color: #007ad7; background-color: #FFFFFF; transition: 0.5s; } @media screen and (max-width: 768px) { #planbtm-title-box_cap { font-size: 21px; font-weight: 600; color: #007ad7; padding: 10px 20px; margin-bottom: 20px; margin-right: 30px; background-color: #FFFFFF; } #planbtm-title-box_ttl { font-size: 30px; font-weight: 600; color: #FFFFFF; } #planbtm-area .cmn-3c-box { width: 100%; } .planbtm-detail-box_cmnttl { padding: 15px 0; border-bottom: 1px solid #DDDDDD; align-items: center; } .planbtm-pointlead_box { width: 100%; margin: 0 auto; } .planbtm-pointlead_img { width: 50%; margin: 0 auto; } .planbtm-detail-box-servicebox { width: 90%; margin: 0 auto 40px auto; } #planbtm-detail-box_bg-pc { background-image: url(../images/bg-icon_pc.png); background-position: 5% 50%; background-size: 15%; background-repeat: no-repeat; } #planbtm-detail-box_bg-sp { background-image: url(../images/bg-icon_sp.png); background-position: 5% 50%; background-size: 7%; background-repeat: no-repeat; } #planbtm-detail-box { background-color: #FFFFFF; text-align: center; padding: 40px 10px; color: #222222; } .planbtm-detail-box_sptttl { width:75%; font-size: 16px; text-align: center; color: #FFFFFF; font-weight: 600; background-color: #007ad7; padding: 15px 0; } .planbtm-detail-box_plan { width: 8%; font-size: 20px; text-align: center; padding: 13px 0; } .planbtm-detail-box_sptttl02 { width: 75%; font-size: 16px; text-align: right; color: #FFFFFF; font-weight: 600; background-color: #007ad7; padding: 16px 10px 16px 0; } .planbtm-detail-box_name02 { width: 75%; text-align: left; } .planbtm-detail-box_costttl { display: none; width: 12%; text-align: center; font-size: 14px; color: #FFFFFF; background-color: #007ad7; padding: 11px 0; } .planbtm-detail-box_cost { display: none; width: 12%; text-align: center; font-size: 14px; } .planbtm-detail-box_planname { font-size: 16px; padding-bottom: 10px; } .planbtm-detail-box_desc { font-size: 12px; } .planbtm-detail-box_spcost { display: block; margin-top: 10px; font-size: 12px; } .planbtm-detail-box_subname_sub { margin-top: 10px; font-size: 12px; } .planbtm_howtolink { width: 100%; } } /* バナーエリア */ .bnrarea-box { width: 45%; } .bnrarea-hr { padding-top: 20px; } .bnrarea-txt { padding-top: 20px; font-size: 22px; text-align: center; } @media screen and (max-width: 768px) { .bnrarea-box { width: 100%; margin: 0 auto 10% auto; } .bnrarea-box:last-child { margin: 0 auto 0 auto; } .bnrarea-hr { padding-top: 20px; } .bnrarea-txt { padding-top: 20px; font-size: 18px; text-align: center; } } /* 店舗 */ #shop_area { padding: 100px 0 0px 0; } #shop_area a { color: #FFFFFF; } #shopinr_area { margin-bottom: 40px; } .shop_bg { background-color: #333333; color: #FFFFFF; } .shop-title_box { width: 15%; color: #FFFFFF; font-size: 1.4rem; } .shop_box{ width: 25%; } summary { text-align: left; margin-left: 20px; font-size: 1.6rem; outline: none; } .sub-sum { margin-bottom: 20px; } .shop_subttl { margin: 10px 0 20px 25px; font-size: 1.4rem; } .shop_subsum { margin: 10px 0 10px 45px; font-size: 1.4rem; } .shop_subsum a { color: #FFFFFF; } .shop_shoptxt { margin: 0 0 10px 70px; font-size: 1.4rem; } .shop_subsum02 { margin: 10px 0 20px 45px; font-size: 1.4rem; } #copyright { width: 100%; background-color: #333333; text-align: center; font-size: 1.0rem; padding: 40px 0 20px 0; } @media screen and (max-width: 768px) { .shop-title_box { width: 100%; text-align: center color: #FFFFFF; font-size: 2.0rem; margin-bottom: 8%; } .shop_box{ width: 100%; margin-bottom: 40px; } summary { margin-bottom: 4%; } } /*リンクの形状*/ #page-top a{ display: flex; justify-content:center; align-items:center; background-image: url(../images/pagetop_link.png); background-size: 100%; width: 100px; height: 100px; transition:all 0.3s; } #page-top a:hover{ background-image: url(../images/pagetop_link_on.png); } /*リンクを右下に固定*/ #page-top { position: fixed; right: 10px; bottom:10px; z-index: 2; /*はじめは非表示*/ opacity: 1; transform: translateY(100px); } /*　上に上がる動き　*/ #page-top.UpMove{ animation: UpAnime 0.5s forwards; } @keyframes UpAnime{ from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } /*　下に下がる動き　*/ #page-top.DownMove{ animation: DownAnime 0.5s forwards; } @keyframes DownAnime{ from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(100px); } } /* オンラインサポート202104 end -----------------------------------------*/ /* スマホレクチャーサービス202104 -----------------------------------------*/ .ap-blue { background-color:#07aeb7; } .ap-green { background-color:#07aeb7; } .ap-royalblue { background-color: #dbe5ea; } .ap-paleblue { background-color: #ecf3f2; } .lead-area_safe-area /* サブキャッチ帯 */ #leadtxt-area { background-color: #07aeb7; padding: 30px; } .lead-area_toptxtbox { border: 1px dotted #AAAAAA; padding: 20px; margin-bottom: 40px; } .lead-area_toptxtbox02 { border: 0px dotted #AAAAAA; padding: 20px; margin-bottom: 60px; } .lead-area_toptxt { font-size: 30px; line-height: 1.25; text-align: center; margin: 20px 2%; width: 96%!important; } .lead-area_toptxt_02 { font-size: 30px; margin-bottom: 20px; line-height: 1.25; text-align: center; } .lead-area_toptxt_02:last-child { margin-bottom: 60px; } @media screen and (max-width: 768px) { .lead-area_toptxtbox02 { border: 0px dotted #AAAAAA; padding: 20px; margin-bottom: 20px; } .lead-area_toptxt { font-size: 22px; line-height: 1.5; text-align: center; } #leadtxt-area_sp { padding: 60px 0; } #leadtxt-area { background-color: #07aeb7; padding: 3% 0% 2% 0%; } #leadtxt-area_txt { color: #FFFFFF; font-size: 22px; text-align: center; line-height: 1.2; } } .container-w100_flexbwn { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; align-items: center; } #leadtxt-area_txt { color: #FFFFFF; font-size: 36px; text-align: center; } .lead-area_txt { font-size: 18px; margin-bottom: 40px; line-height: 1.5; text-align: left; } #lead-area_txt_01 { margin-top: 40px; } .lead-area_txt_02 { width: 95%; margin: 0 auto; font-size: 18px; margin-bottom: 0px; line-height: 1.5; text-align: left; } .lead-area_txt_ctr { font-size: 18px; margin-bottom: 40px; line-height: 1.5; text-align: center; } .cmn-linktxt-box { width: 80%; margin: 0 auto; font-size: 14px; } .cmn-linktxt-box02 { width: 100%; margin: 0 auto; font-size: 16px; } @media screen and (max-width: 768px) { .cmn-whiteline-box { width: 80%; margin: 0 auto; } .cmn-linktxt-box { width: 95%; margin: 0 auto; font-size: 16px; } .cmn-txt-box { padding: 20px 0 5px 0; font-size: 14px; text-align: left; line-height: 1.5; } } .lead-area_midashi { font-size: 30px; /* margin-bottom: 60px;*/ margin: 30px; text-align: center; line-height: 1.5em; } .lead-area_midashi02 { font-size: 22px; text-align: center; padding-bottom: 20px; } /* 電話リモート */ .remote-inrmidashi { text-align: center; font-size: 24px; color: #222222; margin-bottom: 40px; line-height: 1.5em; } .remote-operation { width: 44%; } .remote-operation_sp { width: 52%; } .remote-icon { width: 18%; text-align: center; margin-bottom: 20px; } #remote_disc { font-size: 12px; text-align: right; } @media screen and (max-width: 768px) { .remote-icon { width: 46%; text-align: center; margin-bottom: 20px; } } .service-lead_img_01 { width: 35%; padding: 7px; } @media screen and (max-width: 768px) { .service-lead_img_01 { width: 80%; margin: 20px auto 0 auto; padding: 7px; } } .container-w100_flexbwn { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0 1%; } /* スマホレクチャーサービス202104 end -----------------------------------------*/ /* YouTubeレスポンシブ 1列 -----------------------------------------*/ .youtube_apnet_wrap { width: 100%; } .youtube_apnet_1{ position: relative; width: 100%; overflow: hidden; padding-bottom: 56.25%; } .youtube_apnet_1 iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; /*境界線の打ち消し*/ } .youtube_apnet_1{ position: relative; width: 100%; overflow: hidden; padding-bottom: 56.25%; } .youtube_apnet_1 iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; /*境界線の打ち消し*/ } /* YouTubeレスポンシブ 2列 -----------------------------------------*/ .youtube_apnet iframe{ width: 100%; height: 268px; border: none; /*境界線の打ち消し*/ } @media screen and (max-width: 768px) { .youtube_apnet { position: relative; width: 100%; overflow: hidden; padding-bottom: 56.25%; } .youtube_apnet iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; /*境界線の打ち消し*/ } } /* 商品ページ about -----------------------------------------*/ .productpage-text02 { margin-bottom: 2%; } .productpage-text02 h1 { padding: 16px; font-size: 1.2em !important; color: #333333; background-color: #f7f5f5; border-bottom: #333333 solid 1px; border-left: #333333 solid 10px; margin-bottom: 20px; text-align: left; } .productpage-text02 .gray { backgroun: #f7f5f5; } .page_about { max-width: 1060px; margin: 0 auto; } .box_page_about { display: flex; align-items: center; } .box_page_about { display: flex; align-items: center; } .box_page_about .txt { width: 50%; box-sizing: border-box; } .box_page_about .txt .h2_page_about { font-size: 1.4em; padding: 10px 0; margin: 0; border-top: none!important; } .box_page_about:nth-child(odd) { flex-direction: row-reverse; } .box_page_about:nth-child(odd) .txt { padding-right: 40px !important; } .box_page_about:nth-child(even) .txt { padding-left: 40px; } .box_page_about .photo,.box_page_about .txt { margin: 0; width: 50%; } .box_page_about .photo img { width: 100%; } @media screen and (min-width: 701px) and (max-width: 1000px) { .box_page_about { width: 100%; } /* .box_page_about .photo,.box_page_about .txt { margin: 0; width: 50%; } .box_page_about .photo img { width: 100%; } */ .box_page_about .txt { padding-left: 40px; } .box_page_about:nth-child(even) .txt { padding-right: 40px; } } @media screen and (max-width: 700px) { .box_page_about, .series_Barikata { display: block; } .box_page_about .photo { width: 100%; } .box_page_about .txt { width: 100%; box-sizing: inherit; } .box_page_about .txt p { margin-bottom: 30px; } .box_page_about:nth-child(odd) .txt { padding-right: 0 !important; } .box_page_about:nth-child(even) .txt { padding-left: 0 !important; } } /* 商品ページ 写真600px縦並び -----------------------------------------*/ .photo600_vertical { width: 600px; margin-bottom: 20px; } @media screen and (max-width: 480px) { .photo600_vertical { max-width: 100%; } } /* 買い物かごページに遷移しないで"商品をカゴに入れるソース -----------------------------------------*/ .cartin-msg-pc { display: none; /*非表示にしておく*/ position: absolute; top: 30px; right: -200px; white-space: nowrap; } .cartin-msg-pc.show { position: absolute; /*カートに入れたら表示*/ top: 80px; /*テキストの表示位置*/ right: 20px;/*テキストの表示位置*/ white-space: nowrap; color: #666;/*テキストの文字色*/ font-size: 1em;/*テキストのサイズ*/ } .cartin-msg-sp { display: none; /*非表示にしておく*/ position: absolute; top: -60px; white-space: nowrap; } .cartin-msg-sp.show { position: absolute; /*カートに入れたら表示*/ top: 0; left: 0; white-space: nowrap; background: #5d737e; color: #fff; width: 100%; padding: 10px 0; text-align: center; } .cart-badge { display: block; /*常に表示させてておく（要調整）*/ } /***************************************************** 20220207追加 *****************************************************/ /* トップページ -----------------------------------------*/ h1.heading_txt{ font-size: 2.5em; margin-bottom: 20px; text-align: center; color: rgb(51, 51, 51) !important; } h1.heading_txt+p{ font-size: 14px; } .top_heading{ margin-bottom: 30px; } .rizan_slide{ background:url('../img/slideshow/raizan800x360.png'),linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde); width:100%; height: 80vh; background-size:cover; background-position: center; /* background-position: left top; background-repeat: no-repeat; background-size: 100% auto; */ background-blend-mode: hard-light; animation: hue-rotate 3s linear infinite; margin: -20px 0 50px; } /* MSIパソコンページ -----------------------------------------*/ h1.heading_title{ margin: 0 0 20px; padding: 10px 0 0; color: #333; font-size: 22px; border-top: 3px double #333; } /* アンケートページ -----------------------------------------*/ ul.enquete-form-radio { display: flex; flex-wrap: wrap } .enquete-form-checkbox li, .enquete-form-radio li { margin-right: 8px; } /* 文字アニメーション -----------------------------------------*/ /* バナー本体 */ .news-banner { display: block; height: 40px; width: 100%; background-color: white; overflow: hidden; } /* バナー内コンテンツ */ .news-banner__content { display: inline-block; color: #000000; line-height: 40px; padding-left: 100%; white-space: nowrap; animation: animate-banner 20s linear infinite; } /* バナー内の要素をすべて選択 */ .news-banner__content > * { display: inline-block; font-size: 1.1em; } /* 横にスクロールさせるアニメーション */ @keyframes animate-banner { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }