CSS   34

top.css

Guest on 26th May 2021 11:21:33 PM

  1. #subpage #cont_main {}
  2. #subpage #cont_side { display: none;}
  3. /*====================================================================================================
  4.   FIT BUTTON
  5. ====================================================================================================*/
  6. .overlay {
  7.     position:absolute;
  8.     top:0;
  9.     left:0;
  10.     right: 0;
  11.     bottom:0;
  12.     margin: auto;
  13.     width:90%;
  14.     max-width:950px;
  15.     height:240px;
  16.     box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
  17.     z-index:9999;
  18.     box-sizing: border-box;
  19. }
  20. .overlay .cont_box { float: left; width: 50%; text-align: center;}
  21. .overlay .cont_box a {
  22.     display: block;
  23.     padding:90px 30px;
  24.     color: #fff;
  25.     height:240px;
  26.     font-size:137.5%;
  27.     line-height: 180%;
  28.     text-align: center;
  29.     text-decoration: none;
  30.     box-sizing: border-box;
  31. }
  32. .overlay .cont_box a:hover{ background:rgba(55,55,55,0.80);}
  33. .overlay .cont1 {background:rgba(170,2,15,0.80);}
  34. .overlay .cont2 {background: rgba(19,41,143,0.80);}
  35. .overlay button {
  36.     position: absolute;
  37.     top:-20px;
  38.     right:-20px;
  39.     cursor: pointer;
  40.     margin: auto;
  41.     padding:0;
  42.     width: 50px;
  43.     height: 50px;
  44.     font-weight: bold;
  45.     font-size:200%;
  46.     display:block;
  47.     color: #000;
  48.     border:none;
  49.     background: none;
  50.     background: #fff;
  51.     border-radius:50px;
  52. }
  53. .overlay button:hover {opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7;}
  54.  
  55. /*====================================================================================================
  56.   TOPPAGE
  57. ====================================================================================================*/
  58. #toppage {}
  59.  
  60. /*** IMPORTANT **************************************************************/
  61. .imp {
  62.     margin: auto;
  63.     position:absolute;
  64.     width:100%;
  65.     text-align: center;
  66.     bottom:68px;
  67.     right: 0;
  68.     left: 0;
  69.     color: #fff;
  70.     font-size:137.5%;
  71.     line-height: 180%;
  72.     z-index: 99999;
  73.     background:rgba(170,2,15,0.80);
  74. }
  75. .imp:hover{ background:rgba(55,55,55,0.80);}
  76. .imp a{ display: block; padding: 25px 0; color: #FFF!important; text-decoration: none;}
  77. /*
  78. .imp table { width: 100%;}
  79. .imp table tr td:nth-child(1) { width:30%; font-weight: bold; text-align: center;}
  80. .imp table tr td:nth-child(2) { width:70%; padding:20px 0;}
  81. .imp dl {}
  82. .imp dl::after { display:block; clear:both; content:"";}
  83. .imp dl+dl { margin-top: 10px;}
  84. .imp dl dt,
  85. .imp dl dd { float: left;}
  86. .imp dl dt { width:30%;}
  87. .imp dl dd { width:70%;}
  88. .imp dl dd a { color: #fff;}
  89. */
  90. @media only screen and (max-width:700px){
  91. .imp {
  92.     position:static;
  93.     width:100%;
  94.     box-sizing: border-box;
  95.     background:rgba(170,2,15,1.00);
  96. }
  97. /*
  98. .imp table { display: block; width:100%; table-layout:auto !important;}
  99. .imp table td {
  100.     table-layout:auto !important;
  101.     display:block !important;
  102.     padding:20px !important;
  103.     width:390px !important;
  104.     height:auto !important;
  105.     box-sizing: border-box;
  106. }
  107. .imp dl {}
  108. .imp dl::after { display:block; clear:both; content:"";}
  109. .imp dl dt,
  110. .imp dl dd { float:none; width:100% !important;}
  111. */
  112. }
  113.  
  114.  
  115. /*** MAINIMG ***************************************************************/
  116. #mainimg {
  117.     position:relative;
  118.     /* margin-bottom: 15px; */
  119.     clear:both;
  120.     display:block;
  121.     width:100%;
  122.     z-index:1;
  123. }
  124. #mainimg:after { display:block; clear:both; content:"";}
  125. #mainimg img { max-width:100%;}
  126. #mainimg #slick { overflow:hidden; width:100%;}
  127. #mainimg #slick ul { margin:0 auto; max-width:1300px;}
  128. #mainimg #slick ul li{ margin: 0;}
  129. #mainimg #slick .slick-list { overflow:visible;}
  130.  
  131.  
  132. /*** CLOSEUP ***************************************************************/
  133. #mainimg .closeup {
  134.     /* position: absolute; */
  135.     margin: auto;
  136.     width: 100%;
  137.     bottom: 0;
  138.     left: 0;
  139.     background: rgba(255,255,255,0.85);
  140.     z-index: 999;
  141. }
  142. #mainimg .closeup dl {
  143.     padding:20px 0;
  144.     margin: 0 auto;
  145.     max-width:1000px;
  146.     z-index: 999;
  147. }
  148. #mainimg .closeup dl::after { /*float_clear*/ display:block; clear:both; content:"";}
  149. #mainimg .closeup dl dt,
  150. #mainimg .closeup dl dd { float: left;}
  151. #mainimg .closeup dl dt { width:13%; color: #AA020F; font-weight: bold; border-right: 1px solid #ccc;}
  152. #mainimg .closeup dl dd { width:72%; padding: 0 20px; border-right: 1px solid #ccc;}
  153. #mainimg .closeup dl dd ul { display:none;}
  154. #mainimg .closeup dl dd ul:nth-child(1) { display:block;}
  155. #mainimg .closeup dl dd ul li { display:inline;}
  156. #mainimg .closeup dl dd.b_more { width:15%;}
  157. #mainimg .closeup dl dd.b_more a {
  158.     position: relative;
  159.     display: block;
  160.     color: #000;
  161.     font-size: 90%;
  162.     font-weight: bold;
  163.     text-decoration: none;
  164. }
  165. #mainimg .closeup dl dd.b_more a::after {
  166.     display:block;
  167.     clear:both;
  168.     content:"";
  169.     position: absolute;
  170.     top:0;
  171.     right:0;
  172.     width: 20px;
  173.     height:100%;
  174.     background: url(../rkh_image/link_arrow2.png) no-repeat left center;
  175. }
  176.  
  177.  
  178. /*** PICKUP NAV1 ***********************************************************/
  179. #toppage .pickup1 {}
  180. #toppage .pickup1::after { /*float_clear*/ display:block; clear:both; content:"";}
  181. #toppage .pickup1 p { float: left; width: 20%;}
  182. #toppage .pickup1 p b,
  183. #toppage .pickup1 p small { display: block; position: relative; z-index: 99;}
  184. #toppage .pickup1 p b { font-size:170%;}
  185. #toppage .pickup1 p a {
  186.     position: relative;
  187.     display: block;
  188.     padding:45px 0 230px;
  189.     max-height: 330px;
  190.     font-family: "游明朝体"Žæœä½“","Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", ", "agino Mincho Pro", ", Times, serif;
  191.     font-weight: bold;
  192.     font-size:100%;
  193.     color: #3F3627;
  194.     text-align: center;
  195.     text-decoration: none;
  196.     box-sizing: border-box;
  197.     overflow: hidden;
  198. }
  199. #toppage .pickup1 p a::before {
  200.     display:block;
  201.     clear:both;
  202.     content:"
  203.     clear:both;
  204.     content:"";
  205.     position: absolute;
  206.     top: 0;
  207.     left: 0;
  208.     width: 100%;
  209.     height: 100%;
  210.     transition: all 0.5s;
  211.     background-size: cover !important;
  212. }
  213. #toppage .pickup1 p:nth-child(1) a::before { background:#fff url(../../image/top/topics1.jpg) no-repeat right center;}
  214. #toppage .pickup1 p:nth-child(2) a::before { background:#fff url(../../image/top/topics2.jpg) no-repeat right center;}
  215. #toppage .pickup1 p:nth-child(3) a::before { background:#fff url(../../image/top/topics3.jpg) no-repeat right center;}
  216. #toppage .pickup1 p:nth-child(4) a::before { background:#fff url(../../image/top/topics4.jpg) no-repeat right center;}
  217. #toppage .pickup1 p:nth-child(5) a::before { background:#fff url(../../image/top/topics5.jpg) no-repeat right center;}
  218. #toppage .pickup1 p a::after {
  219.     display:block;
  220.     clear:both;
  221.     content:"";
  222.     position: absolute;
  223.     top:-500px;
  224.     left: 0;
  225.     width: 100%;
  226.     height: 100%;
  227.     background:rgba(63,54,39,0.50) url(rrow.png) no-repeat center cente) no-repeat center center;
  228.     transition: all 0.3s;
  229. }
  230. #toppage .pickup1 p:hove/*** PICKUP NAV2 ***********************************************************/***********************/
  231. #toppage .pickup2 {}
  232. #to/*float_clear*/:after { /*float_clear*/ display:block; clear:both; content:"";}
  233. #toppage .pickup2 p { float: left; width: 25%; border-right:1px solid rgba(175,157,125,0.50); border-bottom:1px solid rgba(175,157,125,0.50);}
  234. #toppage .pickup2 p b { position: relative; z-index: 99;}
  235. #toppage .pickup2 p b small { font-weight: 80%;}
  236. #toppage .pickup2 p a {
  237.     position: relative;
  238.     display: block;
  239.     padding:10%;
  240.     font-family: "游明朝体","Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "MS PMincho", Times, serif;
  241.     font-weight: bold;
  242.     font-size: 130%;
  243.     color: #000;
  244.     text-decoration: none;
  245.     box-sizing: border-box;
  246. }
  247. #toppage .pickup2 p a::before {
  248.     display:block;
  249.     clear:both;
  250.     content:"";
  251.     position: absolute;
  252.     top: 0;
  253.     left: 0;
  254.     width: 100%;
  255.     height: 100%;
  256.     transition: all 0.3s;
  257. }
  258. #toppage .pickup2 p b small { font-size: 70%;}
  259. #toppage .pickup2 p a:hover { color: #fff;}
  260. #toppage .pickup2 p:nth-child(1) a::before { background:#fff url(enter;}
  261. #toppage .pickup2 p:n) no-repeat right center;}
  262. #toppage .pickup2 p:nth-child(2) a::before { background:#fff url(enter;}
  263. #toppage .pickup2 p:n) no-repeat right center;}
  264. #toppage .pickup2 p:nth-child(3) a::before { background:#fff url(enter;}
  265. #toppage .pickup2 p:n) no-repeat right center;}
  266. #toppage .pickup2 p:nth-child(4) a::before { background:#fff url(enter;}
  267. #toppage .pickup2 p:n) no-repeat right center;}
  268. #toppage .pickup2 p:nth-child(5) a::before { background:#fff url(enter;}
  269. #toppage .pickup2 p:n) no-repeat right center;}
  270. #toppage .pickup2 p:nth-child(6) a::before { background:#fff url(enter;}
  271. #toppage .pickup2 p:n) no-repeat right center;}
  272. #toppage .pickup2 p:nth-child(7) a::before { background:#fff url(enter;}
  273. #toppage .pickup2 p:n) no-repeat right center;}
  274. #toppage .pickup2 p:nth-child(8) a::before { background:#fff url(enter;}
  275. #toppage .pickup2 p:n) no-repeat right center;}
  276. #toppage .pickup2 p:nth-child(1):hover a::before { background:rgba(147,183,75,1.00) url(nter;}
  277. #toppage .pickup2 p:n) no-repeat right center;}
  278. #toppage .pickup2 p:nth-child(2):hover a::before { background:rgba(255,124,118,1.00) url(nter;}
  279. #toppage .pickup2 p:n) no-repeat right center;}
  280. #toppage .pickup2 p:nth-child(3):hover a::before { background:rgba(223,181,116,1.00) url(nter;}
  281. #toppage .pickup2 p:n) no-repeat right center;}
  282. #toppage .pickup2 p:nth-child(4):hover a::before { background:rgba(0,164,151,1.00) url(nter;}
  283. #toppage .pickup2 p:n) no-repeat right center;}
  284. #toppage .pickup2 p:nth-child(5):hover a::before { background:rgba(105,173,215,1.00) url(nter;}
  285. #toppage .pickup2 p:n) no-repeat right center;}
  286. #toppage .pickup2 p:nth-child(6):hover a::before { background:rgba(187,129,182,1.00) url(nter;}
  287. #toppage .pickup2 p:n) no-repeat right center;}
  288. #toppage .pickup2 p:nth-child(7):hover a::before { background:rgba(1,53,116,1.00) url(nter;}
  289. #toppage .pickup2 p:n) no-repeat right center;}
  290. #toppage .pickup2 p:nth-child(8):hover a::before { background:rgba(225,124,128,1.00) url(nter;}
  291.  
  292.  
  293. /*** NEWS *********) no-repeat right center;}
  294.  
  295.  
  296. /*** NEWS ******************************************************************/
  297. #toppage .news { padding: 90px 0;}
  298. #toppage .news h2 {
  299.     margin-bottom:40px;
  300.     font-family: "游明朝体","Yu Mincho", "uMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "MS PMincho", Times, serif;
  301.     text-align: center;
  302.     font-size: 100%;
  303. }
  304. #toppage .news h2 b,
  305. #toppage .news h2 small { display:block;}
  306. #toppage .news h2 b { font-size: 150%;}
  307. #toppage .news h2 small { font-size: 130%; color: #AA020F;}
  308. #toppage .news #news_tab { margin: auto !important; max-width: 1000px;}
  309. #toppage .news .news_box { max-height: 300px; overflow: auto;}
  310. #toppage .news .news_box ul { margin: auto; padding: 15px /*float_clear*/m: 1px solid #ddd;}
  311. #toppage .news .news_box ul::after { /*float_clear*/ display:block; clear:both; content:"";}
  312. #toppage .news .news_box ul:hover { background: #f6f6f6;}
  313. #toppage .news .news_box ul li { float: left;}
  314. #toppage .news .news_box ul li:nth-child(1) { width: 12%; text-align: center;}
  315. #toppage .news .news_box ul li:nth-child(2) { width: 10%; text-align: center; position: relative;}
  316. #toppage .news .news_box ul li:nth-child(2)::before,
  317. #toppage .news .news_box ul li:nth-child(2)::after { position: absolute; top: 0;}
  318. #toppage .news .news_box ul li:nth-child(2)::before { content:"["; left: 0;}
  319. #toppage .news .news_box ul li:nth-child(2)::after { content:"]"; right: 0;}
  320. #toppage/* LOAD NEWS */x ul li:nth-child(3) { width: 78%; padding-left: 20px;}
  321.  
  322. /* LOAD NEWS */
  323. #toppage .news .news_box ul { display: none;}
  324. #toppage .news .news_all ul { display: block;}
  325. #toppage .news .news_01 ul.cate_01 { display: block;}
  326. #toppage .news .news_02 ul.cate_02 { display: block;}
  327. #toppage .news .news_03 ul.cate_03 { display: block;}
  328. #toppage .news .news_04 ul.cate_04 { /* BTN */block;}
  329. #toppage .news .news_05 ul.cate_05 { display: block;}
  330.  
  331. /* BTN */
  332. #toppage .news .b_more { position: relative; margin-top: 20px; padding-right: 25px; text-align:right;}
  333. #toppage .news .b_more a { color: #AA020F;}
  334. #toppage .news .b_more::after {
  335.     display:block;
  336.     clear:both;
  337.     content:"";
  338.     position: absolute;
  339.     top:0;
  340.     right:0;
  341.     width: 20px;
  342.     height:100%;
  343.     b/*** FOOTER BANA ***********************************************************/FOOTER BANA ***********************************************************/
  344. .f_bana { padding: 50px 0; background: #B1C7/*float_clear*/ { margin: auto; max-width: 1000px;}
  345. .f_bana ul::after { /*float_clear*/ display:block; clear:both; content:"";}
  346. .f_bana ul li { float: left; width:24.25%; margin:0.5% 0; background:none;}
  347. .f_bana ul li+li { margin-left:1%;}
  348. .f_bana ul li:nth-child

Raw Paste


Login or Register to edit or fork this paste. It's free.