@charset "utf-8"; /* CSS Document */ /* 下部フロートメニュー */ .follow-menu-wrapper{ position: fixed; transition: all 0.3s ease 0s; left: 0; right:0; margin-left: auto; margin-right: auto; width: 100%; max-width: 1000px; z-index: 999; bottom: -150px; } .follow-menu-wrapper.follow-menu-on{ bottom: -1px; } .follow-menu-wrapper.follow-menu-off{ bottom: -150px; transition: all 0.3s ease 0s; } .follow-menu-wrapper ul{ display: flex; } .follow-menu-wrapper ul li{ width: 33.3%; text-align: center; font-size: 18px; line-height: 1; font-weight: 600; } .follow-menu-wrapper ul li a span{ display: inline-block; vertical-align: middle; line-height: 1; } .follow-menu-wrapper ul li:nth-child(1) a{ color: #000000; background: #ffe600; display: block; width: 100%; padding-top: 35px; padding-bottom: 35px; } .follow-menu-wrapper ul li:nth-child(1) .icon{ width: 14px; margin-left: 3px; } .follow-menu-wrapper ul li:nth-child(2) a{ color: #fff; background: #303030; display: block; width: 100%; padding-top: 35px; padding-bottom: 35px; } .follow-menu-wrapper ul li:nth-child(2) .icon{ width: 20px; margin-left: 3px; } .follow-menu-wrapper ul li:nth-child(3) a{ color: #fff; background: #0099ff; display: block; width: 100%; padding-top: 35px; padding-bottom: 35px; } .follow-menu-wrapper ul li:nth-child(3) .icon{ width: 20px; margin-left: 3px; } ul { list-style: none; margin: 0; padding: 0; } img { max-width: 100%; } @media only screen and (max-width : 768px) { .follow-menu-wrapper.follow-menu-on{ bottom: 0; } .follow-menu-wrapper.follow-menu-off{ bottom: -120px; } .follow-menu-wrapper ul{ display: flex; } .follow-menu-wrapper ul li{ width: 33.3%; text-align: center; font-size: 3.3vw; line-height: 1.75; font-weight: 600; } .follow-menu-wrapper ul li a span{ display: block; text-align: center; line-height: 1.4; } .follow-menu-wrapper ul li:nth-child(1) a{ padding-top: 3vw; padding-bottom: 3vw; } .follow-menu-wrapper ul li:nth-child(1) .icon{ width:3vw; margin-left: auto; margin-right: auto; } .follow-menu-wrapper ul li:nth-child(2) a{ padding-top: 3vw; padding-bottom: 3vw; } .follow-menu-wrapper ul li:nth-child(2) .icon{ width:4vw; margin-left: auto; margin-right: auto; } .follow-menu-wrapper ul li:nth-child(3) a{ padding-top: 3vw; padding-bottom: 3vw; } .follow-menu-wrapper ul li:nth-child(3) .icon{ width:4vw; margin-left: auto; margin-right: auto;} }