portal > css > top.css

  1. @charset "utf-8";
  2.  
  3. /* loading */
  4. #splash {
  5. position: fixed;
  6. width: 100%;
  7. height: 100%;
  8. background: #fff;
  9. z-index: 9999999;
  10. text-align: center;
  11. }
  12.  
  13. #splash-logo {
  14. position: absolute;
  15. top: 50%;
  16. left: 50%;
  17. transform: translate(-50%, -50%);
  18. }
  19.  
  20.  
  21. /* splash */
  22.  
  23. body {
  24. background: #fff;
  25. }
  26.  
  27. body.appear {
  28. /*
  29.   background: none;
  30.   */
  31. }
  32.  
  33. .splashbg1,
  34. .splashbg2 {
  35. display: block;
  36. content: '';
  37. position: fixed;
  38. z-index: 99999;
  39. width: 100%;
  40. height: 100vh;
  41. transform: scaleX(1);
  42. background-color: #f578c5;/*伸びる背景色の設定*/
  43. /*
  44.   top: 0;
  45.   */
  46. }
  47. .splashbg1 {
  48. bottom:50%;
  49. }
  50. .splashbg2{
  51. top:50%;
  52. }
  53.  
  54. body.appear .splashbg1,
  55. body.appear .splashbg2 {
  56. display: block;
  57. }
  58.  
  59. body.appear .splashbg1 {
  60. animation-name: PageAnime;
  61. animation-duration: 1.6s;
  62. animation-timing-function: ease-in-out;
  63. animation-fill-mode: forwards;
  64. content: "";
  65. position: fixed;
  66. width: 100%;
  67. height: 100vh;
  68. bottom: 50%;
  69. left: 0;
  70. transform: scaleY(1);
  71. background: #f578c5;
  72. }
  73.  
  74. @keyframes PageAnime {
  75. 0% {
  76. transform-origin: top;
  77. transform: scaleY(1);
  78. }
  79.  
  80. 100% {
  81. transform-origin: top;
  82. transform: scaleY(0);
  83. }
  84. }
  85.  
  86. body.appear .splashbg2 {
  87. animation-name: PageAnime2;
  88. animation-duration: 1.6s;
  89. animation-timing-function: ease-in-out;
  90. animation-fill-mode: forwards;
  91. content: "";
  92. position: fixed;
  93. width: 100%;
  94. height: 100vh;
  95. top: 50%;
  96. left: 0;
  97. transform: scaleY(1);
  98. background: #f578c5;
  99. }
  100.  
  101. @keyframes PageAnime2 {
  102. 0% {
  103. transform-origin: bottom;
  104. transform: scaleY(1);
  105. }
  106.  
  107. 100% {
  108. transform-origin: bottom;
  109. transform: scaleY(0);
  110. }
  111. }
  112.  
  113. /* layout */
  114. .top-mv {
  115. width: 95vw;
  116. margin: 2.666666667vw auto 5.333333333vw;
  117. display: flex;
  118. flex-wrap: wrap;
  119. justify-content: center;
  120. position: relative;
  121. }
  122.  
  123. .top-mv .top-logo {
  124. width: 46.66666667vw;
  125. margin: 0 auto;
  126. position: absolute;
  127. top: 77vw;
  128. z-index: +1;
  129. }
  130.  
  131. .top-mv .top-key {
  132. position: relative;
  133. width: 100vw;
  134. margin: 0 auto;
  135. }
  136. .top-mv .top-key p:not(:first-child) {
  137. position: absolute;
  138. top: 0;
  139. right: 0;
  140. bottom: 0;
  141. left: 0;
  142. }
  143. .animate__fadeInUp1{
  144. -webkit-animation-name: fadeInUp1;
  145. animation-name: fadeInUp1
  146. }
  147. @-webkit-keyframes fadeInUp1{
  148. 0%{ opacity: 0; -webkit-transform: translate3d(0, 3%, 0); transform: translate3d(0, 3%, 0)}
  149. to{ opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0)}
  150. }
  151. @keyframes fadeInUp1{
  152. 0%{ opacity: 0; -webkit-transform: translate3d(0, 3%, 0); transform: translate3d(0, 3%, 0)}
  153. to{ opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0)}
  154. }
  155.  
  156. /* .top-title img {
  157.   margin: 6.25vw auto;
  158. } */
  159.  
  160. /* navi */
  161. .fadeUp {
  162. animation-name: fadeUpAnime;
  163. animation-duration: 0.5s;
  164. animation-fill-mode: forwards;
  165. opacity: 0;
  166. }
  167.  
  168. @keyframes fadeUpAnime {
  169. from {
  170. opacity: 0;
  171. transform: translateY(100px);
  172. }
  173.  
  174. to {
  175. opacity: 1;
  176. transform: translateY(0);
  177. }
  178. }
  179.  
  180. /* アニメーションスタートの遅延時間を決めるCSS*/
  181.  
  182. .delay-time02 {
  183. animation-delay: 0.2s;
  184. }
  185.  
  186. .delay-time03 {
  187. animation-delay: 0.3s;
  188. }
  189.  
  190. .delay-time04 {
  191. animation-delay: 0.4s;
  192. }
  193.  
  194. .delay-time05 {
  195. animation-delay: 0.5s;
  196. }
  197.  
  198. .delay-time06 {
  199. animation-delay: 0.6s;
  200. }
  201.  
  202. .delay-time07 {
  203. animation-delay: 0.7s;
  204. }
  205.  
  206. .delay-time08 {
  207. animation-delay: 0.8s;
  208. }
  209.  
  210. .delay-time09 {
  211. animation-delay: 0.9s;
  212. }
  213.  
  214. .delay-time10 {
  215. animation-delay: 1.0s;
  216. }
  217.  
  218. .top-text {
  219. font-family: 'Noto Serif JP', serif;
  220. text-shadow: 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a;
  221. color: #fff;
  222. font-weight: 700;
  223. font-size: 3.2vw;
  224. padding: 4vw 0;
  225. }
  226.  
  227.  
  228.  
  229. /* aikatsulink */
  230. .btn-aikatsu-link {
  231. display: flex;
  232. flex-wrap: wrap;
  233. justify-content: center;
  234. align-items: center;
  235. }
  236.  
  237. .btn-aikatsu-link li {
  238. list-style-type: none;
  239. width: 33.3333%;
  240. text-align: center;
  241. }
  242.  
  243.  
  244. /* slider */
  245. .slider {
  246. width: 100%;
  247. margin: 0 auto;
  248. /* box-shadow: 1px 2px 3px rgba(135,54,78,0.5); */
  249. }
  250.  
  251. .slider img {
  252. width: 100%;
  253. height: auto;
  254. }
  255.  
  256. .slider .slick-slide {
  257. transform: scale(1);
  258. }
  259.  
  260. .slick-prev,
  261. .slick-next {
  262. position: absolute;
  263. top: 42%;
  264. cursor: pointer;
  265. outline: none;
  266. border-top: 3px solid #fff;
  267. border-right: 3px solid #fff;
  268. height: 15px;
  269. width: 15px;
  270. }
  271.  
  272. .slick-prev {
  273. left: -1.5%;
  274. transform: rotate(-135deg);
  275. }
  276.  
  277. .slick-next {
  278. right: -1.5%;
  279. transform: rotate(45deg);
  280. }
  281.  
  282. .slick-dots {
  283. text-align: center;
  284. margin: 20px 0 0 0;
  285. }
  286.  
  287. .slick-dots li {
  288. display: inline-block;
  289. margin: 0 5px;
  290. }
  291.  
  292. .slick-dots button {
  293. color: transparent;
  294. outline: none;
  295. width: 20px;
  296. height: 20px;
  297. display: block;
  298. border-radius: 50%;
  299. background: #ccc;
  300. }
  301.  
  302. .slick-dots .slick-active button {
  303. background: #ff339a;
  304. }
  305.  
  306. /* topics */
  307.  
  308. /* topics */
  309. .category-list {
  310. display: flex;
  311. flex-wrap: wrap;
  312. justify-content: center;
  313. list-style-type: none;
  314. margin-bottom: 3.125vw;
  315. }
  316. .category-list li {
  317. width: 30%;
  318. text-align: center;
  319. margin: 1% 0.5%;
  320. letter-spacing: 0.05px;
  321. box-shadow: 0px 0px 25px rgba(255, 255, 255, 0.8);
  322. border: 1px solid #fff;
  323. border-radius: 20px;
  324. }
  325. .category-list li a {
  326. text-decoration: none;
  327. color: #fff;
  328. display: block;
  329. }
  330. @media screen and (min-width: 768px) and (max-width: 959px) {
  331. .category-list {
  332. margin-bottom: 20px;
  333. }
  334. .category-list li {
  335. width: 20%;
  336. }
  337. .category-list li a {
  338. }
  339. }
  340. @media only screen and (min-width: 960px) {
  341. .category-list {
  342. margin-bottom: 1.5625vw;
  343. }
  344. .category-list li {
  345. width: 13.9%;
  346. margin: 1% 1px;
  347. padding: 3px 5px;
  348. }
  349. .category-list li a {
  350. }
  351. }
  352.  
  353. .topics-list {
  354. width: 100%;
  355. margin: 0 auto;
  356. display: flex;
  357. flex-wrap: wrap;
  358. justify-content: center;
  359. box-sizing: border-box;
  360. }
  361.  
  362. .topics-list li {
  363. width: 97%;
  364. margin: 1vw 0vw;
  365. list-style-type: none;
  366. border-radius: 20px;
  367. }
  368.  
  369. .topics-list li:nth-child(2n),
  370. .topics-list li:last-child {
  371. margin-right: 0;
  372. }
  373.  
  374. .topics-list li a {
  375. background: #fff;
  376. border-radius: 3vw;
  377. color: #7f632e;
  378. box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.8);
  379. height: 100%;
  380. display: block;
  381. text-decoration: none;
  382. padding: 4% 3%;
  383. text-align: center;
  384. }
  385.  
  386. .topics-list li a:hover {
  387. opacity: 0.6;
  388. }
  389.  
  390. .topics-head {
  391. display: flex;
  392. flex-wrap: wrap;
  393. justify-content: space-between;
  394. margin-bottom: 5vw;
  395. width: 100%;
  396. }
  397.  
  398. .topics-list-text {
  399. padding: 1.5625vw;
  400. font-size: 4vw;
  401. text-align: left;
  402. }
  403.  
  404. .topics-list-day {
  405. font-size: 4.375vw;
  406. color: #7f632e;
  407. padding: 1.5625vw 5.625vw;
  408. text-align: left;
  409. width: 100%;
  410. }
  411.  
  412. .topics-category {
  413. font-size: 3vw;
  414. /* padding: 0.9375vw 1.5625vw; */
  415. border-radius: 5.333333333vw;
  416. width: 48%;
  417. color: #fff;
  418. font-weight: 700;
  419. margin-bottom: 1.5625vw;
  420. }
  421. .topics-category:first-child {
  422. margin-bottom: 0;
  423. }
  424.  
  425. .topics-c1 {
  426. background: #ff994a;
  427. }
  428. .topics-c1 ~ .topics-c1 {
  429. display: none;
  430. }
  431.  
  432. .topics-c2 {
  433. background: #78c22f;
  434. }
  435. .topics-c2 ~ .topics-c2 {
  436. display: none;
  437. }
  438.  
  439. .topics-c3 {
  440. background: #56bea7;
  441. }
  442. .topics-c3 ~ .topics-c3 {
  443. display: none;
  444. }
  445.  
  446. .topics-c4 {
  447. background: #53b3e1;
  448. }
  449. .topics-c4 ~ .topics-c4 {
  450. display: none;
  451. }
  452.  
  453. .topics-c5 {
  454. background: #ce71c5;
  455. }
  456. .topics-c5 ~ .topics-c5 {
  457. display: none;
  458. }
  459.  
  460. .topics-c6 {
  461. background: #ec72a7;
  462. }
  463. .topics-c6 ~ .topics-c6 {
  464. display: none;
  465. }
  466.  
  467. .topics-c7 {
  468. background: #fcc800;
  469. }
  470. .topics-c7 ~ .topics-c7 {
  471. display: none;
  472. }
  473.  
  474. .topics-list-thumb-inner img {
  475. width: 90%;
  476. height: auto;
  477. border-radius: 1vw;
  478. }
  479.  
  480.  
  481.  
  482. /* PV */
  483. .video-frame {
  484. width: 100%;
  485. height: auto;
  486. margin: 0 auto;
  487. padding: 10px;
  488. border-radius: 10px;
  489. background: linear-gradient(0deg, rgba(230, 30, 75, 1) 35%, rgba(230, 50, 150, 1) 65%);
  490. box-shadow: 0 0 10px #fff,
  491. 0 0 20px #fff,
  492. 0 0 30px #fff,
  493. 0 0 40px #fff;
  494. }
  495.  
  496. .video-movie {
  497. position: relative;
  498. width: 100%;
  499. padding-top: 56.25%;
  500. margin: 0 auto;
  501. }
  502.  
  503. .video-movie iframe {
  504. position: absolute;
  505. top: 0;
  506. left: 0;
  507. width: 100%;
  508. height: 100%;
  509. }
  510.  
  511. /* twitter */
  512.  
  513. .tw-box iframe {
  514. width: 100%;
  515. height: 100%;
  516. border: none;
  517. background: #fff;
  518. }
  519.  
  520. .tw-link {
  521. padding: 10px;
  522. font-size: 3.333333333vw;
  523. font-weight: 700;
  524. text-align: center;
  525. }
  526.  
  527. .tw-link a {
  528. text-decoration: none;
  529. color: #fff;
  530. }
  531.  
  532. .tw-link a:hover {
  533. opacity: 0.6;
  534. }
  535.  
  536. .tw-box {
  537. width: 96%;
  538. margin: 0 auto 0;
  539. }
  540.  
  541. .tw-frame {
  542. width: 100%;
  543. height: auto;
  544. margin: 0 auto;
  545. padding: 1vw 0;
  546. border-radius: 10px;
  547. background: linear-gradient(0deg, rgba(3, 127, 203, 1) 35%, rgba(29, 161, 242, 1) 65%);
  548. box-shadow: 0 0 10px #fff,
  549. 0 0 20px #fff,
  550. 0 0 30px #fff,
  551. 0 0 40px #fff;
  552. }
  553.  
  554. /* バナー/SNS */
  555. .info {
  556. width: 100%;
  557. text-align: center;
  558. padding: 5vw 0 10vw;
  559. }
  560.  
  561. .top-sns-bnr {
  562. display: flex;
  563. margin: 1vw auto 6.666666667vw;
  564. justify-content: center;
  565. width: 90%;
  566. }
  567.  
  568. .top-sns-bnr li {
  569. width: 33.33%;
  570. padding: 1vh;
  571. list-style-type: none;
  572. }
  573.  
  574. .top-sns-bnr li img {
  575. width: 60%;
  576. border-radius: 50%;
  577. box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
  578. }
  579.  
  580. .bnr {
  581. width: 60%;
  582. margin: 0 auto;
  583. list-style-type: none;
  584. text-align: center;
  585. }
  586.  
  587. .bnr img {
  588. width: 80%;
  589. }
  590.  
  591. .lity-close {
  592. color: #ff339a;
  593. }
  594.  
  595. /* tablet */
  596. @media screen and (min-width:768px) and (max-width:959px) {
  597.  
  598. /* layout */
  599. .top-mv {
  600. width: 98vw;
  601. margin: 0 auto;
  602. display: flex;
  603. flex-wrap: wrap;
  604. flex-direction: row-reverse;
  605. padding: 0 70px 0px;
  606. justify-content: stretch;
  607. position: static;
  608. }
  609.  
  610. .top-mv .top-logo {
  611. width: 40%;
  612. padding-top: 30px;
  613. position: static;
  614. top: 0;
  615. }
  616.  
  617. .top-mv .top-logo img {
  618. width: 80%;
  619. margin: auto;
  620. }
  621.  
  622. .top-mv .top-key {
  623. padding-top: 20px;
  624. width: 60%;
  625. text-align: center;
  626. }
  627.  
  628. .top-mv .top-key img {
  629. width: 100%;
  630. margin: auto;
  631. }
  632.  
  633. /* .top-title img {
  634.   margin: 0px auto;
  635.   width: auto;
  636.   height: auto;
  637.   } */
  638.  
  639. /* aikatsulink */
  640. .btn-aikatsu-link {
  641. display: flex;
  642. flex-wrap: wrap;
  643. justify-content: center;
  644. align-items: center;
  645. }
  646.  
  647. .btn-aikatsu-link li {
  648. list-style-type: none;
  649. width: 20%;
  650. box-sizing: border-box;
  651. }
  652.  
  653. .btn-aikatsu-link li img {
  654. width: 100%;
  655. height: auto;
  656. }
  657.  
  658. /* topics */
  659. .topics-list li {
  660. width: 47%;
  661. margin: 1% 3% 1% 0%;
  662. list-style-type: none;
  663. }
  664.  
  665. .topics-list li a {
  666. border-radius: 15px;
  667. padding: 15px 15px;
  668. }
  669.  
  670. .topics-list li:nth-child(2n),
  671. .topics-list li:last-child {
  672. margin-right: 0;
  673. }
  674.  
  675. .topics-head {
  676. margin-bottom: 0px;
  677. }
  678.  
  679. .topics-list-text {
  680. padding: 5px;
  681. font-size: 16px;
  682. }
  683.  
  684. .topics-list-day {
  685. font-size: 18px;
  686. padding: 3px 5px;
  687. /*
  688.   width: 50%;
  689.   */
  690. }
  691.  
  692. .topics-category {
  693. font-size: 16px;
  694. /* padding: 3px 5px; */
  695. border-radius: 20px;
  696. width: 48%;
  697. }
  698.  
  699. .topics-list-thumb-inner img {
  700. width: 90%;
  701. height: auto;
  702. border-radius: 5px;
  703. }
  704.  
  705.  
  706. /* バナー/SNS */
  707. .top-sns-bnr {
  708. max-width: 450px;
  709. }
  710.  
  711. .top-sns-bnr li img {
  712. width: auto;
  713. border-radius: 50%;
  714. box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
  715. }
  716.  
  717. .info {
  718. width: 100%;
  719. text-align: center;
  720. padding: 20px 0 50px;
  721. }
  722.  
  723. .info img {
  724. width: auto;
  725. height: auto;
  726. }
  727.  
  728. .bnr {
  729. width: 60%;
  730. margin: 30px auto 50px;
  731. display: flex;
  732. flex-wrap: wrap;
  733. justify-content: center;
  734. }
  735.  
  736. .bnr li {
  737. padding: 10px 20px;
  738. }
  739.  
  740.  
  741. .bnr img {
  742. width: auto;
  743. }
  744.  
  745. .top-text {
  746. font-family: 'Noto Serif JP', serif;
  747. text-shadow: 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a;
  748. color: #fff;
  749. font-weight: 700;
  750. font-size: 2vw;
  751. padding: 4vw 0;
  752. }
  753. }
  754.  
  755. @media only screen and (min-width:960px) {
  756.  
  757. .top-mv {
  758. width: 90vw;
  759. margin: 0 auto;
  760. display: flex;
  761. flex-wrap: wrap;
  762. /* flex-direction: row-reverse; */
  763. padding: 0 70px 0px;
  764. justify-content: stretch;
  765. position: static;
  766. }
  767.  
  768. .top-mv .top-logo {
  769. width: 40%;
  770. padding-top: 30px;
  771. position: static;
  772. top: 0;
  773. }
  774.  
  775. .top-mv .top-logo img {
  776. width: 80%;
  777. }
  778.  
  779. .top-mv .top-key {
  780. width: 60%;
  781. }
  782.  
  783. .top-mv .top-key img {
  784. width: 100%;
  785. margin: auto;
  786. }
  787. .top-text {
  788. font-family: 'Noto Serif JP', serif;
  789. text-shadow: 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a;
  790. color: #fff;
  791. font-weight: 700;
  792. font-size: 20px;
  793. padding: 0 0 30px;
  794. }
  795.  
  796. /* .top-title img {
  797.   margin: 0px auto;
  798.   width: auto;
  799.   height: auto;
  800.   } */
  801.  
  802. /* aikatsulink */
  803. .btn-aikatsu-link {
  804. display: flex;
  805. flex-wrap: wrap;
  806. justify-content: center;
  807. align-items: center;
  808. }
  809.  
  810. .btn-aikatsu-link li {
  811. list-style-type: none;
  812. width: 20%;
  813. box-sizing: border-box;
  814. }
  815.  
  816. .btn-aikatsu-link li img {
  817. width: 100%;
  818. height: auto;
  819. }
  820.  
  821. /* slider */
  822. .slider {
  823. max-width: 1000px;
  824. margin: 0px auto;
  825. }
  826.  
  827. .slider img {
  828. width: 100%;
  829. height: auto;
  830. }
  831.  
  832. .slick-prev,
  833. .slick-next {
  834. top: 42%;
  835. height: 30px;
  836. width: 30px;
  837. }
  838.  
  839. .slick-prev {
  840. left: -3%;
  841. transform: rotate(-135deg);
  842. }
  843.  
  844. .slick-next {
  845. right: -3%;
  846. transform: rotate(45deg);
  847. }
  848.  
  849.  
  850. /* topics */
  851. .topics-list li {
  852. width: 30%;
  853. margin: 1% 3% 1% 0%;
  854. list-style-type: none;
  855. }
  856.  
  857. .topics-list li a {
  858. border-radius: 15px;
  859. padding: 20px 15px;
  860. }
  861.  
  862. .topics-list li:nth-child(2n),
  863. .topics-list li:last-child {
  864. margin-right: 3%;
  865. }
  866.  
  867. .topics-list li:nth-child(3n),
  868. .topics-list li:last-child {
  869. margin-right: 0;
  870. }
  871.  
  872. .topics-head {
  873. margin-bottom: 0px;
  874. }
  875.  
  876. .topics-list-text {
  877. padding: 5px;
  878. font-size: 16px;
  879. line-height: 1.2;
  880. }
  881.  
  882. .topics-list-day {
  883. font-size: 18px;
  884. padding: 3px 5px;
  885. /*
  886.   width: 50%;
  887.   */
  888. white-space: nowrap;
  889. }
  890.  
  891.  
  892. .category li {
  893. width: 23%;
  894. text-align: center;
  895. margin: 0 0.5%;
  896. }
  897.  
  898. .topics-category {
  899. font-size: 13px;
  900. /* padding: 3px 5px; */
  901. border-radius: 20px;
  902. font-weight: 900;
  903. letter-spacing: 0.05px;
  904. width: 49%;
  905. white-space: nowrap;
  906. }
  907.  
  908. .topics-category-main {
  909. font-size: 14px;
  910. /* padding: 3px 5px; */
  911. border-radius: 20px;
  912. font-weight: 900;
  913. letter-spacing: 0.05px;
  914. width: 49%;
  915. white-space: nowrap;
  916. }
  917.  
  918. .topics-list-thumb-inner img {
  919. width: 90%;
  920. height: auto;
  921. border-radius: 5px;
  922. }
  923.  
  924.  
  925.  
  926.  
  927. /* twitter */
  928. #twitter {
  929. background: url('../img/bg-ami-g.png') repeat center top #f3f7fa;
  930. margin: 0 auto;
  931. padding: 50px 0;
  932. text-align: center;
  933. width: 100%;
  934. }
  935.  
  936. #twitter h3 {
  937. font-size: 2.0rem;
  938. padding-bottom: 20px;
  939. color: #fff;
  940. text-shadow: 0 2px 3px rgba(0, 0, 0, .5);
  941. }
  942.  
  943. #twitter a {
  944. color: #333;
  945. }
  946.  
  947. #tw {
  948. background: #ccc;
  949. width: 60%;
  950. margin: 0 auto;
  951. }
  952.  
  953. .tw-box iframe {
  954. width: 100%;
  955. height: 100%;
  956. border: none;
  957. /* display:block; */
  958. background: #fff;
  959. max-width: 1200px !important;
  960. }
  961.  
  962. .tw-link {
  963. padding: 10px;
  964. font-size: 1.2rem;
  965. font-weight: 700;
  966. text-align: center;
  967. }
  968.  
  969. .tw-link a:hover {
  970. opacity: 0.6;
  971. }
  972.  
  973. .tw-box {
  974. /* width: 520px; */
  975. /* margin: 30px auto; */
  976. }
  977.  
  978. /* バナー/SNS */
  979. .top-sns-bnr {
  980. max-width: 450px;
  981. }
  982.  
  983. .top-sns-bnr li img {
  984. width: auto;
  985. border-radius: 50%;
  986. box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
  987. }
  988.  
  989. .info {
  990. width: 100%;
  991. text-align: center;
  992. padding: 20px 0 50px;
  993. }
  994.  
  995. .info img {
  996. width: auto;
  997. height: auto;
  998. }
  999.  
  1000. .bnr {
  1001. width: 60%;
  1002. margin: 30px auto 50px;
  1003. display: flex;
  1004. flex-wrap: wrap;
  1005. justify-content: center;
  1006. }
  1007.  
  1008. .bnr li {
  1009. padding: 10px 20px;
  1010. }
  1011.  
  1012.  
  1013. .bnr img {
  1014. width: auto;
  1015. }
  1016. }
  1017.  

タグ:

+ タグ編集
  • タグ:
最終更新:2022年03月24日 18:51