@charset "utf-8";
/* loading */
#splash {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
z-index: 9999999;
text-align: center;
}
#splash-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* splash */
body {
background: #fff;
}
body.appear {
/*
background: none;
*/
}
.splashbg1,
.splashbg2 {
display: block;
content: '';
position: fixed;
z-index: 99999;
width: 100%;
height: 100vh;
transform: scaleX(1);
background-color: #f578c5;/*伸びる背景色の設定*/
/*
top: 0;
*/
}
.splashbg1 {
bottom:50%;
}
.splashbg2{
top:50%;
}
body.appear .splashbg1,
body.appear .splashbg2 {
display: block;
}
body.appear .splashbg1 {
animation-name: PageAnime;
animation-duration: 1.6s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
content: "";
position: fixed;
width: 100%;
height: 100vh;
bottom: 50%;
left: 0;
transform: scaleY(1);
background: #f578c5;
}
@keyframes PageAnime {
0% {
transform-origin: top;
transform: scaleY(1);
}
100% {
transform-origin: top;
transform: scaleY(0);
}
}
body.appear .splashbg2 {
animation-name: PageAnime2;
animation-duration: 1.6s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
content: "";
position: fixed;
width: 100%;
height: 100vh;
top: 50%;
left: 0;
transform: scaleY(1);
background: #f578c5;
}
@keyframes PageAnime2 {
0% {
transform-origin: bottom;
transform: scaleY(1);
}
100% {
transform-origin: bottom;
transform: scaleY(0);
}
}
/* layout */
.top-mv {
width: 95vw;
margin: 2.666666667vw auto 5.333333333vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.top-mv .top-logo {
width: 46.66666667vw;
margin: 0 auto;
position: absolute;
top: 77vw;
z-index: +1;
}
.top-mv .top-key {
position: relative;
width: 100vw;
margin: 0 auto;
}
.top-mv .top-key p:not(:first-child) {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.animate__fadeInUp1{
-webkit-animation-name: fadeInUp1;
animation-name: fadeInUp1
}
@-webkit-keyframes fadeInUp1{
0%{ opacity: 0; -webkit-transform: translate3d(0, 3%, 0); transform: translate3d(0, 3%, 0)}
to{ opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0)}
}
@keyframes fadeInUp1{
0%{ opacity: 0; -webkit-transform: translate3d(0, 3%, 0); transform: translate3d(0, 3%, 0)}
to{ opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0)}
}
/* .top-title img {
margin: 6.25vw auto;
} */
/* navi */
.fadeUp {
animation-name: fadeUpAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeUpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time02 {
animation-delay: 0.2s;
}
.delay-time03 {
animation-delay: 0.3s;
}
.delay-time04 {
animation-delay: 0.4s;
}
.delay-time05 {
animation-delay: 0.5s;
}
.delay-time06 {
animation-delay: 0.6s;
}
.delay-time07 {
animation-delay: 0.7s;
}
.delay-time08 {
animation-delay: 0.8s;
}
.delay-time09 {
animation-delay: 0.9s;
}
.delay-time10 {
animation-delay: 1.0s;
}
.top-text {
font-family: 'Noto Serif JP', serif;
text-shadow: 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a;
color: #fff;
font-weight: 700;
font-size: 3.2vw;
padding: 4vw 0;
}
/* aikatsulink */
.btn-aikatsu-link {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.btn-aikatsu-link li {
list-style-type: none;
width: 33.3333%;
text-align: center;
}
/* slider */
.slider {
width: 100%;
margin: 0 auto;
/* box-shadow: 1px 2px 3px rgba(135,54,78,0.5); */
}
.slider img {
width: 100%;
height: auto;
}
.slider .slick-slide {
transform: scale(1);
}
.slick-prev,
.slick-next {
position: absolute;
top: 42%;
cursor: pointer;
outline: none;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
height: 15px;
width: 15px;
}
.slick-prev {
left: -1.5%;
transform: rotate(-135deg);
}
.slick-next {
right: -1.5%;
transform: rotate(45deg);
}
.slick-dots {
text-align: center;
margin: 20px 0 0 0;
}
.slick-dots li {
display: inline-block;
margin: 0 5px;
}
.slick-dots button {
color: transparent;
outline: none;
width: 20px;
height: 20px;
display: block;
border-radius: 50%;
background: #ccc;
}
.slick-dots .slick-active button {
background: #ff339a;
}
/* topics */
/* topics */
.category-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
margin-bottom: 3.125vw;
}
.category-list li {
width: 30%;
text-align: center;
margin: 1% 0.5%;
letter-spacing: 0.05px;
box-shadow: 0px 0px 25px rgba(255, 255, 255, 0.8);
border: 1px solid #fff;
border-radius: 20px;
}
.category-list li a {
text-decoration: none;
color: #fff;
display: block;
}
@media screen and (min-width: 768px) and (max-width: 959px) {
.category-list {
margin-bottom: 20px;
}
.category-list li {
width: 20%;
}
.category-list li a {
}
}
@media only screen and (min-width: 960px) {
.category-list {
margin-bottom: 1.5625vw;
}
.category-list li {
width: 13.9%;
margin: 1% 1px;
padding: 3px 5px;
}
.category-list li a {
}
}
.topics-list {
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-sizing: border-box;
}
.topics-list li {
width: 97%;
margin: 1vw 0vw;
list-style-type: none;
border-radius: 20px;
}
.topics-list li:nth-child(2n),
.topics-list li:last-child {
margin-right: 0;
}
.topics-list li a {
background: #fff;
border-radius: 3vw;
color: #7f632e;
box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.8);
height: 100%;
display: block;
text-decoration: none;
padding: 4% 3%;
text-align: center;
}
.topics-list li a:hover {
opacity: 0.6;
}
.topics-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 5vw;
width: 100%;
}
.topics-list-text {
padding: 1.5625vw;
font-size: 4vw;
text-align: left;
}
.topics-list-day {
font-size: 4.375vw;
color: #7f632e;
padding: 1.5625vw 5.625vw;
text-align: left;
width: 100%;
}
.topics-category {
font-size: 3vw;
/* padding: 0.9375vw 1.5625vw; */
border-radius: 5.333333333vw;
width: 48%;
color: #fff;
font-weight: 700;
margin-bottom: 1.5625vw;
}
.topics-category:first-child {
margin-bottom: 0;
}
.topics-c1 {
background: #ff994a;
}
.topics-c1 ~ .topics-c1 {
display: none;
}
.topics-c2 {
background: #78c22f;
}
.topics-c2 ~ .topics-c2 {
display: none;
}
.topics-c3 {
background: #56bea7;
}
.topics-c3 ~ .topics-c3 {
display: none;
}
.topics-c4 {
background: #53b3e1;
}
.topics-c4 ~ .topics-c4 {
display: none;
}
.topics-c5 {
background: #ce71c5;
}
.topics-c5 ~ .topics-c5 {
display: none;
}
.topics-c6 {
background: #ec72a7;
}
.topics-c6 ~ .topics-c6 {
display: none;
}
.topics-c7 {
background: #fcc800;
}
.topics-c7 ~ .topics-c7 {
display: none;
}
.topics-list-thumb-inner img {
width: 90%;
height: auto;
border-radius: 1vw;
}
/* PV */
.video-frame {
width: 100%;
height: auto;
margin: 0 auto;
padding: 10px;
border-radius: 10px;
background: linear-gradient(0deg, rgba(230, 30, 75, 1) 35%, rgba(230, 50, 150, 1) 65%);
box-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #fff;
}
.video-movie {
position: relative;
width: 100%;
padding-top: 56.25%;
margin: 0 auto;
}
.video-movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* twitter */
.tw-box iframe {
width: 100%;
height: 100%;
border: none;
background: #fff;
}
.tw-link {
padding: 10px;
font-size: 3.333333333vw;
font-weight: 700;
text-align: center;
}
.tw-link a {
text-decoration: none;
color: #fff;
}
.tw-link a:hover {
opacity: 0.6;
}
.tw-box {
width: 96%;
margin: 0 auto 0;
}
.tw-frame {
width: 100%;
height: auto;
margin: 0 auto;
padding: 1vw 0;
border-radius: 10px;
background: linear-gradient(0deg, rgba(3, 127, 203, 1) 35%, rgba(29, 161, 242, 1) 65%);
box-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #fff;
}
/* バナー/SNS */
.info {
width: 100%;
text-align: center;
padding: 5vw 0 10vw;
}
.top-sns-bnr {
display: flex;
margin: 1vw auto 6.666666667vw;
justify-content: center;
width: 90%;
}
.top-sns-bnr li {
width: 33.33%;
padding: 1vh;
list-style-type: none;
}
.top-sns-bnr li img {
width: 60%;
border-radius: 50%;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
}
.bnr {
width: 60%;
margin: 0 auto;
list-style-type: none;
text-align: center;
}
.bnr img {
width: 80%;
}
.lity-close {
color: #ff339a;
}
/* tablet */
@media screen and (min-width:768px) and (max-width:959px) {
/* layout */
.top-mv {
width: 98vw;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
padding: 0 70px 0px;
justify-content: stretch;
position: static;
}
.top-mv .top-logo {
width: 40%;
padding-top: 30px;
position: static;
top: 0;
}
.top-mv .top-logo img {
width: 80%;
margin: auto;
}
.top-mv .top-key {
padding-top: 20px;
width: 60%;
text-align: center;
}
.top-mv .top-key img {
width: 100%;
margin: auto;
}
/* .top-title img {
margin: 0px auto;
width: auto;
height: auto;
} */
/* aikatsulink */
.btn-aikatsu-link {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.btn-aikatsu-link li {
list-style-type: none;
width: 20%;
box-sizing: border-box;
}
.btn-aikatsu-link li img {
width: 100%;
height: auto;
}
/* topics */
.topics-list li {
width: 47%;
margin: 1% 3% 1% 0%;
list-style-type: none;
}
.topics-list li a {
border-radius: 15px;
padding: 15px 15px;
}
.topics-list li:nth-child(2n),
.topics-list li:last-child {
margin-right: 0;
}
.topics-head {
margin-bottom: 0px;
}
.topics-list-text {
padding: 5px;
font-size: 16px;
}
.topics-list-day {
font-size: 18px;
padding: 3px 5px;
/*
width: 50%;
*/
}
.topics-category {
font-size: 16px;
/* padding: 3px 5px; */
border-radius: 20px;
width: 48%;
}
.topics-list-thumb-inner img {
width: 90%;
height: auto;
border-radius: 5px;
}
/* バナー/SNS */
.top-sns-bnr {
max-width: 450px;
}
.top-sns-bnr li img {
width: auto;
border-radius: 50%;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
}
.info {
width: 100%;
text-align: center;
padding: 20px 0 50px;
}
.info img {
width: auto;
height: auto;
}
.bnr {
width: 60%;
margin: 30px auto 50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.bnr li {
padding: 10px 20px;
}
.bnr img {
width: auto;
}
.top-text {
font-family: 'Noto Serif JP', serif;
text-shadow: 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a;
color: #fff;
font-weight: 700;
font-size: 2vw;
padding: 4vw 0;
}
}
@media only screen and (min-width:960px) {
.top-mv {
width: 90vw;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
/* flex-direction: row-reverse; */
padding: 0 70px 0px;
justify-content: stretch;
position: static;
}
.top-mv .top-logo {
width: 40%;
padding-top: 30px;
position: static;
top: 0;
}
.top-mv .top-logo img {
width: 80%;
}
.top-mv .top-key {
width: 60%;
}
.top-mv .top-key img {
width: 100%;
margin: auto;
}
.top-text {
font-family: 'Noto Serif JP', serif;
text-shadow: 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a, 0 0 10px #ff339a;
color: #fff;
font-weight: 700;
font-size: 20px;
padding: 0 0 30px;
}
/* .top-title img {
margin: 0px auto;
width: auto;
height: auto;
} */
/* aikatsulink */
.btn-aikatsu-link {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.btn-aikatsu-link li {
list-style-type: none;
width: 20%;
box-sizing: border-box;
}
.btn-aikatsu-link li img {
width: 100%;
height: auto;
}
/* slider */
.slider {
max-width: 1000px;
margin: 0px auto;
}
.slider img {
width: 100%;
height: auto;
}
.slick-prev,
.slick-next {
top: 42%;
height: 30px;
width: 30px;
}
.slick-prev {
left: -3%;
transform: rotate(-135deg);
}
.slick-next {
right: -3%;
transform: rotate(45deg);
}
/* topics */
.topics-list li {
width: 30%;
margin: 1% 3% 1% 0%;
list-style-type: none;
}
.topics-list li a {
border-radius: 15px;
padding: 20px 15px;
}
.topics-list li:nth-child(2n),
.topics-list li:last-child {
margin-right: 3%;
}
.topics-list li:nth-child(3n),
.topics-list li:last-child {
margin-right: 0;
}
.topics-head {
margin-bottom: 0px;
}
.topics-list-text {
padding: 5px;
font-size: 16px;
line-height: 1.2;
}
.topics-list-day {
font-size: 18px;
padding: 3px 5px;
/*
width: 50%;
*/
white-space: nowrap;
}
.category li {
width: 23%;
text-align: center;
margin: 0 0.5%;
}
.topics-category {
font-size: 13px;
/* padding: 3px 5px; */
border-radius: 20px;
font-weight: 900;
letter-spacing: 0.05px;
width: 49%;
white-space: nowrap;
}
.topics-category-main {
font-size: 14px;
/* padding: 3px 5px; */
border-radius: 20px;
font-weight: 900;
letter-spacing: 0.05px;
width: 49%;
white-space: nowrap;
}
.topics-list-thumb-inner img {
width: 90%;
height: auto;
border-radius: 5px;
}
/* twitter */
#twitter {
background: url('../img/bg-ami-g.png') repeat center top #f3f7fa;
margin: 0 auto;
padding: 50px 0;
text-align: center;
width: 100%;
}
#twitter h3 {
font-size: 2.0rem;
padding-bottom: 20px;
color: #fff;
text-shadow: 0 2px 3px rgba(0, 0, 0, .5);
}
#twitter a {
color: #333;
}
#tw {
background: #ccc;
width: 60%;
margin: 0 auto;
}
.tw-box iframe {
width: 100%;
height: 100%;
border: none;
/* display:block; */
background: #fff;
max-width: 1200px !important;
}
.tw-link {
padding: 10px;
font-size: 1.2rem;
font-weight: 700;
text-align: center;
}
.tw-link a:hover {
opacity: 0.6;
}
.tw-box {
/* width: 520px; */
/* margin: 30px auto; */
}
/* バナー/SNS */
.top-sns-bnr {
max-width: 450px;
}
.top-sns-bnr li img {
width: auto;
border-radius: 50%;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
}
.info {
width: 100%;
text-align: center;
padding: 20px 0 50px;
}
.info img {
width: auto;
height: auto;
}
.bnr {
width: 60%;
margin: 30px auto 50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.bnr li {
padding: 10px 20px;
}
.bnr img {
width: auto;
}
}