まとめ @ ウィキ
まとめ @ ウィキ

portal > css > style.css' 

  1. @charset "utf-8";
  2.  
  3. @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap');
  4. @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
  5.  
  6.  
  7. /* layout */
  8.  
  9. body,
  10. body.appear {
  11.     font-size: 1rem;
  12.     line-height: 1.85;
  13.     letter-spacing: 0.05em;
  14.     background: url(../img/bg-footer-sp.png) no-repeat center bottom / contain, url(../img/bg-top-sp.png) no-repeat center top / contain, url(../img/star-ring.png) no-repeat center top, url(../img/star.gif) repeat center top, linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 65%), url(../img/bg-line.png), linear-gradient(80deg, rgba(0, 183, 238, 0.7) 0%, rgba(245, 120, 197, 0) 45%, rgba(245, 120, 197, 0) 65%, rgba(255, 255, 0, 0.7) 100%), linear-gradient(180deg, rgba(245, 120, 197, 1) 5%, rgba(245, 120, 197, 0) 25%, rgba(245, 120, 197, 0) 80%, rgba(245, 120, 197, 1) 100%), url(../img/bg.jpg), #fff;
  15.     box-sizing: border-box;
  16.     animation: fadeIn 2s ease 0s 1 normal;
  17.     -webkit-animation: fadeIn 2s ease 0s 1 normal
  18. }
  19.  
  20. @keyframes fadeIn {
  21.     0% {
  22.         opacity: 0
  23.     }
  24.  
  25.     100% {
  26.         opacity: 1
  27.     }
  28. }
  29.  
  30. @-webkit-keyframes fadeIn {
  31.     0% {
  32.         opacity: 0
  33.     }
  34.  
  35.     100% {
  36.         opacity: 1
  37.     }
  38. }
  39.  
  40. .pc {
  41.     display: none !important;
  42. }
  43.  
  44. .tb {
  45.     display: none !important;
  46. }
  47.  
  48. .sp {
  49.     display: block !important;
  50. }
  51.  
  52. * {
  53.     box-sizing: border-box;
  54. }
  55.  
  56. .box {
  57.     width: 98vw;
  58.     padding: 3.125vw;
  59.     margin: 0 auto 5.333333333vw auto;
  60.     color: #ff339a;
  61.     box-sizing: border-box;
  62. }
  63.  
  64. h1 {
  65.     font-size: 1.2rem;
  66. }
  67.  
  68. h2 {
  69.     text-align: center;
  70. }
  71.  
  72. small {
  73.     color: #fff;
  74.     display: block;
  75.     text-align: center;
  76. }
  77.  
  78. #header {
  79.     width: 100%;
  80.     /* background:#333; */
  81.     text-align: center;
  82. }
  83.  
  84. .heading {
  85.     position: relative;
  86.     padding-top: 1.33333333vw;
  87.     padding-bottom: 13.33333333vw;
  88.     font-size: 6.666666667vw;
  89.     text-align: center;
  90.     font-family: 'Noto Serif JP', serif;
  91. }
  92.  
  93. .heading span {
  94.     position: relative;
  95.     z-index: 2;
  96.     text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
  97. }
  98.  
  99. .heading::before {
  100.     content: attr(data-en);
  101.     position: absolute;
  102.     top: -6.6666666vw;
  103.     left: 50%;
  104.     transform: translateX(-50%);
  105.     color: rgba(255, 255, 255, 0.5);
  106.     font-size: 11vw;
  107.     z-index: 1;
  108.     font-family: 'Noto Serif JP', serif;
  109.     width: 100%;
  110. }
  111.  
  112. .h-ichigo::after {
  113.     content: '';
  114.     position: absolute;
  115.     bottom: 6.666666667vw;
  116.     left: 50%;
  117.     width: 45px;
  118.     height: 28px;
  119.     background-image: url(../img/icon-ichigo.png);
  120.     background-size: contain;
  121.     text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  122.     transform: translateX(-50%);
  123.     z-index: 2;
  124. }
  125.  
  126. .h-akari::after {
  127.     content: '';
  128.     position: absolute;
  129.     bottom: 6.666666667vw;
  130.     left: 50%;
  131.     width: 45px;
  132.     height: 28px;
  133.     background-image: url(../img/icon-akari.png);
  134.     background-size: contain;
  135.     text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  136.     transform: translateX(-50%);
  137.     z-index: 2;
  138. }
  139.  
  140. .h-yume::after {
  141.     content: '';
  142.     position: absolute;
  143.     bottom: 6.666666667vw;
  144.     left: 50%;
  145.     width: 45px;
  146.     height: 28px;
  147.     background-image: url(../img/icon-yume.png);
  148.     background-size: contain;
  149.     text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  150.     transform: translateX(-50%);
  151.     z-index: 2;
  152. }
  153.  
  154. .h-aine::after {
  155.     content: '';
  156.     position: absolute;
  157.     bottom: 6.666666667vw;
  158.     left: 50%;
  159.     width: 45px;
  160.     height: 28px;
  161.     background-image: url(../img/icon-aine.png);
  162.     background-size: contain;
  163.     text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  164.     transform: translateX(-50%);
  165.     z-index: 2;
  166. }
  167.  
  168. .h-mio::after {
  169.     content: '';
  170.     position: absolute;
  171.     bottom: 6.666666667vw;
  172.     left: 50%;
  173.     width: 45px;
  174.     height: 28px;
  175.     background-image: url(../img/icon-mio.png);
  176.     background-size: contain;
  177.     text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  178.     transform: translateX(-50%);
  179.     z-index: 2;
  180. }
  181.  
  182. .h-raki::after {
  183.     content: '';
  184.     position: absolute;
  185.     bottom: 6.666666667vw;
  186.     left: 50%;
  187.     width: 45px;
  188.     height: 28px;
  189.     background-image: url(../img/icon-raki.png);
  190.     background-size: contain;
  191.     text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  192.     transform: translateX(-50%);
  193.     z-index: 2;
  194. }
  195.  
  196. .h-mao::after {
  197.     content: '';
  198.     position: absolute;
  199.     bottom: 6.666666667vw;
  200.     left: 50%;
  201.     width: 45px;
  202.     height: 28px;
  203.     background-image: url(../img/icon-mao.png);
  204.     background-size: contain;
  205.     text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  206.     transform: translateX(-50%);
  207.     z-index: 2;
  208. }
  209.  
  210.  
  211. section {
  212.     padding: 100px 30px;
  213. }
  214.  
  215. #footer {
  216.     padding: 18vw 3vw 5vw;
  217.     width: 100%;
  218.     margin: 0 auto;
  219.     text-align: center;
  220.     bottom: 0;
  221. }
  222.  
  223. address {
  224.     color: #e63296;
  225.     display: block;
  226.     text-align: center;
  227.     font-style: normal;
  228.     font-size: 2.4vw;
  229. }
  230.  
  231. address a {
  232.     color: #e63296;
  233.     text-decoration: none;
  234. }
  235.  
  236. .bnp img {
  237.     width: 150px;
  238.     height: auto;
  239.     padding: 20px 0;
  240. }
  241.  
  242. img {
  243.     width: 100%;
  244.     height: auto;
  245. }
  246.  
  247. a:hover {
  248.     opacity: 0.6;
  249. }
  250.  
  251. /* fadeUp */
  252.  
  253. .fadeUp {
  254.     animation-name: fadeUpAnime;
  255.     animation-duration: 1.0s;
  256.     animation-fill-mode: forwards;
  257.     animation-timing-function: ease-out;
  258.     opacity: 0;
  259. }
  260.  
  261. @keyframes fadeUpAnime {
  262.     from {
  263.         opacity: 0;
  264.         transform: translateY(100px);
  265.     }
  266.  
  267.     to {
  268.         opacity: 1;
  269.         transform: translateY(0);
  270.     }
  271. }
  272.  
  273. .fadeUpTrigger {
  274.     opacity: 0;
  275. }
  276.  
  277.  
  278. /* navi */
  279. @media only screen and (max-width:559px) {
  280.  
  281.     #g-nav {
  282.         position: fixed;
  283.         z-index: -1;
  284.         opacity: 0;
  285.         top: 0;
  286.         width: 100%;
  287.         height: 100vh;
  288.         background: url(../img/bg-line.png), url(../img/bg-dot.png), radial-gradient(circle, rgba(245, 120, 197, 0) 75%, rgba(245, 120, 197, 1) 90%), url(../img/bg.jpg), #f578c5;
  289.         transition: all 0.3s;
  290.     }
  291.  
  292.     #g-nav.panelactive {
  293.         opacity: 1;
  294.         z-index: 999;
  295.     }
  296.  
  297.     #g-nav.panelactive #g-nav-list {
  298.         position: fixed;
  299.         z-index: 999;
  300.         width: 100%;
  301.         height: 100vh;
  302.         overflow: auto;
  303.         -webkit-overflow-scrolling: touch;
  304.     }
  305.  
  306.     /*NAV*/
  307.     #g-nav ul {
  308.         position: absolute;
  309.         z-index: 999;
  310.         top: 50%;
  311.         left: 50%;
  312.         transform: translate(-50%, -50%);
  313.     }
  314.  
  315.     #g-nav li {
  316.         list-style: none;
  317.         text-align: center;
  318.         white-space: nowrap;
  319.         position: relative;
  320.     }
  321.  
  322.     #g-nav li a {
  323.         text-decoration: none;
  324.         padding: 4vw 4vw 7vw;
  325.         display: block;
  326.         text-transform: uppercase;
  327.         letter-spacing: 0.1em;
  328.         font-weight: bold;
  329.         color: #ff339a;
  330.         font-family: 'Noto Serif JP', serif;
  331.         text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
  332.         font-weight: 700;
  333.         font-size: 5vw;
  334.     }
  335.  
  336.     #g-nav .top-title {
  337.         font-family: 'Noto Serif JP', serif;
  338.         text-shadow: 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a;
  339.         color: #fff;
  340.         font-weight: 700;
  341.         font-size: 16px;
  342.         padding: 10px 0 25px;
  343.     }
  344.  
  345. }
  346.  
  347. @media screen and (min-width:560px) and (max-width:960px) {
  348.     #g-nav {
  349.         position: fixed;
  350.         z-index: -1;
  351.         opacity: 0;
  352.         top: 0;
  353.         width: 100%;
  354.         height: 100vh;
  355.         background: url(../img/bg-line.png), url(../img/bg-dot.png), radial-gradient(circle, rgba(245, 120, 197, 0) 75%, rgba(245, 120, 197, 1) 90%), url(../img/bg.jpg), #f578c5;
  356.         transition: all 0.3s;
  357.     }
  358.  
  359.     #g-nav.panelactive {
  360.         opacity: 1;
  361.         z-index: 999;
  362.     }
  363.  
  364.     #g-nav.panelactive #g-nav-list {
  365.         position: fixed;
  366.         z-index: 999;
  367.         width: 100%;
  368.         height: 100vh;
  369.         overflow: auto;
  370.         -webkit-overflow-scrolling: touch;
  371.     }
  372.  
  373.     /*NAV*/
  374.     #g-nav ul {
  375.         position: absolute;
  376.         z-index: 999;
  377.         top: 50%;
  378.         left: 50%;
  379.         transform: translate(-50%, -50%);
  380.     }
  381.  
  382.     #g-nav li {
  383.         list-style: none;
  384.         text-align: center;
  385.         white-space: nowrap;
  386.         position: relative;
  387.     }
  388.  
  389.     #g-nav li a {
  390.         text-decoration: none;
  391.         padding: 2vw 1vw 3vw;
  392.         display: block;
  393.         text-transform: uppercase;
  394.         letter-spacing: 0.1em;
  395.         font-weight: bold;
  396.         color: #ff339a;
  397.         font-family: 'Noto Serif JP', serif;
  398.         text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
  399.         font-weight: 700;
  400.         font-size: 2.4vw;
  401.     }
  402.  
  403.     #g-nav .top-title {
  404.         font-family: 'Noto Serif JP', serif;
  405.         text-shadow: 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a;
  406.         color: #fff;
  407.         font-weight: 700;
  408.         font-size: 2.4vw;
  409.         padding: 10px 0 25px;
  410.     }
  411. }
  412.  
  413.  
  414. @media only screen and (max-width:960px) {
  415.  
  416.     #g-nav li.ichigo a::before {
  417.         content: '';
  418.         display: inline-block;
  419.         width: 45px;
  420.         height: 28px;
  421.         background-image: url(../img/icon-ichigo.png);
  422.         background-size: contain;
  423.         top: -5%;
  424.         left: 50%;
  425.         transform: translateX(-50%);
  426.         position: absolute;
  427.     }
  428.  
  429.     #g-nav li.akari a::before {
  430.         content: '';
  431.         display: inline-block;
  432.         width: 45px;
  433.         height: 28px;
  434.         background-image: url(../img/icon-akari.png);
  435.         background-size: contain;
  436.         vertical-align: middle;
  437.         top: -10%;
  438.         left: 50%;
  439.         transform: translateX(-50%);
  440.         position: absolute;
  441.     }
  442.  
  443.     #g-nav li.yume a::before {
  444.         content: '';
  445.         display: inline-block;
  446.         width: 45px;
  447.         height: 28px;
  448.         background-image: url(../img/icon-yume.png);
  449.         background-size: contain;
  450.         top: -10%;
  451.         left: 50%;
  452.         transform: translateX(-50%);
  453.         position: absolute;
  454.     }
  455.  
  456.     #g-nav li.aine a::before {
  457.         content: '';
  458.         display: inline-block;
  459.         width: 45px;
  460.         height: 28px;
  461.         background-image: url(../img/icon-aine.png);
  462.         background-size: contain;
  463.         top: -10%;
  464.         left: 50%;
  465.         transform: translateX(-50%);
  466.         position: absolute;
  467.     }
  468.  
  469.     #g-nav li.mio a::before {
  470.         content: '';
  471.         display: inline-block;
  472.         width: 45px;
  473.         height: 28px;
  474.         background-image: url(../img/icon-mio.png);
  475.         background-size: contain;
  476.         top: -10%;
  477.         left: 50%;
  478.         transform: translateX(-50%);
  479.         position: absolute;
  480.     }
  481.  
  482.     #g-nav li.raki a::before {
  483.         content: '';
  484.         display: inline-block;
  485.         width: 45px;
  486.         height: 28px;
  487.         background-image: url(../img/icon-raki.png);
  488.         background-size: contain;
  489.         top: -10%;
  490.         left: 50%;
  491.         transform: translateX(-50%);
  492.         position: absolute;
  493.     }
  494.  
  495.     #g-nav li.mao a::before {
  496.         content: '';
  497.         display: inline-block;
  498.         width: 45px;
  499.         height: 28px;
  500.         background-image: url(../img/icon-mao.png);
  501.         background-size: contain;
  502.         top: -10%;
  503.         left: 50%;
  504.         transform: translateX(-50%);
  505.         position: absolute;
  506.     }
  507. }
  508.  
  509. /*========= ボタンのためのCSS ===============*/
  510. .openbtn {
  511.     position: fixed;
  512.     z-index: 9999;
  513.     /*ボタンを最前面に*/
  514.     top: 10px;
  515.     right: 10px;
  516.     cursor: pointer;
  517.     width: 50px;
  518.     height: 50px;
  519.     background: linear-gradient(180deg, rgba(245, 120, 197, 1) 0%, rgba(246, 167, 215, 1) 100%);
  520.     border-radius: 30px;
  521.     filter: drop-shadow(0px 10px 36px rgba(0, 0, 0, 0.3));
  522. }
  523.  
  524. /*×に変化*/
  525. .openbtn span {
  526.     display: inline-block;
  527.     transition: all .4s;
  528.     position: absolute;
  529.     left: 14px;
  530.     height: 3px;
  531.     border-radius: 2px;
  532.     background-color: #fff;
  533.     width: 45%;
  534. }
  535.  
  536. .openbtn span:nth-of-type(1) {
  537.     top: 15px;
  538. }
  539.  
  540. .openbtn span:nth-of-type(2) {
  541.     top: 23px;
  542. }
  543.  
  544. .openbtn span:nth-of-type(3) {
  545.     top: 31px;
  546. }
  547.  
  548. .openbtn.active span:nth-of-type(1) {
  549.     top: 18px;
  550.     left: 18px;
  551.     transform: translateY(6px) rotate(-45deg);
  552.     width: 30%;
  553. }
  554.  
  555. .openbtn.active span:nth-of-type(2) {
  556.     opacity: 0;
  557. }
  558.  
  559. .openbtn.active span:nth-of-type(3) {
  560.     top: 30px;
  561.     left: 18px;
  562.     transform: translateY(-6px) rotate(45deg);
  563.     width: 30%;
  564. }
  565.  
  566. /*page-top*/
  567. #page-top a{
  568. 	display: flex;
  569. 	justify-content:center;
  570. 	align-items:center;
  571. 	background: url("../img/pagetop_1.png") no-repeat center;
  572.     background-size: contain;
  573. 	width: 100px;
  574. 	height: 100px;
  575. 	color: #fff;
  576. 	text-align: center;
  577. 	text-transform: uppercase; 
  578. 	text-decoration: none;
  579. 	font-size:0.6rem;
  580. 	transition:all 0.3s;
  581. }
  582.  
  583. #page-top {
  584. 	position: fixed;
  585. 	right: 10px;
  586. 	bottom:10px;
  587. 	z-index: 2;
  588. 	opacity: 0;
  589. 	transform: translateY(100px);
  590. }
  591.  
  592. #page-top.UpMove{
  593. 	animation: UpAnime 0.5s forwards;
  594. }
  595. @keyframes UpAnime{
  596.   from {
  597.     opacity: 0;
  598. 	transform: translateY(100px);
  599.   }
  600.   to {
  601.     opacity: 1;
  602. 	transform: translateY(0);
  603.   }
  604. }
  605.  
  606. #page-top.DownMove{
  607. 	animation: DownAnime 0.5s forwards;
  608. }
  609. @keyframes DownAnime{
  610.   from {
  611.   	opacity: 1;
  612. 	transform: translateY(0);
  613.   }
  614.   to {
  615.   	opacity: 1;
  616. 	transform: translateY(100px);
  617.   }
  618. }
  619.  
  620. @media screen and (min-width:560px) and (max-width:960px) {
  621.  
  622.     .tb {
  623.         display: block !important;
  624.     }
  625.  
  626.     .sp {
  627.         display: none !important;
  628.     }
  629.  
  630.     body,
  631.     body.appear {
  632.         background: url(../img/bg-footer.png) no-repeat center bottom, url(../img/bg-top-sp.png) no-repeat center -400px / contain, url(../img/star-ring.png) no-repeat center top, url(../img/star.gif) repeat center top, linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 65%), url(../img/bg-line.png), linear-gradient(25deg, rgba(0, 183, 238, 0.7) 0%, rgba(245, 120, 197, 0) 45%, rgba(245, 120, 197, 0) 65%, rgba(255, 255, 0, 0.7) 100%), linear-gradient(180deg, rgba(245, 120, 197, 1) 5%, rgba(245, 120, 197, 0) 25%, rgba(245, 120, 197, 0) 80%, rgba(245, 120, 197, 1) 100%), url(../img/bg.jpg), #fff;
  633.     }
  634.  
  635.     .box {
  636.         width: 98vw;
  637.         padding: 3.125vw;
  638.         margin: 0 auto 3.125vw auto;
  639.         color: #ff339a;
  640.         box-sizing: border-box;
  641.     }
  642.  
  643.     address {
  644.         color: #e63296;
  645.         display: block;
  646.         text-align: center;
  647.         font-style: normal;
  648.         font-size: 1.2vw;
  649.     }
  650.  
  651.     .heading {
  652.         position: relative;
  653.         padding-top: 20px;
  654.         padding-bottom: 40px;
  655.         font-size: 2.0rem;
  656.         text-align: center;
  657.         font-family: 'Noto Serif JP', serif;
  658.     }
  659.  
  660.     .heading span {
  661.         position: relative;
  662.         z-index: 2;
  663.     }
  664.  
  665.     .heading::before {
  666.         content: attr(data-en);
  667.         position: absolute;
  668.         top: -30%;
  669.         left: 50%;
  670.         transform: translateX(-50%);
  671.         color: rgba(255, 255, 255, 0.5);
  672.         font-size: 3.6rem;
  673.         width: 80%;
  674.         z-index: 1;
  675.     }
  676.  
  677.     .h-ichigo::after {
  678.         content: '';
  679.         position: absolute;
  680.         bottom: 20px;
  681.         left: 50%;
  682.         width: 45px;
  683.         height: 28px;
  684.         background-image: url(../img/icon-ichigo.png);
  685.         background-size: contain;
  686.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  687.         transform: translateX(-50%);
  688.     }
  689.  
  690.     .h-akari::after {
  691.         content: '';
  692.         position: absolute;
  693.         bottom: 20px;
  694.         left: 50%;
  695.         width: 50px;
  696.         height: 28px;
  697.         background-image: url(../img/icon-akari.png);
  698.         background-size: contain;
  699.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  700.         transform: translateX(-50%);
  701.     }
  702.  
  703.     .h-yume::after {
  704.         content: '';
  705.         position: absolute;
  706.         bottom: 20px;
  707.         left: 50%;
  708.         width: 45px;
  709.         height: 28px;
  710.         background-image: url(../img/icon-yume.png);
  711.         background-size: contain;
  712.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  713.         transform: translateX(-50%);
  714.     }
  715.  
  716.     .h-aine::after {
  717.         content: '';
  718.         position: absolute;
  719.         bottom: 20px;
  720.         left: 50%;
  721.         width: 45px;
  722.         height: 28px;
  723.         background-image: url(../img/icon-aine.png);
  724.         background-size: contain;
  725.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  726.         transform: translateX(-50%);
  727.     }
  728.  
  729.     .h-mio::after {
  730.         content: '';
  731.         position: absolute;
  732.         bottom: 20px;
  733.         left: 50%;
  734.         width: 45px;
  735.         height: 28px;
  736.         background-image: url(../img/icon-mio.png);
  737.         background-size: contain;
  738.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  739.         transform: translateX(-50%);
  740.     }
  741.  
  742.     .h-raki::after {
  743.         content: '';
  744.         position: absolute;
  745.         bottom: 20px;
  746.         left: 50%;
  747.         width: 45px;
  748.         height: 28px;
  749.         background-image: url(../img/icon-raki.png);
  750.         background-size: contain;
  751.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  752.         transform: translateX(-50%);
  753.     }
  754.  
  755.     .h-mao::after {
  756.         content: '';
  757.         position: absolute;
  758.         bottom: 20px;
  759.         left: 50%;
  760.         width: 45px;
  761.         height: 28px;
  762.         background-image: url(../img/icon-mao.png);
  763.         background-size: contain;
  764.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  765.         transform: translateX(-50%);
  766.     }
  767. }
  768.  
  769. /* PC */
  770. @media only screen and (min-width:960px) {
  771.  
  772.     /* layout */
  773.     img {
  774.         width: auto;
  775.     }
  776.  
  777.     body,
  778.     body.appear {
  779.         background: url(../img/bg-footer.png) no-repeat center bottom, url(../img/bg-top.png) no-repeat center -200px, url(../img/star-ring.png) no-repeat center top, url(../img/star.gif) repeat center top, linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 65%), url(../img/bg-line.png), linear-gradient(25deg, rgba(0, 183, 238, 0.7) 0%, rgba(245, 120, 197, 0) 45%, rgba(245, 120, 197, 0) 65%, rgba(255, 255, 0, 0.7) 100%), linear-gradient(180deg, rgba(245, 120, 197, 1) 5%, rgba(245, 120, 197, 0) 25%, rgba(245, 120, 197, 0) 80%, rgba(245, 120, 197, 1) 100%), url(../img/bg.jpg), #fff;
  780.     }
  781.  
  782.     .pc {
  783.         display: block !important;
  784.     }
  785.  
  786.     .tb {
  787.         display: none !important;
  788.     }
  789.  
  790.     .sp {
  791.         display: none !important;
  792.     }
  793.  
  794.     ul {
  795.         list-style-type: none;
  796.     }
  797.  
  798.     .top-mv {
  799.         display: flex;
  800.         flex-wrap: wrap;
  801.         flex-direction: row-reverse;
  802.         /* text-align: center; */
  803.     }
  804.  
  805.     .box {
  806.         width: 80vw;
  807.         margin: 0 auto;
  808.         padding: 0px 50px;
  809.         box-sizing: border-box;
  810.     }
  811.  
  812.     .box-inner {
  813.         max-width: 1280px;
  814.         margin: 0 auto 50px;
  815.     }
  816.  
  817.     .box-inner2 {
  818.         max-width: 800px;
  819.         margin: 0 auto;
  820.     }
  821.  
  822.     address {
  823.         color: #e63296;
  824.         display: block;
  825.         text-align: center;
  826.         font-style: normal;
  827.         font-size: 0.8rem;
  828.     }
  829.  
  830.     .heading {
  831.         position: relative;
  832.         padding-top: 30px;
  833.         padding-bottom: 50px;
  834.         font-size: 2.0rem;
  835.         text-align: center;
  836.         font-family: 'Noto Serif JP', serif;
  837.     }
  838.  
  839.     .heading span {
  840.         position: relative;
  841.         z-index: 2;
  842.     }
  843.  
  844.     .heading::before {
  845.         content: attr(data-en);
  846.         position: absolute;
  847.         top: -15px;
  848.         left: 50%;
  849.         transform: translateX(-50%);
  850.         color: rgba(255, 255, 255, 0.5);
  851.         font-size: 4.0rem;
  852.  
  853.         z-index: 1;
  854.     }
  855.  
  856.     .h-ichigo::after {
  857.         content: '';
  858.         position: absolute;
  859.         bottom: 20px;
  860.         left: 50%;
  861.         width: 45px;
  862.         height: 28px;
  863.         background-image: url(../img/icon-ichigo.png);
  864.         background-size: contain;
  865.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  866.         transform: translateX(-50%);
  867.     }
  868.  
  869.     .h-akari::after {
  870.         content: '';
  871.         position: absolute;
  872.         bottom: 20px;
  873.         left: 50%;
  874.         width: 45px;
  875.         height: 28px;
  876.         background-image: url(../img/icon-akari.png);
  877.         background-size: contain;
  878.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  879.         transform: translateX(-50%);
  880.     }
  881.  
  882.     .h-yume::after {
  883.         content: '';
  884.         position: absolute;
  885.         bottom: 20px;
  886.         left: 50%;
  887.         width: 45px;
  888.         height: 28px;
  889.         background-image: url(../img/icon-yume.png);
  890.         background-size: contain;
  891.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  892.         transform: translateX(-50%);
  893.     }
  894.  
  895.     .h-aine::after {
  896.         content: '';
  897.         position: absolute;
  898.         bottom: 20px;
  899.         left: 50%;
  900.         width: 45px;
  901.         height: 28px;
  902.         background-image: url(../img/icon-aine.png);
  903.         background-size: contain;
  904.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  905.         transform: translateX(-50%);
  906.     }
  907.  
  908.     .h-mio::after {
  909.         content: '';
  910.         position: absolute;
  911.         bottom: 20px;
  912.         left: 50%;
  913.         width: 45px;
  914.         height: 28px;
  915.         background-image: url(../img/icon-mio.png);
  916.         background-size: contain;
  917.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  918.         transform: translateX(-50%);
  919.     }
  920.  
  921.     .h-raki::after {
  922.         content: '';
  923.         position: absolute;
  924.         bottom: 20px;
  925.         left: 50%;
  926.         width: 45px;
  927.         height: 28px;
  928.         background-image: url(../img/icon-raki.png);
  929.         background-size: contain;
  930.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  931.         transform: translateX(-50%);
  932.     }
  933.  
  934.     .h-mao::after {
  935.         content: '';
  936.         position: absolute;
  937.         bottom: 20px;
  938.         left: 50%;
  939.         width: 45px;
  940.         height: 28px;
  941.         background-image: url(../img/icon-mao.png);
  942.         background-size: contain;
  943.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  944.         transform: translateX(-50%);
  945.     }
  946.  
  947.     .h-topics::after {
  948.         content: '';
  949.         position: absolute;
  950.         bottom: 20px;
  951.         left: 50%;
  952.         width: 100px;
  953.         height: 28px;
  954.         background-image: url(../img/icon-topics.png);
  955.         background-size: contain;
  956.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  957.         transform: translateX(-50%);
  958.     }
  959.  
  960.     .h-movie::after {
  961.         content: '';
  962.         position: absolute;
  963.         bottom: 20px;
  964.         left: 50%;
  965.         width: 100px;
  966.         height: 28px;
  967.         background-image: url(../img/icon-movie.png);
  968.         background-size: contain;
  969.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  970.         transform: translateX(-50%);
  971.     }
  972.  
  973.     .h-tw::after {
  974.         content: '';
  975.         position: absolute;
  976.         bottom: 20px;
  977.         left: 50%;
  978.         width: 150px;
  979.         height: 28px;
  980.         background-image: url(../img/icon-tw.png);
  981.         background-size: contain;
  982.         text-shadow: 1px 2px 3px rgba(135, 54, 78, 0.3);
  983.         transform: translateX(-50%);
  984.     }
  985.  
  986.  
  987.     #footer {
  988.         padding: 130px 20px 25px;
  989.         width: 100%;
  990.         margin: 0 auto;
  991.         text-align: center;
  992.     }
  993.  
  994.     /* navi */
  995.  
  996.     /*ナビゲーション*/
  997.     #g-nav {
  998.         margin-bottom: 10px;
  999.     }
  1000.  
  1001.     #g-nav ul {
  1002.         max-width: 960px;
  1003.         display: flex;
  1004.         flex-wrap: nowrap;
  1005.         justify-content: center;
  1006.         margin: 0 auto;
  1007.     }
  1008.  
  1009.     #g-nav li {
  1010.         list-style: none;
  1011.         text-align: center;
  1012.         /* width: 16%; */
  1013.         margin: 0 0.5%;
  1014.     }
  1015.  
  1016.     #g-nav li.ichigo a::before {
  1017.         content: '';
  1018.         display: inline-block;
  1019.         width: 45px;
  1020.         height: 28px;
  1021.         background-image: url(../img/icon-ichigo.png);
  1022.         background-size: contain;
  1023.         vertical-align: middle;
  1024.     }
  1025.  
  1026.     #g-nav li.akari a::before {
  1027.         content: '';
  1028.         display: inline-block;
  1029.         width: 45px;
  1030.         height: 28px;
  1031.         background-image: url(../img/icon-akari.png);
  1032.         background-size: contain;
  1033.         vertical-align: middle;
  1034.     }
  1035.  
  1036.     #g-nav li.yume a::before {
  1037.         content: '';
  1038.         display: inline-block;
  1039.         width: 45px;
  1040.         height: 28px;
  1041.         background-image: url(../img/icon-yume.png);
  1042.         background-size: contain;
  1043.         vertical-align: middle;
  1044.     }
  1045.  
  1046.     #g-nav li.aine a::before {
  1047.         content: '';
  1048.         display: inline-block;
  1049.         width: 45px;
  1050.         height: 28px;
  1051.         background-image: url(../img/icon-aine.png);
  1052.         background-size: contain;
  1053.         vertical-align: middle;
  1054.     }
  1055.  
  1056.     #g-nav li.mio a::before {
  1057.         content: '';
  1058.         display: inline-block;
  1059.         width: 45px;
  1060.         height: 28px;
  1061.         background-image: url(../img/icon-mio.png);
  1062.         background-size: contain;
  1063.         vertical-align: middle;
  1064.     }
  1065.  
  1066.     #g-nav li.raki a::before {
  1067.         content: '';
  1068.         display: inline-block;
  1069.         width: 45px;
  1070.         height: 28px;
  1071.         background-image: url(../img/icon-raki.png);
  1072.         background-size: contain;
  1073.         vertical-align: middle;
  1074.     }
  1075.  
  1076.     #g-nav li.mao a::before {
  1077.         content: '';
  1078.         display: inline-block;
  1079.         width: 45px;
  1080.         height: 28px;
  1081.         background-image: url(../img/icon-mao.png);
  1082.         background-size: contain;
  1083.         vertical-align: middle;
  1084.     }
  1085.  
  1086.  
  1087.     #g-nav li a {
  1088.         color: #ff339a;
  1089.         text-decoration: none;
  1090.         padding: 5px 5px;
  1091.         display: block;
  1092.         text-transform: uppercase;
  1093.         font-weight: bold;
  1094.         position: relative;
  1095.         font-size: 16px;
  1096.         font-family: 'Noto Serif JP', serif;
  1097.         text-shadow: 1px 2px 3px rgba(255, 255, 255, 0.8);
  1098.         font-weight: 700;
  1099.         white-space: nowrap;
  1100.     }
  1101.  
  1102.  
  1103.  
  1104.     #g-nav li a::after {
  1105.         position: absolute;
  1106.         bottom: -4px;
  1107.         left: 0;
  1108.         content: '';
  1109.         width: 100%;
  1110.         height: 2px;
  1111.         background: #ff339a;
  1112.         transform: scale(0, 1);
  1113.         transform-origin: center top;
  1114.         transition: transform .3s;
  1115.     }
  1116.  
  1117.     #g-nav li a:hover::after {
  1118.         transform: scale(1, 1);
  1119.     }
  1120.  
  1121.     .openbtn {
  1122.         display: none;
  1123.     }
  1124. }
  1125.  
  1126. /* secound */
  1127. body.secound {
  1128.     background: url(../img/bg-footer-sp.png) no-repeat center bottom / contain, url(../img/star-sp.png) repeat center -10vw / contain, url(../img/star.gif) repeat center top, linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 65%), url(../img/bg-line.png), linear-gradient(80deg, rgba(0, 183, 238, 0.7) 0%, rgba(245, 120, 197, 0) 45%, rgba(245, 120, 197, 0) 65%, rgba(255, 255, 0, 0.7) 100%), linear-gradient(180deg, rgba(245, 120, 197, 1) 5%, rgba(245, 120, 197, 0) 25%, rgba(245, 120, 197, 0) 80%, rgba(245, 120, 197, 1) 100%), url(../img/bg.jpg), #fff;
  1129. }
  1130.  
  1131. body.secound #header {
  1132.     background: linear-gradient(0deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.6) 31%, rgba(255, 51, 154, 0.8) 98%);
  1133. }
  1134.  
  1135. .secound .box-inner {
  1136.     min-height: 60vh;
  1137. }
  1138.  
  1139. .snd-header {
  1140.     display: flex;
  1141.     flex-wrap: nowrap;
  1142.     align-items: center;
  1143.     justify-content: left;
  1144.     margin: 0px auto;
  1145.     padding: 5px;
  1146. }
  1147.  
  1148. .secound header h2 {
  1149.     font-family: 'Noto Serif JP', serif;
  1150.     text-shadow: 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a;
  1151.     color: #fff;
  1152.     font-weight: 700;
  1153.     margin-top: -20px;
  1154.     font-size: 3.733333333vw;
  1155.     text-align: left;
  1156.     padding-left: 3.333333333vw;
  1157. }
  1158.  
  1159. .secound header .snd-logo {
  1160.     margin-left: 4vw;
  1161. }
  1162.  
  1163. .secound header .snd-logo img {
  1164.     width: 15vw;
  1165. }
  1166.  
  1167. .secound header .snd-logo a {
  1168.     text-decoration: none;
  1169. }
  1170.  
  1171. @media screen and (min-width:768px) and (max-width:960px) {
  1172.     body.secound {
  1173.         background: url(../img/bg-footer.png) no-repeat center bottom, url(../img/star-sp.png) repeat center -10vw / contain, url(../img/star.gif) repeat center top, linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 65%), url(../img/bg-line.png), linear-gradient(80deg, rgba(0, 183, 238, 0.7) 0%, rgba(245, 120, 197, 0) 45%, rgba(245, 120, 197, 0) 65%, rgba(255, 255, 0, 0.7) 100%), linear-gradient(180deg, rgba(245, 120, 197, 1) 5%, rgba(245, 120, 197, 0) 25%, rgba(245, 120, 197, 0) 80%, rgba(245, 120, 197, 1) 100%), url(../img/bg.jpg), #fff;
  1174.     }
  1175.  
  1176.     .secound header h2 {
  1177.         font-family: 'Noto Serif JP', serif;
  1178.         text-shadow: 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a;
  1179.         color: #fff;
  1180.         font-weight: 700;
  1181.         margin-top: 0px;
  1182.         font-size: 24px;
  1183.         padding-left: 20px;
  1184.     }
  1185.  
  1186.     .secound header .snd-logo img {
  1187.         width: 10vw;
  1188.     }
  1189. }
  1190.  
  1191. /* PC */
  1192. @media only screen and (min-width:960px) {
  1193.     body.secound {
  1194.         background: url(../img/bg-footer.png) no-repeat center bottom, url(../img/star-ring.png) no-repeat center -180px, url(../img/star.gif) repeat center top, linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 65%), url(../img/bg-line.png), linear-gradient(25deg, rgba(0, 183, 238, 0.7) 0%, rgba(245, 120, 197, 0) 45%, rgba(245, 120, 197, 0) 65%, rgba(255, 255, 0, 0.7) 100%), linear-gradient(180deg, rgba(245, 120, 197, 1) 5%, rgba(245, 120, 197, 0) 25%, rgba(245, 120, 197, 0) 80%, rgba(245, 120, 197, 1) 100%), url(../img/bg.jpg), #fff;
  1195.     }
  1196.  
  1197.     body.secound #header {
  1198.         background: url(../img/star-ring.png) no-repeat center -180px, url(../img/star.gif) repeat center top, linear-gradient(0deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.8) 25%, rgba(255, 255, 255, 0.8) 35%, rgba(255, 51, 154, 0.8) 98%);
  1199.         padding-bottom: 20px;
  1200.     }
  1201.  
  1202.     .snd-header {
  1203.         display: flex;
  1204.         flex-wrap: wrap;
  1205.         align-items: center;
  1206.         justify-content: center;
  1207.         max-width: 960px;
  1208.         margin: 0px auto;
  1209.         padding: 5px;
  1210.     }
  1211.  
  1212.     .secound header h2 {
  1213.         font-family: 'Noto Serif JP', serif;
  1214.         text-shadow: 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a;
  1215.         color: #fff;
  1216.         font-weight: 700;
  1217.         margin-top: -30px;
  1218.         font-size: 24px;
  1219.         padding-left: 20px;
  1220.     }
  1221.  
  1222.     .secound header .snd-logo {
  1223.         margin-left: 0;
  1224.     }
  1225.  
  1226.     .secound header .snd-logo img {
  1227.         width: auto;
  1228.         height: 95px;
  1229.     }
  1230.  
  1231.     .secound header .snd-logo a {
  1232.         text-decoration: none;
  1233.     }
  1234. }
  1235.  

タグ：

+ タグ編集
  • タグ：
タグの更新に失敗しました
エラーが発生しました。ページを更新してください。
ページを更新
「style.css'」をウィキ内検索
最終更新：2022年03月24日 21:25