/* Theme Name: diver_child Template: diver Description: Diverの子テーマです。 Theme URI: http://tan-taka.com/diver/ Author: Takato Takagi */ /* カスタマイズする場合にはこれより下に追記してください */ /* みみちゃん」石けんのブログ */ /* diver標準設定 @media only screen and (max-width : 1201px ){ } ～1201px @media only screen and (max-width : 959px ){ } ～959px @media only screen and (max-width : 768px ){ } ～768px @media only screen and (min-width : 767px ){ } 767px～ @media only screen and (min-width : 599px ){ } 599px～ */ /* 各端末の設定 */ /* @media only screen and (max-width : 1280px ){ } */ /* @media only screen and (max-width : 1024px ){ } /* 縦 iPad Pro(12.9) 横 iPad pro */ /* @media only screen and (max-width : 960px ){ } */ /* @media only screen and (max-width : 834px ){ } /* 縦 iPad Pro(11) */ /* @media only screen and (max-width : 768px ){ } /* 縦 iPad */ /* @media only screen and (max-width : 667px ){ } /* 横 iPhone6,7,8 */ /* @media only screen and (max-width : 568px ){ } /* 横 iPhone5 */ /* @media only screen and (max-width : 480px ){ } /* 縦 XPERIA */ /* @media only screen and (max-width : 414px ){ } /* 縦 iPhonexs MAX,XR */ /* @media only screen and (max-width : 360px ){ } /* 縦 XPERIA */ /* @media only screen and (max-width : 320px ){ } /* 縦 iPhone5s */ /* max-width : 959pxでサイドバー消える max-width : 768pxから新着記事の画像の高さが変わる max-width : 599pxから新着記事の画像の高さが変わる */ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- --*/ /*-- 全般的な設定 --*/ /*-- --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* フォント変更 */ body { font-family: 'Franklin Gothic Medium',メイリオ, Meiryo,Osaka,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro",'Verdana',游ゴシック体,"游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,"ＭＳ Ｐゴシック","MS PGothic",FontAwesome,sans-serif,Roboto,'Droid Sans' !important; } body { color: #393939 !important; } /* メインのメインの上下の余白 */ #page-main .widget, #main .widget, .maintop-widget, .main-bottom { margin-bottom: 0px !important; margin-top: 5px !important; } /* ヘッダーとフッターの間のメインの上下の余白 */ #main-wrap { margin: 40px auto !important; } @media only screen and (max-width : 768px ){ #main-wrap { margin: 30px auto !important; } } /* (max-width:959px)以下のサイドバーの上下余白 */ @media only screen and (max-width : 959px ){ #sidebar { padding: 20px 0.5em 20px 0.5em !important; background: #999;} } /* (max-width:959px)以下のメインの上下余白 */ @media only screen and (max-width : 959px ){ #main { margin: 0 0 0px 0 !important; } } /*media all*/ h1, h2, h3, h4, h5, h6 { font-family: fot-udkakugo-large-pr6n, sans-serif !important; font-weight: 600 !important; font-style: normal !important; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- 投稿,固定ページのメイン枠のグレー枠白背景、真ん中よせ --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* 投稿ページの全体枠を透明に */ /* .hentry { background: transparent !important;} */ .hentry { margin: 0 auto 20px auto !important; position: relative; width: 100%; background-color: #FFFFFF; border-radius: 1px; border: 1px solid #E0E0E0; } @media only screen and (max-width : 768px ){ .hentry { width: 96%; } } /* 謎の設定？？最小サイズ削除 */ element.style { min-height: auto !important;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- ウェジット挿入時の余白の設定 --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* トップエリア上部ウェジットの左右の余白はそのまま */ .maintop-widget > ul:first-of-type, .maintop-widget ul:first-child, .d_tab_tab > ul:first-of-type { margin: 0px !important; } /* トップエリア下部ウェジットの左右の余白はそのまま */ .mainbottom-widget > ul:first-of-type, .mainbottom-widget ul:first-child, .d_tab_tab > ul:first-of-type { margin: 0px !important; } /* メインエリア上部ウェジットの左右の余白はそのまま */ .containertop-widget > ul:first-of-type, .containertop-widget ul:first-child, .d_tab_tab > ul:first-of-type { margin: -10px !important; } @media only screen and (max-width : 1200px ){/*-- 中型タブレット迄 iPad --*/ .containertop-widget > ul:first-of-type, .containertop-widget ul:first-child, .d_tab_tab > ul:first-of-type { margin: 0px !important; } } /* メインエリア下部ウェジットの左右の余白はそのまま */ .containerbottom-widgett > ul:first-of-type, .containerbottom-widget ul:first-child, .d_tab_tab > ul:first-of-type { margin: -10px !important; } @media only screen and (max-width : 1200px ){/*-- 中型タブレット迄 iPad --*/ .containerbottom-widget > ul:first-of-type, .containerbottom-widget ul:first-child, .d_tab_tab > ul:first-of-type { margin: 0px !important; } } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- ウェジットのタイトルの余白の設定 --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------*/ /* ウェジット左右の余白 */ /*----------------------*/ /*ウェジットトップの中のタイトルの余白設定*/ .containertop-widget .wrap-post-title { margin-right: -10px !important; margin-left: -10px !important;} @media only screen and (max-width : 1201px ){/*-- 中型タブレット迄 iPad --*/ /* ウェジットトップのタイトルの位置 */ .containertop-widget .wrap-post-title { margin-right: 0px !important; margin-left: 0px !important;} /* ウェジットトップの幅調整 */ .container_top_widget_content { width: 98%; margin-right: auto !important; margin-left: auto !important;} } @media only screen and (max-width : 768px ){/*-- 中型タブレット迄 iPad --*/ /* ウェジットトップの幅調整 */ .container_top_widget_content { width: 100%; margin-right: auto !important; margin-left: auto !important;} } /*ウェジットボトムの中のタイトルの余白設定*/ .containerbottom-widget .wrap-post-title { margin-right: -10px !important; margin-left: -10px !important;} @media only screen and (max-width : 1201px ){/*-- 中型タブレット迄 iPad --*/ /* ウェジットボトムのタイトルの位置 */ .containerbottom-widget .wrap-post-title { margin-right: 0px !important; margin-left: 0px !important;} /* ウェジットボトムの幅調整 */ .container_bottom_widget_content { width: 98%; margin-right: auto !important; margin-left: auto !important;} } @media only screen and (max-width : 768px ){/*-- 中型タブレット迄 iPad --*/ /* ウェジットボトムの幅調整 */ .container_bottom_widget_content { width: 100%; margin-right: auto !important; margin-left: auto !important;} } /*----------------------------*/ /* タイトルの下のマージン設定 */ /*----------------------------*/ .wrap-post-title { margin-bottom: 20px !important; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- 各ウェジット枠の下の余白の設定 --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ :last-child.sticky-post-box { margin-bottom: 40px !important} /* 固定記事枠 */ :last-child section.wrap-post-box { margin-bottom: 40px !important} /* 新着記事枠 */ .maintop-widget ul:last-child { margin-bottom: 40px !important} /* トップエリア上部ウェジット */ .mainbottom-widget ul:last-child { margin-bottom: 40px !important} /* トップエリア下部ウェジット */ .containertop-widget ul:last-child { margin-bottom: 20px !important} /* メインエリア上部ウェジット */ .containerbottom-widget ul:last-child { margin-bottom: 20px !important} /* メインエリア下部ウェジット */ :last-child.d_tab_live { margin-bottom: 40px !important} /* ウェジットタブ */ @media only screen and (max-width : 768px ){ :last-child.sticky-post-box { margin-bottom: 30px !important} /* 固定記事枠 */ :last-child section.wrap-post-box { margin-bottom: 30px !important} /* 新着記事枠 */ .maintop-widget ul:last-child { margin-bottom: 30px !important} /* トップエリア上部ウェジット */ .mainbottom-widget ul:last-child { margin-bottom: 30px !important} /* トップエリア下部ウェジット */ .containertop-widget ul:last-child { margin-bottom: 10px !important} /* メインエリア上部ウェジット */ .containerbottom-widget ul:last-child { margin-bottom: 10px !important} /* メインエリア下部ウェジット */ :last-child.d_tab_live { margin-bottom: 30px !important} /* ウェジットタブ */ } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- 記事の設定 --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- 新着記事の説明文の下の余白設定 --*/ @media only screen and (max-width : 768px ){ .post-box-contents .post-meta-all { padding-bottom: 0px!important; } } /*-- 新着記事の説明文の高さ設定 --*/ @media only screen and (max-width : 768px ){ .post-box .post-substr { height: 3em; } } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- --*/ /*-- 各項目のカスタマイズはここから --*/ /*-- --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- ヘッダーのカスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- ヘッダーメニューの透過率 --*/ @media only screen and (max-width : 768px ){ #scrollnav ul li a { opacity: 1 !important;} } /* メインヘッダーの影 */ .header-wrap { box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.50) !important; -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.50); } /* ロゴの枠の上下の余白 */ .header-logo { padding: 0px 0; } @media only screen and (max-width : 959px ){ .header-logo { padding: 0px 0 !important; } } /* ロゴの枠の上下の余白 */ div.header-logo .clearfix { margin: 0px 0 !important; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- 独立ヘッダーメニューのカスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* 枠の余白の設定 */ .header-logo #nav ul, #onlynav ul, #nav_fixed #nav ul { padding: 5px 0; } /* リンクメニューの設定 */ #onlynav ul li { color: #FFF !important; background-color: #FF88E3 !important; margin-right: 5px; border-radius: 3px; } #onlynav ul li:last-of-type, #onlynav ul li:last-child { margin-right: 0px; } @media only screen and (max-width : 768px ){ /* スクロールナビ枠の余白の設定 */ #header ul.sub-menu, #header ul.children, #scrollnav, .description_sp { background: #FF5DDA !important; color: #FFF !important; padding: 5px 0; } /* スクロールナビのリストの設定 */ #scrollnav ul li a { margin-right: 5px; background-color: #FF88E3 !important; color: #FFF !important; border-radius: 3px;} #scrollnav ul li:first-of-type a, #scrollnav ul li:first-child a { margin-left: 5px; } #scrollnav ul > li:hover > a:hover, #scrollnav ul > li:hover > a, #scrollnav ul > li:hover li:hover > a, #scrollnav ul li:hover ul li ul li:hover > a { background: #5d8ac1 !important; color: #fff !important; border-radius: 3px !important; } /* スクロールナビの時は影けす */ .header-wrap { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) !important; -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.50); } } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- サイドバーのカスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* サイドバーのタイトル変更 */ #sidebar .widgettitle { position: relative; display: block; height: 100%; margin: -4px; /* サイドバーのタイトルの余白 */ margin-bottom: 15px; padding: 8px 5px; font-family: "heisei-kaku-gothic-std",sans-serif; font-weight: bold; line-height: 1.3; color: #666; border-bottom: 0px solid #C0C0C0 !important; background: none !important; } #sidebar .widgettitle::before, #sidebar .widgettitle::after { content: ''; position: absolute; bottom: 0px; left: 0; height: 3px !important; } #sidebar .widgettitle::before { z-index: 2; width: 25%; background-color: #FF89DB; } #sidebar .widgettitle::after { width: 100%; background: repeating-linear-gradient(45deg, #fff, #fff 2px, #FFBDEB 2px, #FFBDEB 4px); } /* サイドバーの枠の角を丸める */ #sidebar .widget { border-radius: 1px; margin-bottom: 20px !important; } /* サイドバーにグレー枠線をつける */ #sidebar .widget { border: 1px solid #E0E0E0; } /* ※対策 サイドバーの検索は外枠付けない */ #sidebar .widget_search { border-radius: 1px; border: 0px solid #C0C0C0 !important; } /*media all*/ input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=search]:focus, input[type=url]:focus, input[type=tel]:focus, textarea:focus { border: 1px solid #E0E0E0 !important; } /*media all*/ .searchform .s { border: 1px solid #E0E0E0; } /* サイドバーのリストの最後を下線なしに変更 */ #sidebar .widget ul li:last-of-type, #sidebar .widget ul li:last-child, #sidebar .d_tab_tab ul li:last-of-type { border-bottom: 0px solid rgba(50, 50, 50, .2); } /* サイドバーの記事グリッド一覧、タブの記事グリッド一覧の最後の下線を消す */ #sidebar .widget ul.diver_widget_post_grid li:last-of-type, #sidebar .widget ul.diver_widget_post_grid li:last-child, #sidebar .d_tab_tab ul:last-of-type.diver_widget_post_gridli { border-bottom: 0px solid rgba(50, 50, 50, .2) !important; width: 50% !important; } /* レスポンシブ時のサイドバーの下部の余白の調整 */ .sidebar_content { margin-bottom: -20px !important; } /*media all*/ .widget > ul:first-of-type, .widget ul:first-child, .d_tab_tab > ul:first-of-type { margin: -4px; } /* サイドバーの人気ランキングの全体の余白 */ #sidebar .popular-posts ul { margin: -4px; } /* サイドバーのリストの横にアイコン */ /* #sidebar .widget_categories ul li.cat-item a:after { font-family: FontAwesome; content: "\f054"; position: absolute; right : 4%; color: rgba(138,138,138,1.00); padding-left: 0px; top: 50%; margin-top: -10px; } */ /*-----------------------------*/ /*-- 人気記事ランキングの設定 --*/ /*-----------------------------*/ .wpp-thumbnail { display: inline-block; float: left; margin: 0 1rem 20px 0 !important; border: none; width: 100px !important; height: 56px !important; } @media only screen and (max-width : 959px ){ .wpp-thumbnail { width: 100px !important; height: 56px !important; } } @media only screen and (max-width : 768px ){ .wpp-thumbnail { width: 100px !important; height: 56px !important; } } @media only screen and (max-width : 599px ){ .wpp-thumbnail { width: 100px !important; height: 56px !important; } } /*-- ランキングビュー枠 --*/ .wpp-meta, .post-stats { display: block; font-size: 0.8em; position: absolute; top: 67px; left: 10px; color: #666666; } /*-- ランキングビュー枠の行間 --*/ #sidebar .widget>ul.wpp-list:first-of-type>li, .widget ul:first-child>li, .d_tab_tab>ul:first-of-type>li { line-height: 1.4; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- メインページのカスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-----------------------------------*/ /*-- メインページのタイトルの設定 --*/ /*-----------------------------------*/ /* メインページのタイトル枠の変更 */ .wrap-post-title, .widget .wrap-post-title { padding: 10px 10px 10px 10px; border-radius: 3px; color: #FFFFFF !important; background-color: #FF5DDA !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .wrap-post-title:before, .widget .wrap-post-title:after { position: absolute; content: ''; top: 99%; left: 30px; border: 10px solid transparent; border-top: 10px solid #FF5DDA; width: 0; height: 0; } /*-----------------------------*/ /*-- 新着記事のカードの設定 --*/ /*-----------------------------*/ /*-- 記事カードの全体の中の余白 --*/ .post-box-contents.clearfix { padding: 10px 5px; } /*-- 新着記事のカードの下の余白 --*/ .post-box-contents.clearfix { margin-bottom: 10px; } @media only screen and (max-width : 768px ){ .post-box-contents.clearfix { margin-bottom: 10px; } } /*-- 記事のカードの画像の高さ --*/ .post_thumbnail { width: 250px !important; height: 140px !important; } @media only screen and (max-width : 959px ){ .post_thumbnail { width: 220px !important; height: 125px !important; } } @media only screen and (max-width : 768px ){ .post_thumbnail { width: 150px !important; height: 80px !important; } } @media only screen and (max-width : 599px ){ .post_thumbnail { width: 130px !important; height: 73px !important; } } /*-- 記事のカードの右のくくり枠 --*/ .post-box .post-meta-all { overflow-y: hidden; padding: 0px 5px 15px 10px !important; display: block; vertical-align: top; } @media only screen and (max-width : 768px ){ .post-box .post-meta-all { padding: 5px 5px 15px 10px !important; } } /* 新着記事のカードのタイトル */ .post-box .post-title { font-weight: bold; font-size: 17px; padding: 5px 0 3px 0 !important; line-height: 1.4; } @media only screen and (max-width : 959px ){ .post-box .post-title { font-size: 16px !important; } } @media only screen and (max-width : 768px ){ .post-box .post-title { font-size: 15px !important; padding: 0px 0 !important;} } @media only screen and (max-width : 360px ){ .post-box .post-title { font-size: 14px !important; padding: 0px 0 !important;} } /*-- 記事のカードのカテゴリー枠 --*/ /*-- 599px以下でカテゴリー枠が画像の中に移動する --*/ .post-box .post-cat { background: #6FEBD9; padding: .3em .5em .2em .5em; margin: 2px 2px 5px 2px; font-size: 0.7em; border-radius: 1px; display: inline-block; vertical-align: middle; font-weight: bold; } @media only screen and (max-width : 768px ){ .post-box .post-cat { margin-right: 0px; font-size: 0.7em; margin-bottom: 0px;} } @media only screen and (max-width : 599px ){ .post-box .post-cat { margin-right: 0px; font-size: 0.6em; margin-bottom: 0px;} } /*-- 記事のカードのカテゴリー枠の中 --*/ .post-cat a, .post-cat-sp a { color: #fff; padding: 0px 0px; position: relative; z-index: 1; } @media only screen and (max-width : 768px ){ .post-cat a, .post-cat-sp a { padding: 0px 10px;} } /*-- 記事のカードのタグの枠 --*/ .post-box .post-tag { display: inline-block; padding: 0; margin-top: -5px;} @media only screen and (max-width : 768px ){ .post-box .post-tag { display: none; } } /*-- 記事のカードのタグの枠の中 --*/ .post-box .post-tag a { display: inline-block; background: #eee; padding: .3em .5em .2em .5em; margin: 5px 5px 0px 0px; font-size: 1.1em; font-weight: bold; border-radius: 1px; position: relative; z-index: 1; } @media only screen and (max-width : 768px ){ .post-box .post-tag a { font-size: 0.9em; } } /*-- 記事のカードの日付 --*/ .post-box .post-date { font-size: 0.9em; color: #999 !important; font-weight: bold; display: inline-block; position: absolute; bottom: 5px; right: 10px; } .post-box .post-date:before { font-family: FontAwesome; content: "\f017";/*アイコン種類*/ color: #999; /*アイコン色*/ margin-right: 2px; } @media only screen and (max-width : 959px ){ .post-box .post-date { font-size: 0.8em; } } @media only screen and (max-width : 768px ){ .post-box .post-date { font-size: 0.7em; } } /*-- 記事のカードの抜粋をk消す --*/ .post-box .post-substr { display: none; width: auto; } @media only screen and (max-width : 768px ){ .post-box .post-title { font-size: 14px !important; } } @media only screen and (max-width : 360px ){ .post-box .post-title { font-size: 13px !important; } } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- 固定記事カードのカスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* 固定記事のsticky-post-boxを相対位置にする */ .sticky-post-box { position: relative; } /* 固定記事の抜粋の高さ */ .sticky-post-box .post-substr { display:none;} /*-- 固定記事カードの全体の中の余白 --*/ .sticky-post-box.clearfix { padding: 5px; margin-bottom: 0px; } /* 固定記事の画像サイズ&画像の下の余白 */ .sticky-post-box .post_thumbnail { width: 250px !important; height: 145px !important; } @media only screen and (max-width : 959px ){ .sticky-post-box .post_thumbnail { width: 220px !important; height: 125px !important; } } @media only screen and (max-width : 768px ){ .sticky-post-box .post_thumbnail { width: 150px !important; height: 90px !important; margin-bottom: 0px !important;} } @media only screen and (max-width : 599px ){ .sticky-post-box .post_thumbnail { width: 130px !important; height: 90px !important; margin-bottom: 0px !important;} } @media only screen and (max-width : 320px ){ .sticky-post-box .post_thumbnail { width: 100% !important; height: auto !important; margin-bottom: 10px !important;} } /*-- 固定記事カードの右のくくり枠 --*/ .sticky-post-box .post-meta-all { display: block; padding: 10px 5px; } @media only screen and (max-width : 768px ){ .sticky-post-box .post-meta-all { padding: 5px 5px 10px 5px !important; } } /* 固定記事のカードのタイトル */ .sticky-post-box .post-title { font-size: 16px; font-weight: bold; padding: 3px 0 !important; } @media only screen and (max-width : 959px ){ .sticky-post-box .post-title { font-size: 15px !important; } } @media only screen and (max-width : 768px ){ .sticky-post-box .post-title { font-size: 14px !important; } } @media only screen and (max-width : 360px ){ .sticky-post-box .post-title { font-size: 13px !important; } } /* 固定記事のカードのタグの枠設定 */ .sticky-post-box .post-tag { margin: 0; margin-top: -5px; } /* 固定記事のカードのタグの枠の中の設定 */ .sticky-post-box .post-cat { background: #6FEBD9; padding: 2px 0; font-size: 0.8em; border-radius: 1px; display: inline-block; margin-right: 0px; vertical-align: middle; font-weight: bold; } @media only screen and (max-width : 768px ){ .sticky-post-box .post-cat { margin-right: 0px; font-size: 0.7em; } } @media only screen and (max-width : 599px ){ .sticky-post-box .post-cat { margin-right: 0px; font-size: 0.6em; } } /* 固定記事のカードの日付の更新日削除 */ .sticky-post-box .post-date.modified { display: none; } /* 固定記事のカードの既定の日付をクリアして右下に移動 */ .sticky-post-box .post-date { font-size: 0.9em; color: #999 !important; font-weight: bold; position: absolute; bottom: 5px; right: 5px; } @media only screen and (max-width : 959px ){ .sticky-post-box .post-date { font-size: 0.8em; } } @media only screen and (max-width : 768px ){ .sticky-post-box .post-date { font-size: 0.7em; } } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- 関連記事のカスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .mainbottom-widget .d_tab_tab ul:last-child /*------------------*/ /* カードのカスタム */ /*------------------*/ /* 記事の下の空間 */ .content .sc_getpost { margin: 0.5em 0 1.2em 0; } /* 説明文削除 */ .sc_getpost .substr { display:none !important; } /* タイトルの設定 */ .sc_getpost .title { font-size: 0.9em !important; padding: 0 10px 25px 10px !important; line-height: 1.4; } @media only screen and (max-width : 768px ){ .sc_getpost .date { position: absolute !important; font-size: 0.7em !important; bottom: 0px !important; -webkit-line-clamp: 2 !important; } .sc_getpost img { width: 120px !important; height: 80px !important; } } @media only screen and (max-width : 599px ){ .sc_getpost img { width: 100px !important; height: 70px !important; } } /*記事のspanタイトル*/ .sc_getpost .badge { background: #666; color: #fff; padding: .1em 9px; margin: 0 0 5px 0 !important; font-size: 0.8em; border-radius: 3px; display: block !important; position: relative; font-weight: bold; } /*------------------*/ /* リストのカスタム */ /*------------------*/ /* タイトルの最大高さ削除 */ .sc_article.list .sc_article_title { max-height: auto !important; } /* タイトルの設定 */ .sc_article.list .sc_article_title { font-size: 0.9em !important; display: -webkit-box; /* ボックスの中の設定 */ -webkit-box-orient: vertical; /* 縦ぞろえ */ -webkit-line-clamp: 3; /* 表示行数の設定 */ } /* 記事の内側の余白 */ .sc_article.list li { padding: 5px !important; } /* 記事のタイトルの左右の余白 */ .sc_article.list li .meta { padding: 0 8px !important; } @media only screen and (max-width : 768px ){ .sc_article.list .post_list_thumb { width: 120px !important; height: 80px !important; } } @media only screen and (max-width : 599px ){ .sc_article.list .post_list_thumb { width: 100px !important; height: 70px !important; } } /*media all*/ .sc_article.grid > a, .sc_article.list > a { -webkit-box-shadow: 0 2px 5px rgba(100, 100, 100, 0.25) !important; -moz-box-shadow: 0 2px 5px rgba(100, 100, 100, 0.25) !important; box-shadow: 0 2px 5px rgba(100,100,100,0.25) !important; margin: 1px !important; border: 1px solid #ddd; } /*media all*/ .sc_getpost { -webkit-box-shadow: 0 3px 10px #ddd; -moz-box-shadow: 0 3px 10px #ddd; box-shadow: 0px 3px 10px #ddd; -webkit-box-shadow: 0 2px 5px rgba(100, 100, 100, .25); -moz-box-shadow: 0 2px 5px rgba(100, 100, 100, .25); box-shadow: 0px 2px 5px rgba(100,100,100,0.25); position: relative; transition-duration: 0.2s; transition-timing-function: ease-out; margin: 1em 0; border: 1px solid #ddd; background: #fff; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- カテゴリーページのカスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* カテゴリータイトル枠の下の余白 */ .catpage_content_wrap { margin-top: -20px; margin-bottom: 40px; } /* カテゴリータイトルの下の余白 */ h1.catpage_title { margin-bottom: 0 !important; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- パンくずリストののカスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #breadcrumb { margin-bottom: 20px !important; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- タブウェジットの切替タブのカスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* 切替タブウェジットのタイトルの設定 */ .widget ul.d_tab_nav li a { padding: 15px 5px; font-size: 1.3em !important; } /* タブウェジットのクリック後の色 */ .widget ul.d_tab_nav li.d_tab_active a { border-top: 3px solid #0024FF; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- タブウェジットの固定記事カスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------*/ /*-- タブウェジットの為 #diver_widget_newpost-4 を変更して使用 --*/ /*---------------------------------------------------------------*/ /* タブウェジットの記事の一番下の下線を消す */ #diver_widget_newpost-7 > ul > li:last-of-type, #diver_widget_newpost-7 ul > li:last-child, #diver_widget_newpost-7 > ul > li:last-of-type { border-bottom: 0px solid rgba(50, 50, 50, .2); } /* タブウェジットの記事のタイトル枠 */ #diver_widget_newpost-7 .widget_post_list .meta .post_list_title { font-weight: bold; font-size: 16px; padding: 10px 0 !important; } @media only screen and (max-width : 959px ){ #diver_widget_newpost-7 .widget_post_list .meta .post_list_title { font-size: 15px !important; } } @media only screen and (max-width : 768px ){ #diver_widget_newpost-7 .widget_post_list .meta .post_list_title { font-size: 14px !important; } } @media only screen and (max-width : 360px ){ #diver_widget_newpost-7 .widget_post_list .meta .post_list_title { font-size: 13px !important; } } /* タブウェジットの記事の画像の枠 */ #diver_widget_newpost-7 .widget_post_list .post_list_thumb { width: 250px !important; height: 135px !important; margin-right: 2%; } @media only screen and (max-width : 959px ){ #diver_widget_newpost-7 .widget_post_list .post_list_thumb { width: 220px !important; height: 125px !important; margin-right: 2%;} } @media only screen and (max-width : 768px ){ #diver_widget_newpost-7 .widget_post_list .post_list_thumb { width: 150px !important; height: 90px !important; margin-bottom: 0px !important; margin-right: 2%;} } @media only screen and (max-width : 599px ){ #diver_widget_newpost-7.widget_post_list .post_list_thumb { width: 130px !important; height: 90px !important; margin-bottom: 0px !important; margin-right: 2%;} } /* タブウェジットの記事のタイトルやタグの枠 */ #diver_widget_newpost-7 .widget_post_list .meta { margin-left: 0px !important; padding-left: 0px !important; float: none; width: auto; } /* タブウェジットの記事のカードの既定の日付をクリアして右下に移動 */ #diver_widget_newpost-7 .widget_post_list .meta .post_list_date { font-size: 0.9em; color: #999 !important; font-weight: bold; position: absolute; bottom: 5px; right: 5px; } @media only screen and (max-width : 959px ){ #diver_widget_newpost-7 .widget_post_list .meta .post_list_date { font-size: 0.8em; } } @media only screen and (max-width : 768px ){ #diver_widget_newpost-7 .widget_post_list .meta .post_list_date { font-size: 0.7em; } } /* タブウェジットの記事のカードのカテゴリー枠の設定 */ #diver_widget_newpost-7 .widget_post_list .post_list_thumb .post_list_cat { background: #64A1FF; color: #fff; font-size: 0.8em; font-weight: bold; } /* タブウェジットの記事のカードのタグ枠の設定 */ #diver_widget_newpost-7 .widget_post_list .meta .post_list_tag { padding: 5px 0 15px 0; line-height: 0; } @media only screen and (max-width : 768px ){ #diver_widget_newpost-7 .widget_post_list .meta .post_list_tag { display: none; } } /* タブウェジットの記事のカードのタグ枠の中のタグの設定 */ #diver_widget_newpost-7 .widget_post_list .meta .post_list_tag .tag { display: inline-block; border: 0px solid #ccc; color: #666; font-size: 0.8em; font-weight: bold; padding: 5px 10px; background: #eee; border-radius: 1px; margin: 2px; line-height: 1; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- タブウェジットの切替タブのカスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------*/ /*-- タブウェジットの為 #diver_widget_newpost-11 を変更して使用 --*/ /*---------------------------------------------------------------*/ /* タブウェジットの記事の一番下の下線を消す */ #diver_widget_tab-2 > ul > li:last-of-type, #diver_widget_tab-2 ul > li:last-child, #diver_widget_tab-2 > ul > li:last-of-type { border-bottom: 0px solid rgba(50, 50, 50, .2); } /* タブウェジットの記事のタイトル枠 */ #diver_widget_tab-2 .widget_post_list .meta .post_list_title { font-weight: bold; font-size: 16px; padding: 10px 0 !important; } @media only screen and (max-width : 959px ){ #diver_widget_tab-2 .widget_post_list .meta .post_list_title { font-size: 15px !important; } } @media only screen and (max-width : 768px ){ #diver_widget_tab-2 .widget_post_list .meta .post_list_title { font-size: 14px !important; } } @media only screen and (max-width : 360px ){ #diver_widget_tab-2 .widget_post_list .meta .post_list_title { font-size: 13px !important; } } /* タブウェジットの記事の画像の枠 */ #diver_widget_tab-2 .widget_post_list .post_list_thumb { width: 250px !important; height: 135px !important; margin-right: 2%; } @media only screen and (max-width : 959px ){ #diver_widget_tab-2 .widget_post_list .post_list_thumb { width: 220px !important; height: 125px !important; margin-right: 2%;} } @media only screen and (max-width : 768px ){ #diver_widget_tab-2 .widget_post_list .post_list_thumb { width: 150px !important; height: 90px !important; margin-bottom: 0px !important; margin-right: 2%;} } @media only screen and (max-width : 599px ){ #diver_widget_tab-2 .widget_post_list .post_list_thumb { width: 130px !important; height: 90px !important; margin-bottom: 0px !important; margin-right: 2%;} } /* タブウェジットの記事のタイトルやタグの枠 */ #diver_widget_tab-2 .widget_post_list .meta { margin-left: 0px !important; padding-left: 0px !important; float: none; width: auto; } /* タブウェジットの記事のカードの既定の日付をクリアして右下に移動 */ #diver_widget_tab-2 .widget_post_list .meta .post_list_date { font-size: 0.9em; color: #999 !important; font-weight: bold; position: absolute; bottom: 5px; right: 5px; } @media only screen and (max-width : 959px ){ #diver_widget_tab-2 .widget_post_list .meta .post_list_date { font-size: 0.8em; } } @media only screen and (max-width : 768px ){ #diver_widget_tab-2 .widget_post_list .meta .post_list_date { font-size: 0.7em; } } /* タブウェジットの記事のカードのカテゴリー枠の設定 */ #diver_widget_tab-2 .widget_post_list .post_list_thumb .post_list_cat { background: #64A1FF; color: #fff; font-size: 0.8em; font-weight: bold; } /* タブウェジットの記事のカードのタグ枠の設定 */ #diver_widget_tab-2 .widget_post_list .meta .post_list_tag { padding: 5px 0 15px 0; line-height: 0; } @media only screen and (max-width : 768px ){ #diver_widget_tab-2 .widget_post_list .meta .post_list_tag { display: none; } } /* タブウェジットの記事のカードのタグ枠の中のタグの設定 */ #diver_widget_tab-2 .widget_post_list .meta .post_list_tag .tag { display: inline-block; border: 0px solid #ccc; color: #666; font-size: 0.8em; font-weight: bold; padding: 5px 10px; background: #eee; border-radius: 1px; margin: 2px; line-height: 1; } /* タブの記事のタイトルをつける時に背景の白を消す #diver_widget_tab-9.maintop-widget { background: transparent; } */ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- 投稿内のカスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* 記事全体の余白 */ .hentry, #single-main .post-sub { padding: 2% 3% !important; } /* 関連記事の余白 */ .newpost_list { padding: 10px 0px !important; } /* 関連記事のリンクの余白 */ .post_list_wrap a { padding: 5px 0px !important; } /* 関連記事全体の余白 */ .article_footer {padding: 1em 0px !important; } /* おすすめの記事の余白 */ .recommend-post { padding: 10px 0px !important; } /* おすすめの記事のリンクの余白 */ .single-recommend a { padding: 5px 0px; } /* サムネイル画像を横幅に合わせた実寸サイズの設定*/ .single_thumbnail img { width: 100%; height: auto; vertical-align: middle; object-fit: contain; font-family: "object-fit:contain;"; background-size: auto auto; background-clip: border-box; } /* 投稿タイトルの見出しタイトルの余白 */ h1.single-post-title { margin: 20px 0 10px 0; } /* 投稿タイトルの幅の余白を消す*/ .post-meta { padding: 1em 0px !important; } /* 投稿文の幅の余白を消す*/ .single-post-main { padding: 1em 0px !important; } /* おすすめの記事、関連記事のタイトル等*/ .single_title { padding: 5px !important; font-weight: bold; } .single_title:before { font-family: FontAwesome; content: "\f0f6";/*アイコン種類*/ color: #333; /*アイコン色*/ margin-right: 5px; } /* ul要素の左の余白消す */ .content ul { padding-left: 0 !important; } /* 投稿内のアイキャッチ画像の下の余白 */ .single_thumbnail {margin-bottom: 20px !important; } /*------------------------------------*/ /*-- 関連記事の記事カードのカスタム --*/ /*------------------------------------*/ .post_list_wrap figure, .post_list_wrap img { width: 130px !important; height: 90px !important; } @media only screen and (max-width : 768px ){ .post_list_wrap figure, .post_list_wrap img { width: 100px !important; height: 60px !important; } } /*------------------------------------*/ /*-- おすすめの記事カードのカスタム --*/ /*------------------------------------*/ /* おすすめの記事カードの枠のサイズ */ .recommend-thumb { width: 130px !important; height: 90px !important; } @media only screen and (max-width : 768px ){ .recommend-thumb { width: 100px !important; height: 60px !important; margin-bottom: 0px !important;} } /* おすすめの記事カードの画像のサイズも枠に合わせる */ .single-recommend img { width: 100%; height: 90px !important; } @media only screen and (max-width : 768px ){ .single-recommend img { width: 100%; height: 60px !important; } } /* 抜粋文字消す*/ .recommend-desc { display: none; } /*------------------------------------*/ /*-- 投稿内の見出しの余白のカスタム --*/ /*------------------------------------*/ /* コンテンツ内の投稿の挿入画像の転送先 */ .transfer a{ width: 100%; display: block; color: #578FFF !important; text-align: right; margin-top: -35px; } /* コンテンツ内の投稿の挿入画像の転送先 */ .row.sp .transfer a{ width: 100%; display: block; color: #578FFF !important; text-align: right; margin-top: -15px; } /*------------------------------------*/ /*-- 投稿内の挿入画像カスタム --*/ /*------------------------------------*/ /* 投稿内の挿入画像の大きさ設定 */ .single-post-main img { width:auto !important; height:auto; } /* 投稿内の挿入画像の下の余白設定 */ .content img { margin: 0 0 0 0 !important;} /* 投稿内のpタグの中の挿入画像の下の余白設定 */ .content p img { margin: 0 0 20px 0 !important;} /*------------------------------------*/ /*-- 投稿内の見出しの余白のカスタム --*/ /*------------------------------------*/ h2 { margin: 40px 0 40px !important; } /*media all*/ h3 { margin: 40px 0 30px !important; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- ファーストビューカスタムの設定 --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* レスポンシブニ対応出来るように細かく設定 */ .firstview_custom { height: 500px !important; width: 100%; background-position: center center; background-size: 100% auto; background-image: url(https://mimi-sapone.com/wp-content/uploads/2021/01/トップ_ファーストビュー002.jpg); } @media only screen and (max-width : 1280px ){ .firstview_custom { height: 500px !important; }} @media only screen and (max-width : 1024px ){ .firstview_custom { height: 460px !important; }} /* 縦 iPad Pro(12.9) 横 iPad pro */ @media only screen and (max-width : 960px ){ .firstview_custom { height: 425px !important; }} @media only screen and (max-width : 834px ){ .firstview_custom { height: 410px !important; }} /* 縦 iPad Pro(11) */ @media only screen and (max-width : 768px ){ .firstview_custom { height: 360px !important; }} /* 縦 iPad */ @media only screen and (max-width : 667px ){ .firstview_custom { height: 300px !important; }} /* 横 iPhone6,7,8 */ @media only screen and (max-width : 568px ){ .firstview_custom { height: 260px !important; }} /* 横 iPhone5 */ @media only screen and (max-width : 480px ){ .firstview_custom { height: 220px !important; }} /* 縦 XPERIA */ @media only screen and (max-width : 414px ){ .firstview_custom { height: 190px !important; }} /* 縦 iPhonexs MAX,XR */ @media only screen and (max-width : 360px ){ .firstview_custom { height: 170px !important; }} /* 縦 XPERIA */ @media only screen and (max-width : 320px ){ .firstview_custom { height: 150px !important; }} /* 縦 iPhone5s */ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- --*/ /*-- プラグイン目次のカスタム --*/ /*-- --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* 目次の枠 */ #toc_container { margin: 50px 0 50px 0 !important; padding: 10px !important; background: #fff; border: 1px solid #C0C0C0 !important; border-radius: 1px; display: block !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* 目次のh2タイトル */ #toc_container .toc_title { text-align: center; margin-bottom: 35px; margin-top: 0; padding: 10px !important; font-size: 1.7em; background: #F0F0F0 !important; color: #666 !important; } /* 目次のリストタイトルのh2のタイトルのアイコン */ #toc_container .toc_title:before { font-family: FontAwesome; content: "\f0f6";/*アイコン種類*/ color: #333; /*アイコン色*/ margin-right: 7px; } /* 目次のopen/closeボタン */ span.toc_toggle { background: transparent !important; color: #0054FF !important; font-size: 0.6em !important; padding: 10px !important; margin-left: 8px; } /* 目次のopen/closeボタンのアイコン */ #toc_container .toc_list li ul a::before, .toc_widget_list li ul a::before { color: #666 !important;} /* 目次のリスト枠 */ ul.toc_list { padding: 0.5em 0.5em 0 0.5em !important; margin: 1em 0; } /* 目次のリンクの色 */ #toc_container .toc_list > li a { position: relative; display: inline-block; color: #578FFF !important;} /* 目次のリストの数字の色 */ span.toc_number { background: #1e73be; color: #fff; font-weight: bold; border-radius: 50%; line-height: 1.5em; width: 1.5em; text-align: center; display: inline-block; margin-right: 5px; opacity: 0.5; font-size: 0.8em; } span.toc_number { background: #666 !important; color: #FFF !important; font-size: 0.7em !important; position: absolute; top: 0px; left: 0px; opacity: 1 !important; width: 1.6em !important; } @media only screen and (max-width : 768px ){ span.toc_number { top: 1px !important; } } #toc_container .toc_list > li { margin-bottom: 20px !important; } #toc_container .toc_list > li:last-child { margin-bottom: 0px !important; } /* 目次のリストの数字を絶対位置にしたため、文の余白を作る */ #toc_container .toc_list > li > a { padding-left: 27px !important;} @media only screen and (max-width : 768px ){ #toc_container .toc_list > li > a { padding-left: 20px !important;} } /* 目次のリストタイトルの太字調整、優先順位の問題で2種類書く */ #toc_container .toc_list > li a { font-weight: normal !important; font-size: 15px !important;} #toc_container .toc_list > li > a { font-weight: bold !important; font-size: 16px !important;} @media only screen and (max-width : 768px ){ #toc_container .toc_list > li a { font-weight: normal !important; font-size: 13px !important;} #toc_container .toc_list > li > a { font-weight: bold !important; font-size: 15px !important;} } /* 目次のリストタイトルのh3のタイトルのアイコン */ #toc_container .toc_list > li ul { position: relative; display: block; list-style-type: disc; margin-top: 10px; padding: 0 10px 0 0px !important; color: #e1eff4; } #toc_container .toc_list > li ul li a { display: inline-block; padding-left: 10px !important; } #toc_container .toc_list li ul li a::before, .toc_widget_list li ul a::before { position: absolute; display: inline-block; content: "\f0da"; margin-right: 0px !important; margin-left: -10px !important; vertical-align: middle; opacity: 1 !important; font-family: fontAwesome; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- --*/ /*-- Contact Form 7カスタマイズ --*/ /*-- --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*フォームの枠*/ .inquiry { width: 100% !important; } /*スマホContact Form 7カスタマイズ*/ @media(max-width:500px){ .inquiry th,.inquiry td { display:block!important; width:100%!important; border-top:none!important; -webkit-box-sizing:border-box!important; -moz-box-sizing:border-box!important; box-sizing:border-box!important; } .inquiry tr:first-child th{ border-top:1px solid #d7d7d7!important; } /* 必須・任意のサイズ調整 */ .inquiry .haveto,.inquiry .any { font-size:10px; }} /*見出し欄*/ .inquiry th{ text-align:left; font-size:14px; color:#444; padding-right:5px; width:30%; background:#f7f7f7; border:solid 1px #d7d7d7; } /*通常欄*/ .inquiry td{ font-size:13px; border:solid 1px #d7d7d7; } /*横の行とテーブル全体*/ .entry-content .inquiry tr,.entry-content table{ border:solid 1px #d7d7d7; } /*必須の調整*/ .haveto{ font-size:10px; padding:5px; background:#ff9393; color:#fff; border-radius:2px; margin-right:5px; position:relative; bottom:1px; } /*任意の調整*/ .any{ font-size:10px; padding:5px; background:#93c9ff; color:#fff; border-radius:2px; margin-right:5px; position:relative; bottom:1px; } /*ラジオボタンを縦並び指定*/ .verticallist .wpcf7-list-item{ display:block; } /*送信ボタンのデザイン変更*/ #formbtn{ display: block; padding: 15px; width: 80%; max-width: 350px; min-width: 240px; background: #3E83FF; color: #fff; font-size: 18px; font-weight: bold; border-radius: 2px; border:2px solid #3E83FF; margin: 25px auto 0; transition: .3s; } /*送信ボタンマウスホバー時*/ #formbtn:hover{ background:#fff; color:#666666; border:2px solid #3E83FF; transition: .3s; } /* フォーム入力の幅 */ input[type=text], input[type=password], input[type=email], input[type=search], input[type=url], input[type=tel], input[type=number], textarea { width: 100% !important; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- --*/ /*-- タブウェジットのカスタム --*/ /*-- --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*media all*/ .mainbottom-widget .d_tab_tab ul:last-child { margin-bottom: 0px !important; } /*media all*/ .d_tab_tab ul li.widget_post_list a { padding: 5px !important; margin: 10px 0 !important;} /*media all*/ .containerbottom-widgett > ul:first-of-type, .containerbottom-widget ul:first-child, .d_tab_tab > ul:first-of-type { margin: 0px !important; } /*media all*/ .d_tab_live .d_tab_tab { padding: 5px 5px 5px 5px !important;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- 切替タブウェジットのカスタム --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* 切替タブウェジットのタイトルの設定 */ .widget ul.d_tab_nav li a { padding: 20px 5px; font-size: 1.2em !important; } /* タブウェジットのクリック後の色 */ .widget ul.d_tab_nav li.d_tab_active a { border-top: 5px solid #0024FF; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- --*/ /*-- 記事投稿用のCSS --*/ /*-- --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------*/ /*-- コンテナの中の親要素 --*/ /*---------------------------------------------------------*/ .row100 { width: 100%; margin-right: auto; margin-left: auto; } /*-- 幅100%のBOX --*/ .row98 { width: 98%; margin-right: auto; margin-left: auto; } /*-- 幅95%のBOX --*/ .row96 { width: 96%; margin-right: auto; margin-left: auto; } /*-- 幅95%のBOX --*/ .row95 { width: 95%; margin-right: auto; margin-left: auto; } /*-- 幅95%のBOX --*/ .row90 { width: 90%; margin-right: auto; margin-left: auto; } /*-- 幅90%のBOX --*/ .row80 { width: 80%; margin-right: auto; margin-left: auto; } /*-- 幅80%のBOX --*/ .row70 { width: 70%; margin-right: auto; margin-left: auto; } /*-- 幅70%のBOX --*/ .row60 { width: 60%; margin-right: auto; margin-left: auto; } /*-- 幅60%のBOX --*/ .row50 { width: 50%; margin-right: auto; margin-left: auto; } /*-- 幅50%のBOX --*/ .row40 { width: 40%; margin-right: auto; margin-left: auto; } /*-- 幅40%のBOX --*/ @media only screen and (max-width : 1280px ){ .xl-row100 { width: 100%; margin-right: auto; margin-left: auto; } /*-- 幅100%のBOX --*/ .xl-row95 { width: 95%; margin-right: auto; margin-left: auto; } /*-- 幅95%のBOX --*/ .xl-row90 { width: 90%; margin-right: auto; margin-left: auto; } /*-- 幅90%のBOX --*/ .xl-row80 { width: 80%; margin-right: auto; margin-left: auto; } /*-- 幅80%のBOX --*/ .xl-row70 { width: 70%; margin-right: auto; margin-left: auto; } /*-- 幅70%のBOX --*/ .xl-row60 { width: 60%; margin-right: auto; margin-left: auto; } /*-- 幅60%のBOX --*/ .xl-row50 { width: 50%; margin-right: auto; margin-left: auto; } /*-- 幅50%のBOX --*/ .xl-row40 { width: 40%; margin-right: auto; margin-left: auto; } /*-- 幅40%のBOX --*/ } @media only screen and (max-width : 960px ){ .x-row100 { width: 100%; margin-right: auto; margin-left: auto; } /*-- 幅100%のBOX --*/ .x-row95 { width: 95%; margin-right: auto; margin-left: auto; } /*-- 幅95%のBOX --*/ .x-row90 { width: 90%; margin-right: auto; margin-left: auto; } /*-- 幅90%のBOX --*/ .x-row80 { width: 80%; margin-right: auto; margin-left: auto; } /*-- 幅80%のBOX --*/ .x-row70 { width: 70%; margin-right: auto; margin-left: auto; } /*-- 幅70%のBOX --*/ .x-row60 { width: 60%; margin-right: auto; margin-left: auto; } /*-- 幅60%のBOX --*/ .x-row50 { width: 50%; margin-right: auto; margin-left: auto; } /*-- 幅50%のBOX --*/ .x-row40 { width: 40%; margin-right: auto; margin-left: auto; } /*-- 幅40%のBOX --*/ } @media only screen and (max-width : 768px ){ .xs-row100 { width: 100%; margin-right: auto; margin-left: auto; } /*-- 幅100%のBOX --*/ .xs-row95 { width: 95%; margin-right: auto; margin-left: auto; } /*-- 幅95%のBOX --*/ .xs-row90 { width: 90%; margin-right: auto; margin-left: auto; } /*-- 幅90%のBOX --*/ .xs-row80 { width: 80%; margin-right: auto; margin-left: auto; } /*-- 幅80%のBOX --*/ .xs-row70 { width: 70%; margin-right: auto; margin-left: auto; } /*-- 幅70%のBOX --*/ .xs-row60 { width: 60%; margin-right: auto; margin-left: auto; } /*-- 幅60%のBOX --*/ .xs-row50 { width: 50%; margin-right: auto; margin-left: auto; } /*-- 幅50%のBOX --*/ .xs-row40 { width: 40%; margin-right: auto; margin-left: auto; } /*-- 幅40%のBOX --*/ } @media only screen and (max-width : 568px ){ .xss-row100 { width: 100%; margin-right: auto; margin-left: auto; } /*-- 幅100%のBOX --*/ .xss-row95 { width: 95%; margin-right: auto; margin-left: auto; } /*-- 幅95%のBOX --*/ .xss-row90 { width: 90%; margin-right: auto; margin-left: auto; } /*-- 幅90%のBOX --*/ .xss-row80 { width: 80%; margin-right: auto; margin-left: auto; } /*-- 幅80%のBOX --*/ .xss-row70 { width: 70%; margin-right: auto; margin-left: auto; } /*-- 幅70%のBOX --*/ .xss-row60 { width: 60%; margin-right: auto; margin-left: auto; } /*-- 幅60%のBOX --*/ .xss-row50 { width: 50%; margin-right: auto; margin-left: auto; } /*-- 幅50%のBOX --*/ .xss-row40 { width: 40%; margin-right: auto; margin-left: auto; } /*-- 幅40%のBOX --*/ } /*--------*/ /* 強調文 */ /*--------*/ .bd { font-weight: bold;} /*----------------------------*/ /* フォントカラー */ /*----------------------------*/ /* #content_area span[style].fontcolor,orange { color: #FF6600 !important; } */ .color-orange { color: #FF6600; } /* カラーオレンジ */ .color-pink { color: #FF00FF; } /* カラーピンク */ .color-red { color: #FF0000; } /* カラー赤 */ .color-blue { color: #0000FF; } /* カラーブルー */ .text-lightblue0 { color: #0064FF; } /* カラーライトブルー */ .text-lightblue1 { color: #3080FF; } /*-----------------------------*/ /* 文字サイズ　基本17px SP15px */ /*-------------------------- --*/ .font_size1 { font-size: 18px; } /* font18px SPでは16px*/ .font_size2 { font-size: 19px; } /* font19px SPでは17px*/ .font_size3 { font-size: 20px; } /* font20px SPでは18px*/ @media only screen and (max-width : 768px ){ .font_size1 { font-size: 16px; } /* font18px */ .font_size2 { font-size: 17px; } /* font18px */ .font_size3 { font-size: 18px; } /* font18px */ } /*----------------------------*/ /* 見出しのh5タイトルデザイン */ /*----------------------------*/ .row-sub-title5 { position: relative; display: inline-block; height: 100%; margin: 1.5em 0 1em; font-size: 1.2em; line-height: 1.3; font-weight: bold; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row-sub-title5:before { font-family: FontAwesome; content: "\f046";/*アイコン種類*/ color: #3078ff; /*アイコン色*/ margin-right: 7px; font-size: 1.2em; } /*----------------------------*/ /* 見出しのh6タイトルデザイン */ /*----------------------------*/ .row-sub-title6 { position: relative; display: inline-block; height: 100%; margin-bottom: 15px; padding: 4px 15px 2px 15px; font-family: "heisei-kaku-gothic-std",sans-serif; font-size: 1.1em; line-height: 1.3; font-weight: bold; color: #4E4E4E; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row-sub-title6::before, .row-sub-title6::after { content: ''; position: absolute; bottom: -4px; left: 0; height: 4px; } .row-sub-title6::before { z-index: 2; width: 15%; background-color: #999; } .row-sub-title6::after { width: 100%; background: repeating-linear-gradient(45deg, #fff, #fff 2px, #c0c0c0 2px, #c0c0c0 4px); } /*--------------------------*/ /* 枠途中のタイトルデザイン */ /* 枠なしグレー背景リスト */ /* 上下のマージン幅は通常 */ /*--------------------------*/ .row_box_list0 { position: relative; padding: 10px 0 0 0; margin: 10px auto 30px auto !important; background: transparent; border-radius: 5px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row_box_list0.bd { font-weight: bold !important; color: #333; } .row_box_list0 li { position: relative; width: 95%; margin: 10px auto 10px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } .row_box_list0 li:last-of-type { padding-bottom: 15px; } /* リスト形式にする場合はspan.none_lineを付けて書く */ .row_box_list0 li span.none_line { display: block; padding: 2px 0 2px 22px;} .row_box_list0 li span.none_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } /* リスト形式に更に下線をつける場合はspan.u_lineを付けて書く */ .row_box_list0 li span.u_line { display: block; padding: 5px 0 10px 22px; border-bottom: 1px dashed #CCC;} /* 下線の色 */ .row_box_list0.bg_glay li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px;} .row_box_list0.bg_blue li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px;} .row_box_list0.bg_red li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px;} .row_box_list0.bg_pink li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px;} .row_box_list0.bg_yellow li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px;} .row_box_list0 li span.u_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } @media only screen and (max-width : 768px ){ .row_box_list0::after { top: 2px; } } /* オプションの設定 */ /* グレー背景にする場合 */ .row_box_list0.bg_glay { background-color: #F0F0F0;} /* ブルー背景にする場合 */ .row_box_list0.bg_blue { background-color: #F0F6FF;} /* レッド背景にする場合 */ .row_box_list0.bg_red { background-color: #FFDCDD;} /* ピンク背景にする場合 */ .row_box_list0.bg_pink { background-color: #FFF0FC;} /* イエロー背景にする場合 */ .row_box_list0.bg_yellow { background-color: #FFFBBB;} /*----------------------------*/ /* 枠途中のタイトルデザイン */ /* グレー枠なし背景なしリスト */ /* 上下のマージン幅を狭くする */ /*----------------------------*/ .row_box_list1 { position: relative; padding: 0px 0 0 15px !important; margin: -10px auto 10px auto !important; background: transparent; border-radius: 5px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row_box_list1.bd { font-weight: bold !important; color: #333; } .row_box_list1 li { position: relative; width: 100%; margin: 10px auto 10px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } .row_box_list1 li:last-of-type { padding-bottom: 15px; } /* リスト形式にする場合はspan.none_lineを付けて書く */ .row_box_list1 li span.none_line { display: block; padding: 2px 0 2px 22px;} .row_box_list1 li span.none_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } /* リスト形式に更に下線をつける場合はspan.u_lineを付けて書く */ .row_box_list1 li span.u_line { display: block; padding: 5px 0 10px 22px; border-bottom: 1px dashed #CCC;} /* 下線の色 */ .row_box_list1.bg_glay li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px;} .row_box_list1.bg_blue li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px;} .row_box_list1.bg_red li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px;} .row_box_list1.bg_pink li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px;} .row_box_list1.bg_yellow li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px;} .row_box_list1 li span.u_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } @media only screen and (max-width : 768px ){ .row_box_list1::after { top: 2px; } } /*--------------------------*/ /* 枠途中のタイトルデザイン */ /* グレー枠1pxリスト */ /*--------------------------*/ .row_box_list2 { position: relative; padding: 10px 0 0 0; margin: 30px auto 40px auto !important; background: #FFFFFF; border: 1px solid #C0C0C0; /* 枠線の色 */ border-radius: 5px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row_box_list2.no_title { padding: 5px 0 0 0 !important; margin: 20px auto 30px auto !important;} .row_box_list2 .title { position: absolute; display: inline-block !important; width: auto; top: -20px; left: 3%; padding: 0 9px; line-height: 1; font-family: "heisei-kaku-gothic-std",sans-serif, "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold; background: #FFF; color: #666; } .row_box_list2 li { position: relative; width: 95%; margin: 10px auto 10px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } .row_box_list2 li:last-of-type { padding-bottom: 5px; } /* リスト形式にする場合はspan.none_lineを付けて書く */ .row_box_list2 li span.none_line { display: block; padding: 0 0 0 22px;} .row_box_list2 li span.none_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } /* リスト形式に更に下線をつける場合はspan.u_lineを付けて書く */ .row_box_list2 li span.u_line { display: block; margin-bottom: -5px; padding: 0 0 5px 22px; border-bottom: 1px dashed #CCC;} /* 下線の色 */ .row_box_list2 li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px; margin-bottom: 0px} .row_box_list2 li span.u_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } @media only screen and (max-width : 768px ){ .row_box_list2::after { top: 2px; } } /* オプションの設定 */ /* ブルー枠、ブルータイトルにする場合 */ .row_box_list2.blue { border: 1px solid #8EBEFF; } .row_box_list2.blue .title { color: #8EBEFF; } /* 赤枠、赤タイトルにする場合 */ .row_box_list2.red { border: 1px solid #FF8888; } .row_box_list2.red .title { color: #FF8888; } /* ピンク枠、ピンクタイトルにする場合 */ .row_box_list2.pink { border: 1px solid #FF8EE8; } .row_box_list2.pink .title { color: #FF8EE8; } /* オレンジ枠、オレンジタイトルにする場合 */ .row_box_list2.orange { border: 1px solid #FFB600; } .row_box_list2.orange .title { color: #FFB600; } /* グレー背景にする場合 */ .row_box_list2.bg_glay { background-color: #F0F0F0;} /* ブルー背景にする場合 */ .row_box_list2.bg_blue { background-color: #F0F6FF;} /* レッド背景にする場合 */ .row_box_list2.bg_red { background-color: #FFD6D6;} /* ピンク背景にする場合 */ .row_box_list2.bg_pink { background-color: #FFF0FC;} /* イエロー背景にする場合 */ .row_box_list2.bg_yellow { background-color: #FFFDD4; } /*--------------------------*/ /* 枠途中のタイトルデザイン */ /* グレー枠2pxリスト */ /*--------------------------*/ .row_box_list3 { position: relative; padding: 10px 0 0 0; margin: 30px auto 40px auto !important; background: #FFFFFF; border: 2px solid #C0C0C0; /* 枠線の色 */ border-radius: 5px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row_box_list3.no_title { padding: 5px 0 0 0 !important; margin: 20px auto 30px auto !important;} .row_box_list3 .title { position: absolute; display: inline-block !important; width: auto; top: -20px; left: 3%; padding: 0 9px; line-height: 1; font-family: "heisei-kaku-gothic-std",sans-serif, "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold; background: #FFF; color: #666; } .row_box_list3 li { position: relative; width: 95%; margin: 10px auto 10px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } .row_box_list3 li:last-of-type { padding-bottom: 5px; } /* リスト形式にする場合はspan.none_lineを付けて書く */ .row_box_list3 li span.none_line { display: block; padding: 0 0 0 22px;} .row_box_list3 li span.none_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } /* リスト形式に更に下線をつける場合はspan.u_lineを付けて書く */ .row_box_list3 li span.u_line { display: block; margin-bottom: -5px; padding: 0 0 5px 22px; border-bottom: 1px dashed #CCC;} /* 下線の色 */ .row_box_list3 li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px; margin-bottom: 0px} .row_box_list3 li span.u_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } @media only screen and (max-width : 768px ){ .row_box_list3::after { top: 2px; } } /* オプションの設定 */ /* ブルー枠、ブルータイトルにする場合 */ .row_box_list3.blue { border: 2px solid #8EBEFF; } .row_box_list3.blue .title { color: #8EBEFF; } /* 赤枠、赤タイトルにする場合 */ .row_box_list3.red { border: 2px solid #FF8888; } .row_box_list3.red .title { color: #FF8888; } /* ピンク枠、ピンクタイトルにする場合 */ .row_box_list3.pink { border: 2px solid #FF8EE8; } .row_box_list3.pink .title { color: #FF8EE8; } /* オレンジ枠、オレンジタイトルにする場合 */ .row_box_list3.orange { border: 2px solid #FFB600; } .row_box_list3.orange .title { color: #FFB600; } /* グレー背景にする場合 */ .row_box_list3.bg_glay { background-color: #F0F0F0;} /* ブルー背景にする場合 */ .row_box_list3.bg_blue { background-color: #F0F6FF;} /* レッド背景にする場合 */ .row_box_list3.bg_red { background-color: #FFD6D6;} /* ピンク背景にする場合 */ .row_box_list3.bg_pink { background-color: #FFF0FC;} /* イエロー背景にする場合 */ .row_box_list3.bg_yellow { background-color: #FFFDD4; } /*------------------------------------*/ /* 枠途中の吹き出し風タイトルデザイン */ /* グレー枠2pxリスト */ /* タイトルありのみ */ /*------------------------------------*/ .row_box_list4 { position: relative; background-color: #fff; border: 2px solid #C0C0C0; border-radius: 5px; margin: 40px 0px 40px 7px; padding: 10px 0 0 0; } /*media all*/ .row_box_list4 .row_box_list4-title { position: absolute; left: -10px; top: -20px; border-radius: 3px; background-color: #B4B4B4; color: #fff; font-family: "FontAwesome", "Helvetica","Yu Gothic"; font-weight: bold; padding: 5px 20px; line-height: 1.6; } .row_box_list4 .row_box_list4-title::after { position: absolute; border-top: 12px solid #B4B4B4; border-right: 12px solid transparent; border-left: 12px solid transparent; content: ""; top: 32px; left: 25px; } .row_box_list4 ul { list-style-type: none; border: none; margin: 0; padding: 0; } .row_box_list4 ul li { list-style-type: none !important; position: relative; width: 95%; margin: 10px auto; } .row_box_list4 li:last-of-type { padding-bottom: 5px; } /* リスト形式にする場合はspan.none_lineを付けて書く */ .row_box_list4 li span.none_line { display: block; padding: 0 0 0 22px;} .row_box_list4 li span.none_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } /* リスト形式に更に下線をつける場合はspan.u_lineを付けて書く */ .row_box_list4 li span.u_line { display: block; padding: 0 0 5px 22px; border-bottom: 1px dashed #D9D9D9;} /* 下線の色 */ .row_box_list4 li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px;} .row_box_list4 li span.u_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } /* ブルー枠、ブルータイトルにする場合 */ .row_box_list4.blue { border: 2px solid #8EBEFF; } .row_box_list4.blue .row_box_list4-title { background-color: #8EBEFF; color: #fff; } .row_box_list4.blue .row_box_list4-title::after { border-top: 12px solid #8EBEFF; } /* 赤枠、赤タイトルにする場合 */ .row_box_list4.red { border: 2px solid #FF8888; } .row_box_list4.red .row_box_list4-title { background-color: #FF8888; color: #fff; } .row_box_list4.red .row_box_list4-title::after { border-top: 12px solid #FF8888; } /* ピンク枠、ピンクタイトルにする場合 */ .row_box_list4.pink { border: 2px solid #FF8EE8; } .row_box_list4.pink .row_box_list4-title { background-color: #FF8EE8; color: #fff; } .row_box_list4.pink .row_box_list4-title::after { border-top: 12px solid #FF8EE8; } /* オレンジ枠、オレンジタイトルにする場合 */ .row_box_list4.orange { border: 2px solid #FFB600; } .row_box_list4.orange .row_box_list4-title { background-color: #FFB600; color: #fff; } .row_box_list4.orange .row_box_list4-title::after { border-top: 12px solid #FFB600; } /*------------------*/ /* 警告文のデザイン */ /*------------------*/ .warning_alert { margin-bottom: 30px !important; padding: 5px 0; background-color: #FFDCDD; border-radius: 1px; color: #555; } .warning_alert li.title { color: #FF3333; font-weight: bold; font-size: 1.2em; line-height: 1.2; } .warning_alert li.title:before { font-family: FontAwesome; content: "\f071"; color: #FF3333; margin-right: 5px; font-size: 1.3em;} .warning_alert li { position: relative; width: 90%; margin: 10px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } .warning_alert li:last-of-type { padding-bottom: 5px; } /* リスト形式にする場合はspan.none_lineを付けて書く */ .warning_alert li span.none_line { display: block; padding: 0 0 0 22px;} .warning_alert li span.none_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } /* リスト形式に更に下線をつける場合はspan.u_lineを付けて書く */ .warning_alert li span.u_line { display: block; margin-bottom: -5px; padding: 0 0 5px 22px; border-bottom: 1px dashed #999999;} /* 下線の色 */ .warning_alert li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px; margin-bottom: 0px} .warning_alert li span.u_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } @media only screen and (max-width : 768px ){ .warning_alert::after { top: 2px; } } /*----------------------*/ /* お知らせ文のデザイン */ /*----------------------*/ .notice { margin-bottom: 30px !important; padding: 5px 0; background-color: #FFFBBB; border-radius: 1px; color: #555; } .notice li.title { color: #6A5900; font-weight: bold; font-size: 1.2em; line-height: 1.2; } .notice li.title:before { font-family: FontAwesome; content: "\f06a"; color: #6A5900; margin-right: 5px; font-size: 1.3em;} .notice li { position: relative; width: 90%; margin: 10px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } .notice li:last-of-type { padding-bottom: 5px; } /* リスト形式にする場合はspan.none_lineを付けて書く */ .notice li span.none_line { display: block; padding: 0 0 0 22px;} .notice li span.none_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } /* リスト形式に更に下線をつける場合はspan.u_lineを付けて書く */ .notice li span.u_line { display: block; margin-bottom: -5px; padding: 0 0 5px 22px; border-bottom: 1px dashed #A0A0A0;} /* 下線の色 */ .notice li:last-of-type span.u_line { border-bottom: none; padding-bottom: 0px; margin-bottom: 0px; } .notice li span.u_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; /* アイコンの色 */ } @media only screen and (max-width : 768px ){ .notice::after { top: 2px; } } /*----------------------*/ /* 引用文のスタイル変更 */ /*----------------------*/ blockquote { margin-bottom: 30px !important; position: relative; border-radius: 5px; padding: 40px 20px 20px 20px !important; background: #f0f0f0 !important; } blockquote::before { top: 7px; left: 0px; font-size: 120px !important; line-height: 0.5; color: #000; opacity: 0.3 !important; } /*----------------------------*/ /* マーカーの追加コード色変更 */ /*----------------------------*/ /* 標準黄色 */ .sc_marker { background: linear-gradient(transparent 50%,#FFF966 50%); } /* 標準黄色 */ .sc_marker.blue { background: linear-gradient(transparent 50%,#DDF0FF 50%); } /* 青 */ .sc_marker.pink { background: linear-gradient(transparent 50%,#FFDFF3 50%); } /* ピンク */ /*-------------------------------*/ /* マーカーの10%追加コード色変更 */ /*-------------------------------*/ .sc_marker10 { background: linear-gradient(transparent 70%,#FFF966 50%); } /* 標準黄色 */ .sc_marker.blue10 { background: linear-gradient(transparent 70%,#DDF0FF 50%); } /* 青 */ .sc_marker.pink10 { background: linear-gradient(transparent 70%,#FFDFF3 50%); } /* ピンク */ /*--------------------------------*/ /* 動くマーカーの追加コード色変更 */ /*--------------------------------*/ /* 標準黄色ー */ .sc_marker-animation { background-image: -webkit-linear-gradient(left,transparent 50%,rgb(255,249,102) 50%) !important; background-image: -moz-linear-gradient(left,transparent 50%,rgb(255,249,102) 50%) !important; background-image: -ms-linear-gradient(left,transparent 50%,rgb(255,249,102) 50%) !important; background-image: -o-linear-gradient(left,transparent 50%,rgb(255,249,102) 50%) !important; background-image: linear-gradient(left,transparent 50%,rgb(255,249,102) 50%) !important; background-size: 200% .8em; } /* ブルー */ .sc_marker-animation.blue { background-image: -webkit-linear-gradient(left,transparent 50%,rgb(221,240,255) 50%) !important; background-image: -moz-linear-gradient(left,transparent 50%,rgb(221,240,255) 50%) !important; background-image: -ms-linear-gradient(left,transparent 50%,rgb(221,240,255) 50%) !important; background-image: -o-linear-gradient(left,transparent 50%,rgb(221,240,255) 50%) !important; background-image: linear-gradient(left,transparent 50%,rgb(221,240,255) 50%) !important; background-size: 200% .8em; } /* ピンク */ .sc_marker-animation.pink { background-image: -webkit-linear-gradient(left,transparent 50%,rgb(255,223,243) 50%) !important; background-image: -moz-linear-gradient(left,transparent 50%,rgb(255,223,243) 50%) !important; background-image: -ms-linear-gradient(left,transparent 50%,rgb(255,223,2437) 50%) !important; background-image: -o-linear-gradient(left,transparent 50%,rgb(255,223,243) 50%) !important; background-image: linear-gradient(left,transparent 50%,rgb(255,223,243) 50%) !important; background-size: 200% .8em; } /*---------------------*/ /*-- ボタン01の設定 --*/ /*---------------------*/ .button_01 a:link, .button_01 a:visited { width: 100%; padding: 10px 0; text-align: center; display: block; background-color: #3E83FF; color: #fff; border: 2px solid #3E83FF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; } .button_01 a:hover, .button_01 a:active, .button_01 a:focus { background-color: transparent; border: 2px solid #3E83FF; color: #3E83FF; border-radius: 30px; opacity: 1.0; } /*--------------------*/ /* 普通のリンクの設定 */ /* 下線なし */ /*--------------------*/ .link_01 { padding: 0 3px; display: inline; transition: .3s; color: #0054FF !important; border-bottom: 1px dotted #0054FF; } /*----------------*/ /* リンクの設定03 */ /*----------------*/ .link_02 { position: relative; padding: 0 3px; display: inline-block; transition: .3s; color: #0054FF !important; } .link_02:after, .link_02::before { content: ''; } .link_02::before { position: absolute; bottom: 6px; width: 100%; border-bottom: 1px dotted #0054FF; } .link_02::after { position: absolute; bottom: 6px; left: 50%; width: 0; height: 1px; background-color: #0054FF !important; transition: .3s; transform: translateX(-50%); } .link_02:hover::after,.link_02:active::after,.link_02:focus::after { width: 100%; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- チャットデザイン --*/ /*-- --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*media all*/ .voice .text { max-width: 100% !important; } /*フォント*/ .voice .text { font-family: a-otf-ud-shin-go-pr6n, sans-serif; font-weight: 200; font-style: normal; } @media only screen and (max-width : 768px ){ .voice .text { font-family: source-han-sans-japanese, sans-serif; font-weight: 300; font-style: normal; } } /*ボーダーを消す*/ .sc_balloon { border: 0px solid #ccc !important; } /*吹き出しの幅設定*/ .text.sc_balloon { width: -webkit-calc(98% - 90px); width: calc(98% - 90px); } @media only screen and (max-width : 480px ){ .text.sc_balloon { width: -webkit-calc(98% - 70px); width: calc(98% - 70px); } } /*余白設定*/ .voice .text.sc_balloon, .voice .think_balloon { padding: 15px 15px !important; margin-top: 5px !important;} /*----------------------*/ /* 左の人のチャット設定 */ /*----------------------*/ /*アイコンの右にスペース余白*/ .voice.left.n_bottom .icon { padding-right: 20px; } /*名前をセンターにするためにマージン右消す*/ .voice.left.n_bottom .icon .name { margin-right: 0 !important; } /*吹き出しの角設定*/ .voice.left .text.sc_balloon { border-radius: 10px !important; } /*吹き出しの矢印消す*/ .sc_balloon.left::after { left: 0 !important; border-width: 0 !important; border-color: transparent !important; } /*吹き出しの矢印を移動する*/ .voice.left .sc_balloon::before { border-width: 15px 17px 15px 17px !important; margin-top: 0px !important; left: -25px !important; top: 5px !important; } /*カスタムバルーンの設定の矢印消す*/ .sc_balloon .custom_voice.left { display:none ; } /*左の人の吹き出しの矢印を固定して決める*/ /*カスタムで決めるカラーと一緒にする */ .voice.left .sc_balloon.custom::before { border-color: transparent #DCE8FF transparent transparent; } /*----------------------*/ /* 右の人のチャット設定 */ /*----------------------*/ /*アイコンの右にスペース余白*/ .voice.right.n_bottom .icon { padding-left: 20px; } /*名前をセンターにするためにマージン左消す*/ .voice.right.n_bottom .icon .name { margin-left: 0 !important; } /*吹き出しの角設定*/ .voice.right .text.sc_balloon { border-radius: 10px !important; } /*吹き出しの矢印消す*/ .sc_balloon.right::after { left: 0 !important; border-width: 0 !important; border-color: transparent !important; } /*吹き出しの矢印を移動する*/ .voice.right .sc_balloon::before { border-width: 15px 17px !important; margin-top: 0px !important; right: -25px !important; top: 5px !important; } /*カスタムバルーンの設定の矢印消す*/ .sc_balloon .custom_voice.right { display:none ; } /*右の人の吹き出しの矢印を固定して決める*/ /*カスタムで決めるカラーと一緒にする */ .voice.right .sc_balloon.custom::before { border-color: transparent transparent transparent #FDEFFF; } .shoplinkamazon a, .shoplinkkindle a, .shoplinkrakuten a, .shoplinkyahoo a { transition: all ease-in-out .3s; display: block; text-decoration: none; text-align: center; padding: 13px; } .shoplinkamazon a:hover, .shoplinkkindle a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover { box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2); -moz-transform: translateY(-2px); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .shoplinkamazon a { background: #FF9901; border-radius: 7px; color: #fff; } .shoplinkkindle a { background: #007dcd; border-radius: 7px; color: #fff; } .shoplinkrakuten a { background: #c20004; border-radius: 7px; color: #fff; } .shoplinkyahoo a { background: #7b0099; border-radius: 7px; color: #fff; } .booklink-image { zoom: 1.2; } .kaerebalink-box, .booklink-box { border: 1px #9C9996 solid; box-shadow: 2px 2px 4px gray; margin: 20px 0; display: flex; align-items: center; padding: 20px; box-sizing: border-box; justify-content: space-around; } .booklink-footer { display: none; } .kaerebalink-info, .booklink-info { width: 43%; font-size: 16px; } @media screen and (max-width: 640px) { .kaerebalink-box, .booklink-box { display: block; } .kaerebalink-info, .booklink-info { width: 100%; } .kaerebalink-image, .booklink-image { margin: 0 0 20px 0!important; text-align: center; float: none!important; } .kaerebalink-name, .booklink-name { text-align: center; } } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- --*/ /*-- DIVER用のGoogleAdsens設定 --*/ /*-- --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------*/ /*-- スポンサー枠 --*/ /*-------------------*/ .diver_widget_adlabel { font-size: .8em; text-align: right !important; color: #9C9C9C; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- --*/ /*-- アフィリエイト用のCSS --*/ /*-- --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------*/ /*-- もしもアフィリエイト --*/ /*---------------------------------------------------------*/ /* (min-width:704px) 囲い枠 */ div.easyLink-box { padding: 10px 20px !important; border: 1px solid #ccc; } /* (min-width:704px) 商品下余白 */ div.easyLink-box div.easyLink-img { height: auto !important; } /* (min-width:704px) ボタン色追加 */ div.easyLink-box.easyLink-size-s div.easyLink-info p.easyLink-info-btn a { background: #C90003 !important; } /* (max-width:480px) スマホと時の全体枠の余白 */ div.easyLink-box.easyLink-size-s { padding: 10px !important; } /* (max-width:480px) スマホと時のタイトルの間隔狭める */ div.easyLink-box.easyLink-size-s div.easyLink-info p.easyLink-info-name { font-size: 16px; line-height: 1.5; } /* タイトルリンクの色 */ div.easyLink-box div.easyLink-info p.easyLink-info-name a { color: #0054FF !important; } /*@media screen and (min-width:901px)*/ @media screen and (max-width: 900px) { .kattene__btns.__two > div { width: 100% !important; } } /*---------------------------------------------------------*/ /*-- カッテネアフィリエイト --*/ /*---------------------------------------------------------*/ /* カッテネ枠 */ .kattene { padding: 10px 20px !important; margin: 10px 0 20px 0 !important; width: 100%; border: 2px solid #ccc !important;} @media screen and (max-width: 568px) { .kattene { width: 90%; margin: 10px auto 20px auto !important; min-width: 260px; } } /* タイトルの行間 */ .kattene__title { line-height: 1.4; } /* タイトルのリンク色 */ .kattene__title a { color: #0054FF !important; } /*@media screen and (min-width:901px)を(min-width: 569px)からに書き換え*//* 右の文字フレーム */ @media screen and (min-width: 569px) { .kattene__infopart { display: table-cell; vertical-align: top; position: relative; padding-left: 20px !important; width: 80% ; }} @media screen and (max-width: 568px) { .kattene__infopart { padding: 5px 0 0 0px !important; width: 100%; } } /*@media screen and (min-width:901px)を(min-width: 569px)からに書き換え*//* 右の文字フレーム *//* 左の画像フレーム */ @media screen and (min-width: 569px) { .kattene__imgpart { display: table-cell; width: 20% ; padding-bottom: 0px !important; } } /* (min-width:901px) ボタンの右の隙間 */ .kattene__btns { padding-right: 20px !important; } @media screen and (max-width: 900px) { .kattene__btns { padding-right: 0px !important; } } /* (max-width:900px)ラベルボタンの上の隙間 */ .kattene .kattene__btns { margin-top: 20px !important; } @media screen and (max-width: 568px) { .kattene .kattene__btns { margin-top: 20px !important; } } /* ボタンの文字の大きさ*/ .kattene .kattene__btn { font-size: 14px !important; padding: 12px 0 !important;} /* 商品画像の影消す */ .kattene__imgpart img { -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0) !important; -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0) !important; box-shadow: 0px 5px 15px -5px rgba(0,0,0,0) !important; -o-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0) !important; -ms-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0) !important; } /* 商品画像の高さ */ .kattene__imgpart img { min-height: 160px; } @media screen and (max-width: 568px) { .kattene__imgpart img { min-height: none; } } /* 一言枠*/ .kattene__description { font-size: 0.9em !important; color: #666666 !important; padding: 3px 0 !important; line-height: 1.4 !important; } /*---------------------*/ /*-- ボタン1つの時 --*/ /*---------------------*/ /* (max-width:900px) スマホでボタンラベル100%にする*/ .kattene__btns.__one > div { width: 49.5% !important; margin-left: 0% !important; } @media screen and (max-width: 568px) { .kattene__btns.__one > div { width: 100% !important;} } /* (min-width: 569px) ボタンが2つの時ここまで1/2 */ @media screen and (min-width: 569px) { .kattene__btns.__two > div { width: 49.5% !important; } } /* (min-width: 569px) ボタンが3つの時ここまで1/3 */ @media screen and (max-width: 568px) { .kattene__btns.__three > div { width: 100% !important; } } /*---------------------*/ /*-- ボタン装飾 時 --*/ /*---------------------*/ /* オレンジボタン */ .kattene__btn.__orange { -webkit-box-shadow: 0 0px 0 #cc7a01 !important; -moz-box-shadow: 0 0px 0 #cc7a01 !important; box-shadow: 0px 0px 0px #cc7a01 !important; -o-box-shadow: 0 0px 0 #cc7a01 !important; -ms-box-shadow: 0 0px 0 #cc7a01 !important; } .kattene__btn.__orange { margin-bottom: 5px; color: #f6a306 !important; background: #fff !important; border: 2px solid #f6a306 !important; border-radius: 5px !important; text-align: center; transition: .4s !important; } .kattene__btn.__orange:hover { opacity: 1 !important; background: #f6a306 !important; color: #666 !important; } /* レッドボタン */ .kattene__btn.__red { -webkit-box-shadow: 0 0px 0 #9b0003 !important; -moz-box-shadow: 0 0px 0 #9b0003 !important; box-shadow: 0px 0px 0px #9b0003 !important; -o-box-shadow: 0 0px 0 #9b0003 !important; -ms-box-shadow: 0 0px 0 #9b0003 !important; } .kattene__btn.__red { margin-bottom: 5px; color: #C90003 !important; background: #fff !important; border: 2px solid #C90003 !important; border-radius: 5px !important; text-align: center; transition: .4s !important; } .kattene__btn.__red:hover { opacity: 1 !important; background: #C90003 !important; color: #fff !important; transition: .4s !important; } /* ブルーボタン */ .kattene__btn.__blue { -webkit-box-shadow: 0 0px 0 #0064a4 !important; -moz-box-shadow: 0 0px 0 #0064a4 !important; box-shadow: 0px 0px 0px #0064a4 !important; -o-box-shadow: 0 0px 0 #0064a4 !important; -ms-box-shadow: 0 0px 0 #0064a4 !important; } .kattene__btn.__blue { margin-bottom: 5px; color: #007dcd !important; background: #fff !important; border: 2px solid #007dcd !important; border-radius: 5px !important; text-align: center; transition: .4s !important; } .kattene__btn.__blue:hover { opacity: 1 !important; background: #007dcd !important; color: #fff !important; transition: .4s !important; } /* グリーンボタン */ .kattene__btn.__green { -webkit-box-shadow: 0 0px 0 #099766 !important; -moz-box-shadow: 0 0px 0 #099766 !important; box-shadow: 0px 0px 0px #099766 !important; -o-box-shadow: 0 0px 0 #099766 !important; -ms-box-shadow: 0 0px 0 #099766 !important; } .kattene__btn.__green { margin-bottom: 5px; color: #0BBD80 !important; background: #fff !important; border: 2px solid #0BBD80 !important; border-radius: 5px !important; text-align: center; transition: .4s !important; } .kattene__btn.__green:hover { opacity: 1 !important; background: #0BBD80 !important; color: #fff !important; transition: .4s !important; } /* ピンクボタン */ /*media all*/ .kattene__btn.__pink { -webkit-box-shadow: 0 0px 0 #780070 !important; -moz-box-shadow: 0 0px 0 #780070 !important; box-shadow: 0px 0px 0px #780070 !important; -o-box-shadow: 0 0px 0 #780070 !important; -ms-box-shadow: 0 0px 0 #780070 !important; } .kattene__btn.__pink { margin-bottom: 5px; color: #FF3AF1 !important; background: #fff !important; border: 2px solid #FF3AF1 !important; border-radius: 5px !important; text-align: center; transition: .4s !important; } .kattene__btn.__pink:hover { opacity: 1 !important; background: #FF3AF1 !important; color: #fff !important; transition: .4s !important; }