. /* * * Templat BASIC form aishipR * * クラス値命名規則 * h:ヘッダー用 m:メイン用 s:サイドバー用 f:フッター用 p:汎用 * * Table Of Content * * 1-0 ALL Setting * 1-1 Webkit appearance * 1-2 Layout Setting * 2-0 Function Parts * 2-1 Clearfix * 2-2 Holizontal Item Block * 2-3 Vertical Item Block * 2-4 Facebook * 2-5 Button * 2-6 機能パーツ：商品カテゴリ * 2-7 グリッドナビ（スタイル:gridnav） * 2-8 非表示コンテンツ(FB/タグマネージャ等用) * 2-9 トグル機能アニメーション * 2-10 カテゴリ・商品詳細ページ 見出し部下線 * 2-11 機能パーツ：テキスト * 2-12 見出し * 2-13 Bootstrap Buttons UI kit * 2-14 Responsive Grid System * 3-0 Module * 3-1 Header * 3-1-1 サイトロゴ * 3-1-2 カート・マイページボタン * 3-1-3 ドロップダウンメニュー * 3-1-4 カート・ログインボタン * 3-1-5 メインメニュー * 3-1-6 検索フォーム * 3-2 Main * 3-2-1 Main IMAGE * 3-2-2 Half Banner * 3-2-3 PICK UP Item * 3-2-4 News & SNS * 3-2-5 ShopInformation * 3-2-6 Notice * 3-3 Aside * 3-3-1 Aside Check List * 3-3-2 Aside Login Form & Search Form * 3-3-3 Aside Banner * 3-3-4 Aside Login Form * 3-4 Footer * 3-4-1 Footer Site Map * 3-4-2 Page Top Btn * 3-4-3 CopyRight * 4-0 Page-Content * 4-1 Archive Page * 4-1-1 Free Area * 4-1-2 Pankuzu List * 4-1-3 Category View Mode * 4-1-4 Item PR Setting * 4-1-5 Cart Button * 4-1-6 Archive List Item * 4-1-7 Archive Thumbnail Item * 4-2 Item Page * 4-2-1 Item IMAGE * 4-2-2 Item Name * 4-2-3 Order Area * 4-2-4 Item Page Titile * 4-2-5 Item Explanation * 4-2-6 Item BuyForm * 4-2-7 System Button * 4-2-8 Item Text * 4-2-9 Item Gallary * 4-2-10 Review * 4-3 Free Page * 4-3-1 TOP PAGE * 4-4 Form Page * 4-4-1 Cart Button Reset * 4-4-2 Form Page * 4-4-3 Form Confirm Page * 4-4-4 Item Search Form * 4-5 MyPage * 4-5-1 Mypage Index * 4-5-2 Member Profile Editor * 4-5-3 Special Point * 4-6 News * 10-0 ALL Setting[ For SmartPhone ] * 10-1 Header * 10-1-3 ドロップダウンメニュー * 12-2 Holizontal Item Block * 13-1-5 メインメニュー * 13-2-2 Half Banner * 13-2-4 News & SNS * 13-2-5 ShopInformation * 13-4-1 Footer Site Map * 13-4-2 Page Top Btn * 14-1-2 Category Pankuzu * 14-1-7 Archive Thumbnail Item * 14-2-3 Order Area * 20-0 ALL Setting[ For Tablet ] * 20-1 Header * 20-1-3 ドロップダウンメニュー * 23-3-3 Aside Banner * 23-4-2 Page Top Btn * 30-0 ALL Setting[ For PC ] * 30-1 Header * 30-1-3 ドロップダウンメニュー * 32-9 トグル機能アニメーション * 33-3-1 Aside Check List * 34-4-1 Footer Site Map * 34-4-2 Page Top Btn */ /* 1-0 ALL Setting *----------------------------------------------------------------------*/ body { background-color: #f5f5f5;} #sysAll{ max-width: 100%; background-color: transparent; padding: 0; } #sysHeader, #sysMain, #sysAside, #sysFotoer { padding: 0 5px;} #sysWrap { margin: 0 auto; padding: 0; overflow: hidden; } #sysMain,#sysAside{ background-color: #fff;} #sysHeader,#sysFooter{ padding: 0; margin: 0;} #sysHeader{ background: #fff;} #sysFooter{ background-color: #999;} #sysFooter > div{ background-color: #ddd; margin: 0 auto; padding-bottom: 5px;} #sysMain{ line-height: 1.5;} /* 1-0 Wrapper Setting */ #sysFooter > div, .p-pagetop .sysContent, .p-topimg .sysContent, .h-sitelogo,.h-utilitybtn, .h-siteinfo, .h-subMenu, .h-mainMenu-corp, .h-mainMenu .sysContent, .h-search, #sysWrap { max-width: 960px; margin: 0 auto; } /* 1-1 Webkit appearance */ input[type=search], input[type=submit] { -webkit-appearance: none; } /* 1-2 input Setting */ input[type=search] { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; line-height: 2.5; padding-left: 5px; } input[type=search]::-webkit-search-decoration { display: none; } input[type="radio"] { -webkit-appearance: none; display: inline-block; vertical-align: baseline; width: 20px; height: 20px; margin-right: 5px; border: 1px solid rgb(212,212,212); cursor: pointer; border-radius: 100%; } input[type="radio"]:checked{ background: #999; } /* 1-3 Content setting */ table { border-collapse: collapse; border-spacing: 0; } select{ height: 30px;} p { margin: 10px auto;} h1,h2,h3,h4,h5,h6{ font-size: inherit;} /* 1-2 Layout Setting */ /* Responsive Grid system */ .grid-row:after { content: ""; display: table; clear: both; } .grid-row { padding-bottom: 0em;} /* DEFAULT COLUMN STYLES */ .grid-col { display: block; float: left; margin-left: 2%; } .grid-col:first-child { margin-left: 0; } .grid-col.col-span6:nth-child(2n+1) { margin-left: 0; } .col-span1 { width: 8.33333333333%; } .col-span2 { width: 16.6666666667%; } .col-span3 { width: 25%; } .col-span4 { width: 33.3333333333%; } .col-span5 { width: 41.6666666667%; } .col-span6 { width: 50%; } .col-span7 { width: 58.3333333333%; } .col-span8 { width: 66.6666666667%; } .col-span9 { width: 75%; } .col-span10 { width: 83.3333333333%; } .col-span11 { width: 91.6666666667%; } .col-span12 { width: 100%; } .grid-col.col-span1 { width: 6.5%; } .grid-col.col-span2 { width: 15.0%; } .grid-col.col-span3 { width: 23.5%; } .grid-col.col-span4 { width: 32.0%; } .grid-col.col-span5 { width: 40.5%; } .grid-col.col-span6 { width: 49.0%; } .grid-col.col-span7 { width: 57.5%; } .grid-col.col-span8 { width: 66.0%; } .grid-col.col-span9 { width: 74.5%; } .grid-col.col-span10 { width: 83.0%; } .grid-col.col-span11 { width: 91.5%; } .grid-col.col-span12 { width: 100%; } /* 2-0 Function Parts *----------------------------------------------------------------------*/ /* 2-1 Clearfix */ .p-clearfix:after, .clearfix:after { content: ""; clear: both; display: block; } /* 2-2 Holizontal Item Block */ .sysContent .sysItemBlock .sysHorizontal { letter-spacing: -.4em; text-align: center; } .sysContent .sysItemBlock .sysHorizontal li { width: 25%; float: none; display: inline-block; letter-spacing: normal; margin: 0; text-align: center; vertical-align: top; } /* 2-3 Vertical Item Block */ /* 2-4 Facebook */ .fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], .fbcomments iframe[style], .fb_iframe_widget span, .widget_facebook_likebox iframe { width: 100% !important;} /* 2-5 Button */ .btn { padding: 10px 20px; display: inline-block; margin-top: 10px; } .btn-info{ background: #999; color: #fff; } .btn-info:hover{ background: #999;} #sysMypageReminder #sysMain input[type=submit], .sysBackButton, .sysNextSubmit { background: #999; color: #fff; display: block; padding: 10px 15px; text-shadow: none; border-color: transparent; border-radius: 3px; width: 80%; height: 50px; margin: 0 auto; } /* 2-6 機能パーツ：商品カテゴリ */ .sysFuncItemCategory a { line-height: 1.75; border-bottom: 1px dotted #999; } .sysFuncItemCategory a:hover { background: #eee; } /* 2-7 グリッドナビ（スタイル:gridnav） */ .gridnav ul li:last-child { border-right: 0;} /* 2-8 非表示コンテンツ(FB/タグマネージャ等用) */ .h-code{ display: none;} /* 2-9 トグル機能アニメーション */ .h-subMenu .sysAccordionInitialHide { display: block!important; position: relative; opacity: 0; z-index: -1; } .h-subMenu2 .sysAccordionInitialHide { display: block!important; position: relative; opacity: 0; z-index: -1; } .h-subMenu .sysAccordionInitialHide.active{ -webkit-transition: all .5s ease-out; transition: all .5s ease-out; opacity: 1; z-index: 999; } .h-subMenu2 .sysAccordionInitialHide.active { -webkit-transition: all .5s ease-out; transition: all .5s ease-out; opacity: 1; z-index: 999; } /* 2-10 カテゴリ・商品詳細ページ 見出し部下線 */ #sysItemDetail #sysMain .sysItemName, .sysExplanation > div > span, .sysRetailPrice, .sysReview > span { border-bottom: 1px dashed lightgray;} /* 2-11 機能パーツ：テキスト */ #sysMain .sysContent h3 { border-bottom: 1px dashed lightgray;} #sysMain .sysContent h3:before { content: ""; padding-right: 10px; } /* 2-12 見出し */ .headline-1st { font-size: x-large; font-weight: bold; border-bottom: 1px dotted rgb(204,204,51); padding: 5px; } .headline-2nd { font-size: large; font-weight: bold; border-bottom: 1px dotted rgb(204,204,51); padding: 5px; margin-left: 15px; } .headline-3rd { font-size: medium; font-weight: bold; border-bottom: 1px dotted rgb(204,204,51); padding: 5px; margin-left: 30px; } /* 2-13 Bootstrap Buttons UI kit */ .btn{text-decoration:none;display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn.active:focus,.btn:active:focus,.btn:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn:focus,.btn:hover{color:#333;text-decoration:none}.btn.active,.btn:active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;pointer-events:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default.active,.btn-default:active,.btn-default:focus,.btn-default:hover,.open .dropdown-toggle.btn-default{color:#333;background-color:#ebebeb;border-color:#adadad}.btn-default.active,.btn-default:active,.open .dropdown-toggle.btn-default{background-image:none}.btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd}.btn-primary.active,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.open .dropdown-toggle.btn-primary{color:#fff;background-color:#3276b1;border-color:#285e8e}.btn-primary.active,.btn-primary:active,.open .dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#428bca;border-color:#357ebd}.btn-primary .badge{color:#428bca;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success.active,.btn-success:active,.btn-success:focus,.btn-success:hover,.open .dropdown-toggle.btn-success{color:#fff;background-color:#47a447;border-color:#398439}.btn-success.active,.btn-success:active,.open .dropdown-toggle.btn-success{background-image:none}.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info.active,.btn-info:active,.btn-info:focus,.btn-info:hover,.open .dropdown-toggle.btn-info{color:#fff;background-color:#39b3d7;border-color:#269abc}.btn-info.active,.btn-info:active,.open .dropdown-toggle.btn-info{background-image:none}.btn-info.disabled,.btn-info.disabled.active,.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled],.btn-info[disabled].active,.btn-info[disabled]:active,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info.active,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning.active,.btn-warning:active,.btn-warning:focus,.btn-warning:hover,.open .dropdown-toggle.btn-warning{color:#fff;background-color:#ed9c28;border-color:#d58512}.btn-warning.active,.btn-warning:active,.open .dropdown-toggle.btn-warning{background-image:none}.btn-warning.disabled,.btn-warning.disabled.active,.btn-warning.disabled:active,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled],.btn-warning[disabled].active,.btn-warning[disabled]:active,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-warning.active,fieldset[disabled] .btn-warning:active,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger.active,.btn-danger:active,.btn-danger:focus,.btn-danger:hover,.open .dropdown-toggle.btn-danger{color:#fff;background-color:#d2322d;border-color:#ac2925}.btn-danger.active,.btn-danger:active,.open .dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled,.btn-danger.disabled.active,.btn-danger.disabled:active,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled],.btn-danger[disabled].active,.btn-danger[disabled]:active,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger,fieldset[disabled] .btn-danger.active,fieldset[disabled] .btn-danger:active,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{color:#428bca;font-weight:400;cursor:pointer;border-radius:0}.btn-link,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#2a6496;text-decoration:underline;background-color:transparent}.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color:#999;text-decoration:none}.btn-group-lg>.btn,.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.btn-group-sm>.btn,.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-group-xs>.btn,.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%;padding-left:0;padding-right:0}.btn-block+.btn-block{margin-top:5px} /* 2-14 Responsive Grid System */ /* 12 COLUMN : RESPONSIVE GRID SYSTEM DEVELOPER : DENIS LEBLANC URL : http://responsive.gs VERSION : 3.0 LICENSE : GPL & MIT */ .row:after, .col:after, { content: ""; display: table; clear: both; } .row { padding-bottom: 0em;} /* DEFAULT COLUMN STYLES */ .col { display: block; float: left; } .span_1 { width: 8.33333333333%; } .span_2 { width: 16.6666666667%; } .span_3 { width: 25%; } .span_4 { width: 33.3333333333%; } .span_5 { width: 41.6666666667%; } .span_6 { width: 50%; } .span_7 { width: 58.3333333333%; } .span_8 { width: 66.6666666667%; } .span_9 { width: 75%; } .span_10 { width: 83.3333333333%; } .span_11 { width: 91.6666666667%; } .span_12 { width: 100%; } .gutters .col { margin-left: 2%;} .gutters .col:first-child { margin-left: 0; } .gutters .span_1 { width: 6.5%; } .gutters .span_2 { width: 15.0%; } .gutters .span_3 { width: 23.5%; } .gutters .span_4 { width: 32.0%; } .gutters .span_5 { width: 40.5%; } .gutters .span_6 { width: 49.0%; } .gutters .span_7 { width: 57.5%; } .gutters .span_8 { width: 66.0%; } .gutters .span_9 { width: 74.5%; } .gutters .span_10 { width: 83.0%; } .gutters .span_11 { width: 91.5%; } .gutters .span_12 { width: 100%; } /* 3-0 Module *----------------------------------------------------------------------*/ /* 3-1 Header*/ .h-siteinfo{ height: 40px; background-color: #fff; } .h-siteinfo h1 { color: #000;} /* 3-1-1 サイトロゴ */ .h-sitelogo { margin: 0 auto; background: #fff; padding-bottom: 5px; padding-left: 5px; } .h-sitelogo .sysContent { width: 200px; max-width: 50%; } /* 3-1-2 カート・マイページボタン */ .h-utilitybtn { margin: 0 auto; } .h-utilitybtn .sysContent{ width: 30%; float: right; position: relative; bottom: 40px; height: 40px; } /* 3-1-3 ドロップダウンメニュー */ .h-subMenu{ position: relative; } .h-subMenu .sysAccordionInitialHide { position: absolute; background: rgb(0,0,0); background: rgba(0,0,0,0.5); right: 0; padding: 9px 10px; width: 100%; } .h-subMenu2 { position: absolute; background: rgb(0,0,0); background: rgba(0,0,0,0.5); right: 0; padding: 9px 10px; width: 100%; } .h-subMenu ul li { margin: 10px auto;} .h-subMenu2 ul li { margin: 10px auto;} .h-subMenu .sysHeadline{ color: #6989b4; line-height: 60px; text-align: center; background: #daf3ff!important; } .h-subMenu2{ color: #6989b4; line-height: 60px; text-align: center; background: #daf3ff!important; } /* 3-1-4 カート・ログインボタン */ .h-utilitybtn ul li{ margin-right: 2%; width: 48%!important; height: 40px; line-height: 40px; margin-bottom: 0; } .h-utilitybtn ul li.sysText a { border: 1px solid rgb(212,212,212); line-height: 36px; height: 36px; font-size: small; margin-top: 1px; } .h-utilitybtn ul li.sysText a:hover { background: rgb(212,212,212); } .h-utilitybtn ul li.sysText a:before { content: ""; width: 15px; height: 15px; display: inline-block; vertical-align: middle; margin-right: 5px; } .h-utilitybtn ul li.sysText:nth-child(1) a:before { background: url(https://template-advance.aispr.jp/img/icon/icon-mypage.png); background-size: 100%; } .h-utilitybtn ul li.sysText:nth-child(2) a:before { background: url(https://template-advance.aispr.jp/img/icon/icon-cart.png); background-size: 100%; } /* 3-1-5 メインメニュー*/ .h-mainMenu{ margin: 0 auto; background: #999;} .h-mainMenu ul li:last-child a { border: 0; } .h-mainMenu ul { display: table; width: 100%; } .h-mainMenu ul li { display: table-cell; float: none; height: 50px; border-right: 1px solid; } .h-mainMenu ul li.sysText a { line-height: 1; border: none; white-space: normal; padding: 20px 0; margin: 0 auto; } .h-mainMenu .sysContent { background: #fff; } /* 3-1-5-1 メインメニュー（コーポレート）*/ .h-mainMenu-corp{ margin: 0 auto; background: #999;} .h-mainMenu ul li:last-child a { border: 0; } .h-mainMenu-corp ul { display: table; width: 100%; } .h-mainMenu-corp ul li { display: table-cell; float: none; height: 50px; border-right: 1px solid; } .h-mainMenu-corp ul li.sysText a { line-height: 1; border: none; white-space: normal; padding: 20px 0; margin: 0 auto; } .h-mainMenu-corp .sysContent { margin: 0 auto; background: #fff; } /* 3-1-6 検索フォーム */ .h-search{ margin: 0 auto; position: relative; padding: 0 5px 0 ; } .h-search .sysItemSearchForm { display: table; width: 100%; } .h-search .sysItemSearchFormWord { display: table-cell; padding-right: 10px; width: 100%; vertical-align: top; } .h-search .sysItemSearchFormWord input{ height: 40px; border: 1px solid #c9c9c9; padding: 5px; vertical-align: bottom; } .h-search .sysSearchButton { width: 100px; padding: 6px; height: 40px; border: 1px solid #bd8f54; border-radius: 3px; margin: 0 auto; background-color: #999; } /* 3-1-7 Main Image */ .p-topimg{ background-color: #ddd; } .p-topimg .sysContent{ max-width: 100%; height: auto; } /* 3-2 Main*/ /* 3-2-1 */ /* 3-2-2 Half Banner */ .p-banner ul { text-align: center; clear: both; margin: 10px auto; } .p-banner li { width: 49%; display: inline-block; } /* 3-2-3 PICK UP Item */ .p-pickup .sysContent { } .p-pickup .sysContent .sysHorizontal li { padding: 0 2.5px; } /* 3-2-4 News & SNS */ .p-news .sysContent { line-height: 1.5;} .p-news li { padding-left: 10px;} /* 3-2-5 ShopInformation */ .p-shopInfo .sysContent{ text-align :center;} .shopinfo-inner { display: inline-block; width: 48%; width: -webkit-calc(50% - 10px); width: calc(50% - 10px); margin: 0px; padding-bottom: 10px; line-height: 1.5; overflow: hidden; vertical-align: top; text-align: left; } .shopinfo-inner h3 { font-size: 150%; border-bottom: 1px dotted #666; padding: 0 0 5px 0px; margin-bottom: 10px; } .shopinfo-inner .btn{ float: right; margin-right: 20px; } /* 3-2-6 Notice */ .p-notice .sysHeadline { background: #999!important; border-color: #e60054; text-align: center; font-weight: bold; } /* 3-3 Aside*/ /* 3-3-1 Aside Check List */ .s-checklist li { margin: 5px auto; padding-bottom: 10px; border-bottom: 1px dotted; } /* 3-3-2 Aside Login Form & Search Form */ .s-login { line-height: 1.75; } .s-login ul { text-align: center; } .s-login li { display: inline-block; width: 46%; line-height: 1.5; vertical-align: top; background: #666; } .s-login li a { color: #fff; text-decoration: none; padding: 10px; display: block; } .s-login input { width: 95%; margin: 5px auto; line-height: 2; display: block; } .s-login .sysLoginButton { border: none; padding: 5px; background: #666; color: #fff; margin: 10px auto; border-radius: 0; } .s-login a { text-decoration: none; display: inline-block; background: #666; text-align: center; padding: 5px 15px; margin: 5px; color: #fff; border-radius: 3px; } /* 3-3-3 Aside Banner */ .s-banner { margin-bottom: 5px;} .s-banner li { margin: 30px auto;} /* 3-3-4 Aside Login Form */ .s-search{ line-height: 1.75;} .s-search ul{ text-align: center;} .s-search input[type=search]{ width: 95%!important; margin: 5px auto; line-height: 2.5; display: block; } .s-search .sysItemSearchAndOr, .s-search .sysItemSearchFormCategory { text-align: center; } .sysSearchButton { border: none; padding: 10px; background: #666; color: #fff; width: 95%; display: block; margin: 10px auto; } /* 3-4 Footer*/ /* 3-4-1 Footer Site Map */ .f-sitemap ul li.sysText a { color: #fff; padding: 0; background: #666; display: block; border: 1px solid #ddd; text-align: center; } .f-sitemap ul li.sysText a:hover { background: #999; } /* 3-4-2 Page Top Btn */ .p-pagetop .btn { text-decoration: none; margin: 0 auto; display: block; text-align: center; padding: 20px; } /* 3-4-3 CopyRight */ .f-copyright { margin: 0 auto; text-align: center; padding: 10px 0; } .f-copyright .sysContent{ border-top: 1px solid #666; } /* 4-0 Page-Content *----------------------------------------------------------------------*/ /* 4-1 Archive Page */ /* 4-1-1 Free Area */ /* 4-1-2 Pankuzu List*/ .sysCategoryPankuzu, .sysItemCategoryPankuzu { font-size: small; margin-bottom: 5px; white-space: nowrap; overflow: hidden; background: #666; color: #fff; padding: 0 5px; } .sysCategoryPankuzu a, .sysItemCategoryPankuzu a { display: inline-block; background: #666; padding: 5px 10px; color: #fff; text-decoration: none; } .sysCategoryPankuzu a:hover, .sysItemCategoryPankuzu a:hover { background: #999; } /* 4-1-3 Category View Mode */ .sysItemCategoryCtl { font-size: small; } .sysItemCategoryCtl a { display: inline-block; padding: 2px 4px; background: #ddd; border: 1px solid #bd8f54; border-radius: 3px; text-decoration: none; margin: 2px 0; } /* 4-1-4 Item PR Setting */ .sysItemPr { font-size: small; padding: 0 5px; background: #fff; border: 1px solid #bf0000; border-radius: 3px; display: inline-block; font-weight: bold; color: #bf0000; } /* 4-1-5 Cart Button */ .sysCartButton { border: 1px solid #a88734; padding: 10px; margin: 5px 0; border-radius: 5px; background-color: #f0c14b; color: #111; cursor: pointer; font-weight: bold; } .sysCartButton:hover { background: #f7dfa5; } /* 4-1-6 Archive List Item */ .sysItemList ul.sysList li .sysThumbnailImage { width: 40%; max-width: 200px; } /* 4-1-7 Archive Thumbnail Item */ .sysItemList ul.sysThumbnail li { display: inline-block; float: none; vertical-align: top; letter-spacing: normal; } .sysItemList ul.sysThumbnail { letter-spacing: -.4em; } .sysItemList ul.sysThumbnail input { width: 100%; padding: 10px 0; } /* 4-1-8 Deliveries Table */ ul.SysDeliveriesTable { border-style: solid; border-width: 0px; list-style: none; display: table; margin: 0; padding: 0; } ul.SysDeliveriesTable > li { display: table-row; } ul.SysDeliveriesTable > li > div { border-style: solid; border-width: 1px; display: table-cell; padding:10px; } /* 4-2 Item Page */ /* 4-2-1 Item IMAGE */ .sysThumbnailImage > span,.sysThumbnailImage > br { display: none;} .sysItemImages .sysImageList li{ display: inline-block; vertical-align: top; height: auto; width: 32%; line-height: 1; float: none; margin: 1% 0; } /* 4-2-2 Item Name */ .sysItemName h1 { font-size: x-large;} /* 4-2-3 Order Area */ .orderArea { letter-spacing: -.4em; text-align: center; } .orderArea > div { width: 50%; display: inline-block; letter-spacing: normal; text-align: left; vertical-align: top; padding-right: 20px; } .orderArea > .orderArea > div { width: 100%; display: block; } /* 4-2-4 Item Page Titile */ .sysItemName, .sysExplanation > div > span, .sysReview > span{ display: block; margin-bottom: 10px; font-size: large; } /* 4-2-5 Item Explanation */ .sysExplanation table { width: 100%; text-align: center; border: 1px solid #bd8f54; line-height: 2; } .sysExplanation thead { text-align: center; color: #fff; background: #999; } .sysExplanation td { font-size: small; text-align: left; padding-left: 10px; } /* 4-2-6 Item BuyForm */ #sysItemDetail .sysRetailPrice { font-weight: bold;} #sysItemDetail .sysPr { text-align: center;} #sysItemDetail .sysPr > span { display: inline-block;} #sysItemDetail .sysForm select { min-width: 190px; width: 75%; display: inline-block; float: right; } #sysItemDetail #sysVariation { overflow: hidden; margin: 5px auto; } #sysItemDetail #sysVariation >div { margin: 10px auto; overflow: hidden; } #sysItemDetail .sysNumArea button { display: inline-block; width: 48%; background: #666; padding: 10px; border: 1px solid #bd8f54; border-radius: 5px; color: #fff; } #sysItemDetail .sysNumArea { padding-top: 5px; clear: both; text-align: right; } #sysWishlist .sysButton, #sysItemDetail .sysCartButton { width: 98%; margin-left: 2%; } #sysItemDetail .sysShare { padding: 5px 0 0 2%;} #sysCartInForm { width: 100%;} /* 4-2-7 System Button */ .sysLoginButton, .sysButton { border: none; padding: 10px; margin: 5px 0; border-radius: 5px; background-color: #666; color: #fff; cursor: pointer; } .sysLoginButton, .sysButton:hover { background: #999; } .sysLoginButton{ display: block; width: 50%; margin: 10px auto; padding: 20px; } /* 4-2-8 Item Text */ .sysDescription,.sysImageDescription{ font-size: 0.95rem;} /* 4-2-9 Item Gallary */ .sysImageListSimple li { margin-bottom: 10px;} /* 4-2-10 Review */ .sysReview input{ background: #666; color: #fff; text-shadow: none; border: 1px solid #bd8f54; border-radius: 3px; display: block; padding: 10px; margin: 5px auto; width: 50%; } .sysReview > br { display: none; } .sysReviewHistoryList { padding: 0 10px; border: 1px solid lightgray; } .sysReviewHistoryList li { margin-bottom: 5px; border-bottom: 1px dashed lightgray; padding: 5px 0; } .sysReviewHistoryList li:last-child { border: none;} .sysNickname, .sysEvaluation { display: inline-block; padding: 0 10px 0 0; } .sysNickname { font-size: large; font-weight: bold; } .sysReviewDatetime { font-size: small; text-align: right; padding-right: 20px; } .sysReviewText { font-size: small;} /* 4-3 Free Page */ /* 4-3-1 TOP PAGE */ /* 4-4 Form Page */ /* 4-4-1 Cart Button Reset */ .sysCart #sysMain .sysNextSubmitArea .sysNextSubmit, .sysCart #sysMain input[type=submit], .sysCart #sysMain button[type=submit], .sysCart #sysMain button { background: #666; color: #fff; text-shadow: none; } .sysCartInDone{ margin: 0;} /* 4-4-2 Form Page */ #sysMemberRegisterRegister #sysMain h2, #sysMemberRegisterConfirm #sysMain h2, #sysMemberRegisterIndex #sysMain h2, #sysFormThanks #sysMain h2, #sysFormConfirm #sysMain h2, #sysFormIndex #sysMain h2 { border-bottom: 1px solid #999; background-color: #999; color: #ffffff; font-size: large; padding: 5px; } #sysMemberRegisterRegister #sysMain, #sysMemberRegisterConfirm #sysMain, #sysMemberRegisterIndex #sysMain, #sysFormThanks #sysMain, #sysFormConfirm #sysMain, #sysFormIndex #sysMain { border-color: #999; border-style: solid; border-radius: 0px; border-width: 1px; box-shadow: 1px 1px 1px gray; margin-bottom: 10px; padding: 0; } #sysMemberRegisterConfirm #sysMain > form, #sysMemberRegisterIndex #sysMain > form, #sysFormConfirm #sysMain > form, #sysFormIndex #sysMain > form { padding: 10px;} #sysMypageReminder #sysMain input, #sysMemberRegisterIndex #sysMain input, #sysFormIndex #sysMain input { line-height: 15px; padding: 5px; font-size: small; margin: 5px auto; } #sysMain input[type="email"], #sysMain input[type="number"], #sysMain input[type="password"], #sysMain input[type="tel"], #sysMain input[type="url"], #sysMain input[type="text"], #sysMain textarea { width: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFFFFF)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFEFEFEF', endColorstr='#FFFFFFFF'); border-radius: 5px 5px 5px 5px; border: #999999 1px solid; line-height: 3; } #sysMain textarea { min-height: 75px;} .sysZipcode button, .sysZipcode .sysFormField { display: inline-block;} .sysZipcode .sysFormLabel { display: block;} .sysZipcode .sysFormField { width: 200px;} .sysZipcode br{ display: none;} .sysBirthday input { width: auto!important;} /* 4-4-3 Form Confirm Page */ #sysMypageEditConfirm #sysMain .sysFormField, #sysMemberRegisterConfirm #sysMain .sysFormField, #sysFormConfirm #sysMain .sysFormField { border: 1px solid #bd8f54; line-height: 2; padding-left: 10px; font-size: small; border-radius: 3px; margin: 5px auto; min-height: 20px; } /* 4-4-4 Item Search Form */ .sysItemSearchForm > div { margin: 10px auto; width: 90%; text-align: left; } form.sysItemSearchForm { text-align: center; } .sysItemSearchForm > div.sysItemSearchFormWord { width: 95%; } /* 4-5 MyPage */ /* 4-5-1 Mypage Index */ .sysMypage #sysMain{ border-color: #999; border-style: solid; border-radius: 0px; border-width: 1px; box-shadow: 1px 1px 1px gray; margin-bottom: 10px; padding: 0; } .sysMypage #sysMain h2{ border-bottom: 1px solid #999; background-color: #999; color: #ffffff; font-size: large; padding: 5px; } .sysMypage #sysMain > form, .sysMypage #sysMain > div { padding: 5px 10px;} .sysMypageNav form:nth-of-type(5){ display:none; } /* 購入履歴 */ .sysOrderList { border: 1px solid rgb(212,212,212); padding: 10px; max-height: 400px; overflow-y: scroll; } .sysOrderList li { border-bottom: 1px dotted rgb(212,212,212); margin-bottom: 5px; padding-bottom: 5px; } /* マイページボタン */ .sysMypageNav > form { display: inline-block; width: 49%; vertical-align: top; } .sysMypageNav .sysButton { width: 100%; display: block; line-height: 40px; font-size: 1rem; } /* 4-5-2 Member Profile Editor */ #sysMypageEditDelivery #sysMain > form, #sysMypageEditMember #sysMain > form{ padding: 10px;} #sysMypageEditDelivery #sysMain input, #sysMypageEditMember #sysMain input { line-height: 15px; padding: 5px; font-size: small; margin: 5px auto; } #sysMypageEditConfirm #sysMain > form { padding: 10px;} /* 4-5-3 Special Point */ .sysSpecialPoint { overflow: hidden; letter-spacing: -.4em; } .sysSpecialPoint > div:nth-child(2n) { width: 60%; } .sysSpecialPoint > div { display: inline-block; letter-spacing: normal; padding: 5px 10px; border-bottom: 1px solid #d5d5d5; } .sysSpecialPoint > div:nth-child(2n+1) { width: 40%; } /* 4-5-4 Coupon List */ .sysCoupon { border: 1px solid #d5d5d5; margin: 10px; } /* 4-6 News Page */ .news-row { border-color: #999; border-style: solid; border-radius: 0px; border-width: 1px; box-shadow: 1px 1px 1px gray; margin-bottom: 10px; } .news-row > h1 { border-bottom: 1px solid #999; background-color: #999; color: #ffffff; font-size: large; padding: 5px; background: -webkit-gradient(linear, left top, left bottom, from(), to()); background: -webkit-linear-gradient(top, , ); } .sysNewsDetail { padding: 10px 20px;} /* マイページ（複数配送先編集画面）*/ .sysSelectAddress a { display: block; text-decoration: none; border: 1px solid; padding: 10px; } .sysSelectAddress { margin: 10px 0; } .sysSelectAddress a:hover { background: #eee; } /*スライダーCSS*/ /** * BxSlider v4.1.2 - Fully loaded, responsive content slider * http://bxslider.com * * Written by: Steven Wanderski, 2014 * http://stevenwanderski.com * (while drinking Belgian ales and listening to jazz) * * CEO and founder of bxCreative, LTD * http://bxcreative.com */ /** RESET AND LAYOUT ===================================*/ .bx-wrapper { position: relative; margin: 0 auto 60px; padding: 0; *zoom: 1; } .bx-wrapper img { max-width: 100%; display: block; } /** 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; border: 5px solid #fff; left: -5px; background: #fff; /*fix other elements on the page moving (on Chrome)*/ -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); } .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; } /* 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 { 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: left; width: 80%; } .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\9; background: rgba(80, 80, 80, 0.75); width: 100%; } .bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; } .bx-wrapper img { margin: 0 auto; } [class^="img-flex-"] { margin-bottom: 20px; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .img-flex-2 > img, .img-flex-2 a { width: 49%; height: 49%; } .img-flex-3 > img, .img-flex-3 a { width: 32%; height: 32%; } .img-flex-4 > img, .img-flex-4 a { width: 24%; height: 24%; } .sysItemPrice {color: #bd1e48; font-weight: bold;} .sysRetailPrice {padding-bottom: 1.2rem; color: #bd1e48; font-weight: bold;} /* カスタマイズ（元の色#7ac970） *----------------------------------------------------------------------*/ body { background-color: #ffffff!important;} .h-mainMenu{ background:#000000!important; } .h-mainMenu-corp{ background:#000000!important; } .asideCnt h2{ background: #000000!important; color: #ffffff!important; } .asideCnt .sysHeadline { background: #000000!important; color: #ffffff!important; } .mainCnt .sysHeadline { background: #000000!important; color: #ffffff!important; } .h-subMenu ul li{ background: #000000!important; color: #ffffff!important; } .h-subMenu2 ul li{ background: #000000!important; color: #ffffff!important; } .sysCategoryPankuzu, .sysItemCategoryPankuzu { background: #000000!important; color: #ffffff!important; 　　font-weight: bold!important; } .sysCategoryPankuzu a, .sysItemCategoryPankuzu a { background: #000000!important; color: #ffffff!important; 　　font-weight: bold!important; } .f-copyright .sysContent { background: #000000!important; color: #ffffff!important; } .f-sitemap ul li.sysText a { background: #000000!important; color: #ffffff!important; } #sysFooter{background-color: #ffffff!important; } #sysFooter > div{ background-color: #fff!important; margin: 0 auto; padding-bottom: 5px;} .footerCnt .sysHeadline { background: #000000!important; color: #ffffff!important; } .asideCnt { border-color: #5b3b12!important; } .asideCnt .sysHeadline { border-bottom: 2px solid #5b3b12!important; } .mainCnt { border-color: #5b3b12!important; } .mainCnt .sysHeadline { border-bottom: 2px solid #5b3b12!important; } .h-mainMenu ul li { border-right: 1px solid #ffffff!important; } .h-mainMenu nav { border: 1px solid #ffffff!important; } .mainCnt1{ text-align: center; } .sysMypageNav from:nth-of-type(4-2-5){display:none;} sysMypageNav from:nth-of-type(4-1-2){ display:none; } /*oem_newのページ用*/ /** 汎用スタイル **/ #oem_iriguchi #sysMain{ width:100%; } #oem_iriguchi body { color: #666; line-height: 1.6rem; } #oem_iriguchi .py-3{ background-color: black; max-width: 100%; } #oem_iriguchi .info ,.font-weight-bold.tro{ color: cornflowerblue; } #oem_iriguchi .nav-item a{ font-size: 1.5rem; } #oem_iriguchi button.navbar-toggler:focus{ outline:none; } #oem_iriguchi .ls { letter-spacing: 0.2rem; } #oem_iriguchi .bw-2 { border-width: 2px !important; } #oem_iriguchi .bw-3 { border-width: 3px !important; } #oem_iriguchi ul.tr-list{ display: block; list-style: none; } #oem_iriguchi .arrow{ text-align: center } /** 見出し円 **/ #oem_iriguchi .circle { width: 200px; height: 200px; text-align:center; border-radius: 50%; border: solid 3px #6c757d; padding: 3rem; margin: 0 auto; } #oem_new .col-md-4, .col-md-4::before{ display:none; } #oem_iriguchi .sysContent h3 border{ display:none; } /** 既存スタイルの疑似上書き **/ /** olカウンターを丸囲いに **/ #oem_iriguchi ol.num-list { counter-reset: my-counter; list-style: none; padding: 0; } #oem_iriguchi .num-list li { margin-bottom: 10px; position: relative; font-weight: bold; font-size: 1.2rem; } #oem_iriguchi .num-list li:before { content: counter(my-counter); counter-increment: my-counter; border: 2px solid #666; color: #666; float: left; text-align: center; height: 30px; width: 30px; border-radius: 50%; margin-right: 5px; margin-top: -2px; font-family: 'Big Shoulders Display', cursive; } /** carouselの背景に指定画像 **/ #oem_iriguchi .carousel slide carousel-fade{ background: url('../img/top-img1.jpg') center no-repeat; background-size: cover; height: 100%; min-height: 500px; } /** パンくずリストのセパレータ変更 **/ #oem_iriguchi li.breadcrumb-item.wf-breadcrumb-separator::before { margin-left: 6px; font-family: 'Font Awesome 5 Free'; content: '\f105'; font-weight: bold; } /** customized css **/ /** size-{単位}: 正方サイズ指定 **/ #oem_iriguchi .wf-square-xs { width: 20px; height: 20px; } #oem_iriguchi .wf-square-lg { width: 260px; height: 260px; } /** 正円＋テキスト **/ #oem_iriguchi .wf-circle { transform: translateY(-50%); } #oem_iriguchi .wf-circle > span { position: absolute; display: inline-block; font-size: 1.3rem; left: 0; top: 50%; transform: translateY(-50%); width: 150px; text-align: center; } /** 下側のみが突き出した五角形 **/ #oem_iriguchi .wf-penta { clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%); } /** 声のテキスト **/ #oem_iriguchi .comment-box { position: relative; display: inline-block; padding: 2rem; font-size: 16px; background: #f8f9fa; } /** 下側のみが突き出した吹き出し **/ #oem_iriguchi .down-balloon:after { content: ""; position: absolute; bottom: -50%; left: 20%; margin-left: -2.5rem; border: 5rem solid transparent; border-top: 3rem solid #f8f9fa; z-index: 999; } #oem_iriguchi .down-balloon p { margin: 0; padding: 0; } /** 上側のみが突き出した吹き出し **/ #oem_iriguchi .up-balloon:before { content: ""; position: absolute; top: -130px; left: 20%; margin-left: -2.5rem; border: 5rem solid transparent; border-bottom: 3rem solid #f8f9fa; z-index: 999; } #oem_iriguchi .up-balloon p { margin: 0; padding: 0; } /** 吹き出し **/ #oem_iriguchi .wf-balloon { position: relative; padding: 20px; border: 2px solid rgba(75, 75, 75, 0.85); border-radius: 12px; } #oem_iriguchi .wf-balloon-left::before, #oem_iriguchi .wf-balloon-left::after, #oem_iriguchi .wf-balloon-right::before, #oem_iriguchi .wf-balloon-right::after { content: ''; position: absolute; display: block; width: 0; height: 0; top: 50px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; } #oem_iriguchi .wf-balloon-left::before { left: -15px; border-right: 15px solid rgba(75, 75, 75, 0.85); } #oem_iriguchi .wf-balloon-left::after { left: -12px; border-right: 15px solid white; } #oem_iriguchi .wf-balloon-right::before { right: -15px; border-left: 15px solid rgba(75, 75, 75, 0.85); } #oem_iriguchi .wf-balloon-right::after { right: -12px; border-left: 15px solid white; } /** トップへ戻るボタン **/ #oem_iriguchi .wf-gotta-top { width: 100px; height: 74px; right: 0; bottom: 0; background: #4f4f4f; opacity: 0.6; } /** ステップフロー **/ #oem_iriguchi .step-bar { display: flex; position: relative; margin: 20px auto; text-align: center; padding: 0; } #oem_iriguchi .step-bar li { font-size: 12px; list-style: none; position: relative; width: 33.333%; } #oem_iriguchi .step-bar li:after { background: #D0E1F9; content: ""; width: calc(100% - 50px); height: 5px; position: absolute; left: calc(-50% + 32px); top: 50px; } #oem_iriguchi .step-bar li:first-child:after { display: none; } #oem_iriguchi .step-bar li span { background: #D0E1F9; color: #ffffff; display: inline-block; margin-bottom: 5px; padding: 20px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; z-index: 999; } #oem_iriguchi .step-bar .visited:after { background: #4D648D; } #oem_iriguchi .step-bar .visited span { background: #4D648D; } #oem_iriguchi .p-0{ background-color: black !important; max-width: 100%; } /** Twitterのアイコン カラーチェンジ **/ #oem_iriguchi .my-skyblue{ color: deepskyblue; } /** instaのアイコン カラーチェンジ **/ #oem_iriguchi .my-plum{ color: darkviolet; } /*=====ここから追加したCSS=====*/ /** section class="new_oem_1" **/ #oem_iriguchi .new_oem_1_contents__1{ width: 100%; height: auto; } #oem_iriguchi .new_oem_1_contents__1 h2{ width: 100%; margin: 30px auto 0 auto; padding: 0; font-size: 2.3rem; padding: 30px 0; text-align: center; background-color: #222; color: #FFF; } #oem_iriguchi .new_oem_1_contents__1 span{ font-size: 1.4rem; } #oem_iriguchi .new_oem_1_contents__1 h5{ width: 100%; margin: 0; padding: 15px 0; font-size: 1.2rem; text-align: center; margin-bottom: 0; color: #FFFFFF; background-color: #6C757D; } #oem_iriguchi .new_oem_1_contents__2{ width: 70%; height: auto; margin: 20px auto; } #oem_iriguchi .new_oem_1_contents__2{ display: flex; } #oem_iriguchi .new_oem_1_txt{ margin: 0 auto; padding: 1rem; width: 33.33333%; height: auto; font-size: 1.0rem; text-align: center; position: relative; } #oem_iriguchi .new_oem_1_txt:first-letter{ font-size: 150%; color: #eb6100; } #oem_iriguchi .new_oem_1_txt:before{ position: absolute; bottom: 10px; left: calc(50% - 30px); width: 60px; height: 5px; content: ''; border-radius: 3px; background: #eb6100; } #oem_iriguchi .new_oem_1_contents__3{ width: 70%; height: auto; margin: 30px auto 0 auto; padding: 10px 0; display: flex; justify-content: space-around; align-items: center; border-radius: 0.5rem; background-color: #CC0052; color: #FFF; } #oem_iriguchi .new_oem_1_contents__3 h1{ width: 40%; height: auto; text-align: center; font-size: 2rem; border-right: 4px solid #FFF; } #oem_iriguchi .new_oem_1_contents__3 h5{ width: 60%; height: auto; padding: 0 30px 0 50px; display: flex; justify-content: center; font-size: 1.5rem; } #oem_iriguchi .new_oem_1_contents__4{ width: 70%; height: auto; margin: 10px auto; display: flex; } #oem_iriguchi .new_oem_1_contents__4_left{ width: 50%; text-align: center; } #oem_iriguchi .new_oem_1_contents__4_right{ width: 50%; text-align: center; } #oem_iriguchi .new_oem_1_contents__4 h2{ font-size: 1.3rem; } #oem_iriguchi .new_oem_1_contents__5{ width: 70%; height: auto; margin: 0 auto; display: flex; justify-content: space-around; } #oem_iriguchi .new_oem_1_contents__5:nth-last-child(4){ padding-right: 0; } #oem_iriguchi .new_oem_1_contents__5_box{ width: 25%; height: auto; padding-right: 10px; display: flex; flex-direction: column; align-items: center; } #oem_iriguchi .new_oem_1_contents__5_box img{ width: 100%; height: auto; } #oem_iriguchi .new_oem_1_contents__5_box h2{ position: relative; padding: 0 40%; text-align: center; } #oem_iriguchi .new_oem_1_contents__5_box h2:before{ position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 2px; content: ''; background: #121f3a; } #oem_iriguchi .new_oem_1_contents__5_box h2 span{ color: #FFF; font-size: 1.2rem; position: relative; padding: 0 .5rem; background: #121f3a; border-radius: 50%; } #oem_iriguchi .new_oem_1_contents__5_box h5{ margin: 0; padding: 0; font-size: 1.3rem; color: #CC0052; position: relative; } #oem_iriguchi .new_oem_1_contents__5_box h4{ width: 70%; height: auto; text-align: center; } #oem_iriguchi .new_oem_1_contents__6{ width: 70%; height: auto; margin: 30px auto 60px auto; } #oem_iriguchi .new_oem_1_contents__6 h2{ width: 100%; padding: 20px 50px; box-sizing: border-box; font-size: 1.8rem; color: #CC0052; text-align: center; border: 3px solid #DDD; border-radius: .5rem; } #oem_iriguchi .new_oem_2_container{ width: 70%; height: auto; margin: 0 auto; } #oem_iriguchi .new_oem_2_contents__1{ width: 100%; margin: 50px auto 0 auto; } #oem_iriguchi .new_oem_2_contents__1 h2{ margin-bottom: 0; font-size: 2rem; padding: 1.5rem; text-align: center; } #oem_iriguchi .new_oem_2_contents__1 h2 span{ color: #eb6100; font-size: 1.2rem; display: block; } #oem_iriguchi .new_oem_2_contents__2_list{ width: 70%; height: auto; margin: 0 auto 30px auto; text-align: center; display: flex; justify-content: space-around; } #oem_iriguchi .new_oem_2_contents__2_list p{ width: 50%; height: auto; margin: 0 5px; padding: 10px 5px; box-sizing: border-box; border: 2px solid #888; border-radius: 1rem; box-shadow:2px 2px 3px #DDD; } #oem_iriguchi .new_oem_2_contents__3{ width: 70%; height: auto; margin: 50px auto 10px auto; font-size: 22px; text-align: center; padding: 0.5rem 2rem; border-top: 6px double #888; border-bottom: 6px double #888; } #oem_iriguchi .new_oem_3_contents__1{ margin-top: 50px; padding: 10px 0; background-color: #222; color: #FFF; } #oem_iriguchi .new_oem_3_contents__1 h2{ font-size: 1.8rem; text-align: center; } #oem_iriguchi .new_oem_3_contents__1 h2 span{ font-size: 1.0rem; display: block; } #oem_iriguchi .new_oem_3_contents__2{ width: 70%; height: auto; margin: 20px auto; } #oem_iriguchi .new_oem_3_contents__2_box{ width: 100%; height: auto; margin-bottom: 20px; padding: 20px 30px; box-sizing: border-box; border: 2px solid #DDD; } #oem_iriguchi .new_oem_3_contents__2_box h3{ font-size: 1.3rem; margin: 0; padding: 0 2rem 0 0; border-bottom: 3px solid #000; } #oem_iriguchi .new_oem_3_contents__2_box h3 span{ font-family: 'Roboto', sans-serif; color: #eb6100; padding-right: 20px; font-size: 2.5rem; line-height: 1; } #oem_iriguchi .new_oem_3_contents__2_box h4{ margin: 10px 0 0 0; font-size: 1.2rem; background:linear-gradient(transparent 60%, #ff6 60%); display: inline-block; } #oem_iriguchi .new_oem_3_contents__2_box h4 span{ padding-left: 10px; font-size: 1rem; } #oem_iriguchi .new_oem_3_contents__3{ width: 100%; margin: 50px auto 0 auto; } #oem_iriguchi .new_oem_3_contents__3_img{ width: 100%; } #oem_iriguchi .new_oem_3_contents__3_img img{ width: 100%; height: auto; } #oem_iriguchi .new_oem_3_contents__3_txt{ width: 70%; margin: 0 auto; } #oem_iriguchi .new_oem_3_contents__3_txt h2{ color: #CC0052; font-size: 1.5rem; text-align: center; } #oem_iriguchi .new_oem_3_contents__3_txt h3{ width: 70%; margin: 0 auto 10px auto; font-size: 1.1rem; } #oem_iriguchi .new_oem_3_contents__3_txt h3 span{ background:linear-gradient(transparent 60%, #ff6 60%); } #oem_iriguchi .new_oem_3_contents__3_arrow{ width: 15px; height: 15px; margin: 0 auto; border: 5px solid; border-color: transparent transparent #565656 #565656; transform: rotate(-45deg); } #oem_iriguchi .new_oem_3_contents__3_checkbox{ width: 100%; font-size: 1.3rem; } #oem_iriguchi .new_oem_3_contents__3_list{ width: 70%; height: auto; margin: 40px auto 40px auto; padding: 20px 0; border: 1px solid #888; border-radius: .5rem; } #oem_iriguchi .new_oem_3_contents__3_list p{ margin: 10px auto 0 auto; position: relative; left: 30%; } #oem_iriguchi .new_oem_3_contents__3_list p:before{ padding-right: 20px; content:""; display:inline-block; width:1em; height:1em; background:url("https://ssl.aispr.jp/excelpatience/img/new_oem_vsm1.jpg?263") no-repeat; background-size:contain; } #oem_iriguchi .new_oem_3_contents__4{ width: 70%; height: auto; margin: 30px auto; } #oem_iriguchi .new_oem_3_contents__4 p span{ font-size: 1.8rem; color: #CC0052; text-align: center; font-weight: bold; line-height: 4rem; } #oem_iriguchi .new_oem_3_contents__4 p{ font-size: 1.2rem; text-align: center; line-height: 2.5rem; font-weight: bold; } #oem_iriguchi .new_oem_3_contents__5 h2{ width: 100%; height: auto; padding: 20px 0; font-size: 1.8rem; text-align: center; background-color: #6C757D; color: #FFF; } #oem_iriguchi .new_oem_3_contents__5 p{ width: 90%; height: auto; margin: 0 auto; font-size: 1.2rem; text-align: center; line-height: 3rem; font-weight: bold; } #oem_iriguchi .new_oem_3_contents__5 p span{ font-size: 1.8rem; color: #CC0052; line-height: 4rem; } #oem_iriguchi .new_oem_3_contents__6{ width: 70%; height: auto; margin: 40px auto 0 auto; } #oem_iriguchi .new_oem_3_contents__6 img{ width: 100%; height: auto; } #oem_iriguchi .new_oem_4_contents__1{ margin-top: 30px; padding: 20px 0; background-color: #222; color: #FFF; text-align: center; } #oem_iriguchi .new_oem_4_contents__1 h2{ margin: 0; font-size: 1.8rem; } #oem_iriguchi .new_oem_4_contents__1 p{ margin: 0; padding: 0; } #oem_iriguchi .new_oem_4_contents__1 p span{ padding: 0 5px; font-size: 1.2rem; font-weight: bold; } #oem_iriguchi .new_oem_5_contents__1{ width: 70%; height: auto; margin: 0 auto; display: flex; justify-content: space-around; } #oem_iriguchi .new_oem_5_contents__1_box{ width: 33.3333%; height: auto; margin: 50px 10px; padding: 0 10px; box-sizing: border-box; border: 2px solid #DDD; } #oem_iriguchi .new_oem_5_contents__1_txt{ width: 100%; padding: 5px; } #oem_iriguchi .new_oem_5_contents__1_txt h3{ font-size: 1.1rem; text-align: center; border-bottom: 1px solid #222; } #oem_iriguchi .new_oem_5_contents__1_txt p{ padding: 0 10px; color: #eb6100; text-align: center; font-size: 1.1rem; font-weight: bold; } #oem_iriguchi .new_oem_5_contents__1_txt span{ color: #000; font-size: 0.9rem; } #oem_iriguchi .new_oem_6_contents__1{ margin: 60px 0; } #oem_iriguchi .new_oem_6_contents__1_box{ width: 70%; height: auto; margin: 20px auto; padding: 0 20px 5px 0; box-sizing: border-box; border: 2px solid #DDD; display: flex; } #oem_iriguchi .new_oem_6_contents__1_img img{ width: 150px; height: auto; box-sizing: border-box; } #oem_iriguchi .new_oem_6_contents__1_txt{ width: 100%; height: auto; display: flex; flex-direction: column; } #oem_iriguchi .new_oem_6_contents__1_txt h3{ font-size: 1.2rem; } #oem_iriguchi .new_oem_6_contents__1_txt p{ margin: 0; font-size: 0.9rem; } #oem_iriguchi .new_oem_6_contents__1_txt p span{ margin: 0 5px; font-weight: bold; } #oem_iriguchi .new_oem_7_container{ width: 70%; height: auto; margin: 50px auto 100px auto; background-image: url("https://ssl.aispr.jp/excelpatience/img/new_oem_vsm3.jpg?1533"); background-size: 800px; background-repeat: no-repeat; } #oem_iriguchi .new_oem_7_contents__1{ font-size: 2rem; margin: 80px 0 0 30px; } #oem_iriguchi .new_oem_7_contents__1 span{ display: block; font-size: 1.2rem; padding-left: 20px; } #oem_iriguchi .new_oem_7_contents__2 h3{ font-size: 1.2rem; } #oem_iriguchi .new_oem_7_contents__2 p{ font-size: 0.9rem; line-height: 1.5rem; } #oem_iriguchi .new_oem_7_contents__3{ text-align: right; } #oem_iriguchi .new_oem_7_contents__3 p{ font-size: .8rem; } #oem_iriguchi .new_oem_7_contents__3 span{ display: block; font-size: 1rem; } #oem_iriguchi .text-white_container-fluid_1_new{ width: 100%; margin: 0; padding: 15px 0; font-size: 1.4rem; text-align: center; margin-bottom: 0; color: #FFFFFF; background-color: #6C757D; } #oem_iriguchi .font-weight-bold_new{ font-size: 1.2rem; text-align: center; margin: 15px; font-weight: bold; } #oem_iriguchi .text-center_1_new{ font-size: 0.9rem; text-align: center; margin-bottom: 15px; } #oem_iriguchi .container_py-2_1_box_new{ display: flex; margin: 10px 0; justify-content: center; } #oem_iriguchi .container_py-2_1_box_new:nth-child(1){ flex-direction: row-reverse; } #oem_iriguchi .container_py-2_1_txt_new{ width:100%; height: auto; } #oem_iriguchi .container_py-2_1_img_new{ width: 40%; height: auto; } #oem_iriguchi .container_py-2_1_img_new img{ width: 300px; height: auto; border-radius: 50%; } #oem_iriguchi .container_py-2_2_title_new{ font-size: 1.4rem; width: 70%; height: 40px; margin: 20px 0 0 20px; padding: 0; display: flex; border-bottom: 1px solid #6c757d; } #oem_iriguchi .container_py-2_2_title_new::before,#oem_iriguchi .container_py-2_2_title_new::after{ width:25px; height: 25px; font-size: 1.2rem; content: "↑"; text-align: center; vertical-align: middle; color: #FFFFFF; border: 1px solid #000; background-color: cornflowerblue; } #oem_iriguchi .container_py-2_2_info_new{ color: cornflowerblue; font-size: 1.1rem; margin: 10px; } #oem_iriguchi .container_py-2_2_box_new{ margin: 20px 0; width: 100%; height: 100%; display: flex; justify-content: space-around; } #oem_iriguchi .container_py-2_2_contents_new{ width: calc(25% - 3rem); width: 25%; padding: 0 1.5rem 0 0; text-align: center; display: flex; flex-direction: column; } #oem_iriguchi .container_py-2_2_contents_new:nth-child(4){ padding: 0; } #oem_iriguchi .container_py-2_2_txt_new{ padding: .7rem; height: 100%; box-sizing: border-box; border: 1px solid #6c757d; border-radius: .25rem; background-color: #f8f9fa; } #oem_iriguchi .container_py-2_2_txt_arrow_new{ display: flex; margin: 0; padding: 0; } #oem_iriguchi .container_py-2_2_txt_bottom_new{ font-size: 0.8rem; } #oem_iriguchi .container_py-4_1_txt_new{ font-size: 1.3rem; text-align: center; } #oem_iriguchi .text-white_container-fluid_1_wapper_new{ text-align: center; margin: 15px 0; } #oem_iriguchi .link_btn_new{ width: 100%; height: auto; margin: 15px 0 0 0; } #oem_iriguchi .link_btn_new_frame{ display: flex; justify-content: center; } #oem_iriguchi .link_btn_new_txt{ width: 330px; height: 74px; border: 2px solid red; border-radius: 0.5rem; background-color: red; } #oem_iriguchi .link_btn_new_txt a{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #FFF; font-weight: bold; border-radius: 0.4rem; transition: 0.1s; } #oem_iriguchi .link_btn_new_txt a:hover{ color: red; text-decoration: underline; background-color: #FFF; } #oem_iriguchi .link_btn_new_txt_1{ width: 330px; height: 74px; border: 2px solid red; border-radius: 0.5rem; background-color: red; } #oem_iriguchi .link_btn_new_txt_1 a{ width: 100%; height: 99%; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #FFF; font-weight: bold; border-radius: 0.4rem; transition: 0.1s; } #oem_iriguchi .link_btn_new_txt_1 a:hover{ color: red; text-decoration: underline; background-color: #FFF; } #oem_iriguchi .text-white_container-fluid_1{ margin-bottom: 0; font-size; 0.7rem; color: #FFFFFF; padding: 2rem; text-align: center; background-color: #6C757D; } #oem_iriguchi .text-white_container-fluid_1_wapper{ width: 70%; height: 100%; margin: 0 auto; } #oem_iriguchi .text-white_container-fluid_1_main{ width: 100%; height: auto; display: flex; } #oem_iriguchi .text-white_container-fluid_1_main_left{ font-size: 1.5rem; width: 70%; margin: 0; padding: 4% 15px 4% 15px; display: flex; flex-direction: column; /*justify-content: center;*/ /*align-items: flex-start;*/ border:1px solid #dee2e6; text-align: left; } #oem_iriguchi .text-white_container-fluid_1_main_right{ margin: 0; padding: 0; width: 30%; height: 100%; font-size: 1.3rem; list-style: none; } #oem_iriguchi .py-5_1_link{ border-radius: .25rem; } #oem_iriguchi .py-5_1_link a{ text-decoration: none; color: #FFF; font-weight: bold; border: 2px solid red; background-color: red; } #oem_iriguchi .py-5_1_link a:hover{ text-decoration: underline; color: red; font-weight: bold; background-color: #FFF; } #oem_iriguchi .py-4_1{ width: 100%; height: auto; background-color: #f8f9fa; } #oem_iriguchi .container_py-4_1{ width: 90%; margin: 0 auto; } #oem_iriguchi .container_py-4_1_contents{ padding-top: 40px; display: flex; justify-content: space-around; } #oem_iriguchi .container_py-4_1_txt_new{ width: 50%; display: flex; align-items: center; justify-content: center; color: #212529; font-size: 1.1rem; } #oem_iriguchi .container_py-4_1_img{ width: 50%; } #oem_iriguchi .container_py-4_1_img img{ width: 100%; } #oem_iriguchi .container_py-4_2_box{ width: 100%; display: flex; justify-content: center; align-items: center; } #oem_iriguchi .container_py-4_2_img{ width: 30%; padding: 10px; } #oem_iriguchi .container_py-4_2_img img{ width: 100%; } /*=====OEMテスト用_2用（ペライチ）=====*/ .peraichi_wrap{ font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif; } .sec_peraichi_header{ width: 100%; height: auto; position: fixed; /* ウィンドウを基準に画面に固定 */ top: 0; /* 上下の固定位置を上から0pxにする */ left: 0; /* 左右の固定位置を左から0pxにする */ background-color: #FFF; z-index: 10; box-shadow: 0 1px 4px #ddd; } .peraichi_header{ max-width: 1260px; width: 100%; display: flex; margin: 0 auto; } .peraichi_header_img{ width: 230px; height: auto; } .peraichi_header_img img{ width: 100%; height: auto; } .peraichi_header_right{ margin-left: auto; display: flex; } .peraichi_header_right p{ font-size: 1.1rem; margin-right: 10px; } .peraichi_header_right p span{ display: block; font-size: 0.9rem; } .peraichi_header_right_link{ display: flex; } .peraichi_header_right_link p{ margin: 20px 0; } .peraichi_header_right_link_l{ width: 100px; height: 40px; display: block; background-color: #404144; } .peraichi_header_right_link_l a{ width: 100%; height: 100%; text-decoration: none; color: #FFF; font-weight: bold; font-size: 0.9rem; display: flex; justify-content: center; align-items: center; transition: all 0.2s ease; } .peraichi_header_right_link_l a:hover{ opacity: 1.2; background-color: #4E4E4E; } .peraichi_header_right_link_r{ width: 130px; height: 40px; display: block; background-color: #063067; } .peraichi_header_right_link_r a{ width: 100%; height: 100%; text-decoration: none; color: #FFF; font-weight: bold; font-size: 0.9rem; display: flex; justify-content: center; align-items: center; } .peraichi_header_right_link_r a:hover{ opacity: 1.2; background-color: #385985; transition: all 0.2s ease; } .sec_peraichi_contents_1{ width: 100%; height: auto; margin: 60px 0 0 0; background-image: url("https://ssl.aispr.jp/excelpatience/img/pera_img6.jpg?5616"); background-repeat: no-repeat; background-position: center center; background-size: cover; } .peraichi_contents_1{ width: 50%; height: auto; color: #00178C; text-align: center; } .peraichi_contents_1_box{ width: 80%; height: auto; margin-left: auto; } .peraichi_contents_1_title{ font-size: 25px; font-weight: bold; padding-top: 40px; } .peraichi_contents_1_bottom{ font-size: 16px; font-weight: bold; } .peraichi_contents_1_bottom span{ font-size: 15px; font-weight: 100; } .peraichi_contents_1_link { padding-bottom: 30px; } .peraichi_contents_1_link a{ width: 230px; height: auto; margin: 0 auto; color: #FFF; font-size: 20px; padding: 20px; text-decoration: none; display: block; border-radius: 300px; box-sizing: border-box; background-color: #063067; } .peraichi_contents_1_link a:hover{ opacity: 1.2; background-color: #385985; transition: all 0.2s ease; } .peraichi_contents_2{ position: relative; width: 100%; height: auto; } .peraichi_contents_2 h2{ width: 100%; height: 80px; margin: 0; font-size: 1.5rem; color: #FFF; background-color: #222222; display: flex; justify-content: center; align-items: center; font-weight: bold; z-index: 5; position: relative; } .peraichi_contents_2 h2 span{ display: block; font-size: 0.8rem; } .peraichi_arrow{ width: 100%; height: auto; display: flex; justify-content: center; } .peraichi_arrow p{ margin: 0; padding: 0; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #222; } .peraichi_contents_2_list{ max-width: 940px; width: 100%; 　　　　height: auto; margin: 0 auto; position: relative; z-index: 4; } .peraichi_contents_2_box{ width: 100%; 　　　　height: auto; display: flex; justify-content: space-between; flex-wrap: wrap; } .peraichi_contents_2_box p{ position: relative; width: 33.3333%; border: 1px solid #CCC; background-color: #FFF; border-radius: 6px; margin-bottom: 40px; padding: 20px 5px 20px 5px; box-shadow: 0 0 6px 0 #ccc; z-index: 3; text-align: center; font-size: 22px; display: block; } .peraichi_contents_2_list_img{ position: absolute; top: 50%; bottom: 0; left: 0; right: 0; margin: -200px auto 0 auto; text-align: center; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); max-width: 250px; z-index: 2; } .peraichi_contents_2_list_img img{ width: 100%; height: 100%; margin: auto 0 auto 120px; } .peraichi_contents_3 h2{ width: 100%; height: 120px; margin: auto 0; padding-top: 30px; font-size: 1.5rem; color: #FFF; background-color: #222222; text-align: center; font-weight: bold; box-sizing: border-box; } .peraichi_contents_3 h2 span{ display: block; font-size: 0.8rem; } .peraichi_contents_3_list{ max-width: 940px; width: 100%; height: auto; margin: 0 auto; } .peraichi_contents_3_box{ width: 100%; height: auto; display: flex; justify-content: space-around; } .peraichi_contents_3_box_l{ width: 50%; height: auto; box-sizing: border-box; padding: 10px 40px 10px 40px; } .peraichi_contents_3_box_l p{ font-size: 0.8rem; } .peraichi_contents_3_box_l p span{ display: block; font-size: 1rem; border-bottom: 1px solid #222; } .peraichi_contents_3_bottom{ max-width: 940px; width: 100%; height: auto; margin: 60px auto 30px auto; } .peraichi_contents_3_bottom_title h4{ font-size: 28px; text-align: center; margin: 0; } .peraichi_contents_3_bottom_list{ margin: 10px 0 40px 0; } .peraichi_contents_3_bottom_box{ width: 100%; display: flex; } .peraichi_contents_3_bottom_box p{ width: 50%; height: auto; box-sizing: border-box; padding: 5px 20px 5px 20px; } .peraichi_contents_3_bottom_box p:before{ content: '';/*何も入れない*/ display: inline-block;/*忘れずに！*/ width: 20px;/*画像の幅*/ height: 20px;/*画像の高さ*/ background-image: url("https://ssl.aispr.jp/excelpatience/img/new_oem_vsm1.jpg?3802"); background-size: contain; vertical-align: middle; } .peraichi_contents_3_bottom_top{ width: 100%; height: auto; text-align: center; font-size: 22px; border-top: 6px double #222; border-bottom: 6px double #222; } .sec_peraichi_contents_4{ width: 100%; height: auto; margin: 0 auto; background-image: url("https://ssl.aispr.jp/excelpatience/img/pera_img3.jpg?8063"); background-repeat: no-repeat; background-position: center center; background-size: cover; } .peraichi_contents_4_txt_1{ text-align: center; font-weight: bold; font-size: 28px; line-height: 40px; } .peraichi_contents_4_txt_1 p{ padding-top: 25px; } .peraichi_contents_4_txt_2{ text-align: center; font-weight: 300; font-size: 16px; } .peraichi_contents_4_link{ padding-bottom: 30px; font-size: 20px; display: flex; justify-content: center; align-items: center; } .peraichi_contents_4_link a{ padding: .8rem 1.8rem; font-size: 20px; background-color: #063067; display: inline-block; transition: all 0.2s ease; } .peraichi_contents_4_link a:hover{ opacity: 0.8; } .peraichi_contents_4_link a{ text-decoration: none; color: #FFF; } .peraichi_contents_5_txt{ max-width: 940px; width: 100%; height: auto; margin: 40px auto 0 auto; padding: 10px 0; box-sizing: border-box; border: 1px solid #ddd; } .peraichi_contents_5_txt_top{ padding-bottom: 5px; border-bottom: 1px solid #222; } .peraichi_contents_5_txt_top p{ font-size: 22px; font-weight: bold; } .peraichi_contents_5_txt_top p span{ color: #FFF; margin: 0 10px 0 20px; padding: 5px 10px; font-size: 14px; font-weight: bold; background-color: #222; } .peraichi_contents_5_txt_bottom{ margin: 0 auto; padding: 0 20px; font-size: 14px; } .sec-paraichi_ribon{ margin-top: 40px; padding: 50px 0 20px 0; text-align: center; background-color: #f9f9f9; position: relative; z-index: 1; } .sec-paraichi_ribon_1{ margin-top: 40px; padding: 50px 0 20px 0; text-align: center; } .paraichi_ribon { display: inline-block; position: relative; height: 45px; text-align: center; box-sizing: border-box; } .paraichi_ribon:before {/*左側のリボン端*/ content: ''; position: absolute; width: 10px; bottom: -10px; left: -35px; z-index: 2; border: 20px solid #1A1A1A; border-left-color: transparent;/*山形に切り抜き*/ } .paraichi_ribon:after {/*右側のリボン端*/ content: ''; position: absolute; width: 10px; bottom: -10px; right: -35px; z-index: 2; border: 20px solid #1A1A1A; border-right-color: transparent;/*山形に切り抜き*/ } .paraichi_ribon h2 { display: inline-block; position: relative; margin: 0; padding: 0 50px; line-height: 45px; font-size: 28px; color: #FFF; background: #222;/*真ん中の背景色*/ } .paraichi_ribon h2:before { position: absolute; content: ''; top: 100%; left: 0; border: none; border-bottom: solid 10px transparent; border-right: solid 15px #3C3C3C;/*左の折り返し部分*/ } .paraichi_ribon h2:after { position: absolute; content: ''; top: 100%; right: 0; border: none; border-bottom: solid 10px transparent; border-left: solid 15px #3C3C3C;/*右の折り返し部分*/ } .sec_peraichi_contents_6{ background-color: #f9f9f9; padding: 30px 0; } .peraichi_contents_6{ max-width: 700px; width: 100%; height: auto; margin: 0 auto; } /*.peraichi_contents_6_top h2{ padding: 20px 0; color: #FFF; background-color: #222; text-align: center; }*/ .peraichi_contents_6_top p{ width: 100%; height: auto; margin: 0 auto; font-size: 16px; line-height: 30px; } .peraichi_contents_6_top p span{ padding: 30px 0; font-size: 22px; font-weight: bold; display: flex; justify-content: center; align-items: center; } .peraichi_contents_7_title{ width: 100%; height: auto; margin: auto 0; color: #FFF; background-color: #222222; text-align: center; box-sizing: border-box; } .peraichi_contents_7_title h2{ font-size: 28px; margin: 0; padding: 20px 0 15px 0; font-weight: bold; } .peraichi_contents_7_title p{ font-size: 16px; margin: 0; padding: 0 0 20px 0; line-height: 28px; } .peraichi_contents_7_title p span{ padding: 0 5px 0 5px; font-size: 17px; font-weight: bold; } .peraichi_contents_7_list{ max-width: 940px; width: 100%; height: auto; margin: 0 auto; display: flex; justify-content: space-between; } .peraichi_contents_7_list_block{ width: 100%; height: auto; margin: 0 auto; padding: 0 10px 0 10px; box-sizing: border-box; } .peraichi_contents_7_list_block_box{ width: 100%; height: auto; padding: 10px; box-sizing: border-box; } .peraichi_contents_7_list_block_box_top{ border-bottom: 1px solid #222; } .peraichi_contents_7_list_block_box_top p{ font-size: 20px; margin: 20px 0 0 0; } .peraichi_contents_7_list_block_box_top p span{ padding: 0 0 15px 10px; display: block; font-weight: bold; } .peraichi_contents_7_list_block_box_bottom p{ font-size: 16px; } .peraichi_contents_7_list_block_box_bottom p span{ font-size: 18px; font-weight: bold; display: inline; background-color: #FFE169; } .peraichi_contents_8{ margin: 30px 0 10px 0; padding-top: 30px; border-top: 6px double #222; } .peraichi_contents_8_block{ max-width: 1260px; width: 100%; height: auto; margin: 0 auto; } .peraichi_contents_8_title{ text-align: center; } .peraichi_contents_8_txt{ display: flex; } .peraichi_contents_8_box{ width: 33.3333%; height: auto; padding: 5px 20px; box-sizing: border-box; } .peraichi_contents_8_box_top{ font-size: 20px; text-align: center; border-bottom: 1px solid #222; } .peraichi_contents_8_box_bottom{ font-size: 18px; } .peraichi_contents_8_box_bottom span{ color: red; font-size: 20px; font-weight: bold; } .peraichi_contents_9{ width: 100%; height: auto; background-image: url("https://ssl.aispr.jp/excelpatience/img/pera_img7.jpg?6256") } .peraichi_contents_9_top{ font-size: 20px; margin: 20px 0; padding: 10px 0 0 0; text-align: center; } .peraichi_contents_9_bottom{ max-width: 940px; width: 100%; height: auto; margin: 0 auto; padding-top: 0; display: flex; justify-content: center; align-items: flex-start; } .peraichi_contents_9_bottom_txt p{ font-size: 14px; margin: 0 0 40px 20px; } .peraichi_contents_9_bottom_txt p span{ font-size: 20px; display: block; } .peraichi_contents_10_bottom{ max-width: 940px; width: 100%; height: auto; margin: 0 auto; } .peraichi_contents_10_bottom_box{ width: 100%; height: auto; display: flex; } .peraichi_contents_10_bottom_box_left{ width: 30%; height: auto; margin: 20px 0; font-size: 30px; font-weight: bold; } .peraichi_contents_10_bottom_box_right{ width: 70%; height: auto; margin: 20px 0; font-size: 28px; padding: 0 0 0 20px; font-weight: bold; border-left: 1px solid #222; } .peraichi_contents_10_bottom_box_right span{ display: block; font-size: 16px; font-weight: 100; } .peraichi_contents_11{ max-width: 940px; width: 100%; height: auto; margin: 40px auto 40px auto; } .peraichi_contents_11_box{ width: 100&; height: auto; margin: 20px 0 20px 0; padding: 5px; display: flex; box-sizing: border-box; border: 1px solid #ddd; } .peraichi_contents_11_box_left{ width: 200px; height: auto; } .peraichi_contents_11_box_left p{ width: 150px; height: 150px; } .peraichi_contents_11_box_left p img{ width: 100%; height: auto; } .peraichi_contents_11_box_right{ max-width: 780px; width: 100%; height: auto; padding-left: 10px; } .peraichi_contents_11_box_right_top{ width: 100%; height: auto; display: flex; justify-content: space-between; align-items: center; } .peraichi_contents_11_box_right_top p{ margin: 10px 0; } .peraichi_contents_11_box_title{ font-size: 18px; font-weight: bold; } .peraichi_contents_11_box_voice{ font-size: 12px; color: #FFF; background-color: #222; padding: 10px 70px 10px 10px; position: relative; left: 20px; } .peraichi_contents_11_box_bottom{ display: block; font-size: 14px; } .sec_peraichi_contents_12{ width: 100%; height: auto; background-color: #f9f9f9; } .peraichi_contents_12_img{ max-width: 743px; width: 100%; height: auto; margin: 0 auto; padding: 30px; box-sizing: border-box; } .peraichi_contents_12_img img{ width: 100%; height: auto; } .sec_peraichi_contents_13{ background-color: #f9f9f9; } .peraichi_contents_13{ max-width: 700px; width: 100%; height: auto; margin: 0 auto; } .peraichi_contents_13_top{ text-align: center; } .peraichi_contents_13_top h2{ margin-top: 0; padding-top: 20px; box-sizing: border-box; } .peraichi_contents_13_bottom{ font-size: 14px; display: flex; justify-content: center; } .peraichi_contents_13_left{ text-align: right; padding: 0 10px 10px 10px; font-weight: bold; } .peraichi_contents_13_right{ padding: 0 10px 10px 10px; } .peraichi_contents_13_bottom_hiden{ font-size: 14px; padding: 0 10px 10px 10px; font-weight: bold; display: none; } .peraichi_contents_13_bottom_hiden span{ padding-left: 20px; font-weight: 100; } .peraichi_contents_14{ max-width: 940px; width: 100%; height: auto; margin: 0 auto; font-size: 14px; display: flex; justify-content: center; } .peraichi_contents_14 a{ padding: 0 10px; color: #000; text-decoration: none; } .peraichi_contents_14 a:hover{ text-decoration: underline; } .peraichi_contents_footer{ font-size: 14px; margin-bottom: 60px; padding: 70px 0 30px 0; text-align: center; background-color: #f9f9f9; } .sec_peraichi_contents_footer_hiden{ visibility: hidden; width: 100%; height: auto; position: fixed; /* ウィンドウを基準に画面に固定 */ bottom: 0; /* 上下の固定位置を上から0pxにする */ left: 0; /* 左右の固定位置を左から0pxにする */ z-index: 5; } .peraichi_contents_footer_hiden_link{ width: 100%; display: flex; justify-content: center; } .peraichi_contents_footer_hiden_link p{ width: 50%; height: auto; display: block; margin: 0; } .peraichi_contents_footer_hiden_link a{ width: 100%; height: auto; padding: 20px 0; text-decoration: none; color: #FFF; display: block; text-align: center; } .peraichi_contents_footer_hiden_link_l a{ background-color: #404144; } .peraichi_contents_footer_hiden_link_r a{ background-color: #063067; } .tanaka .sysItemName { width :90%!important; white-space: nowrap!important; overflow: hidden!important; text-overflow: ellipsis!important; } .tanaka img { width: 200px!important; } .tanaka h2{ background: #000000!important; color: #ffffff!important; } @charset "utf-8"; /* =====================基本設計===================== */ body{ margin: 0; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } * { box-sizing: border-box; } img{ vertical-align: bottom; max-width: 100%; height: auto; } /* =====================メインコンテンツ===================== */ /*#container{ max-width:750px; box-shadow: 4px 0px 3px -3px #ccc, -4px 0px 3px -3px #ccc; }*/ .box{ margin-bottom: 0; } .offer{ position: relative; } .btn{ text-align: center; } @media(max-width: 765px){ #container{ box-shadow: none; } .box{ margin-right:0; margin-left:0; } } footer{ background: #000; color: #fff; } footer{ padding: 20px 30px; text-align: center; } .footer-inner{ width: auto; line-height: 30px; } .footer-inner a{ color: #fff; padding: 0px 10px; } @media (max-width: 767px) { .footer-inner a{ font-size: 12px; } .footer-inner{ font-size: 12px; } } @media screen and (max-width:480px){ /* 10-0 Only Smartphone *----------------------------------------------------------------------*/ #sysMain,#sysAside{ width: 100%!important;} #sysMain{ margin-top: 0;} .grid-col { float: none; width: 100%!important; margin-left: 0; } /* 10-1 Header */ #sysHeader{ margin-bottom: 0px;} .h-siteinfo{ height: auto;} .h-siteinfo h1 { font-size: xx-small;} .h-sitelogo{ height: 52px;} .h-sitelogo li img{ width: auto; max-height: 47px; } .h-utilitybtn{ position: relative;} .h-utilitybtn .sysContent { width: 32%; float: none; position: absolute; z-index: 999; top: 0; right: 15%; } .h-utilitybtn ul li.sysText a { line-height: 17px; height: 47px; font-size: x-small; } .h-utilitybtn ul li { height: 47px; } .h-utilitybtn ul li.sysText a:before { content: ""; width: 20px; margin: 5px auto 0; height: 20px; display: block; } .h-utilitybtn ul li.sysText:nth-child(1) a:before { background: url(http://template-advance.aispr.jp/img/icon/icon-mypage.png); background-size: 100%; } .h-utilitybtn ul li.sysText:nth-child(2) a:before { background: url(http://template-advance.aispr.jp/img/icon/icon-cart.png); background-size: 100%; } /* 10-1-3 ドロップダウンメニュー */ .h-subMenu .sysHeadline{ line-height: 47px; width: 15%; float: right; position: absolute; bottom: 4px; right: 0; } .h-subMenu ul li:nth-child(2n){ width: 49%!Important; margin-left: 1%; } .h-subMenu ul li.sysText a { line-height: 40px; font-size: larger; font-weight: bold; text-align: center; margin-top: 5px; padding: 30px 0; } /* 12-12 見出し */ .headline-2nd { margin-left: 5px; } .headline-3rd { margin-left: 10px; } /* 12-14 Responsive Grid System */ .col { float: none;} .gutters .col { margin-left: 0;} .span_1,.span_2,.span_3,.span_4,.span_5,.span_6, .span_7,.span_8,.span_9,.span_10,.span_11,.span_12{ width: 100%!Important; float: none; } /* 12-2 Holizontal Item Block */ .sysContent .sysItemBlock .sysHorizontal { font-size: small; } mList ul.sysThumbnail li{ width: 50%;} /* 13-1-5 メインメニュー*/ .h-mainMenu ul li { height: 40px;} .h-mainMenu ul li.sysText a { font-size: 0.5rem; padding: 15px 0; } /* 13-1-6 検索フォーム */ .h-search .sysContent{ padding: 5px;} /* 13-2-2 Half Banner */ .p-banner li { width: 100%; margin-bottom: 5px; } /* 13-2-3 PICK UP Item */ .p-pickup .sysContent { padding: 0 0 5px; } /* 13-2-4 News & SNS */ .p-news,.p-sns { width: 100%;} /* 13-2-5 ShopInformation */ .p-shopInfo .sysContent, .shopinfo-inner, .shopinfo-row { display: block;} .shopinfo-inner { width: 100%; } /* 13-4-1 Footer Site Map */ .f-sitemap li { width: 100%!important; } .f-sitemap ul li.sysText a { padding: 10px 20px; text-align: left; } /* 13-4-2 Page Top Btn */ .p-pagetop .btn { width: 90%;} /* 14-1-2 Category Pankuzu */ .sysItemCategoryPankuzu { font-size: xx-small; } /* 14-1-7 Archive Thumbnail Item */ .sysItemList ul.sysThumbnail { font-size: small;} .sysItemList ul.sysThumbnail input { font-size: x-small;} /* 14-2-3 Order Area */ .orderArea { letter-spacing: normal;} .orderArea > div { width: 100%; padding-right: 0; float: none; } /* 14-5-2 MyPage*/ .sysMypageNav .sysButton{ font-size: 0.75rem;} /*RW追加スライダー調整*/ .bx-viewport { height: 160px!important; } /* ここからnew oemで追加*/ #oem_iriguchi .new_oem_1_contents__1 h2{ font-size: 1.5rem; } #oem_iriguchi .new_oem_1_contents__1 span{ font-size: 1rem; display: block; } #oem_iriguchi .new_oem_1_contents__1 h5{ font-size: .8rem; } #oem_iriguchi .new_oem_1_contents__4_left,#oem_iriguchi .new_oem_1_contents__4_right{ display:none; } #oem_iriguchi .new_oem_1_contents__2{ display: block; width: 95%; } #oem_iriguchi .new_oem_1_txt{ width: 100%; } #oem_iriguchi .new_oem_1_contents__3{ display: block; width:100%; } #oem_iriguchi .new_oem_1_contents__3 h1{ width:100%; font-size: 1.5rem; } #oem_iriguchi .new_oem_1_contents__3 h5{ width:100%; padding: 0 1% 0 1%; font-size: 1rem; } #oem_iriguchi .new_oem_1_contents__5{ width: 80%; display: block; } #oem_iriguchi .new_oem_1_contents__5_box{ width: 100%; } #oem_iriguchi .new_oem_1_contents__6{ width: 100%; font-size: 1rem; } #oem_iriguchi .new_oem_1_contents__6 h2{ font-size: 1rem; padding: 2%; } #oem_iriguchi .new_oem_2_container{ width: 95%; } #oem_iriguchi .new_oem_2_contents__2{ width: 100%; margin: 0 auto; } #oem_iriguchi .new_oem_2_contents__2_list{ display: block; width: 100%; margin: 0; } #oem_iriguchi .new_oem_2_contents__2_list p{ width: 100%; margin: 5px 0; } #oem_iriguchi .new_oem_2_contents__3{ width: 100%; margin: 10px 0 0 0; padding: 0; font-size: 1rem; } #oem_iriguchi .new_oem_3_contents__1 h2{ font-size: 1rem; } #oem_iriguchi .new_oem_3_contents__2{ width: 95%; } #oem_iriguchi .new_oem_3_contents__3_txt{ width: 95%; } #oem_iriguchi .new_oem_3_contents__3_txt h3{ width: 100%; } #oem_iriguchi .new_oem_3_contents__3_list{ border: none; } #oem_iriguchi .new_oem_3_contents__3_list p{ margin: 10px auto 0 auto; position: relative; left: 5%; } #oem_iriguchi .new_oem_3_contents__4{ width: 95%; } #oem_iriguchi .new_oem_3_contents__4 p{ font-size: 0.9rem; line-height: 1.5rem; text-align: left; } #oem_iriguchi .new_oem_3_contents__4 p span{ font-size: 1.1rem; line-height: 2rem; text-align: left; } #oem_iriguchi .new_oem_3_contents__5 p{ font-size: 0.9rem; line-height: 1.8rem; text-align: left; } #oem_iriguchi .new_oem_3_contents__5 p span{ font-size: 1.1rem; line-height: 2.3rem; text-align: left; } #oem_iriguchi .new_oem_3_contents__5 h2{ font-size: 1.2rem; } #oem_iriguchi .new_oem_3_contents__6{ width: 100%; } #oem_iriguchi .new_oem_3_contents__2_box{ padding: 2%; } #oem_iriguchi .new_oem_3_contents__2_box h3{ font-size: 1rem; } #oem_iriguchi .new_oem_3_contents__2_box h3 span{ font-size: 1.2rem; } #oem_iriguchi .new_oem_3_contents__2_box h4,#oem_iriguchi .new_oem_3_contents__2_box h4 span{ margin: 10px 0 0 0; font-size: .9rem; font-weight: bold; background: #FFF; display: inline-block; } #oem_iriguchi .new_oem_3_contents__2_box p{ font-size: .8rem; } #oem_iriguchi .new_oem_5_contents__1{ width: 80%; display: block; } #oem_iriguchi .new_oem_5_contents__1_box{ width: 100%; margin: 20px 0; } #oem_iriguchi .new_oem_6_contents__1_box{ width: 95%; } #oem_iriguchi .new_oem_6_contents__1_txt{ padding-left: 20px; } #oem_iriguchi .new_oem_6_contents__1_img{ display: none; } #oem_iriguchi .new_oem_7_container{ width: 95%; background: #FFF; } #oem_iriguchi .new_oem_7_contents__1{ text-align: center; } #oem_iriguchi .container_py-2_2_box_new{ width: 100%; height: 100%; display: block; } #oem_iriguchi .container_py-2_2_contents_new{ width: 100%; padding: 0; } #oem_iriguchi .container_py-2_2_txt_new{ margin: 10px 0; } #oem_iriguchi .container_py-2_2_title_new{ width: 95%; } #oem_iriguchi .container_py-4_1_contents{ padding-top: 40px; display: block; } #oem_iriguchi .container_py-4_1_txt_new{ width: 100%; } #oem_iriguchi .container_py-4_1_img{ width: 100%; } #oem_iriguchi .text-white_container-fluid_1_main{ width: 100%; height: auto; display: block; } #oem_iriguchi .text-white_container-fluid_1_main_left{ width: 100%; height: auto; padding: 5px 0; font-size: 1.1rem; text-align: center; } #oem_iriguchi .text-white_container-fluid_1_main_right{ width: 100%; height: auto; font-size: 1.1rem; } /*=====OEMテスト用_2用（ペライチ）=====*/ .sec_peraichi_contents_footer_hiden{ visibility: visible; } .peraichi_header_right{ display: none; } .peraichi_contents_14{ display: block; } .sec_peraichi_contents_1{ visibility: hidden; } .peraichi_contents_1{ width: 100%; height: auto; } .peraichi_contents_1_box{ width: 100%; height: auto; visibility: visible; background-image: url("https://ssl.aispr.jp/excelpatience/img/pera_img5.jpg?7798"); background-position: left top; background-repeat: no-repeat; background-size: auto 100%; } .peraichi_contents_1_title{ font-size: 20px; } .peraichi_contents_2_box{ display: block; width: 100%; height: auto; } .peraichi_contents_2_box p{ width: 100%; height: auto; margin: 10px 0; padding: 10px 5px; display: inline-block; box-sizing: border-box; } .peraichi_contents_2_list_img{ position: static; margin: 0 auto; } .peraichi_contents_3_box{ display: block; } .peraichi_contents_3_box_l{ width: 100%; height: auto; } .peraichi_contents_3_bottom_box{ display: block; } .peraichi_contents_3_bottom_box p{ width: 100%; height: auto; } .peraichi_contents_4_txt_1{ font-size: 21px; } .peraichi_contents_5_txt_top span{ display: block; width: 35px; height: auto; } .peraichi_contents_5_txt_top p{ padding: 0 5px; font-size: 20px; } .peraichi_contents_6_top{ padding: 0 10px; } .peraichi_contents_6_top p span{ font-size: 20px; } .peraichi_contents_7_list{ display: block; } .peraichi_contents_8_txt{ display: block; } .peraichi_contents_8_box{ width: 100%; height: auto; margin-bottom: 20px; } .peraichi_contents_9_bottom{ display: block; } .peraichi_contents_9_bottom_txt{ text-align: center; } .peraichi_contents_10_bottom_box{ display: block; } .peraichi_contents_10_bottom_box_left{ font-size: 12px; margin: 0; } .peraichi_contents_10_bottom_box_right{ width: 100%; height: auto; border-left: none; margin: 0; padding: 0 5px 0 5px; } .peraichi_contents_10_bottom_box{ margin-bottom: 40px; } .peraichi_contents_11_box{ display: block; } .peraichi_contents_11_box_left{ width: 100%; height: auto; display: flex; justify-content: center; } .peraichi_contents_13_bottom{ display: none; } .peraichi_contents_13_bottom_hiden{ display: block; } } @media screen and (min-width:481px) and (max-width:800px){ /* 20-0 Only Tablet *----------------------------------------------------------------------*/ div#sysMain,div#sysAside{ width: 100%; float: none;}/* PCレイアウトを維持する場合は削除 */ /* 20-1 Header */ .h-utilitybtn { margin:0 5px; } /* 20-1-3 ドロップダウンメニュー */ .h-subMenu .sysHeadline{ width: 30%; float: right; position: absolute; bottom: 5px; right: 5px; } .h-subMenu ul li:nth-child(2n){ width: 49%!Important; margin-left: 1%; } .h-subMenu ul li.sysText a { line-height: 40px; font-size: larger; font-weight: bold; text-align: center; margin-top: 5px; padding: 30px 0; } /* 23-1-5 メインメニュー*/ .h-mainMenu{ border-right: none; border-left: none; } /* 23-1-6 検索フォーム */ .h-search .sysContent{ padding: 5px;} /* 23-3-3 Aside Banner */ .s-banner li { margin: 0 1%; width: 48%; float: left; } .s-banner { overflow: hidden; } /* LoginForm & Search Form */ .s-login,.s-search{ width: 49%; width: -webkit-calc( 50% - .2em); width: calc( 50% - .2em); float: none; overflow: hidden; display: inline-block; vertical-align: top; } .s-login li a{ font-size: 0.75rem; padding: 10px 0; } .s-search.asideCnt .sysItemSearchAndOr label{; display: block; } /* 23-4-2 Page Top Btn */ .p-pagetop .btn { width: 50%;} /* ここからnew oemで追加*/ #oem_iriguchi .new_oem_1_contents__4_left,#oem_iriguchi .new_oem_1_contents__4_right{ display:none; } #oem_iriguchi .new_oem_1_contents__2{ display: block; } #oem_iriguchi .new_oem_1_contents__5{ width: 80%; display: block; } #oem_iriguchi .new_oem_1_contents__5_box{ width: 100%; } #oem_iriguchi .new_oem_2_contents__2{ width: 80%; margin: 0 auto; } #oem_iriguchi .new_oem_2_contents__2_list{ display: block; width: 100%; margin: 0; } #oem_iriguchi .new_oem_2_contents__2_list p{ width: 100%; margin: 5px 0; } #oem_iriguchi .new_oem_5_contents__1{ width: 80%; display: block; } #oem_iriguchi .new_oem_5_contents__1_box{ width: 100%; margin: 20px 0; } #oem_iriguchi .new_oem_3_contents__3_list{ border: none; } #oem_iriguchi .new_oem_3_contents__3_list p{ margin: 10px auto 0 auto; position: relative; left: 5%; } /*=====OEMテスト用_2用（ペライチ）=====*/ .sec_peraichi_contents_footer_hiden{ visibility: visible; } .peraichi_header_right{ display: none; } .peraichi_contents_1_box{ width: 90%; } .peraichi_contents_1_title{ font-size: 22px; } .peraichi_contents_14{ display: block; } } @media screen and (min-width:801px){ /* 30-0 Only PC *----------------------------------------------------------------------*/ /* 30-1 Header */ .h-siteinfo, .h-subMenu { margin: 0 auto; } .h-siteinfo { text-align: left;} /* 30-1-3 ドロップダウンメニュー */ .h-subMenu > .sysContent { display: block!important;} .h-subMenu > .sysHeadline { display: none;} .h-subMenu .sysAccordionInitialHide { position: absolute; bottom: 1px; right: 0; z-index: 999; width: 70%; background: transparent; } .h-subMenu ul { display: table; width: 100%; } .h-subMenu ul li { display: table-cell; width: auto!important; float: none; text-align: center; } .h-mainMenu nav { width: 70%; border-right: 1px solid; } .h-search .sysContent { width: 30%; position: absolute; top: -55px; height: 50px; right: 0; padding: 5px; } /* 32-9 トグル機能アニメーション */ .h-subMenu .sysAccordionInitialHide { opacity: 1;} /* 33-3-1 Aside Check List */ .s-checklist li > div { width: 90%; margin: 0 auto; } .s-checklist .sysContent .sysVertical .sysItemImage img { width: 100%; float: none; margin: 0px auto; } /* 34-4-1 Footer Site Map */ .f-sitemap .sysContent { width: 95%; margin: 0 auto; } /* 34-4-2 Page Top Btn */ .p-pagetop .sysContent { overflow: hidden; padding: 0 2px; width: 95%; margin: 0 auto; } .p-pagetop .btn { float: right; padding: 10px 20px; } } /* #END_OF_RESOURCE_FILE */