/*---@charset "SHIFT-JIS";---*/ @charset "UTF-8"; /**------------------ font ------------------- **/ @import url('https://fonts.googleapis.com/css2?family=Bacasime+Antique&family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap'); /*コマクリのプレビューモードを非表示にする*/ .fs-preview-header { display: none; } /**-------- iphoneで自動でフォントサイズがかわるのを防ぐ ----------**/ body { -webkit-text-size-adjust: 100%; } /**---------------------ベース---------------------**/ * { margin:0; padding:0; } body{ margin: auto; padding: auto; } ul { list-style:none; } a { text-decoration:none; color:#E3818A; } img { width:100%; max-width:100%; border:none; height:auto; vertical-align: top; } .clear { clear:both; } .right { float:right } .left { float:left } .b { font-weight:bold; } .size10 { font-size:8px; } .w-font { font-family: 'Crimson Text', serif; } a:link {color:#000000;} /*　未訪問リンクの文字色を変える */ a:visited {color:#000000;} /*　訪問済リンクの文字色を変える */ a:hover {color:#000000;} /*　ポイント時のリンクの文字色を変える */ a:active {color:#000000;} /*　選択中のリンクの文字色を変える */ /**---基本的なhタグの装飾---**/ .category{ color: #333333;/*文字色*/ padding: 0.5em 0;/*上下の余白*/ border-top: solid 1px #333333;/*上線*/ border-bottom: solid 1px #333333;/*下線*/ text-align:center; width:100%; font-weight:bold; font-size: 12px; margin: 20px 0px 10px 0px; font-family: 'Noto Serif',serif; } /**--------------------バナーしたの1文---------------------**/ .text-box_title { font-size: 12px; text-align:center; margin:0px; padding:0px 0px 0px 0px; font-weight:normal; } /**-----------2重線で囲む文章------------**/ .text_box { border: 4px double #ddd; margin: 5px 0; padding: 5px; font-size: 9px; text-align: center; color: #5E5D5D; } /**--------------------帯バナー下のHタグ1文---------------------**/ .text-h_title { font-size: 11px; text-align:center; margin:-4px 0px 5px 0px; padding:0px 0px 0px 0px; font-weight:normal; } /**---------------------サイトロゴ周り---------------------**/ #site_logo{ width: 400px; text-align: center; display: block; margin-left: auto; margin-right: auto; margin-top: 10px; }@media screen and ( max-width:768px ){#site_logo{ width: 300px; text-align: center; display: block; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: 10px; }} #site_logo img{width: 200px;} @media screen and ( max-width:768px ){#site_logo img{ left: 50%; width: 130px;}} #site_logo a{ height: 26px; display: block; width: 200px; padding-bottom: 20px; margin-left: auto; margin-right: auto; }@media screen and ( max-width:768px ){#site_logo a{ height: 26px; width: 300px; text-align: center; display: block; margin-left: auto; margin-right: auto; padding-bottom: 20px; }} .site_catch {font-size: 9px; margin-top: 14px; }@media screen and ( max-width:768px ){.site_catch { font-size: 12px; margin-top: 6px; }} /**---------------------グローバルメニュー---------------------**/ .lala_header { position:fixed; /* ヘッダーを固定する */ top: 0; /* 上部から配置の基準位置を決める */ left: 0; /* 左から配置の基準位置を決める */ width: 100%; /* ヘッダーの横幅を指定する */ height: 80px; /* PCヘッダーの高さを指定する */ z-index: 1000; background-color: #FFFFFF; } @media screen and ( max-width:768px ){.lala_header { height: 64px; /* スマホのヘッダーの高さを指定する */}} /**---------------------グローバルメニュー内部/トップメニュー---------------------**/ p.menu{ color: #333333;/*文字色*/ padding: 0.5em 0;/*上下の余白*/ border-top: solid 1px #333333;/*上線*/ border-bottom: solid 1px #333333;/*下線*/ text-align:center; width:80%; margin: 10px 0 20px 30px; } p.member{ background: #000000;/*背景色*/ color: #ffffff;/*文字色*/ padding: 0.5em;/*文字まわり（上下左右）の余白*/ text-align:center; width: 170px; left: 50%; margin: 0px 0 20px 80px; } .member a { display: block; } /**---------------------グローバルメニュー内部/新着---------------------**/ p.sub_new{ padding: 10px; margin: auto; width: 200px; border: 4px double #FF0072; border-radius: 4px; color: #FF0072; text-align:center; left: 50%; font-size: 18px; font-weight:bold; } .sub_new a { display: block; } /**---------------------グローバルメニュー内部リスト/カテゴリー見出し---------------------**/ .sub { width: 300px; margin: 0 auto; padding: 10px 0; font-family: sans-serif; font-size: 10px; color:#333333; } .heading { margin: 10px 0 } .sub_cate .heading { position: relative; display: grid; height: 30px; padding: 0; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #333333; line-height: 30px; } .sub_cate .heading .caption{ grid-area: 1/2; text-align: right; right: 0; top: 0; width: 150px; padding-left: 25px; background: #333333; color: #fff; } .sub_cate .heading .title{ float: left; padding-left: 20px; font-size:1.2em; } /**---------------------グローバルメニュー内部リスト/カテゴリーメニュー---------------------**/ .sub_menu { list-style: none; width: 300px; zoom: 1; overflow: hidden; margin-bottom: 10px; text-align:left; font-size:1.2em; } .sub_menu li { zoom: 1; margin-top: -1px; padding: 5px 0px 5px 0px; border-top: 1px solid #666666; } .sub_menu a { display: block; } /*アコーディオン全体*/ .catemenu input { display: none; /*チェックボックスを隠す*/ } /*バー部分*/ .catemenu label { width: 300px; font-size:12px; cursor :pointer; display: block; text-decoration: none; color: #000000; line-height: 1; position: relative; margin: 0 0 -10px; padding: 10px 0; } /*開いたときに表示される部分*/ .catemenu ul { width: 300px; margin: 0; padding: 0; list-style: none; margin-bottom: 6px; } .catemenu li { font-size:12px; height: 0; overflow-y: hidden; transition: padding-bottom 0.5s, padding-top 0.5s; /*閉じるときのアニメーション*/ -webkit-transition: padding-bottom 0.5s, padding-top 0.5s; -moz-transition: padding-bottom 0.5s, padding-top 0.5s; -ms-transition: padding-bottom 0.5s, padding-top 0.5s; -o-transition: padding-bottom 0.5s, padding-top 0.5s; } #menu_bar01:checked ~ #links01 li, #menu_bar02:checked ~ #links02 li, #menu_bar03:checked ~ #links03 li, #menu_bar04:checked ~ #links04 li, #menu_bar05:checked ~ #links05 li, #menu_bar06:checked ~ #links06 li, #menu_bar07:checked ~ #links07 li, #menu_bar08:checked ~ #links08 li, #menu_bar09:checked ~ #links09 li, #menu_bar10:checked ~ #links10 li, #menu_bar11:checked ~ #links11 li, #menu_bar12:checked ~ #links12 li, #menu_bar13:checked ~ #links13 li, #menu_bar14:checked ~ #links14 li, #menu_bar15:checked ~ #links15 li, #menu_bar16:checked ~ #links16 li, #menu_bar17:checked ~ #links17 li, #menu_bar18:checked ~ #links18 li, #menu_bar19:checked ~ #links19 li, #menu_bar20:checked ~ #links20 li, #menu_bar21:checked ~ #links21 li, #menu_bar22:checked ~ #links22 li, #menu_bar23:checked ~ #links23 li, #menu_bar24:checked ~ #links24 li, #menu_bar25:checked ~ #links25 li, #menu_bar26:checked ~ #links26 li, #menu_bar27:checked ~ #links27 li, #menu_bar28:checked ~ #links28 li, #menu_bar29:checked ~ #links29 li, #menu_bar30:checked ~ #links30 li, #menu_bar31:checked ~ #links31 li, #menu_bar32:checked ~ #links32 li, #menu_bar33:checked ~ #links33 li, #menu_bar34:checked ~ #links34 li, #menu_bar35:checked ~ #links35 li, #menu_bar36:checked ~ #links36 li, #menu_bar37:checked ~ #links37 li, #menu_bar38:checked ~ #links38 li, #menu_bar39:checked ~ #links39 li, #menu_bar40:checked ~ #links40 li{ height: auto; /*開いたときに表示されるliの高さ*/ opacity: 1; padding: 5px 10px; } /*開いたときの下の余白*/ #menu_bar01:checked ~ #links01 li:last-child, #menu_bar02:checked ~ #links02 li:last-child { margin-bottom: 20px; } .catemenu li a:hover{ text-decoration: none; text-decoration-line: none; } /*閉じた状態の矢印描画*/ .catemenu label:after{ content:""; display:block; width:8px; height:8px; border-top: #000000 2px solid; border-right: #000000 2px solid; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); position:absolute; right: 6%; top: 0; bottom: 15%; margin: auto; } /*開いた状態の矢印描画*/ .catemenu input[type=checkbox]:checked + label:after{ content:""; display:block; width:8px; height:8px; border-top: #000000 2px solid; border-right: #000000 2px solid; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); position:absolute; right: 6%; top: 7%; bottom: 0; margin: auto; } /**---------------------ヘッダーナビゲーション用---------------------**/ .header_contents_area { position: fixed; /* ヘッダーを固定する */ width: 100%; margin-top: 72px; background : none; background-color: #FFFFFF; z-index: 999; }@media screen and (max-width: 768px){.header_contents_area{ margin-top: 56px; }} .lala_nav { position: relative; width: 100%; height: 45px; background-color: rgba(0,0,0,0.8); min-width: 1200px; } @media screen and ( max-width:768px ){ .lala_nav { min-width: 100%; height: 50px;}} #navi_menu{ position: relative; width: 100%; 　min-width: 1200px; height:45px } @media screen and ( max-width:768px ){ #navi_menu{ min-width: 100%; height:70px; }} #navi_menu a{ color: #fff; position: relative; } #navi_menu a:hover{color: #F1DAA8; position: relative;} #navi_menu ul{ display: block; width: 1000px; margin-left: auto; margin-right: auto; padding: 0; } @media screen and ( max-width:768px ){#navi_menu ul{width: 100%;}} #navi_menu ul{ display: block; width: 1000px; margin-left: auto; margin-right: auto; padding: 0; } @media screen and ( max-width:768px ){#navi_menu ul{width: 100%;}} #navi_menu li{ width: 200px; display: block; color: #fff; text-align: center; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 12px; line-height: 22px; float: left; letter-spacing: 2px; vertical-align: middle; border-right: 1px solid #FDFDFD; box-sizing: border-box; height: 22px; margin-top: 11px; margin-bottom: 9px; } #navi_menu li span{ } #navi_menu li:last-child { border-right: none; } @media screen and ( max-width:768px ){#navi_menu li{ width: 20%; height: 40px; letter-spacing: 0px; font-size: 8px; line-height: 0px; margin-top: 5px; margin-bottom: 5px; }} .new_icon, .login_icon, .coordinate_icon, .ranking_icon, .topic_icon, .search_icon{ width: 22px; height: 22px; display: inline-block; margin-right: 5px; vertical-align: middle; margin-top: -2px; } @media screen and ( max-width:768px ){.new_icon, .login_icon, .coordinate_icon, .ranking_icon, .topic_icon, .search_icon{ display:block; margin-left:auto; margin-right:auto; margin-top:3px; margin-bottom:7px; }} a .new_icon{ background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_new.png) no-repeat 0 0; } a:hover .new_icon{ background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_new_a.png) no-repeat 0 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { a .new_icon { background-image: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_new2x.png); background-size: 22px 22px;} a:hover .new_icon{ background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_new_a2x.png) no-repeat 0 0; background-size: 22px 22px;}} a .login_icon{background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_topic2x.png) no-repeat 0 0;} a:hover .login_icon{background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_login_a.png) no-repeat 0 0;} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { a .login_icon { background-image: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_login2x.png); background-size: 22px 22px;} a:hover .login_icon{ background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_login_a2x.png) no-repeat 0 0; background-size: 22px 22px;}} a .coordinate_icon{background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_coordinate.png) no-repeat 0 0;} a:hover .coordinate_icon{background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_coordinate_a.png) no-repeat 0 0;} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { a .coordinate_icon { background-image: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_coordinate2x.png); background-size: 22px 22px;} a:hover .coordinate_icon{ background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_coordinate_a2x.png) no-repeat 0 0; background-size: 22px 22px;}} a .ranking_icon{background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_ranking.png) no-repeat 0 0;} a:hover .ranking_icon{background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_ranking_a.png) no-repeat 0 0;} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { a .ranking_icon { background-image: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_ranking2x.png); background-size: 22px 22px;} a:hover .ranking_icon{ background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_ranking_a2x.png) no-repeat 0 0; background-size: 22px 22px;}} a .topic_icon{background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_topic.png) no-repeat 0 0;} a:hover .topic_icon{background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_topic_a.png) no-repeat 0 0;} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { a .topic_icon { background-image: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_topic2x.png); background-size: 22px 22px;} a:hover .topic_icon{ background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_topic_a2x.png) no-repeat 0 0; background-size: 22px 22px;}} a .search_icon{background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_search.png) no-repeat 0 0;} a:hover .search_icon{background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_search_a.png) no-repeat 0 0;} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { a .search_icon { background-image: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_search2x.png); background-size: 22px 22px;} a:hover .search_icon{ background: url(https://lalatulle.itembox.design/item/img/icon/navi_icon_search_a2x.png) no-repeat 0 0; background-size: 22px 22px;}} /**----ヘッダーのイベントバナー----**/ .event_banner { margin-top: 145px; display:block; width:750px; margin-left:auto; margin-right:auto; margin-bottom: 14px; }@media screen and (max-width: 768px){.event_banner{ margin-top: 116px; width: 96%; }} #nav_position { position: relative; top: -40px; left: 12px; margin-top : 20px; } .nav_position { position: relative; top: -40px; left: 10px; } @media (max-width: 600px) { #nav_position { margin-top:10px }} #nav_position_menu { position: relative; top: -40px; left: 12px; } #nav_position_right { float:right; position: relative; top: -80px; right: 10px; } p.nav_menu{ font-size: 11px; } #nav-drawer { position: relative; } /*チェックボックス等は非表示に*/ .nav-unshown { display:none; } /*アイコンのスペース*/ #nav-open { display: inline-block; width: 30px; height: 22px; vertical-align: middle; } /*ハンバーガーアイコンをCSSだけで表現*/ #nav-open span, #nav-open span:before, #nav-open span:after { position: absolute; height: 3px;/*線の太さ*/ width: 25px;/*長さ*/ border-radius: 3px; background: #555; display: block; content: ''; cursor: pointer; text-align: center; } #nav-open span:before { bottom: -8px; } #nav-open span:after { bottom: -16px; } #nav-font { font-size: 2px; position: relative; top: -100px; left: 10px; } /*閉じる用の薄黒カバー*/ #nav-close { display: none;/*はじめは隠しておく*/ position: fixed; z-index: 99; top: 0;/*全体に広がるように*/ left: 0; width: 100%; height: 100%; background: black; opacity: 0; transition: .3s ease-in-out; text-align: center; } /*中身*/ #nav-content { overflow: auto; position: fixed; top: 0; left: 0; z-index: 9999;/*最前面に*/ width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/ max-width: 330px;/*最大幅（調整してください）*/ height: 100%; background: #fff;/*背景色*/ transition: .3s ease-in-out;/*滑らかに表示*/ -webkit-transform: translateX(-105%); transform: translateX(-105%);/*左に隠しておく*/ } /*チェックが入ったらもろもろ表示*/ #nav-input:checked ~ #nav-close { display: block;/*カバーを表示*/ opacity: .5; } #nav-input:checked ~ #nav-content { -webkit-transform: translateX(0%); transform: translateX(0%);/*中身を表示（右へスライド）*/ box-shadow: 6px 0 25px rgba(0,0,0,.15); } /**---------------------カスタム検索フォーム部分---------------------**/ dl.search1{ position:relative; background-color:#fff; border:1px solid #aaa; -webkit-border-radius:6px; -moz-border-radius:6px; -o-border-radius:6px; -ms-border-radius:6px; border-radius:20px; width:80%; height:23px; left:10%; } dl.search1 dt{ margin-right:20px; padding:3px 0 8px 8px; } dl.search1 dt input{ width:80%; height:13px; line-height:13px; background:none; border:none; } dl.search1 dd{ position:absolute; top:0; right:0; } dl.search1 dd button{ display:block; padding:6px 13px 6px 6px; background:none; border:none; } dl.search1 dd button span{ display:block; width:13px; height:13px; background:url('https://www.lalatulle.jp/sp/sp-img/top/search.png') no-repeat scroll 0 0; } /**---------------------トレンドタグ---------------------**/ .tagcloud { width: 100%; left:50%; text-align:center; padding: 5px 0px 5px 0px; color: #000000; /* 文字色 */ font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-serif; } .tagcloud li { font-size: 12px !important; /* 文字のサイズ */ line-height: 1em; background: #D3D3D3; /* 背景色 */ color: #000000; /* 文字色 */ display: inline-block; white-space: nowrap; padding: 3px 3px; /* 文字周りの余白 */ margin-top: 5px; /* タグ同士の余白 */ margin-bottom: 5px; /* タグ同士の余白 */ border-radius: 4px; /* 角を少し丸く */ text-decoration: none; } /**---------------------タブ切り替え ドレス---------------------**/ .tabs { margin-top: 50px; padding-bottom: 40px; background-color: #fff; width: 100%; margin: 0 auto;} /*タブのスタイル*/ .tab_item { width: calc(100%/2); height: 50px; border-bottom: 3px solid #ffffff; background-color: #e6e6e6; line-height: 50px; font-size: 12px; text-align: center; color: #000000; display: block; float: left; text-align: center; transition: all 0.2s ease; } .tab_item:hover { opacity: 0.75; } /*ラジオボタンを全て消す*/ input[name="tab_item"] { display: none; } /*タブ切り替えの中身のスタイル*/ .tab_content { display: none; padding: 0px; clear: both; overflow: hidden; } /*選択されているタブのコンテンツのみを表示*/ #all:checked ~ #all_content, #programming:checked ~ #programming_content, #design:checked ~ #design_content { display: block; } /*選択されているタブのスタイルを変える*/ .tabs input:checked + .tab_item { background-color: #ffffff; color: #000000; } .top_feature{ width: 900px; margin: auto; } .top_contents_2023 { margin-top: 50px; }@media screen and (max-width: 768px){.top_contents_area{ margin-top: 40px; }} /**----看板トップページ用----**/ .top_contents_area { margin-top: 50px; position: relative; background : none; background-color: #FFFFFF; }@media screen and (max-width: 768px){.top_contents_area{ margin-top: 40px; }} .kanban_h1 { font-size: 15px; text-align: center; } /**----挨拶のサイズを指定----**/ @media screen and ( min-width:768px ){ .setsumei{ max-width:740px; padding-top: 30px; margin: auto; } } /**--- トップページの挨拶文　-----**/ .contents_top { text-align:center; font-family: 'Noto Serif',serif; margin-bottom: 20px; margin: auto; } .contents_top h2 { font-size:14px; margin-top:30px; text-decoration:none ; } .contents_top .subtitle { font-size:14px; margin-top: 10px; margin-bottom: 20px; } .contents_top .soryo { font-size:12px; margin-top: 10px; } /**--- テキストを隠してもっと見るをつける---------------------**/ .text-box-more{ width: auto; margin: 10px auto 10px; } .text-box-more label{ max-width: 200px; font-size: 15px; font-weight: bold; text-align: center; margin: auto; line-height: 15px; position: relative; display: block; height: 20px; border-radius: 8px; cursor: pointer; color: #777; transition: all 0.5s; } .text-box-more label:hover{ -webkit-transition: all .3s; transition: all .3s; } .text-box-more input{ display: none; } .text-box-more div{ height: 0px; padding: 0px; overflow: hidden; opacity: 0; transition: 0.5s; } .text-box-more input:checked ~ div{ height: auto; padding: 5px; opacity: 1; } .text-box-more div p{ color: #777; line-height: 23px; font-size: 14px; padding: 20px 10px; text-align: center; } .ac-small p{ margin-bottom: 0px; } .text-box_title { font-size: 12px; text-align:center; margin:0px; padding:0px 0px 0px 0px; font-weight:normal; } h3.text-box_title { font-size: 12px; text-align:center; margin:0px; padding:0px 0px 0px 0px; font-weight:normal; } /**---------------------カテゴリー案内３列×２行---------------------**/ ul.cate-display{ display:block; width: 100%; text-align: center; margin: auto; padding-bottom: 40px; } ul.cate-display li{ float: left; width: 33.1%; padding:5px 3px; box-sizing :border-box; } ul.cate-display li p{ text-align:center; margin:0px; padding:5px 1px 5px 1px; font-size:12px; border: solid 1px #8A8A8A; font-weight:normal; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .cate-display a { display: block; } /**---------------------sns_list---------------------**/ .cate2-display { padding-bottom: 50px; width: 50%; text-align: center; margin-left: auto; margin-right: auto; padding-left: 5%; }@media screen and ( max-width:420px ){.cate2-display{width: 80%;}} .cate2-display li{ float: left; width: 20% } .cate2-display img { display:block; width: 30px; overflow: hidden; white-space: nowrap; } /**---------------------リスト2列---------------------**/ ul.tab2{ 　　　width: 100%; display: flex; } ul.tab2 li{ float: left; width: 50%; padding:0px 5px 5px 5px; box-sizing :border-box; } ul.tab2 li img{ width:100%; height: auto; float:left; margin:0px 0px 3px 0px; padding:0px; } ul.tab2 li p{ text-align:center; margin:0px; padding:0px 0px 5px 0px; font-size:9px; font-weight:normal; } /**---------------------リスト3列---------------------**/ ul.tab3{ 　　　width: 100%; } ul.tab3 li{ float: left; width: 33%; padding:0px 3px 3px 3px; box-sizing :border-box; margin:0px 0px 2px 0px; } ul.tab3 li img{ width:100%; height: auto; float:left; margin:0px 0px 3px 0px; padding:0px; transition: opacity 0.5s ease; } ul.tab3 li img:hover { opacity: 0.7; } ul.tab3 li p{ text-align:center; margin:0px; padding:5px 0px 5px 0px; font-size:10px; font-weight:normal; } .tab3 a { display: block; text-decoration: none; } /**---------------------4列に並べる---------------------**/ ul.tab4{ 　　　width: 100%; } ul.tab4 li{ float: left; width: 25%; padding:0px 3px 3px 3px; box-sizing :border-box; margin:0px 0px 2px 0px; } ul.tab4 li img{ width:100%; height: auto; float:left; margin:0px 0px 3px 0px; padding:0px; transition: opacity 0.5s ease; } ul.tab4 li img:hover { opacity: 0.7; } ul.tab4 li p{ text-align:center; margin:0px; padding:5px 0px 5px 0px; font-size:10px; font-weight:normal; } .tab4 a { display: block; } /**---------------------top_new_grid トップ新しいテンプレー---------------------**/ .top_new_grid{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2px; } .top_new_grid img { width: 100%; height: auto; margin: 0; padding: 0; transition: opacity 0.5s ease; } .top_new_grid img:hover { opacity: 0.7; } .top_new_grid p { text-align: center; margin: 0; padding: 0; margin-top: 0; margin-bottom: 7px; font-size: 10px; font-weight: normal; } .top_new_grid a { display: block; text-decoration: none; } /**---------------------タブメニュー---------------------**/ .cp_tab *, .cp_tab *:before, .cp_tab *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } .cp_tab { margin: 1em auto; width:800; height:1200; } .cp_tab > input[type='radio'] { margin: 0; padding: 0; border: none; border-radius: 0; outline: none; background: none; -webkit-appearance: none; appearance: none; display: none; } .cp_tab .cp_tabpanel { display: none; } .cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child, .cp_tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2), .cp_tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3), .cp_tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4), .cp_tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5), .cp_tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6) { display: block; } .cp_tab > label { position: relative; display: inline-block; padding: 20px; cursor: pointer; border: 1px solid transparent; border-bottom: 0; } .cp_tab > label:hover, .cp_tab > input:focus + label { color: #0066cc; } .cp_tab > input:checked + label { margin-bottom: -1px; border-color: #cccccc; border-bottom: 1px solid #ffffff;/*背景色と同じ*/ border-radius: 6px 6px 0 0; } .cp_tab .cp_tabpanel { padding: 0.5em 1em; border-top: 1px solid #cccccc; } @media (max-width: 480px) { .cp_tab { width: 100%; font-size: 0.8em; } .cp_tab label { padding: 10px 5px 10px 5px; } } /**-----------------トップページオススメ特集の中-------------------**/ .feature_list { display:block; margin: auto; padding: 5px; }@media screen and (max-width: 768px){.feature_list{ width: 100%; }} .feature_list ul{ width:750px; list-style: none; display:block; margin: auto; padding: 0; font-size: 0; /*overflow: hidden; wrapperからはみ出る部分を非表示にする*/ }@media screen and (max-width: 768px){.feature_list ul{ width: 100%; left: 50%;}} .feature_list li{ display: inline-block; text-align: left; font-size: 9px; float: left; width:370px; padding:0px 3px 3px 3px; box-sizing :border-box; border-top: 1px solid #666666; }@media screen and (max-width: 768px){.feature_list li{ left: 50%; font-size: 12px; text-align: left; width: 96%; word-wrap: break-word; margin: 0px 2px 0px 2px; margin-bottom:5px }} .feature_list li img{ float: left; margin-right: 5px; margin:5px 5px 3px 5px; } p.feature_list { text-align: left; font-family:Goudy Old Style,Garamond,Big Caslon,Times New Roman,serif; font-size:9px; color:#A9A7A7; } p.feature { width:100%; text-align: left; font-size:9px; color:#333333; } .feature_list a { width:96%; display: block; } /**--------------------- テーブルのカテゴリー一覧用 ---------------------**/ .cate_table{ margin: 15px; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif; font-size: 0.7em; } .cate_table a{ text-decoration:none; } .cate_table a:link, a:visited, a:hover, a:active { color: #000000; } .cate_table_line { display: table; width: 100%; color: #333; /* 全体の文字色 */ background-color: #FFF; /* 全体の背景色 */ border-radius: 10px 10px 10px 10px; } .cate_table_block1 { display: table-cell; border: solid 1px #808080; width: 100%; background-color: #808080; /* 見出しの背景色 */ color: #FFFFFF;/* 見出しの文字色 */ padding: 10px; } .cate_table_block2 { display: table-cell; border: solid 1px #808080; width: 50%; padding: 10px; } /**---カテゴリー内の文章を隠すタグ---**/ cp_box *, .cp_box *:before, .cp_box *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } .cp_box { position: relative; } .cp_box label { display: flex; right: 0; position: absolute; z-index: 1; bottom: 0; width: auto; height: 140px; /* グラデーションの高さ */ cursor: pointer; text-align: center; /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */ background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%); }@media screen and (max-width: 900px){.cp_box label{ right: 20%; margin-right: 5px; }} .cp_box input:checked + label { background: inherit; /* 開いた時にグラデーションを消す */ } .cp_box label:after { line-height: 2.5rem; position: absolute; z-index: 2; bottom: 20px; left: 50%; width: 16rem; font-family: FontAwesome; content: ' もっと見る'; transform: translate(-50%, 0); letter-spacing: 0.05em; color: #ffffff; border-radius: 20px; background-color: rgba(125, 125, 125, 0.9); } .cp_box input { display: none; } .cp_box .cp_container { overflow: hidden; height: 150px; /* 開く前に見えている部分の高さ */ transition: all 0.5s; } .cp_box input:checked + label { /* display: none ; 閉じるボタンを消す場合解放 */ } .cp_box input:checked + label:after { font-family: FontAwesome; content: ' 閉じる'; } .cp_box input:checked ~ .cp_container { height: auto; padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */ transition: all 0.5s; } .cp_container p { font-size: 80%; } /**--------------------- カレンダー用---------------------**/ .for_calbase { display: block; width:100%; margin-left:auto; margin-right:auto; margin-bottom: 10px; background-color: #fff; /*overflow: hidden; wrapperからはみ出る部分を非表示にする*/ }@media screen and (max-width: 768px){.for_calbase{ width: 100%; }} table.calbase_tika { font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; background-color: #FFFFFF; border:1px solid #CECECE; width: 800px; margin-left:auto; margin-right:auto; border-collapse: collapse; padding: 10px; }@media screen and ( max-width:768px ){table.calbase_tika{ width: 100%; }} table.calbase_tika * { font-size: 98%; color: #666; border-collapse: collapse; padding: 0px; margin: 0px; } table.calbase_tika th { text-align: center; } th.caltitle_tika { font-size: 85%; padding: 3% 0% 0% 0%; } table.calframe_tika { border-collapse: collapse; text-align:center; margin: 3%; table-layout: fixed; width: 94%; } table.calframe_tika th { text-align: center; padding: 0% 0% 1% 0%; } table.calframe_tika td { border:1px solid #FFFFFF; background-color: #FFFFFF; width:14%; height:14%; text-align: center; } tr.weektitle_tika td { background-color: #FCC; } td.event1day_tika { background-color: #F69 !important; } font.event1day_tika { color: #F69; } td.event2day_tika { background-color: #B5DAFF !important; } font.event2day_tika { color: #B5DAFF; } td.event3day_tika { background-color: #FFC !important; } font.event3day_tika { color: #FEDE93; } td.event4day_tika { background-color: #fc9 !important; } font.event4day_tika { color: #fc9; } table.event_tika { text-align: left; word-break: break-all; margin: 2% 3% 2% 3% ; border-collapse: collapse; line-height:120%; table-layout: fixed; width: 96%; } table.event_tika td { padding: 0px 0px 0px 0px; } table.text_tika { text-align: left; word-break: break-all; margin: 0px 10px 10px 10px; border-collapse: collapse; line-height:120%; table-layout: fixed; width: 98%; } /**---商品ページのSEO文言用---**/ .top_link{ margin: 0 auto; font-size: 0.8em; } .top_link a{ text-decoration: none; color: #000000; } .top_link span{ background-color: #FFD7D8; } /**--------------------- カレンダー用ここまで ---------------------**/ /**---------------------サイトPR文章---------------------**/ .pr_box { border: 4px double #ddd; margin: 2em 0; padding: 2em; font-size: 12px; text-align: center; } /**---------------------ボタン---------------------**/ .square_btn{ display: block; position: relative; width: 60%; padding: 0.8em; text-align: center; text-decoration: none; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #1B1B1B; background: #fff; border:1px solid #1B1B1B; margin-top: 1.2em; } /**---------------------ボタン小---------------------**/ .square_btn2{ display: block; position: relative; width: 60%; padding: 0.8em; text-align: center; text-decoration: none; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #ffffff; background: #808080; } /**---------------------特集リスト---------------------**/ ul.cp_list { position: relative; padding: 0 0.5em; margin-top: 2em; list-style-type: none; border: solid 2px #000000; margin: 20px 0px 20px 0px; } ul.cp_list::after { position: absolute; content:attr(title); padding: 1px 7px; letter-spacing: 0.05em; font-weight: bold; font-size: .8em; background: #000000; color: #fff; bottom: 100%; left: -2px; border-radius: 4px 4px 0px 0px; } ul.cp_list li { line-height: 1.5; padding: 2px 0 2px 1.4em; border-bottom: 1px dashed #333333; font-size: 12px; } ul.cp_list li::before { position: absolute; content: "\002713"; color: #000000; font-weight: bold; left : 0.5em; } ul.cp_list li:last-of-type { border-bottom: none; } .cp_list a { display: block; } /**---------------------/特集リストここまで---------------------**/ /**----------- カテゴリーのサイドにつけてるフローティングバナー -----------**/ /* フローティングバナーのラップ要素 */ #fixed_right_banner { /* 右端の上から20pxの位置に固定表示 */ position: fixed; bottom: 15%; right: 0; } @media screen and ( max-width:768px ){#fixed_right_banner{ bottom: 17%;}} @media screen and ( max-width:380px ){#fixed_right_banner{ bottom: 120px;}} /* 画像の共通設定 */ #fixed_right_banner > * { /* 横幅 */ width: 40px; } /* 2個目以降の画像の上部に余白を作る */ #fixed_right_banner > * ~ * { margin-top: 10px; } /* リンク要素 */ #fixed_right_banner > a { /* ブロック要素に変更 */ display: block; /* 透過変更をスムーズにする(任意) */ -webkit-transition: opacity .2s ease; transition: opacity .2s ease; } /* マウスオーバー時の表現 */ #fixed_right_banner > a:hover { /* 20%透過させる */ opacity: .8; } /**---------------------ブランドリスト--------------------**/ ul.brand{ 　　　width: 100%; } ul.brand li{ float: left; width: 16.6%; padding:0px 3px 3px 3px; box-sizing :border-box; border: solid 2px #FFFFFF; margin:0px 0px 2px 0px; } ul.brand li img{ width:100%; height: auto; float:left; margin:0px 0px 3px 0px; padding:0px; } ul.brand li p{ text-align:center; margin:0px; padding:5px 0px 5px 0px; font-size:12px; font-weight:normal; } .brand a { display: block; } /**----------- 商品ページに入れるキーワード -----------**/ .keyword_box { margin: 2.0em; } .keyword_title { text-align:center; font-family: "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG 明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Times, serif; margin-bottom: 10px; font-size:25px; letter-spacing: 0.1em; text-decoration:none ; } .keyword { width: 100%; left:50%; text-align: left; padding: 5px 0px 5px 0px; color: #000000; /* 文字色 */ font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-serif; } .keyword li { font-size: 12px !important; /* 文字のサイズ */ line-height: 1em; background: #9FE5D6; /* 背景色 */ color: #ffffff; /* 文字色 */ display: inline-block; white-space: nowrap; padding: 8px 8px; /* 文字周りの余白 */ margin: 4px; /* タグ同士の余白 */ border-radius: 4px; /* 角を少し丸く */ text-decoration: none!important; } /**----------- /商品ページに入れるキーワードここまで -----------**/ /**----------- コスプレ商品ページキーワード -----------**/ .keyword_costume_box { margin: 2.0em; } .keyword_costume_title { text-align:center; font-family: "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG 明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Times, serif; margin-bottom: 10px; font-size:25px; letter-spacing: 0.1em; text-decoration:none ; } .keyword_costume { width: 100%; left:50%; text-align: left; padding: 5px 0px 5px 0px; color: #000000; /* 文字色 */ font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-serif; } .keyword_costume li { font-size: 12px !important; /* 文字のサイズ */ line-height: 1em; background: #ff8c00; /* 背景色 */ color: #ffffff; /* 文字色 */ display: inline-block; white-space: nowrap; padding: 8px 8px; /* 文字周りの余白 */ margin: 4px; /* タグ同士の余白 */ border-radius: 4px; /* 角を少し丸く */ text-decoration: none!important; } /**----------- /コスプレ商品ページキーワードここまで -----------**/ /**----------- 浴衣キーワード -----------**/ .keyword_yukata_box { margin: 2.0em; } .keyword_yukata_title { text-align:center; font-family: "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG 明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Times, serif; margin-bottom: 10px; font-size:25px; letter-spacing: 0.1em; text-decoration:none ; } .keyword_yukata { width: 100%; left:50%; text-align: left; padding: 5px 0px 5px 0px; color: #000000; /* 文字色 */ font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-serif; } .keyword_yukata li { font-size: 12px !important; /* 文字のサイズ */ line-height: 1em; background: #c1b0d0; /* 背景色 */ color: #ffffff; /* 文字色 */ display: inline-block; white-space: nowrap; padding: 8px 8px; /* 文字周りの余白 */ margin: 4px; /* タグ同士の余白 */ border-radius: 4px; /* 角を少し丸く */ text-decoration: none!important; } /**----------- /浴衣ページに入れるキーワードここまで -----------**/ /**---------------------スペック表タイトル_コスプレ---------------------**/ p.spec_title_costume { color:#000000; background-color:#ff8c00; line-height: 110%; padding: 2px; font-family: "fot-tsukumin-pr6n", sans-serif; font-weight: 300; font-style: normal; } /**---------------------スペック表タイトル_浴衣---------------------**/ p.spec_title_yukata { color:#000000; background-color:#c1b0d0; line-height: 110%; padding: 2px; font-family: "fot-tsukumin-pr6n", sans-serif; font-weight: 300; font-style: normal; } /**---------------------スペック表タイトル---------------------**/ p.spec_title { color:#000000; background-color:#9FE5D6; line-height: 110%; padding: 2px; } /**---------------------スペック文字ルール--------------------**/ .spec { padding: 10px 20px;} /**---------------------ドレススペック表---------------------**/ table.dress { border-collapse: collapse; width:100%; margin:30px 10px; } th.dress { border: 1px solid #a9a9a9; text-align: center; padding: 10px 20px; font-weight: normal; background-color:#e9e9e9; } td.dress { border: 1px solid #a9a9a9; text-align: left; padding: 10px 20px; font-weight: normal; } /**---------------------コピーと商品名を短くする---------------------**/ .fs-c-productName__copy { font-size: 6px; line-height:2em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-weight:400; text-align:left; font-family:'Noto Serif JP', serif; } .fs-c-productName__name { font-size: 8px; display: -webkit-box; line-height:1.5em; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-align:left; font-family:'Noto Serif JP', serif; } /**---------------------「詳細を見る」の文字小さく---------------------**/ .fs-c-button__label{ font-size: 85%; } /**---------------------コマクリパーツの検索フォームのサイズ変更---------------------**/ .fs-p-searchForm { display:block; width: 80%; margin: auto; } .fs-p-searchForm__button{ background-color: #0DC3D7; color: #fff; width: 50px; height: 24px; border: none; border-radius: 5px; text-align: center; padding: 0.5em auto; } /**---------------------商品詳細の商品名を小さくする---------------------**/ .fs-c-productNameHeading { font-size: 80%; } /**---------------------その他---------------------**/ p.info{ text-align: center; font-size: 9px; color: #5E5D5D; } .common { display:block; width:750px; margin-left:auto; margin-right:auto; margin-bottom: 10px; /*overflow: hidden; wrapperからはみ出る部分を非表示にする*/ }@media screen and (max-width: 768px){.common{ width: 96%; }} .common_800 { display:block; width:800px; margin-left:auto; margin-right:auto; margin-bottom: 10px; /*overflow: hidden; wrapperからはみ出る部分を非表示にする*/ }@media screen and (max-width: 768px){.common_800{ width: 96%; }} /*ログインログアウトの表示切り替えを行うCSS*/ .logout.my-false { display: none; } .login.my-true { display: none; } .regist.my-true { display: none; } /** --- for menu ---**/ .menu_title:not(h3){ font-weight: 100; font-size: 12px; color: #000000; margin-bottom: 13px; } .menu_title a:hover { text-decoration:none !important; text-decoration-line: none; } .menu_title_info { margin-bottom: 0.15em; } /** --- for color menu ---**/ .menu_title_black:not(h3){ font-weight: 100; font-size: 12px; color: #000000; } .menu_title_black a:hover { text-decoration:none !important; text-decoration-line: none; } .menu_title_black:before { content: ""; display: inline-block; margin-right: 10px; width: 10px; height: 10px; background: black; } .menu_title_white:not(h3){ font-weight: 100; font-size: 12px; color: #000000; } .menu_title_white a:hover { text-decoration:none !important; text-decoration-line: none; } .menu_title_white:before { content: ""; display: inline-block; margin-right: 10px; width: 10px; height: 10px; background: #E9E9E9; } .menu_title_red:not(h3){ font-weight: 100; font-size: 12px; color: #000000; } .menu_title_red a:hover { text-decoration:none !important; text-decoration-line: none; } .menu_title_red:before { content: ""; display: inline-block; margin-right: 10px; width: 10px; height: 10px; background: red; } .menu_title_blue:not(h3){ font-weight: 100; font-size: 12px; color: #000000; } .menu_title_blue a:hover { text-decoration:none !important; text-decoration-line: none; } .menu_title_blue:before { content: ""; display: inline-block; margin-right: 10px; width: 10px; height: 10px; background: blue; } .menu_title_green:not(h3){ font-weight: 100; font-size: 12px; color: #000000; } .menu_title_green a:hover { text-decoration:none !important; text-decoration-line: none; } .menu_title_green:before { content: ""; display: inline-block; margin-right: 10px; width: 10px; height: 10px; background: green; } .menu_title_yellow:not(h3){ font-weight: 100; font-size: 12px; color: #000000; } .menu_title_yellow a:hover { text-decoration:none !important; text-decoration-line: none; } .menu_title_yellow:before { content: ""; display: inline-block; margin-right: 10px; width: 10px; height: 10px; background: yellow; } .menu_title_pink:not(h3){ font-weight: 100; font-size: 12px; color: #000000; } .menu_title_pink a:hover { text-decoration:none !important; text-decoration-line: none; } .menu_title_pink:before { content: ""; display: inline-block; margin-right: 10px; width: 10px; height: 10px; background: pink; } .menu_title_beige:not(h3){ font-weight: 100; font-size: 12px; color: #000000; } .menu_title_beige a:hover { text-decoration:none !important; text-decoration-line: none; } .menu_title_beige:before { content: ""; display: inline-block; margin-right: 10px; width: 10px; height: 10px; background: beige; } .menu_title_purple:not(h3){ font-weight: 100; font-size: 12px; color: #000000; } .menu_title_purple a:hover { text-decoration:none !important; text-decoration-line: none; } .menu_title_purple:before { content: ""; display: inline-block; margin-right: 10px; width: 10px; height: 10px; background: purple; } .menu_title_gray:not(h3){ font-weight: 100; font-size: 12px; color: #000000; } .menu_title_gray a:hover { text-decoration:none !important; text-decoration-line: none; } .menu_title_gray:before { content: ""; display: inline-block; margin-right: 10px; width: 10px; height: 10px; background: gray; } .menu_title_wb:not(h3){ font-weight: 100; font-size: 12px; color: #000000; } .menu_title_wb a:hover { text-decoration:none !important; text-decoration-line: none; } .menu_title_wb:before { content: ""; display: inline-block; margin-right: 10px; width:9px; height: 9px; background: linear-gradient(0deg, white 50%, black 50%); border: 0.5px solid black; } .catemenu ul li h3 { font-weight: 100; font-size: 12px; color: #000000; } .catemenu ul li p { font-weight: 100; font-size: 12px; color: #000000; } .catemenu ul { margin-top: -10px; } .menu_category { font-weight: bold; color: #0DC3D7; font-size: 15px; text-align: center; margin: auto; } .menu_category:after { content: ""; display: block; width: 100%; border-bottom: 1px solid black; margin-top: 3px; margin-bottom: 15px } .catemenu h3 { padding-left: 10px; } .menu_content { padding-top: 30px; margin: auto; padding-left: 13px; padding-right: 15px; } /**--------------------各カテゴリー内装飾文字---------------------**/ .category_text { 　　　　　　　　font-family:'Crimson Text', serif; color: #000000;/*文字色*/ padding: 0em 0;/*上下の余白*/ border-bottom: solid 1px #000000;/*下線*/ text-align:center; width:100%; font-weight:bold; font-size: 15px; margin: 20px 0px 10px 0px; } .category_text_new { font-family: 'Noto Serif',serif; color: #000000;/*文字色*/ padding: 0em 0;/*上下の余白*/ border-bottom: solid 1px #000000;/*下線*/ text-align:center; width:100%; font-weight:bold; font-size: 18px; margin: 20px 0px 10px 0px; } /**--------------------各カテゴリー内帯バナー下のHタグ1文---------------------**/ .category_text1 { font-size: 14px; text-align:center; margin:-4px 0px 10px 0px; padding:0px 0px 0px 0px; font-weight:normal; color:#000000; font-family: 'Noto Serif',serif; } /**--------------------各カテゴリー内ベース---------------------**/ .category_text2 { font-size: 9px; line-height: 1.0em; text-align:center; font-weight: bold; color:#000000; padding:10px; margin-top: 0px; margin-bottom: -20px; } /**--------------------各カテゴリー内サブ題名---------------------**/ .category_text3 { font-size: 12px; line-height: 1.0em; text-align:center; font-weight: bold; color:#000000; padding:10px; margin-top: 0px; margin-bottom: -8px; } /**--------------------サブテキスト---------------------**/ .category_text4 { font-size: 12px; text-align:center; margin:0px 0px 6px 0px; padding:0px 0px 0px 0px; font-weight:normal; color:#000000; } /**---------------------2タブ切り替え---------------------**/ .tabs1 { margin-top: 50px; padding-bottom: 40px; background-color: #fff; width: 100%; margin: 0 auto;} /*タブのスタイル*/ .tab_item1 { font-family: 'Noto Serif',serif; width: calc(100%/2); height: 50px; border-bottom: 3px solid #5ab4bd; background-color: #E9EAEA; line-height: 50px; font-size: 18px; text-align: center; color: #565656; display: block; float: left; text-align: center; transition: all 0.2s ease; } .tab_item1:hover { opacity: 0.75; } /*ラジオボタンを全て消す*/ input[name="tab_item1"] { display: none; } /*タブ切り替えの中身のスタイル*/ .tab_content1 { display: none; padding: 0px; clear: both; overflow: hidden; } /*選択されているタブのコンテンツのみを表示*/ #all:checked ~ #all_content, #programming:checked ~ #programming_content { display: block; } /*選択されているタブのスタイルを変える*/ .tabs1 input:checked + .tab_item1 { background-color: #5ab4bd; color: #fff; } /**-----------------カテゴリー内ブランドリスト-------------------**/ .brand_list { display:block; margin: auto; width:750px; padding: 5px; }@media screen and (max-width: 768px){.brand_list{ width: 100%; }} .brand_list ul{ width:750px; list-style: none; padding: 0; font-size: 0; /*overflow: hidden; wrapperからはみ出る部分を非表示にする*/ }@media screen and (max-width: 768px){.brand_list ul{ width: 100%; left: 50%;}} .brand_list li{ display: inline-block; text-align: left; font-size: 9px; float: left; width:370px; padding:0px 3px 3px 3px; box-sizing :border-box; border-top: 1px solid #666666; }@media screen and (max-width: 768px){.brand_list li{ left: 50%; font-size: 8px; text-align: left; width: 96%; word-wrap: break-word; margin: 0px 2px 0px 2px; margin-bottom:5px }} .brand_list li img{ float: left; margin-right: 5px; margin:5px 5px 3px 5px; } p.brand_list { text-align: left; font-family:Goudy Old Style,Garamond,Big Caslon,Times New Roman,serif; font-size:9px; color:#A9A7A7; } p.brand { width:100%; font-size:10px; margin:2px auto; text-align:center; line-height: 1em; color:#333333; } .brand_list a { width:96%; display: block; } /**-----------------商品表示数３列に変更 @media screen and (max-width: 768px) { .fs-c-productList__list { display: -ms-grid; display: grid; -ms-grid-columns: 33.3333333333% 33.3333333333% 33.3333333333%; grid-template-columns: 33.3333333333% 33.3333333333% 33.3333333333%; overflow: hidden; } .fs-c-productList__list > *:nth-child(3n+1) { margin-left : -8px; margin-right : -6px; margin-bottom : -30px; } .fs-c-productList__list > *:nth-child(3n+2) { margin-left : -7px; margin-right : -7px; margin-bottom : -30px; } .fs-c-productList__list > *:nth-child(3n+3) { margin-left : -6px; margin-right : -8px; margin-bottom : -30px; } .fs-c-productList__list > *:nth-child(1) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 1; grid-row: 1; } .fs-c-productList__list > *:nth-child(2) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 1; grid-row: 1; } .fs-c-productList__list > *:nth-child(3) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 1; grid-row: 1; } .fs-c-productList__list > *:nth-child(4) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 2; grid-row: 2; } .fs-c-productList__list > *:nth-child(5) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 2; grid-row: 2; } .fs-c-productList__list > *:nth-child(6) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 2; grid-row: 2; } .fs-c-productList__list > *:nth-child(7) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 3; grid-row: 3; } .fs-c-productList__list > *:nth-child(8) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 3; grid-row: 3; } .fs-c-productList__list > *:nth-child(9) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 3; grid-row: 3; } .fs-c-productList__list > *:nth-child(10) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 4; grid-row: 4; } .fs-c-productList__list > *:nth-child(11) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 4; grid-row: 4; } .fs-c-productList__list > *:nth-child(12) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 4; grid-row: 4; } .fs-c-productList__list > *:nth-child(13) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 5; grid-row: 5; } .fs-c-productList__list > *:nth-child(14) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 5; grid-row: 5; } .fs-c-productList__list > *:nth-child(15) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 5; grid-row: 5; } .fs-c-productList__list > *:nth-child(16) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 6; grid-row: 6; } .fs-c-productList__list > *:nth-child(17) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 6; grid-row: 6; } .fs-c-productList__list > *:nth-child(18) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 6; grid-row: 6; } .fs-c-productList__list > *:nth-child(19) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 7; grid-row: 7; } .fs-c-productList__list > *:nth-child(20) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 7; grid-row: 7; } .fs-c-productList__list > *:nth-child(21) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 7; grid-row: 7; } .fs-c-productList__list > *:nth-child(22) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 8; grid-row: 8; } .fs-c-productList__list > *:nth-child(23) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 8; grid-row: 8; } .fs-c-productList__list > *:nth-child(24) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 8; grid-row: 8; } .fs-c-productList__list > *:nth-child(25) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 9; grid-row: 9; } .fs-c-productList__list > *:nth-child(26) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 9; grid-row: 9; } .fs-c-productList__list > *:nth-child(27) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 9; grid-row: 9; } .fs-c-productList__list > *:nth-child(28) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 10; grid-row: 10; } .fs-c-productList__list > *:nth-child(29) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 10; grid-row: 10; } .fs-c-productList__list > *:nth-child(30) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 10; grid-row: 10; } .fs-c-productList__list > *:nth-child(31) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 11; grid-row: 11; } .fs-c-productList__list > *:nth-child(32) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 11; grid-row: 11; } .fs-c-productList__list > *:nth-child(33) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 11; grid-row: 11; } .fs-c-productList__list > *:nth-child(34) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 12; grid-row: 12; } .fs-c-productList__list > *:nth-child(35) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 12; grid-row: 12; } .fs-c-productList__list > *:nth-child(36) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 12; grid-row: 12; } .fs-c-productList__list > *:nth-child(37) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 13; grid-row: 13; } .fs-c-productList__list > *:nth-child(38) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 13; grid-row: 13; } .fs-c-productList__list > *:nth-child(39) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 13; grid-row: 13; } .fs-c-productList__list > *:nth-child(40) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 14; grid-row: 14; } .fs-c-productList__list > *:nth-child(41) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 14; grid-row: 14; } .fs-c-productList__list > *:nth-child(42) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 14; grid-row: 14; } .fs-c-productList__list > *:nth-child(43) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 15; grid-row: 15; } .fs-c-productList__list > *:nth-child(44) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 15; grid-row: 15; } .fs-c-productList__list > *:nth-child(45) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 15; grid-row: 15; } .fs-c-productList__list > *:nth-child(46) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 16; grid-row: 16; } .fs-c-productList__list > *:nth-child(47) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 16; grid-row: 16; } .fs-c-productList__list > *:nth-child(48) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 16; grid-row: 16; } .fs-c-productList__list > *:nth-child(49) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 17; grid-row: 17; } .fs-c-productList__list > *:nth-child(50) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 17; grid-row: 17; } .fs-c-productList__list > *:nth-child(51) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 17; grid-row: 17; } .fs-c-productList__list > *:nth-child(52) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 18; grid-row: 18; } .fs-c-productList__list > *:nth-child(53) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 18; grid-row: 18; } .fs-c-productList__list > *:nth-child(54) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 18; grid-row: 18; } .fs-c-productList__list > *:nth-child(55) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 19; grid-row: 19; } .fs-c-productList__list > *:nth-child(56) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 19; grid-row: 19; } .fs-c-productList__list > *:nth-child(57) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 19; grid-row: 19; } .fs-c-productList__list > *:nth-child(58) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 20; grid-row: 20; } .fs-c-productList__list > *:nth-child(59) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 20; grid-row: 20; } .fs-c-productList__list > *:nth-child(60) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 20; grid-row: 20; } .fs-c-productList__list > *:nth-child(61) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 21; grid-row: 21; } .fs-c-productList__list > *:nth-child(62) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 21; grid-row: 21; } .fs-c-productList__list > *:nth-child(63) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 21; grid-row: 21; } .fs-c-productList__list > *:nth-child(64) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 22; grid-row: 22; } .fs-c-productList__list > *:nth-child(65) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 22; grid-row: 22; } .fs-c-productList__list > *:nth-child(66) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 22; grid-row: 22; } .fs-c-productList__list > *:nth-child(67) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 23; grid-row: 23; } .fs-c-productList__list > *:nth-child(68) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 23; grid-row: 23; } .fs-c-productList__list > *:nth-child(69) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 23; grid-row: 23; } .fs-c-productList__list > *:nth-child(70) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 24; grid-row: 24; } .fs-c-productList__list > *:nth-child(71) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 24; grid-row: 24; } .fs-c-productList__list > *:nth-child(72) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 24; grid-row: 24; } .fs-c-productList__list > *:nth-child(73) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 25; grid-row: 25; } .fs-c-productList__list > *:nth-child(74) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 25; grid-row: 25; } .fs-c-productList__list > *:nth-child(75) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 25; grid-row: 25; } .fs-c-productList__list > *:nth-child(76) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 26; grid-row: 26; } .fs-c-productList__list > *:nth-child(77) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 26; grid-row: 26; } .fs-c-productList__list > *:nth-child(78) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 26; grid-row: 26; } .fs-c-productList__list > *:nth-child(79) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 27; grid-row: 27; } .fs-c-productList__list > *:nth-child(80) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 27; grid-row: 27; } .fs-c-productList__list > *:nth-child(81) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 27; grid-row: 27; } .fs-c-productList__list > *:nth-child(82) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 28; grid-row: 28; } .fs-c-productList__list > *:nth-child(83) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 28; grid-row: 28; } .fs-c-productList__list > *:nth-child(84) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 28; grid-row: 28; } .fs-c-productList__list > *:nth-child(85) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 29; grid-row: 29; } .fs-c-productList__list > *:nth-child(86) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 29; grid-row: 29; } .fs-c-productList__list > *:nth-child(87) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 29; grid-row: 29; } .fs-c-productList__list > *:nth-child(88) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 30; grid-row: 30; } .fs-c-productList__list > *:nth-child(89) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 30; grid-row: 30; } .fs-c-productList__list > *:nth-child(90) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 30; grid-row: 30; } .fs-c-productList__list > *:nth-child(91) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 31; grid-row: 31; } .fs-c-productList__list > *:nth-child(92) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 31; grid-row: 31; } .fs-c-productList__list > *:nth-child(93) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 31; grid-row: 31; } .fs-c-productList__list > *:nth-child(94) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 32; grid-row: 32; } .fs-c-productList__list > *:nth-child(95) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 32; grid-row: 32; } .fs-c-productList__list > *:nth-child(96) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 32; grid-row: 32; } .fs-c-productList__list > *:nth-child(97) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 33; grid-row: 33; } .fs-c-productList__list > *:nth-child(98) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 33; grid-row: 33; } .fs-c-productList__list > *:nth-child(99) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 33; grid-row: 33; } .fs-c-productList__list > *:nth-child(100) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 34; grid-row: 34; } .fs-c-productList__list > *:nth-child(101) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 34; grid-row: 34; } .fs-c-productList__list > *:nth-child(102) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 34; grid-row: 34; } .fs-c-productList__list > *:nth-child(103) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 35; grid-row: 35; } .fs-c-productList__list > *:nth-child(104) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 35; grid-row: 35; } .fs-c-productList__list > *:nth-child(105) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 35; grid-row: 35; } .fs-c-productList__list > *:nth-child(106) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 36; grid-row: 36; } .fs-c-productList__list > *:nth-child(107) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 36; grid-row: 36; } .fs-c-productList__list > *:nth-child(108) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 36; grid-row: 36; } .fs-c-productList__list > *:nth-child(109) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 37; grid-row: 37; } .fs-c-productList__list > *:nth-child(110) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 37; grid-row: 37; } .fs-c-productList__list > *:nth-child(111) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 37; grid-row: 37; } .fs-c-productList__list > *:nth-child(112) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 38; grid-row: 38; } .fs-c-productList__list > *:nth-child(113) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 38; grid-row: 38; } .fs-c-productList__list > *:nth-child(114) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 38; grid-row: 38; } .fs-c-productList__list > *:nth-child(115) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 39; grid-row: 39; } .fs-c-productList__list > *:nth-child(116) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 39; grid-row: 39; } .fs-c-productList__list > *:nth-child(117) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 39; grid-row: 39; } .fs-c-productList__list > *:nth-child(118) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 40; grid-row: 40; } .fs-c-productList__list > *:nth-child(119) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 40; grid-row: 40; } .fs-c-productList__list > *:nth-child(120) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 40; grid-row: 40; } .fs-c-productList__list > *:nth-child(121) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 41; grid-row: 41; } .fs-c-productList__list > *:nth-child(122) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 41; grid-row: 41; } .fs-c-productList__list > *:nth-child(123) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 41; grid-row: 41; } .fs-c-productList__list > *:nth-child(124) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 42; grid-row: 42; } .fs-c-productList__list > *:nth-child(125) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 42; grid-row: 42; } .fs-c-productList__list > *:nth-child(126) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 42; grid-row: 42; } .fs-c-productList__list > *:nth-child(127) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 43; grid-row: 43; } .fs-c-productList__list > *:nth-child(128) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 43; grid-row: 43; } .fs-c-productList__list > *:nth-child(129) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 43; grid-row: 43; } .fs-c-productList__list > *:nth-child(130) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 44; grid-row: 44; } .fs-c-productList__list > *:nth-child(131) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 44; grid-row: 44; } .fs-c-productList__list > *:nth-child(132) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 44; grid-row: 44; } .fs-c-productList__list > *:nth-child(133) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 45; grid-row: 45; } .fs-c-productList__list > *:nth-child(134) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 45; grid-row: 45; } .fs-c-productList__list > *:nth-child(135) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 45; grid-row: 45; } .fs-c-productList__list > *:nth-child(136) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 46; grid-row: 46; } .fs-c-productList__list > *:nth-child(137) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 46; grid-row: 46; } .fs-c-productList__list > *:nth-child(138) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 46; grid-row: 46; } .fs-c-productList__list > *:nth-child(139) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 47; grid-row: 47; } .fs-c-productList__list > *:nth-child(140) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 47; grid-row: 47; } .fs-c-productList__list > *:nth-child(141) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 47; grid-row: 47; } .fs-c-productList__list > *:nth-child(142) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 48; grid-row: 48; } .fs-c-productList__list > *:nth-child(143) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 48; grid-row: 48; } .fs-c-productList__list > *:nth-child(144) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 48; grid-row: 48; } .fs-c-productList__list > *:nth-child(145) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 49; grid-row: 49; } .fs-c-productList__list > *:nth-child(146) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 49; grid-row: 49; } .fs-c-productList__list > *:nth-child(147) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 49; grid-row: 49; } .fs-c-productList__list > *:nth-child(148) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 50; grid-row: 50; } .fs-c-productList__list > *:nth-child(149) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 50; grid-row: 50; } .fs-c-productList__list > *:nth-child(150) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 50; grid-row: 50; } .fs-c-productList__list > *:nth-child(151) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 51; grid-row: 51; } .fs-c-productList__list > *:nth-child(152) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 51; grid-row: 51; } .fs-c-productList__list > *:nth-child(153) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 51; grid-row: 51; } .fs-c-productList__list > *:nth-child(154) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 52; grid-row: 52; } .fs-c-productList__list > *:nth-child(155) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 52; grid-row: 52; } .fs-c-productList__list > *:nth-child(156) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 52; grid-row: 52; } .fs-c-productList__list > *:nth-child(157) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 53; grid-row: 53; } .fs-c-productList__list > *:nth-child(158) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 53; grid-row: 53; } .fs-c-productList__list > *:nth-child(159) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 53; grid-row: 53; } .fs-c-productList__list > *:nth-child(160) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 54; grid-row: 54; } .fs-c-productList__list > *:nth-child(161) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 54; grid-row: 54; } .fs-c-productList__list > *:nth-child(162) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 54; grid-row: 54; } .fs-c-productList__list > *:nth-child(163) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 55; grid-row: 55; } .fs-c-productList__list > *:nth-child(164) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 55; grid-row: 55; } .fs-c-productList__list > *:nth-child(165) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 55; grid-row: 55; } .fs-c-productList__list > *:nth-child(166) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 56; grid-row: 56; } .fs-c-productList__list > *:nth-child(167) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 56; grid-row: 56; } .fs-c-productList__list > *:nth-child(168) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 56; grid-row: 56; } .fs-c-productList__list > *:nth-child(169) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 57; grid-row: 57; } .fs-c-productList__list > *:nth-child(170) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 57; grid-row: 57; } .fs-c-productList__list > *:nth-child(171) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 57; grid-row: 57; } .fs-c-productList__list > *:nth-child(172) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 58; grid-row: 58; } .fs-c-productList__list > *:nth-child(173) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 58; grid-row: 58; } .fs-c-productList__list > *:nth-child(174) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 58; grid-row: 58; } .fs-c-productList__list > *:nth-child(175) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 59; grid-row: 59; } .fs-c-productList__list > *:nth-child(176) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 59; grid-row: 59; } .fs-c-productList__list > *:nth-child(177) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 59; grid-row: 59; } .fs-c-productList__list > *:nth-child(178) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 60; grid-row: 60; } .fs-c-productList__list > *:nth-child(179) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 60; grid-row: 60; } .fs-c-productList__list > *:nth-child(180) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 60; grid-row: 60; } .fs-c-productList__list > *:nth-child(181) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 61; grid-row: 61; } .fs-c-productList__list > *:nth-child(182) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 61; grid-row: 61; } .fs-c-productList__list > *:nth-child(183) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 61; grid-row: 61; } .fs-c-productList__list > *:nth-child(184) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 62; grid-row: 62; } .fs-c-productList__list > *:nth-child(185) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 62; grid-row: 62; } .fs-c-productList__list > *:nth-child(186) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 62; grid-row: 62; } .fs-c-productList__list > *:nth-child(187) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 63; grid-row: 63; } .fs-c-productList__list > *:nth-child(188) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 63; grid-row: 63; } .fs-c-productList__list > *:nth-child(189) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 63; grid-row: 63; } .fs-c-productList__list > *:nth-child(190) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 64; grid-row: 64; } .fs-c-productList__list > *:nth-child(191) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 64; grid-row: 64; } .fs-c-productList__list > *:nth-child(192) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 64; grid-row: 64; } .fs-c-productList__list > *:nth-child(193) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 65; grid-row: 65; } .fs-c-productList__list > *:nth-child(194) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 65; grid-row: 65; } .fs-c-productList__list > *:nth-child(195) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 65; grid-row: 65; } .fs-c-productList__list > *:nth-child(196) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 66; grid-row: 66; } .fs-c-productList__list > *:nth-child(197) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 66; grid-row: 66; } .fs-c-productList__list > *:nth-child(198) { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 66; grid-row: 66; } .fs-c-productList__list > *:nth-child(199) { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 67; grid-row: 67; } .fs-c-productList__list > *:nth-child(200) { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 67; grid-row: 67; } }-------------------**/ /**-----------------商品表示数３列に変更ここまで-------------------**/ /**-----------------ページ内リンク　ズレの調整-------------------**/ a.jump_point {height: 1px; display: block; padding-top: 130px; margin-top: -80px; } /**-----------------ページ内リンク　ズレの調整ここまで-------------------**/ /**-----------------Top Carousel Bootstrap-------------------**/ .carousel { position: relative; } .carousel.pointer-event { touch-action: pan-y; } .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel-inner::after { display: block; clear: both; content: ""; } .carousel-item { position: relative; display: none; float: left; width: 100%; margin-right: -100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.6s ease-in-out; } @media (prefers-reduced-motion: reduce) { .carousel-item { transition: none; } } .carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; } /* rtl:begin:ignore */ .carousel-item-next:not(.carousel-item-start), .active.carousel-item-end { transform: translateX(100%); } .carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start { transform: translateX(-100%); } /* rtl:end:ignore */ .carousel-fade .carousel-item { opacity: 0; transition-property: opacity; transform: none; } .carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-start, .carousel-fade .carousel-item-prev.carousel-item-end { z-index: 1; opacity: 1; } .carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end { z-index: 0; opacity: 0; transition: opacity 0s 0.6s; } @media (prefers-reduced-motion: reduce) { .carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end { transition: none; } } .carousel-control-prev, .carousel-control-next { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 15%; padding: 0; color: #fff; text-align: center; background: none; border: 0; opacity: 0.6; transition: opacity 0.15s ease; } @media (prefers-reduced-motion: reduce) { .carousel-control-prev, .carousel-control-next { transition: none; } } .carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus { color: #fff; text-decoration: none; outline: 0; opacity: 0.9; } .carousel-control-prev { left: 0; } .carousel-control-next { right: 0; } .carousel-control-prev-icon, .carousel-control-next-icon { display: inline-block; width: 3rem; height: 3rem; background-repeat: no-repeat; background-position: 50%; background-size: 100% 100%; } /* rtl:options: { "autoRename": true, "stringMap":[ { "name" : "prev-next", "search" : "prev", "replace" : "next" } ] } */ .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); } .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .carousel-indicators { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; justify-content: center; padding: 0; margin-right: 15%; margin-bottom: 1rem; margin-left: 15%; list-style: none; } .carousel-indicators [data-bs-target] { box-sizing: content-box; flex: 0 1 auto; width: 30px; height: 3px; padding: 0; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: #fff; background-clip: padding-box; border: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; opacity: 0.5; transition: opacity 0.6s ease; } @media (prefers-reduced-motion: reduce) { .carousel-indicators [data-bs-target] { transition: none; } } .carousel-indicators .active { opacity: 1; } .carousel-caption { position: absolute; right: 15%; bottom: 1.25rem; left: 15%; padding-top: 1.25rem; padding-bottom: 1.25rem; color: #fff; text-align: center; } .carousel-dark .carousel-control-prev-icon, .carousel-dark .carousel-control-next-icon { filter: invert(1) grayscale(100); } .carousel-dark .carousel-indicators [data-bs-target] { background-color: #000; } .carousel-dark .carousel-caption { color: #000; } /**-----------------Top Carousel Bootstrapここまで-------------------**/ /**---------------------コスプレ_タブ切り替え---------------------**/ .tabs_costume { margin-top: 50px; padding-bottom: 40px; background-color: #ffffff; width: 100%; margin: 0 auto;} /*タブのスタイル*/ .tab_item_costume { width: calc(100%/3); height: 50px; border-bottom: 3px solid #ffffff; background-color: #e6e6e6; line-height: 50px; font-size: 1２px; text-align: center; color: #565656; display: block; float: left; text-align: center; transition: all 0.2s ease; } .tab_item_costume:hover { opacity: 0.75; } /*ラジオボタンを全て消す*/ input[name="tab_item_costume"] { display: none; } /*タブ切り替えの中身のスタイル*/ .tab_content { display: none; padding: 0px; clear: both; overflow: hidden; } /*選択されているタブのコンテンツのみを表示*/ #all:checked ~ #all_content, #programming:checked ~ #programming_content, #design:checked ~ #design_content { display: block; } /*選択されているタブのスタイルを変える*/ .tabs_costume input:checked + .tab_item_costume { background-color: #ffffff; color: #000000; } .top_feature{ width: 900px; margin: auto; } .top_contents_2023 { margin-top: 50px; }@media screen and (max-width: 768px){.top_contents_area{ margin-top: 40px; } } /**---------------------浴衣_タブ切り替え---------------------**/ .tabs_yukata { margin-top: 50px; padding-bottom: 40px; background-color: #ffffff; width: 100%; margin: 0 auto;} /*タブのスタイル*/ .tab_item_yukata { width: calc(100%/3); height: 50px; border-bottom: 3px solid #ffffff; background-color: #e6e6e6; line-height: 50px; font-size: 1２px; text-align: center; color: #565656; display: block; float: left; text-align: center; transition: all 0.2s ease; } .tab_item_yukata:hover { opacity: 0.75; } /*ラジオボタンを全て消す*/ input[name="tab_item_yukata"] { display: none; } /*タブ切り替えの中身のスタイル*/ .tab_content { display: none; padding: 0px; clear: both; overflow: hidden; } /*選択されているタブのコンテンツのみを表示*/ #all:checked ~ #all_content, #programming:checked ~ #programming_content, #design:checked ~ #design_content { display: block; } /*選択されているタブのスタイルを変える*/ .tabs_yukata input:checked + .tab_item_yukata { background-color: #ffffff; color: #000000; } .top_feature{ width: 900px; margin: auto; } .top_contents_2023 { margin-top: 50px; }@media screen and (max-width: 768px){.top_contents_area{ margin-top: 40px; } } .wrapper_yukata { overflow:hidden; font-family:'Quattrocento', 'Noto Serif',serif; width:100%; max-width:900px; margin:0 auto; overflow-x: hidden; } .yukata_contents .list li .sale:before { position:absolute; content:"SALE"; font-size:12px; background:darkred; color:#fff; padding:0px 4px; margin-right:4px; top:4px; left:0; } .buynow {font-size:14px;} .yukata_contents .subtitle2 { font-size:14px; font-weight: 400; margin-bottom: 5px; } .yukata_contents p { font-size: 25px; margin-top:30px; margin-bottom: -3px; } .yukata_contents img { width:100%; } .yukata_contents a { text-decoration:none; } .yukata_contents { text-align:center; } .yukata_contents .subtitle2 { font-size:14px; } .yukata_contents .yukata_caption { font-size:14px; width:90%; margin:4px auto; text-align:left; border-top:1px solid #333; padding:10px 0 0; color:#2f4f4f; } .yukata_contents .list li { box-sizing:border-box; position:relative; display:inline-block; width:46%; text-align:left; font-family:san-serif; margin:10px 1%; padding:10px; } .yukata_contents .list li p.catch { position:absolute; display:block; width:30%; text-align:center; font-family:'Quattrocento', 'Noto Serif',serif; top:10px; left:10px; color:#fff; font-size:20px; transform:rotate(-15deg); } .yukata_contents .list li:first-child { width:95%; } .yukata_contents .list li:first-child div { display:inline-block; width:44%; vertical-align: top; } .yukata_contents .list li:first-child img:first-child{ width:53%; vertical-align: top; margin-right:1%; } .yukata_contents .list li .set { display:inline-block; border:1px solid #777; color:#777; font-size:12px; padding:0 4px; margin:4px auto; } .yukata_contents .list li .price { display:block; font-size:14px; padding-left:6px; } .yukata_contents .list li .price:after { content:"円(税込)"; font-size:0.6em; } .yukata_contents .list li .sale { position:relative; font-size:17px; color:darkred; font-weight:700; padding-left:46px; } .yukata_contents .more { display:block; width:80%; margin:0 auto 60px; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.5); color:#000; padding:10px 0; } .yukata_contents .tile { box-sizing: content-box; margin:0 auto; background:#eae5e3; padding:24px 0px 10px; box-shadow: 0px 0px 4px rgba(0,0,0,0.2) inset; } .yukata_contents .tile li { display:inline-block; width:12%; min-width:44px; margin:0 0.5% 20px; position:relative; } .yukata_contents .tile li a { color:#000; } .yukata_contents .yukata_color li { width:12%; margin:0 1% 20px; } .yukata_contents .yukata_color li:before { content:""; display: block; padding-top: 100%; /* 高さを幅の75%に固定 */ } .yukata_contents .yukata_color li a { position: absolute; display:block; top: 0; left: 0; bottom: 0; right: 0; background:#000; } .yukata_contents .yukata_color li:nth-child(1) { width:36%; } .yukata_contents .yukata_color li:nth-child(1):before { padding-top:33%; } .yukata_contents .yukata_color li:nth-child(2) { width:24%; } .yukata_contents .yukata_color li:nth-child(2):before { padding-top:50%; } .yukata_contents .yukata_color li a.wh {background:#fffffc;} .yukata_contents .yukata_color li a.bk {background:#000b00;} .yukata_contents .yukata_color li a.rd {background: linear-gradient(90deg ,#ba2636 50%,#e597b2 50% 100%);} .yukata_contents .yukata_color li a.bl {background: linear-gradient(90deg ,#223a70 33%,#824880 33% 66%,#0095d9 66% 100%);} .yukata_contents .tile li a span { position:absolute; top:auto; left:0; bottom:-20px; right:0; font-size:14px; text-align:center; } .yukata_contents .gara li { width:18%; margin-top:15px; font-size:14px; } .yukata_contents .gara li a span{ font-size:12px; white-space:nowrap; } .yukata_contents .komono li { width:30%; } .yukata_contents .catch { font-size:12px; margin-top:15px; } .yukata_contents .catch b { display:block; font-size:16px; } @media screen and (min-width:750px){ .yukata_contents .section .list li { width:22%; } } .bottom_plus { text-align: right; width: 95%; margin: 10px auto 0; line-height: 1; padding: 7px 0px 0px 12px; border-top: solid 1px #9D95A5; } .bottom_plus a{ color: #c1b0d0; font-size: 13px; text-decoration: none; } /**-----------------sub_slide-------------------**/ .sub_slide { position: relative; width: 100%; text-align: center; margin: auto; max-width: 750px; margin-bottom: 20px; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .slide_4cut { display: grid; grid-template-columns: repeat(2, 2fr); grid-gap: 5px; } .slide_4cut img { width: 100%; height: auto; margin: 0; padding: 0; } .slide_4cut p { text-align: center; margin: 0; padding: 0; margin-top: 5px; margin-bottom: 7px; font-size: 10px; font-weight: normal; } .slide_4cut a { display: block; text-decoration: none; color: #000000; transition: opacity 0.5s ease; } .slide_4cut a:hover { opacity: 0.7; } .swiper-pagination { margin-bottom: 10px; } .sub_slide_navi { display: flex; flex-direction: row-reverse; margin-top: -10px; } .sub_slide_navi a { z-index: 9999; } .sub_slide_navi a { float: right; font-size: 13px; color: #55b0bc; font-family: 'Noto Sans JP', sans-serif; transition: color 0.5s ease-in-out; text-decoration: none; } .sub_slide_navi a:hover{ color: #9dcbd1; } @media (max-width: 780px) { .swiper-button-next { margin-right: 0px; } .swiper-button-prev{ margin-left: 0px; } } /**-----------------brand_list-------------------**/ .top_brand_list { margin: auto; max-width: 740px; display: grid; grid-template-columns: repeat(6, 2fr); grid-gap: 1px; margin-bottom: 10px; } .top_brand_list span, .top_brand_list a { position: relative; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; width: 100%; } .top_brand_list span img, .top_brand_list a img { width: 100%; } .top_brand_list span .text-overlay, .top_brand_list a .text-overlay { position: absolute; margin: auto; top: 0; bottom: 4%; left: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 90%; height: 85%; background-color: rgba(0, 0, 0, 0.6); color: #fff; opacity: 0; transition: opacity 0.3s ease-in-out; font-size: 14px; text-align: center; } .top_brand_list span:hover .text-overlay, .top_brand_list span.active .text-overlay, .top_brand_list a:hover .text-overlay, .top_brand_list a.active .text-overlay { opacity: 1; } .top_brand_list span.active .text-overlay { opacity: 1; animation: fadeOut 1s 1s ease forwards; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .top_brand_list span.active:after { content: ""; position: absolute; left: 0; right: 0; top: 81%; bottom: 0; width: 92%; margin: auto; height: 4px; background-color: rgb(119, 217, 232); display: block; opacity: 0; transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out; } .top_brand_list span.active .text-overlay { opacity: 1; animation: fadeOut 1s 1s ease forwards; } .top_brand_list span.active:after { transition-delay: 1s; } .top_brand_list span.active:after { animation: fadeIn 1s 1s ease forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .open_brand { margin: auto; text-align: center; max-width: 740px; margin-bottom: 10px; } @media (max-width: 600px) { .top_brand_list span.active:after { bottom: 4px; height: 3px; } .top_brand_list span .text-overlay, .top_brand_list a .text-overlay { font-size: 10px; bottom: 7%; } } @media (max-width: 400px) { .top_brand_list span.active:after { bottom: 5px; height: 3px; } } .fs-c-productPrice:not(.fs-c-productPrice--listed) .fs-c-productPrice__main__price {color:#000;} .fs-c-productPrice__addon:where(:not([class*="--listed"]))::before, .fs-c-productPrice__main__addon:where(:not([class*="--listed"]))::before,.fs-c-productPrice__addon:where(:not([class*="--listed"]))::after, .fs-c-productPrice__main__addon:where(:not([class*="--listed"]))::after {content:"";margin: 2px 1px;} .fs-c-productPrice__addon, .fs-c-productPrice__main__addon {font-size:10px;} .fs-c-button--viewProductDetail {display:none;} .fs-c-productPrice--listed + .fs-c-productPrice--selling .fs-c-productPrice__main__price {color:#e30d18;} .fs-c-productPrice--listed .fs-c-productPrice__main__label {font-size:10px;} .fs-c-productPrice--listed .fs-c-price {text-decoration:line-through;font-size:10px;} .fs-c-productList__list__item {border-bottom:none;} .fs-c-productListItem__viewMoreImageButton {display:none;} .fs-c-productPrice {justify-content: center;} /*一覧ページお気に入りハート*/ .fs-c-productList__list__item {position:relative;} .fs-c-button--addToWishList--icon {position:absolute;top:5%;right:5%;left:auto;color:rgba(200,200,200,.4);} /*商品マークアイコン*/ .fs-c-productMark__mark {font-size:10px;border-radius:0; /* padding:2px 8px; */ } .souryoumuryou {background:#88d2bf;color:#fff;} .sokujitu {color:#fff;} /*SEOテキストボックス*/ .seobox {text-align:center;margin:0px auto;} .seobox h3 {font-size:10px;margin:10px auto 6px;color:#000;letter-spacing:2px;font-weight:100;} .seobox label {font-size:18px;} .seobox #open_box_button, .seobox #open_box_button2 {display:none;} .seobox .open_box {display:none;font-size:10px;padding:10px;white-space: pre-line;} .seobox #open_box_button:checked + .open_box, .seobox #open_box_button2:checked + .open_box {display:block;} /**--パンくず----**/ .fs-c-breadcrumb {background:#f2f2f2;} nav.fs-c-breadcrumb .fs-c-breadcrumb__list {color:#A0A0A0;padding: 2px 10px;line-height: 1.1em;} nav.fs-c-breadcrumb .fs-c-breadcrumb__list > li {box-sizing: border-box;font-size: 11px;font-family: 'Noto Sans JP';} nav.fs-c-breadcrumb .fs-c-breadcrumb__listItem {display:inline;} nav.fs-c-breadcrumb .fs-c-breadcrumb__list a {color:#3ec7bd;font-family: 'Noto Sans JP';} a.more {display: inline-block;border: 1px solid rgba(0,0,0,.1);color:rgba(0,0,0,.7);width: auto;padding: 2px 8px 4px;margin: 10px auto;text-align:center;font-size:11px;} /*--会員価格非表示--*/ .fs-c-productPrice--member {display:none;} p.small {font-size:10px;} /*-上部固定メニューcss--*/ .header_under_space {height:94px;} #top_fixed h1,.head_main_area p {font-size: 10px;text-align: left;margin: 0;padding-left: 3px;width: 150px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:1;} h2,h3,h4,h5,h6 {display:block;width:100%;text-align:center;margin:10px auto;} .fs-l-main {max-width:1216px;} #top_fixed {position:sticky;top:0;left:0;right:0;z-index:99;} .head_main_area {display:block;position:relative;background:rgba(255,255,255,.9);height:50px;text-align:left;padding-left:40px;} .head_main_area .logo img {height:26px;width:auto;margin-top:8px;} .head_main_area .icon_list {position:absolute;right:10px;top:10px;display:flex;} .head_main_area .icon_list a {position:relative;width:28px;height:30px;opacity:.5;} .head_main_area .icon_list a i {position:absolute;top:50%;left:0;right:0;margin:auto;display:block; transform: translate(0,-50%);font-size:20px;} .head_main_area .icon_list a img {width:20px;margin-top:5px;} /*--マイページ--*/ .fs-c-accountService__page {aspect-ratio:1 / 1;flex-basis: calc(100% / 3 - 8px);margin:8px 4px;} .fs-c-accountService__page--couponList {aspect-ratio:auto;} .fs-c-accountService {justify-content:flex-start;} @media screen and (min-width: 960px) { .fs-body-my-top .fs-l-account {width:100%;justify-content: space-around;} } /*--商品詳細ページ商品画像拡大--*/ .fs-c-slick .slick-slide img {width:auto;} /*--カート画面--*/ .fs-c-cartBundleInfo__title {margin:0 auto;} /*--検索一覧商品アイコン--*/ .fs-c-productMark__mark--image img {width:auto;height:22px;vertical-align:middle;} .fs-c-mark--image img {height:30px;width:auto;vertical-align:middle;} .fs-c-productMark {display:inline;vertical-align:middle;} .fs-c-productMark > li {align-self:center;display:inline;margin:0;vertical-align:middle;} .fs-c-productMark > li > span {display:inline-block;margin:0;vertical-align:middle;} /*--商品詳細ページアイコン--*/ .icon-flex-box {display:flex;flex-wrap:wrap;align-items: center;}