@charset "utf-8";
/*（20230304）googleフォントテスト中 */
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');
@import url('https://fonts.googleapis.com/earlyaccess/hannari.css');
/* 色設定はPC用・レスポンシブ用それぞれから使用可能とするため共通ファイルに記述 */
:root{
--logo_blu: #22baeb;
--logo_pur: #cf98c2;
--logo_grn: #4cb034;
--main_blu: #157899;
/*--main_blu_90: #;
--main_blu_80: #;
--main_blu_70: #;
--main_blu_60: #;
--main_blu_50: #;
--main_blu_40: #;
--main_blu_30: #;
--main_blu_20: #;
--main_blu_10: #;
--main_blu_05: #;*/
--main_ora: #ed6700;
}
/*（20180321）下記、外部CSS導入*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
input, textarea, select, button { /*（20180321）input, textarea, select, button 追加 */
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
/*font-size: 14px;*/ /*（20190118）設定変更 →（20190218）CKEditor出力に影響するためコメント */
/*color: #000;*/ /*（20190218）CKEditor出力に影響するためコメント ※リンクの文字が青くなるための設定 ※単体での色設定はOKだが、文字の大きさや太さ等組み合わせ時影響あり */
/*font: inherit;*/ /*（20180321）コメント */
/*vertical-align: baseline;*/
/*vertical-align: middle;*/ /*（20180321）設定変更 →（20200418）テキスト内のリンクが下にズレるためコメント*/
line-height: 1.7em; /*（20180321）追加 */
/*font-style: normal;*/ /*（20190118）追加 →（20190218）CKEditor出力に影響するためコメント */
/*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;（20190118）追加 →（20190218）CKEditor出力に影響するためコメント */
word-break: break-all; /*（20201021）追記して様子見中 */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
/* font-family・・・第一優先はgoogleフォントをテスト中 */
/*font-family: "M PLUS Rounded 1c", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;*/ /*（20201110）bodyに対してならWYSIWYGへの影響はなさそうだが様子見中 ※safariのデフォルトが明朝体のため一括設定 */
font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /*（20201110）bodyに対してならWYSIWYGへの影響はなさそうだが様子見中 ※safariのデフォルトが明朝体のため一括設定 */
/*font-family: "Hannari", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;*/ /*（20201110）bodyに対してならWYSIWYGへの影響はなさそうだが様子見中 ※safariのデフォルトが明朝体のため一括設定（20210421）"Noto Sans JP"・・・フロントCKEDITOR出力で「font-weight: bold;」効かないため削除した*/
font-size: 100%; /*（20210415）一括設定追加して様子見中 （20240808）100%に変更 */
color: #333; /*（20201110）bodyに対してならWYSIWYGへの影響はなさそうだが様子見中 */
}
ol, ul, li { /*（20180326）「li」追加 */
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a{ color: #333; } /*（20210415）一括設定追加して様子見中 */
.working{ padding: 10px; background: #ff3399; font-size: 24px; text-align: center; color: #fff; }
.testNow{ padding: 10px; background: #f30; text-align: center; font-weight: bold; font-size: 48px; color: #ff0; }
.clearfix:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix{ zoom: 1; }
*:first-child+html .clearfix{ zoom: 1; }
.float_l{ float: left !important; }.float_r{ float: right !important; }
.none{ display: none !important; }
.none_mild{ display: none; }
.block{ display: block !important; }
.inline{ display: inline !important; }
.inline-block{ display: inline-block !important; }
.flex{ display: flex !important; }
/* flex設定 */
.flex_between{ display: flex; justify-content: space-between; }
.flex_center{ display: flex; justify-content: center; }
.flex_start{ display: flex; justify-content: start; }
.flex_end{ display: flex; justify-content: end; }
.tx_c{ text-align: center !important; }.tx_l{ text-align: left !important; }.tx_r{ text-align: right !important; }
.valign_top{ vertical-align: top !important; }.valign_mdl{ vertical-align: middle !important; }.valign_btm{ vertical-align: bottom !important; }
.tx_deco_none{ text-decoration: none !important; }
.underline{ text-decoration: underline !important; }
.underline:hover{ text-decoration: none !important; }
.tx_08{ font-size: 8px !important; }.tx_09{ font-size: 9px !important; }.tx_10{ font-size: 10px !important; }.tx_11{ font-size: 11px !important; }.tx_12{ font-size: 12px !important; }
.tx_13{ font-size: 13px !important; }.tx_14{ font-size: 14px !important; }.tx_15{ font-size: 15px !important; }.tx_16{ font-size: 16px !important; }.tx_17{ font-size: 17px !important; }
.tx_18{ font-size: 18px !important; }.tx_19{ font-size: 19px !important; }.tx_20{ font-size: 20px !important; }.tx_21{ font-size: 21px !important; }.tx_22{ font-size: 22px !important; }
.tx_23{ font-size: 23px !important; }.tx_24{ font-size: 24px !important; }.tx_25{ font-size: 25px !important; }.tx_26{ font-size: 26px !important; }.tx_27{ font-size: 27px !important; }
.tx_28{ font-size: 28px !important; }.tx_29{ font-size: 29px !important; }.tx_30{ font-size: 30px !important; }.tx_31{ font-size: 31px !important; }.tx_32{ font-size: 32px !important; }
.tx_33{ font-size: 33px !important; }.tx_34{ font-size: 34px !important; }.tx_35{ font-size: 35px !important; }.tx_36{ font-size: 36px !important; }.tx_37{ font-size: 37px !important; }
.tx_000{ color: #000000 !important; }.tx_333{ color: #333333 !important; }.tx_666{ color: #666666 !important; }.tx_777{ color: #777777 !important; }.tx_999{ color: #999999 !important; }
.tx_ccc{ color: #cccccc !important; }.tx_ddd{ color: #dddddd !important; }.tx_eee{ color: #eeeeee !important; }.tx_fff{ color: #ffffff !important; }
.tx_red{ color: #e83421 !important; }.tx_pnk{ color: #f88aa6 !important; }.tx_ora{ color: #ff7701 !important; }.tx_grn{ color: #229d56 !important; }.tx_blu{ color: #336699 !important; }
.tx_yel{ color: #ffcc33 !important; }
.tx_ind{ text-indent: 14px !important; }.tx-9999{ text-indent: -9999px !important; }
.tx_bld{ font-weight: bold !important; }
/* font-family・・・各第一優先はgoogleフォントをテスト中 */
.tx_kak{ font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important; }
.tx_min{ font-family: "Sawarabi Mincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif !important; }
.lh_11{ line-height: 1.1em !important; }.lh_12{ line-height: 1.2em !important; }.lh_13{ line-height: 1.3em !important; }.lh_14{ line-height: 1.4em !important; }.lh_15{ line-height: 1.5em !important; }
.lh_16{ line-height: 1.6em !important; }.lh_17{ line-height: 1.7em !important; }.lh_18{ line-height: 1.8em !important; }.lh_19{ line-height: 1.9em !important; }.lh_20{ line-height: 2.0em !important; }
.bg_fff{ background: #ffffff !important; }.bg_eee{ background: #eeeeee !important; }.bg_ddd{ background: #dddddd !important; }.bg_ccc{ background: #cccccc !important; }.bg_999{ background: #999999 !important; }
.bg_777{ background: #777777 !important; }.bg_555{ background: #555555 !important; }.bg_333{ background: #333333 !important; }.bg_111{ background: #111111 !important; }.bg_000{ background: #000000 !important; }
.bg_c3{ background: #c3c3c3 !important; }.bg_c5{ background: #c5c5c5 !important; }.bg_c7{ background: #c7c7c7 !important; }.bg_c9{ background: #c9c9c9 !important; }
.bg_f3f3f3{ background: #f3f3f3 !important; }.bg_f5f5f5{ background: #f5f5f5 !important; }.bg_f7f7f7{ background: #f7f7f7 !important; }.bg_f9f9f9{ background: #f9f9f9 !important; }
/* 共通色設定（ボタン・表示状態表示等） */
.bg_red{ background: #cc0000 !important; }.bg_grn{ background: #03b208 !important; }.bg_ora{ background: #ff9600 !important; }.bg_pnk{ background: #ff3399 !important; }.bg_blu{ background: #245bd9 !important; }
.bg_gld{ background-image: linear-gradient(to top left, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03) !important; }
.pad_05{ padding: 5px !important; }.pad_10{ padding: 10px !important; }.pad_15{ padding: 15px !important; }.pad_20{ padding: 20px !important; }.pad_25{ padding: 25px !important; }.pad_30{ padding: 30px !important; }
.pad_t_05{ padding-top: 5px !important; }.pad_t_10{ padding-top: 10px !important; }.pad_t_15{ padding-top: 15px !important; }.pad_t_20{ padding-top: 20px !important; }.pad_t_25{ padding-top: 25px !important; }
.pad_t_30{ padding-top: 30px !important; }.pad_t_35{ padding-top: 35px !important; }.pad_t_40{ padding-top: 40px !important; }.pad_t_45{ padding-top: 45px !important; }.pad_t_50{ padding-top: 50px !important; }
.pad_r_05{ padding-right: 5px !important; }.pad_r_10{ padding-right: 10px !important; }.pad_r_15{ padding-right: 15px !important; }.pad_r_20{ padding-right: 20px !important; }.pad_r_25{ padding-right: 25px !important; }
.pad_r_30{ padding-right: 30px !important; }.pad_r_35{ padding-right: 35px !important; }.pad_r_40{ padding-right: 40px !important; }.pad_r_45{ padding-right: 45px !important; }.pad_r_50{ padding-right: 50px !important; }
.pad_b_05{ padding-bottom: 5px !important; }.pad_b_10{ padding-bottom: 10px !important; }.pad_b_15{ padding-bottom: 15px !important; }.pad_b_20{ padding-bottom: 20px !important; }.pad_b_25{ padding-bottom: 25px !important; }
.pad_b_30{ padding-bottom: 30px !important; }.pad_b_35{ padding-bottom: 35px !important; }.pad_b_40{ padding-bottom: 40px !important; }.pad_b_45{ padding-bottom: 45px !important; }.pad_b_50{ padding-bottom: 50px !important; }
.pad_l_05{ padding-left: 5px !important; }.pad_l_10{ padding-left: 10px !important; }.pad_l_15{ padding-left: 15px !important; }.pad_l_20{ padding-left: 20px !important; }.pad_l_25{ padding-left: 25px !important; }
.pad_l_30{ padding-left: 30px !important; }.pad_l_35{ padding-left: 35px !important; }.pad_l_40{ padding-left: 40px !important; }.pad_l_45{ padding-left: 45px !important; }.pad_l_50{ padding-left: 50px !important; }
.mgn_t_05{ margin-top: 5px !important; }.mgn_t_10{ margin-top: 10px !important; }.mgn_t_15{ margin-top: 15px !important; }.mgn_t_20{ margin-top: 20px !important; }.mgn_t_25{ margin-top: 25px !important; }
.mgn_t_30{ margin-top: 30px !important; }.mgn_t_35{ margin-top: 35px !important; }.mgn_t_40{ margin-top: 40px !important; }.mgn_t_45{ margin-top: 45px !important; }.mgn_t_50{ margin-top: 50px !important; }
.mgn_t_55{ margin-top: 55px !important; }.mgn_t_60{ margin-top: 60px !important; }.mgn_t_65{ margin-top: 65px !important; }.mgn_t_70{ margin-top: 70px !important; }.mgn_t_75{ margin-top: 75px !important; }
.mgn_t_80{ margin-top: 80px !important; }.mgn_t_85{ margin-top: 85px !important; }.mgn_t_90{ margin-top: 90px !important; }.mgn_t_95{ margin-top: 95px !important; }.mgn_t_100{ margin-top: 100px !important; }
.mgn_r_05{ margin-right: 5px !important; }.mgn_r_10{ margin-right: 10px !important; }.mgn_r_15{ margin-right: 15px !important; }.mgn_r_20{ margin-right: 20px !important; }.mgn_r_25{ margin-right: 25px !important; }
.mgn_r_30{ margin-right: 30px !important; }.mgn_r_35{ margin-right: 35px !important; }.mgn_r_40{ margin-right: 40px !important; }.mgn_r_45{ margin-right: 45px !important; }.mgn_r_50{ margin-right: 50px !important; }
.mgn_r_55{ margin-right: 55px !important; }.mgn_r_60{ margin-right: 60px !important; }.mgn_r_65{ margin-right: 65px !important; }.mgn_r_70{ margin-right: 70px !important; }.mgn_r_75{ margin-right: 75px !important; }
.mgn_r_80{ margin-right: 80px !important; }.mgn_r_85{ margin-right: 85px !important; }.mgn_r_90{ margin-right: 90px !important; }.mgn_r_95{ margin-right: 95px !important; }.mgn_r_100{ margin-right: 100px !important; }
.mgn_b_05{ margin-bottom: 5px !important; }.mgn_b_10{ margin-bottom: 10px !important; }.mgn_b_15{ margin-bottom: 15px !important; }.mgn_b_20{ margin-bottom: 20px !important; }.mgn_b_25{ margin-bottom: 25px !important; }
.mgn_b_30{ margin-bottom: 30px !important; }.mgn_b_35{ margin-bottom: 35px !important; }.mgn_b_40{ margin-bottom: 40px !important; }.mgn_b_45{ margin-bottom: 45px !important; }.mgn_b_50{ margin-bottom: 50px !important; }
.mgn_b_55{ margin-bottom: 55px !important; }.mgn_b_60{ margin-bottom: 60px !important; }.mgn_b_65{ margin-bottom: 65px !important; }.mgn_b_70{ margin-bottom: 70px !important; }.mgn_b_75{ margin-bottom: 75px !important; }
.mgn_b_80{ margin-bottom: 80px !important; }.mgn_b_85{ margin-bottom: 85px !important; }.mgn_b_90{ margin-bottom: 90px !important; }.mgn_b_95{ margin-bottom: 95px !important; }.mgn_b_100{ margin-bottom: 100px !important; }
.mgn_l_05{ margin-left: 5px !important; }.mgn_l_10{ margin-left: 10px !important; }.mgn_l_15{ margin-left: 15px !important; }.mgn_l_20{ margin-left: 20px !important; }.mgn_l_25{ margin-left: 25px !important; }
.mgn_l_30{ margin-left: 30px !important; }.mgn_l_35{ margin-left: 35px !important; }.mgn_l_40{ margin-left: 40px !important; }.mgn_l_45{ margin-left: 45px !important; }.mgn_l_50{ margin-left: 50px !important; }
.mgn_l_55{ margin-left: 55px !important; }.mgn_l_60{ margin-left: 60px !important; }.mgn_l_65{ margin-left: 65px !important; }.mgn_l_70{ margin-left: 70px !important; }.mgn_l_75{ margin-left: 75px !important; }
.mgn_l_80{ margin-left: 80px !important; }.mgn_l_85{ margin-left: 85px !important; }.mgn_l_90{ margin-left: 90px !important; }.mgn_l_95{ margin-left: 95px !important; }.mgn_l_100{ margin-left: 100px !important; }
.wid_05p{ width: 5% !important; }.wid_10p{ width: 10% !important; }.wid_15p{ width: 15% !important; }.wid_20p{ width: 20% !important; }.wid_25p{ width: 25% !important; }
.wid_30p{ width: 30% !important; }.wid_35p{ width: 35% !important; }.wid_40p{ width: 40% !important; }.wid_45p{ width: 45% !important; }.wid_50p{ width: 50% !important; }
.wid_55p{ width: 55% !important; }.wid_60p{ width: 60% !important; }.wid_65p{ width: 65% !important; }.wid_70p{ width: 70% !important; }.wid_75p{ width: 75% !important; }
.wid_80p{ width: 80% !important; }.wid_85p{ width: 85% !important; }.wid_90p{ width: 90% !important; }.wid_95p{ width: 95% !important; }.wid_100p{ width: 100% !important; }
.wid_10{ width: 10px !important; }.wid_20{ width: 20px !important; }.wid_30{ width: 30px !important; }.wid_40{ width: 40px !important; }.wid_50{ width: 50px !important; }
.wid_60{ width: 60px !important; }.wid_70{ width: 70px !important; }.wid_80{ width: 80px !important; }.wid_90{ width: 90px !important; }.wid_100{ width: 100px !important; }
.wid_110{ width: 110px !important; }.wid_120{ width: 120px !important; }.wid_130{ width: 130px !important; }.wid_140{ width: 140px !important; }.wid_150{ width: 150px !important; }
.wid_160{ width: 160px !important; }.wid_170{ width: 170px !important; }.wid_180{ width: 180px !important; }.wid_190{ width: 190px !important; }.wid_200{ width: 200px !important; }
.wid_210{ width: 210px !important; }.wid_220{ width: 220px !important; }.wid_230{ width: 230px !important; }.wid_240{ width: 240px !important; }.wid_250{ width: 250px !important; }
.wid_260{ width: 260px !important; }.wid_270{ width: 270px !important; }.wid_280{ width: 280px !important; }.wid_290{ width: 290px !important; }.wid_300{ width: 300px !important; }
.wid_310{ width: 310px !important; }.wid_320{ width: 320px !important; }.wid_330{ width: 330px !important; }.wid_340{ width: 340px !important; }.wid_350{ width: 350px !important; }
.wid_360{ width: 360px !important; }.wid_370{ width: 370px !important; }.wid_380{ width: 380px !important; }.wid_390{ width: 390px !important; }.wid_400{ width: 400px !important; }
.wid_410{ width: 410px !important; }.wid_420{ width: 420px !important; }.wid_430{ width: 430px !important; }.wid_440{ width: 440px !important; }.wid_450{ width: 450px !important; }
.wid_460{ width: 460px !important; }.wid_470{ width: 470px !important; }.wid_480{ width: 480px !important; }.wid_490{ width: 490px !important; }.wid_500{ width: 500px !important; }
.wid_max100p{ max-width: 100%; }
.hei_10{ height: 10px !important; }.hei_20{ height: 20px !important; }.hei_30{ height: 30px !important; }.hei_40{ height: 40px !important; }.hei_50{ height: 50px !important; }
.hei_60{ height: 60px !important; }.hei_70{ height: 70px !important; }.hei_80{ height: 80px !important; }.hei_90{ height: 90px !important; }.hei_100{ height: 100px !important; }
.hei_110{ height: 110px !important; }.hei_120{ height: 120px !important; }.hei_130{ height: 130px !important; }.hei_140{ height: 140px !important; }.hei_150{ height: 150px !important; }
.hei_160{ height: 160px !important; }.hei_170{ height: 170px !important; }.hei_180{ height: 180px !important; }.hei_190{ height: 190px !important; }.hei_200{ height: 200px !important; }
.hei_210{ height: 210px !important; }.hei_220{ height: 220px !important; }.hei_230{ height: 230px !important; }.hei_240{ height: 240px !important; }.hei_250{ height: 250px !important; }
.hei_260{ height: 260px !important; }.hei_270{ height: 270px !important; }.hei_280{ height: 280px !important; }.hei_290{ height: 290px !important; }.hei_300{ height: 300px !important; }
.hei_310{ height: 310px !important; }.hei_320{ height: 320px !important; }.hei_330{ height: 330px !important; }.hei_340{ height: 340px !important; }.hei_350{ height: 350px !important; }
.hei_360{ height: 360px !important; }.hei_370{ height: 370px !important; }.hei_380{ height: 380px !important; }.hei_390{ height: 390px !important; }.hei_400{ height: 400px !important; }
.hei_410{ height: 410px !important; }.hei_420{ height: 420px !important; }.hei_430{ height: 430px !important; }.hei_440{ height: 440px !important; }.hei_450{ height: 450px !important; }
.hei_460{ height: 460px !important; }.hei_470{ height: 470px !important; }.hei_480{ height: 480px !important; }.hei_490{ height: 490px !important; }.hei_500{ height: 500px !important; }
.border_000{ border: 1px solid #000; }.border_333{ border: 1px solid #333; }.border_666{ border: 1px solid #666; }.border_777{ border: 1px solid #777; }.border_999{ border: 1px solid #999; }
.border_ccc{ border: 1px solid #ccc; }.border_ddd{ border: 1px solid #ddd; }.border_eee{ border: 1px solid #eee; }.border_fff{ border: 1px solid #fff; }
.bb_none{ border-bottom: none !important; }
hr.col_000{ border: none; border-bottom: 1px solid #000; }
hr.col_333{ border: none; border-bottom: 1px solid #333; }
hr.col_555{ border: none; border-bottom: 1px solid #555; }
hr.col_777{ border: none; border-bottom: 1px solid #777; }
hr.col_999{ border: none; border-bottom: 1px solid #999; }
hr.col_ccc{ border: none; border-bottom: 1px solid #ccc; }
hr.col_ddd{ border: none; border-bottom: 1px solid #ddd; }
hr.col_eee{ border: none; border-bottom: 1px solid #eee; }
hr.col_fff{ border: none; border-bottom: 1px solid #fff; }
ol.ol_disc{ padding-left: 15px;}
ol.ol_disc li{ list-style-type: disc !important; list-style-position: outside !important; text-indent: -5px; }
ol.ol_square{ padding-left: 15px;}
ol.ol_square li{ list-style-type: square !important; list-style-position: outside !important; text-indent: -5px; }
ol.ol_circle{ padding-left: 15px;}
ol.ol_circle li{ list-style-type: circle !important; list-style-position: outside !important; text-indent: -5px; }
table{ font-size: 14px; }
table * img{ vertical-align: middle; } /* ★th、td内 imgの下の余計な隙間対策 */
/* 1行おきに色を付ける */
table.tr_color tr:nth-child(2n+1) td{ background: #fbf9f4; }
/* 2行おきに色を付ける・・・その他、<tbody>に対して設定する方法もあり */
table.tr_color2 tr:nth-child(4n+1) td,
table.tr_color2 tr:nth-child(4n+2) td{ background: #fff; }
table.tr_color2 tr:nth-child(4n+3) td,
table.tr_color2 tr:nth-child(4n+4) td{ background: var(--main_new_blu07); }
a{ text-decoration: none; overflow: hidden; outline: none; }
a:hover{ text-decoration: underline; }
a.arrow{ background: url(/img/03arrow03s-ff0000.gif) 0 0px no-repeat; ; padding-left: 20px; }
a.link_style{}
input[type='submit'], input[type='image'], input[type='button'], a img, .opacity{
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
input[type='submit']:hover, input[type='image']:hover, input[type='button']:hover, a img:hover, .opacity:hover{
-moz-opacity: 0.7;
opacity: 0.7;
filter: alpha(opacity=70); /* ie 6 7 */
-ms-filter: "alpha(opacity=70)"; /* ie 8 */
}
#btn_page_top{ display: none; padding: 2px 18px; background: #000; color: #fff; font-weight: bold; font-size: 13px; text-decoration: none; border-radius: 12px; transition: opacity 0.5s ease, display 0.5s linear 0.5s; position: fixed; bottom: 50px; right: 10px; z-index: 9; }
a.undo_link{ color: #333; }
a.BTN_SW, a.BTN_DEL{ text-decoration: none; }
a.BTN_SW:hover, a.BTN_DEL:hover{ text-decoration: none; }
/* 黒フィルター */
div#modal_filter, .modal_filter{ display: none; width: 100%; background: #000; position: absolute; z-index: 99;
-moz-opacity: 0.7;
opacity: 0.7;
filter: alpha(opacity=70); /* ie 6 7 */
-ms-filter: "alpha(opacity=70)"; /* ie 8 */
}
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="number"],
textarea,
select{
width: 95%; padding: 8px 2%; border: 1px solid #ccc; border-radius: 3px; background: #fff; font-size: 14px;
-webkit-appearance: none; /* -webkit-appearance: none;・・・iphoneで、フォーム内に影がつくのを回避する設定 */
}
/* selectは、独自仕様なため、別に設定。 */
select{
width: 99%; /* type="text"が95%に対して、99%にするとほぼ同じ長さとなる（原因不明 20161203） */
padding: 12px 2%;
-moz-appearance: none;
}
/* Chromeのための設定。padding設定。borderを設定するとなぜか薄い灰色で背景色が付いてしまうため背景色#fffを設定。文字の上下がずれるため、lime-height: 1em設定。*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
select{ line-height: 1em; }
}
textarea{ line-height: 1.3em; height: 100px; resize: vertical; }
textarea.resize_none{ resize: none !important; }
/*textarea.resize_v{ resize: vertical !important; }*/
textarea.resize_h{ resize: horizontal !important; }
[name='postal']{ width: 130px !important; }
[name='tdfk'], [name='tdfk_id']{ width: 120px !important; }
/*[name='email'], [name='email2']{ width: 300px !important; } 20170114 スマホ版に影響あるためコメント*/
[name='tel'], [name='mob'], [name='fax']{ width: 160px !important; }
[name='tel1'], [name='tel2'], [name='tel3'], [name='fax1'], [name='fax2'], [name='fax3']{ width: 40px !important; }
[name='password'], [name='password2'],[name='old_password'] { width: 50% !important; }
[name='price']{ width: 100px !important; }
[name='age']{ width: 40px !important; }
/* 年月日セレクト共通設定 */
.select_y{ width: 85px !important; }
.select_m{ width: 65px !important; }
.select_d{ width: 65px !important; }
[name='text'], [name='inquiry']{ height: 200px; }
[name='mapdata']{ width: 200px !important; }
.datetimepicker{ width: 130px !important; }
.datepicker{ width: 130px !important; }
[type='file']{ line-height: 1em; font-size: 12px; }
/* radio, checkbox ズレを修正（PC用） */
[type='radio'], [type='checkbox']{ vertical-align: baseline; }
/* ドラッグ＆アップロードフォーム */
input.drag{ display: inline-block; box-sizing: border-box; width: 100%; margin-bottom: 5px; padding: 25px 3%; border: 5px dashed #999; background: #f3f3f3; line-height: 1em; }
/* フォーム右に送信ボタンを設置した時の位置調整 */
.btn_position input{ vertical-align: middle; margin-bottom: 4px; }
/* カーソルポインター設定 */
[type='submit'], [type='image'], [type='button'], button{ cursor: pointer; }
/* iPhone、iPadなど、ボタン類のリセット（角丸解除・色解除）・再設定 */
input[type='submit'], input[type='button'], input[type='reset']{ -webkit-appearance: none; outline: none; padding: 0 10px; background: #f9f9f9; border: none; border: 1px solid #ccc; border-radius: 7px; font-size: 12px; line-height: 1.5em; }
input[type='submit']:hover, input[type='button']:hover, input[type='reset']:hover{ background: #f3f3f3; }
/* placeholder */
::-webkit-input-placeholder{ color: #ccc; font-weight: 400; }
::-ms-input-placeholder{ color: #ccc; font-weight: 400; }
::-moz-placeholder{ color: #ccc; font-weight: 400; }
/* label設定 */
label{ white-space: nowrap; }
/********************************************************************************************************************************************************************
○一括設定
********************************************************************************************************************************************************************/
body{ -webkit-text-size-adjust: 100%; }
*{
/* word-break: break-all;（20190908）半角文字の連打改行はできるが、全角文字「、」「。」その他の文字連打で改行効かないため、下記に修正 */
word-wrap: break-word; /* 半角文字・全角文字の連打両方に有効 */
}
/*img, iframe{ max-width: 100%; height: auto !important; border-style: none; vertical-align: bottom; }*/
/*img{ max-width: 100%; height: auto !important; border-style: none; vertical-align: bottom; }（商品画像が縦長の際に影響出るため下記に修正 ※height="200"が効かない）*/
img{ max-width: 100%; height: auto; border-style: none; vertical-align: bottom; } /*（20211207）CKEDITOR内のimgは別途「height: auto !important」追加した */
/*
（注意）「max-width: 100%」としても、CKEDITORの出力で「height: ●●px」が出力されるため縦横比がおかしくなるための対策（下記）・・・（20211207）上記のimg一斉に「height: auto !important」設定により解決した
preg_replace( '/ height: (\d+)px;/', '', html_entity_decode( $row[0]["text"] ) )
*/
/* 上付き文字、下付き文字 */
sup, sub{ font-size: 70%; }
/* ここでの定義は、「〜480px」がSP、「481px〜」がPC */
.pc_none{ display: none !important; }
.sp_none{ display: block !important; }
/********************************************************************************************************************************************************************
○その他設定
********************************************************************************************************************************************************************/
/* ●ライン */
.line_h_1em{ line-height: 1em; }
/* ●情報表示用BOX */
.info_box{ margin-bottom: 20px; padding: 5px; background: #e3e9f3; border: 1px solid #369; text-align: center; color: #369; font-size: 14px; }
/* ●エラー表示用BOX */
.err_box{ margin-bottom: 20px; padding: 5px; background: #f3e3e3; border: 1px solid #c66; text-align: center; color: #900; font-size: 14px; }
/* ●登録完了表示用BOX */
.comp_box{ margin-bottom: 30px; padding: 5px; border: 3px solid #6c3; border-radius: 5px; }
/* 汎用オレンジBOX */
.orangeBox{ padding: 5px 10px; background: #fbf3da; border: 1px solid #ffae00; }
/* 汎用ホワイトBOX */
.whiteBox{ padding: 5px 10px; background: #fff; border: 1px solid #ccc; }
/* 汎用グレーBOX */
.grayBox{ padding: 5px 10px; background: #f4f2f0; border: 1px solid #ccc; }
/* 改行禁止（20160528 チェックボックスのレスポンシブ対応で暫定設定） */
/*.nowrap{ display: inline-block; white-space: nowrap; }*/
.nowrap{ white-space: nowrap; }
/************************************************************************************************************************
999px以下
************************************************************************************************************************/
@media (max-width: 999px) {
div#modal_window{ width: 70%; }
p#modal_message{ font-size: 22px; }
p#modal_message span{ font-size: 22px; }
/* radio, checkbox ズレを修正（タブレット・SP用） */
[type='radio'], [type='checkbox']{ vertical-align: middle; }
}
/************************************************************************************************************************
768px以下（iPad mini）
************************************************************************************************************************/
@media (max-width: 768px) {
div#modal_window{ width: 80%; }
p#modal_message{ font-size: 20px; }
p#modal_message span{ font-size: 20px; }
}
/************************************************************************************************************************
480px以下（SP）※1カラム
・iPhone 14 Pro Max・・・430px
・iPhone 12 Pro・・・390px
・iPhone 6/7/8 Plus・・・414px
・iPhone 6/7/8・・・375px
・iPhone 5/SE・・・320px;
************************************************************************************************************************/
@media (max-width: 480px) { /* Xperia Z Ultraが540px */
.testNow{ padding: 5px; font-size: 24px; }
/* ○SP共通事項 */
.pc_none{ display: block !important; }
.sp_none{ display: none !important; }
.sp_block{ display: block; }
[name='postal']{ width: 100px !important; }
[name='tdfk']{ width: 110px !important; }
[name='tel'], [name='mob'],[name='fax']{ width: 120px !important; }
[name='price']{ width: 100px !important; }
/*
[name='birth_y']{ width: 50px !important; padding: 3px 5px !important;-webkit-appearance: none; }
[name='birth_m']{ width: 35px !important; padding: 3px 5px !important;-webkit-appearance: none; }
[name='birth_d']{ width: 35px !important; padding: 3px 5px !important;-webkit-appearance: none; }
*/
/* 年月日セレクト共通設定 */
.select_y{ width: 70px !important; }
.select_m{ width: 50px !important; }
.select_d{ width: 50px !important; }
/*[name='password']{ width: 120px !important; } 20170114 ログイン画面などでメールアドレスと合わせるときもあるためコメントした。*/
[name='mapdata']{ width: 200px !important; }
input[type="text"], input[type="password"] , input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime"], textarea{
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF));
background-image: -webkit-linear-gradient(left, #FFFFFF, #FFFFFF);
}
#btn_page_top{ padding: 2px 15px; font-size: 11px; border-radius: 10px; bottom: 50px; right: 10px; }
/* 日時表示（アイコン） */
.daytime{ font-size: 12px; }
.daytime span{ padding-left: 15px; font-size: 12px;
background-image: url(/img/icon_time.png);
background-repeat: no-repeat;
background-size: 11px;
background-position: 0 1px;
}
/* ●情報表示用BOX */
.info_box{ margin-bottom: 10px; }
/* ●エラー表示用BOX */
.err_box{ margin-bottom: 10px; }
}
/************************************************************************************************************************
374px以下
************************************************************************************************************************/
@media (max-width: 768px) {
p#modal_message{ font-size: 16px; }
p#modal_message span{ font-size: 16px; }
}