/* reset.css */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
font-family: 'Noto Sans JP', sans-serif;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-width: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
/* common */
html {scroll-behavior: smooth;}
:root {
--main-corp-blue: #3B5BA6;
--main-strong: #FC4474;
--base-pale-pink: #FFF4F7;
--swiper-navigation-size: 22px;
--swiper-theme-color: #FFF;
}
a, button {transition: 0.3s ease-in-out;}
p {line-height: 2.3; letter-spacing: 3.6px; position: relative;}
a.primaryBtn, button.primaryBtn {
border-radius: 9999px;
background: linear-gradient(90deg, #EFAB74 0%, #FC4474 100%);
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 5px;
color: #fff;
padding: 16px 40px 19px;
letter-spacing: 3.2px;
}
button.primaryBtn {
cursor: pointer;
}
a.primaryBtn:hover, button.primaryBtn:hover {
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
transform: translateY(-2px);
opacity: 0.95;
}
.heading__header {
display: flex;
flex-direction: column;
gap: 20px;
align-items: flex-start;
}
.heading__header img {
max-height: 86px;
}
.heading__header h2 {
font-size: 0.9rem;
line-height: 1.85;
letter-spacing: 1.12px;
}
span.strongfont {
color: var(--main-strong, #FC4474);
font-weight: 600;
}
/* body */
body {
position: relative;
}
body:after {
content: "";
width: 100%;
height: 830px;
background: url(../img/hero_background.png) no-repeat;
position: fixed;
top: 0;
z-index: -1;
background-position-x: 0;
background-position-y: top;
background-size: cover;
pointer-events: none;
}
/* animetion */
@keyframes fadeHeader {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
}
}
@keyframes fadein-keyframes {
0% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* スクロールCSS */
.fade-in {
opacity: 0;
transition-duration: 500ms;
transition-property: opacity, transform;
}
.fade-in-up {
transform: translate(0, 50px);
}
.fade-in-down {
transform: translate(0, -50px);
}
.fade-in-left {
transform: translate(-50px, 0);
}
.fade-in-right {
transform: translate(50px, 0);
}
.scroll-in {
opacity: 1;
transform: translate(0, 0);
}
/* loading */
#loadingLogo {
position: fixed;
width: 100vw;
height: 100vh;
top: 0px;
left: 0px;
background: #fff;
z-index: 10000;
display: none;
pointer-events: none;
}
#loadingLogo.show {
display: flex;
animation: fadein-keyframes 2s ease 1.4s 1 forwards;
align-items: center;
justify-content: center;
}
svg path {
fill: var(--main-strong, #FC4474);
stroke: var(--main-strong, #FC4474);
stroke-width: 2;
}
#loadingLogo.show svg {
max-width: 750px;
width: 90%;
}
/* アニメーション用のスタイル */
.animated-path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: draw 4s forwards;
opacity: 1;
}
/* キーフレームアニメーション */
@keyframes draw {
to {
stroke-dashoffset: 0;
opacity: 0;
}
}
/* header */
header#header {
display: block;
position: relative;
z-index: 1;
}
.header__inner {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 0 2%;
height: 80px;
}
.header__inner--left {
display: flex;
justify-content: flex-start;
gap: 10px;
}
.header__inner--left a {
display: flex;
flex-direction: column;
}
.header__inner--left a:hover {
opacity: 0.6;
}
.header__inner--left a span {
color: var(--main-corp-blue, #3B5BA6);
letter-spacing: 0.96px;
font-size: 0.8rem;
}
.header__inner--left a img {
width: 100%;
}
.header__inner--leftCorp {
display: flex;
justify-content: flex-start;
align-items: flex-end;
gap: 8px;
}
.header__inner--leftCorp p {
color: var(--main-corp-blue, #3B5BA6);
font-size: 0.8rem;
letter-spacing: 0.96px;
}
.header__inner--right {
display: block;
}
a.primaryBtn.headerBtn {
padding-top: 11px;
padding-bottom: 14px;
}
/* hero */
.hero__inner {
display: flex;
flex-direction: column;
width: 100%;
padding: 40px 0 65px;
height: 770px;
justify-content: space-between;
margin: 0 auto;
}
.hero__inner--left {
display: flex;
flex-direction: column;
gap: 25px;
padding-left: 6%;
position: relative;
width: fit-content;
}
.hero__inner--left:before {
content: "";
border-radius: 520px;
background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.75) 72.92%, rgba(255, 255, 255, 0.00) 100%);
position: absolute;
right: -60px;
height: 500px;
width: 500px;
bottom: 0;
}
.hero__inner--left h1 {
font-size: 2.1rem;
line-height: 1.6;
letter-spacing: 7px;
font-weight: 600;
position: relative;
margin-bottom: -10px;
animation: fadeHeader 1s ease 0s 1 normal;
}
span.bigCount {
color: #fc4474;
font-size: 4.1rem;
letter-spacing: 0;
padding-right: 6px;
line-height: 1;
font-weight: 500;
}
.hero__inner--left p {
animation: fadeHeader 1s ease 0s 1 normal;
}
.hero__inner--left p span {
color: var(--main-strong, #FC4474);
font-weight: 600;
padding: 0 5px;
}
.hero__inner--left a.primaryBtn {
width: fit-content;
}
.hero__inner--right {
display: flex;
justify-content: flex-end;
padding-right: 4%;
}
.shareBox {
border-radius: 6px;
background: rgb(255,255,255,0.7);
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 22px 12px;
gap: 5px;
}
.shareBox--header p {
display: inline-block;
margin: 0 0 5px;
font-weight: 500;
color: var(--main-corp-blue, #3B5BA6);
font-size: 1.15rem;
position: relative;
letter-spacing: 0.05rem;
line-height: 1;
}
.shareBox--header p:before, .shareBox--header p:after {
display: inline-block;
position: absolute;
top: 50%;
width: 15px;
height: 2px;
border-radius: 3px;
background-color: var(--main-corp-blue, #3B5BA6);
content: "";
}
.shareBox--header p:before {
left: -25px;
-webkit-transform: rotate( 50deg );
transform: rotate( 50deg );
}
.shareBox--header p:after {
right: -25px;
-webkit-transform: rotate( -50deg );
transform: rotate( -50deg );
}
.shareBox--button {
display: flex;
justify-content: center;
gap: 12px;
}
.shareBox--button a:hover {
opacity: 0.8;
}
/* about */
section#about {
position: relative;
background: #fff;
}
section#about:before {
content: "";
width: 750px;
height: 770px;
background: url(../img/about_circle.svg) no-repeat;
position: absolute;
top: 140px;
left: 0;
background-size: cover;
}
.about__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: 120px 0;
gap: 140px;
}
.about__innerTop {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
}
.about__inner--left {
width: 30%;
display: flex;
flex-direction: column;
gap: 80px;
}
.about__inner--leftFooter img {
border-radius: 5px;
}
.about__inner--right {
width: 60%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.about__inner--rightHeader {
display: flex;
flex-direction: column;
gap: 15px;
}
.about__inner--rightFooter {
display: flex;
justify-content: flex-end;
}
.about__inner--rightFooter img {
border-radius: 5px;
}
.about__innerBottom, .about__innerBottom--header {
position: relative;
}
.about__innerBottom {
display: flex;
flex-direction: column;
gap: 50px;
}
.about__innerBottom--header {
display: flex;
flex-direction: column;
gap: 20px;
}
.about__innerBottom--header img {
position: absolute;
left: -25px;
top: -40px;
}
.about__innerBottom--header h3 {
position: relative;
font-size: 1.4rem;
font-weight: 600;
line-height: 0.92;
letter-spacing: 2.24px;
color: var(--main-strong, #FC4474);
display: block;
}
.about__innerBottom--middle {
position: relative;
display: flex;
justify-content: flex-end;
}
.about__innerBottom--middle ul {
border-radius: 5px;
background: #fff;
box-shadow: 0px 1px 24px 0px rgba(255, 233, 239, 0.60);
padding: 40px 45px;
width: 600px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 20px;
z-index: 1;
}
.about__innerBottom--middle ul li {
line-height: 1.9;
letter-spacing: 3.6px;
position: relative;
padding-left: 35px;
color: #313131;
}
.about__innerBottom--middle ul li:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-size: 1.25rem;
vertical-align: -1px;
position: absolute;
color: var(--main-strong, #FC4474);
left: 0;
font-weight: 900;
top: -2px;
}
.about__innerBottom--middleImg img {
border-radius: 5px;
}
.about__innerBottom--bottom {
display: flex;
justify-content: center;
text-align: center;
}
.about__innerBottom--bottom p {
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 5.6px;
}
/* manga */
section#manga {
position: relative;
background: var(--base-pale-pink, #FFF4F7);
padding-bottom: 140px;
}
section#manga:before {
content: "";
width: 800px;
height: 340px;
background: url(../img/manga_bg.svg) no-repeat;
position: absolute;
top: 800px;
background-size: contain;
pointer-events: none;
}
.manga__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: 120px 0;
gap: 60px;
overflow: hidden;
}
.manga__inner--header .heading__header img {
margin-bottom: -50px;
}
.manga__inner--header {
display: flex;
flex-direction: column;
gap: 60px;
}
.manga__inner--middle {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 750px;
margin: 0 auto;
}
.manga__inner--middleSlider {
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
max-width: 590px;
margin: 0 auto;
gap: 15px;
}
.wrapper {
background: #fff;
}
.swiper-container {
overflow: hidden;
padding: 30px 0;
border-radius: 5px;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
}
.manga__inner--middleSliderText p {
color: var(--main-strong, #FC4474);
font-weight: 600;
display: inline-block;
position: relative;
}
.manga__inner--middleSliderText p:before, .manga__inner--middleSliderText p:after {
display: inline-block;
position: absolute;
top: 50%;
width: 15px;
height: 2px;
border-radius: 3px;
background-color: var(--main-strong, #FC4474);
content: "";
}
.manga__inner--middleSliderText p:before {
left: -25px;
-webkit-transform: rotate( 50deg );
transform: rotate( 50deg );
}
.manga__inner--middleSliderText p:after {
right: -10px;
-webkit-transform: rotate( 50deg );
transform: rotate( -50deg );
}
/* swiper */
.swiper-button-next, .swiper-button-prev {
background: var(--main-strong, #FC4474);
padding: 24px;
border-radius: 9999px;
transition: 0.3s ease-in-out;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
opacity: 0.7;
}
.swiper-slide a {
display: block;
}
.swiper-slide a:hover {
opacity: 0.8;
cursor: zoom-in;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: -35px;
transform: scale(2.5);
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap,2px);
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
background: var(--main-strong, #FC4474);
}
/* manga zoom */
.item:hover::after {
content: "クリックすると漫画を拡大表示";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(252,68,116,.8);
color: #fff;
padding: 8px 15px 10px;
border-radius: 3px;
font-size: 0.9rem;
font-weight: 600;
z-index: 10;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
}
/* manga profile */
.mangaprofile__inner {
background: #fff;
width: 100%;
max-width: 1100px;
margin: 0 auto;
border-radius: 5px;
position: relative;
padding: 35px 80px;
}
.mangaprofile__inner--chara {
position: absolute;
right: -35px;
top: -30px;
}
.mangaprofile__inner--anju {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
gap: 35px 0;
}
.mangaprofile__inner--anjuProfile {
display: flex;
flex-direction: column;
gap: 25px;
padding-top: 50px;
width: 62%;
}
.mangaprofile__inner--anjuProfileHeader {
position: relative;
}
.mangaprofile__inner--anjuProfileHeader img {
position: absolute;
top: -60px;
left: -24px;
}
.mangaprofile__inner--anjuProfileHeader h3 {
position: relative;
font-size: 1.4rem;
font-weight: 600;
line-height: 0.92;
letter-spacing: 2.24px;
color: var(--main-strong, #FC4474);
display: block;
}
ul.socialIcon {
display: flex;
flex-direction: row;
gap: 12px;
}
ul.socialIcon li a {
filter: drop-shadow(0px 2px 5px #ddd);
}
ul.socialIcon li a:hover {
opacity: 0.8;
}
.mangaprofile__inner--anjuComment {
display: flex;
flex-direction: column;
gap: 30px;
}
.mangaprofile__inner--anjuCommentHeading {
position: relative;
display: flex;
}
.mangaprofile__inner--anjuCommentHeading:before {
display: inline-block;
position: absolute;
top: 50%;
width: 100%;
height: 1px;
border-radius: 3px;
background-color: #d4d4d4;
content: "";
}
.mangaprofile__inner--anjuComment h3 {
display: inline-block;
margin: 0 auto;
position: relative;
font-size: 1.6rem;
font-weight: 600;
line-height: 0.92;
letter-spacing: 2.24px;
color: var(--main-strong, #FC4474);
background: #fff;
padding: 0 18px;
}
/* detail */
section#detail {
background: #fff;
position: relative;
}
.detail__logoSticky {
position: sticky;
top: 0;
right: 0;
display: flex;
justify-content: flex-end;
}
.detail__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: 0 0 120px;
margin-top: -120px;
gap: 80px;
position: relative;
}
.detail__inner__card {
display: flex;
flex-direction: column;
gap: 35px;
margin-bottom: 45px;
}
.detail__inner__card h3 {
position: relative;
font-size: 1.4rem;
font-weight: 600;
line-height: 0.92;
letter-spacing: 2.24px;
color: var(--main-strong, #FC4474);
display: block;
}
.overflow-container ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
gap: 40px;
}
.overflow-container ul li {
display: flex;
width: 340px;
border-radius: 5px;
background: rgb(255,255,255,0.6);
box-shadow: 0px 1px 14px 0px rgba(255, 184, 202, 0.30);
flex-direction: column;
padding: 25px 25px 15px;
gap: 10px;
}
li.overflow-item p {
line-height: 1.93;
}
.detail__inner__todo {
display: flex;
flex-direction: column;
gap: 35px;
}
.detail__inner__todo h3 {
position: relative;
font-size: 1.4rem;
font-weight: 600;
line-height: 0.92;
letter-spacing: 2.24px;
color: var(--main-strong, #FC4474);
}
.about__innerBottom--middle.detailList ul {
width: 450px;
}
.detail__inner__todo .about__innerBottom--middleImg img {
height: 520px;
object-fit: cover;
width: 800px;
object-position: center;
}
/* entry CTA */
section.entryCta {
margin-top: -60px;
position: relative;
}
section.entryCta:after {
content: "";
width: 100%;
height: 265px;
background: #fff;
position: absolute;
bottom: 0;
z-index: 0;
}
section.entryCta:before {
content: "";
width: 450px;
height: 280px;
background: url(../img/cta_bg.svg) no-repeat;
position: absolute;
right: 0;
bottom: 0;
background-size: cover;
z-index: 1;
}
.entry__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: 60px 0 40px;
margin-top: -120px;
gap: 30px;
position: relative;
z-index: 1;
}
.entry__inner img {
max-height: 144px;
}
.entry__inner p {
text-align: center;
margin-top: -65px;
}
.entry__inner a.primaryBtn {
width: fit-content;
margin: 0 auto;
padding-left: 60px;
padding-right: 60px;
}
section.entryCta.grey:after {
background: #f9f9f9;
}
/* section */
section#schedule {
position: relative;
background: #F9F9F9;
}
section#schedule:before {
content: "";
width: 100%;
height: 100%;
background: url(../img/schedule_bg.svg) no-repeat;
position: absolute;
top: 300px;
left: 0;
background-size: contain;
opacity: 0.6;
}
.schedule__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: 120px 0;
gap: 60px;
position: relative;
}
.schedule__inner__img {
display: flex;
flex-direction: column;
gap: 40px;
}
.schedule__inner__img img {
border-radius: 10px;
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.schedule__inner__img a {
border-radius: 9999px;
background: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 4px;
color: var(--main-strong, #FC4474);
padding: 10px 40px 14px;
letter-spacing: 3.2px;
border: solid 2px var(--main-strong, #FC4474);
width: fit-content;
margin: 0 auto;
flex-direction: column;
}
.schedule__inner__img a span {
font-size: 0.7rem;
display: block;
letter-spacing: 1px;
}
.btnText {
display: flex;
align-items: baseline;
gap: 6px;
}
.btnText i {
opacity: 0.5;
}
.schedule__inner__img a:hover {
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
transform: translateY(-2px);
opacity: 0.95;
}
/* requiments */
.requirements__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: 0 0 120px;
gap: 50px;
position: relative;
}
.requirements__inner .heading__header img {
margin-bottom: -35px;
}
/* accordion */
.accrdion__parent {
background: #fff;
border-radius: 5px;
overflow: hidden;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
}
.accordion {
display: block;
line-height: 65px;
border: none;
cursor: pointer;
font-size: 1.2rem;
transition: 0.5s ease-in;
position: relative;
padding-left: 25px;
height: 65px;
margin: 0;
font-weight: 400;
letter-spacing: 2.24px;
}
.accordion.active {
margin-bottom: 0;
color: var(--main-strong, #FC4474);
}
.panel {
max-height: 0;
overflow: hidden;
transition: 0.3s ease-out;
position: relative;
}
.panel:before {
content: "";
background: #eee;
width: 95%;
height: 1px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.panel__inner {
padding: 35px 45px 40px;
}
ul.bosyuuyoukou {
display: flex;
flex-direction: column;
gap: 16px;
}
ul.bosyuuyoukou li {
line-height: 1.9;
letter-spacing: 3.6px;
position: relative;
padding-left: 35px;
color: #313131;
}
ul.bosyuuyoukou li:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
font-size: 1.25rem;
position: absolute;
color: var(--main-strong, #FC4474);
left: 0;
font-weight: 900;
top: -2px;
}
ul.bosyuuyoukou li a {
color: var(--main-strong, #FC4474);
}
ul.bosyuuyoukou li a:hover {
opacity: 0.6;
}
.acco {
position: relative;
display: flex;
flex-direction: column;
gap: 30px;
}
.accordion:hover{
color: var(--main-strong, #FC4474);
}
.accordion:after {
color: #707070;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-46%);
font-family: "Font Awesome 5 Free";
content: "\f055";
font-size: 1.15rem;
font-weight: 600;
}
.accordion.active:after {
content: "\f056";
color: var(--main-strong, #FC4474);
font-weight: 600;
}
/* komon */
ul.komonPeople {
display: flex;
flex-direction: column;
gap: 60px;
padding: 25px 0px;
}
ul.komonPeople li {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 30px 50px;
}
.komonPeople__left img {
filter: drop-shadow(0px 0px 1px #707070);
}
.komonPeople__right {
width: 58%;
display: flex;
flex-direction: column;
gap: 8px;
}
.komonPeople__right h4 {
position: relative;
font-size: 1.5rem;
font-weight: 600;
line-height: 0.92;
letter-spacing: 2.24px;
color: var(--main-strong, #FC4474);
}
.komonPeople__right h4 span {
font-size: 0.9rem;
line-height: 1.63;
display: inline-block;
margin-bottom: 8px;
font-weight: 400;
}
.komonPeople__right p {
line-height: 2.05;
color: #313131;
font-size: 0.9rem;
}
.komonPeople__comment {
background: #f9f9f9;
padding: 25px 35px;
border-radius: 5px;
position: relative;
}
.komonPeople__comment:before {
content: "";
position: absolute;
top: -30px;
left: 185px;
margin-left: -15px;
border: 15px solid transparent;
border-bottom: 15px solid #f9f9f9;
}
.komonPeople__comment p {
font-size: 1rem;
color: #313131;
line-height: 1.93;
letter-spacing: 1px;
}
/* question */
section#question {
position: relative;
background: #FFF4F7;
}
.question__inner .heading__header h2 {
margin-top: -25px;
}
.question__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: 120px 0;
gap: 50px;
position: relative;
}
.question__inner--list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
ul.question__inner--listUl {
width: calc(100% / 2 - 40px);
display: flex;
flex-direction: column;
gap: 50px;
}
ul.question__inner--listUl li {
display: flex;
flex-direction: column;
gap: 15px;
}
ul.question__inner--listUl li h3 {
font-size: 1.15rem;
border-bottom: solid 1px #313131;
padding: 0 0 15px;
color: var(--main-strong, #FC4474);
font-weight: 500;
}
ul.question__inner--listUl li p {
line-height: 28px;
letter-spacing: 0.14px;
font-size: 0.9rem;
color: #707070;
}
ul.question__inner--listUl li p a {
color: var(--main-strong, #FC4474);
}
ul.question__inner--listUl li p a:hover {
opacity: 0.6;
}
/* message */
section#message {
background: #fff;
}
.message__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: row;
padding: 120px 0;
gap: 50px;
position: relative;
flex-wrap: wrap;
z-index: 2;
justify-content: space-between;
}
.message__inner .heading__header {
width: 100%;
}
.message__inner .heading__header h2 {
margin-top: -35px;
}
.message__inner--ceo {
width: 46%;
display: flex;
flex-direction: column;
gap: 20px;
}
.message__inner--ceo h3 {
font-size: 2.1rem;
line-height: 1.6;
letter-spacing: 7px;
font-weight: 600;
position: relative;
}
.message__inner--ceoName {
display: flex;
justify-content: flex-end;
flex-direction: column;
align-items: end;
gap: 15px;
}
p.ceoProfile {
display: flex;
flex-direction: column;
line-height: 1.8;
text-align: end;
font-size: 0.9rem;
}
p.ceoProfile span {
font-size: 1.8rem;
line-height: 1.6;
letter-spacing: 7px;
font-weight: 600;
margin-right: -7px;
}
.message__inner--ceoImg img {
border-radius: 5px;
}
/* footer */
footer#footer {
position: relative;
margin-top: -140px;
}
.footer__inner--top {
width: 100%;
height: 400px;
background: url(../img/footertop.svg);
margin-bottom: -100px;
z-index: 1;
position: relative;
}
.footer__inner--bottom {
background: #3B5BA6;
position: relative;
z-index: 0;
}
.footer__inner--bottomLogo {
padding: 180px 0 0;
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 60px;
}
.footer__inner--bottomLogo a {
display: flex;
flex-direction: column;
}
.footer__inner--bottomLogo a:hover {
opacity: 0.6;
}
.footer__inner--bottomLogo a img {
max-height: 70px;
}
.footer__inner--bottomLogo a p {
text-align: right;
color: #fff;
margin-top: -5px;
line-height: 1;
font-size: 0.9rem;
}
.footer__inner--bottomLogoCta {
background: #fff;
padding: 20px 30px;
border-radius: 5px;
}
.footer__inner--bottomLogoCta a.primaryBtn.headerBtn {
flex-direction: row;
}
.footer__inner--bottomLogoCta .header__inner--left {
gap: 20px;
justify-content: end;
align-items: center;
}
.footer__inner--bottomCopy {
width: 100%;
display: flex;
align-items: center;
color: #fff;
font-size: 0.9rem;
flex-direction: column;
gap: 20px;
padding-bottom: 90px;
}
.footer__inner--bottomObject {
width: 100vw;
height: 28px;
background: url(../img/footerObj.svg);
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* scroll Btn */
#floatBtn {
position: fixed;
bottom: 0;
display: block;
background: rgba(0,0,0,.2);
width: 100%;
padding: 12px 0;
z-index: 999;
opacity: 0;
pointer-events: none;
transition: .3s ease-in-out;
}
#floatBtn.scroll {
opacity: 1;
pointer-events: auto
}
#floatBtn a.primaryBtn {
width: fit-content;
margin: 0 auto;
padding-left: 50px;
padding-right: 50px;
}
/* manga page */
body#mangaPage {
display: flex;
flex-direction: column;
gap: 20px;
background: #f9f9f9;
padding: 2%;
}
body#mangaPage:after {
content: none;
}
body#mangaPage img {
filter: drop-shadow(0px 1px 2px #ddd);
max-width: 900px;
margin: 0 auto;
width: 100%;
}
.mangaBtn {
display: flex;
justify-content: center;
padding: 35px 0 35px;
width: 100%;
max-width: 350px;
margin: 20px auto 10px;
background: #fff;
border-radius: 8px;
}
footer#mangaFooter {
display: flex;
justify-content: center;
font-size: 0.9rem;
color: #707070;
}
/* cursor */
#cursor {
transform: translate(0, 0);
pointer-events: none;
position: fixed;
top: -7px;
left: -4px;
width: 8px;
height: 8px;
background: rgba(0, 0, 0, 0.75);
border-radius: 50%;
z-index: 99999;
transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
}
#cursor.hover{
top: -18px;
left: -18px;
width: 36px;
height: 36px;
background: rgba(0, 0, 0, 0.05);
border: solid 2px #FC4474;
}
/* YouTube */
section#movie {
background: #fff;
position: relative;
}
section#movie:after {
content: "";
width: 100%;
height: 100%;
background: url(../img/moviebg.svg) no-repeat;
position: absolute;
right: 0;
bottom: 0;
background-size: cover;
background-position-y: bottom;
max-width: 700px;
}
.movie__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 25px;
padding: 0 0 120px;
position: relative;
z-index: 1;
}
.movie__inner--top .heading__header {
display: flex;
flex-direction: column;
align-items: center;
}
.movie__inner--top .heading__header h3 {
position: relative;
font-size: 1.4rem;
font-weight: 600;
line-height: 0.92;
letter-spacing: 2.24px;
color: var(--main-strong, #FC4474);
display: block;
margin-top: -25px;
}
/* YouTube */
ul.youtubeList {
padding: 0;
margin: 0 auto;
border: none;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 25px;
}
ul.youtubeList li {
width: 100%;
max-width: 700px;
}
ul.youtubeList li a {
display: flex;
flex-direction: column;
height: 100%;
border-radius: 2px;
background: #fff;
box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
cursor: pointer;
transition: 0.2s ease-in-out;
}
ul.youtubeList li a:hover {
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
text-decoration: none;
opacity: 0.9;
}
ul.youtubeList li a img {
border-radius: 2px 2px 0 0;
}
ul.youtubeList li a p {
margin: 0;
text-decoration: none;
color: #313131;
padding: 10px 20px;
line-height: 1.6;
}
.youtubeListInnerIcon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: url(../img/playicon.svg) no-repeat;
background-size: cover;
}
/* modal */
.ed-modal {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.9);
display: flex;
z-index: 9999;
}
div#modalOverlay {
width: 100%;
height: 100%;
display: flex;
cursor: pointer;
}
.ed-closeModal {
position: absolute;
top: -35px;
right: 5px;
cursor: pointer;
width: 1.5rem;
height: 1.5rem;
opacity: 0.5;
}
.ed-closeModal::before, .ed-closeModal::after {
content: "";
width: 35px;
height: 2px;
background: #fff;
position: absolute;
top: 0;
transform: rotate(45deg);
transform-origin: top left;
}
.ed-closeModal::before {
left: 0;
}
.ed-closeModal::after {
right: 0;
transform: rotate(-45deg);
transform-origin: top right;
}
.modalContent {
width: 100%;
max-width: 800px;
margin: auto;
position: relative;
}
.video {
width: 100%;
position: relative;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
filter: drop-shadow(0px 2px 5px #313131);
animation: fadeIn 1.2s ease 0s 1 normal;
}
.video iframe {
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
}
}
@media screen and (max-width: 1150px) {
/* （ここに1150以下を記述） */
.about__inner {
padding-left: 4%;
padding-right: 4%;
}
.manga__inner {
padding-left: 4%;
padding-right: 4%;
}
.mangaprofile__inner {
width: 90%;
}
.mangaprofile__inner--anjuImg {
width: 28%;
}
.detail__inner {
padding-left: 4%;
padding-right: 4%;
}
.overflow-container ul li {
width: 30%;
}
.schedule__inner {
padding-left: 4%;
padding-right: 4%;
}
.requirements__inner {
padding-left: 4%;
padding-right: 4%;
}
.question__inner {
padding-left: 4%;
padding-right: 4%;
}
.message__inner {
padding-left: 4%;
padding-right: 4%;
}
.footer__inner--bottomLogo {
padding-left: 4%;
padding-right: 4%;
}
}
@media screen and (max-width: 1000px) {
/* （ここにタブレット用スタイルを記述） */
body:after {
background-position-x: -150px;
background-size: cover;
}
.hero__inner--left:before {
right: 0;
}
.about__inner--leftFooter img {
object-fit: cover;
height: 450px;
}
.about__innerBottom--middle {
flex-direction: column-reverse;
}
.about__innerBottom--middle ul {
position: relative;
top: auto;
left: auto;
transform: none;
margin: -100px auto 0;
}
.mangaprofile__inner {
padding: 40px 35px;
}
.mangaprofile__inner--chara {
right: -10px;
top: -10px;
}
.mangaprofile__inner--anju {
flex-direction: column;
}
.mangaprofile__inner--anjuImg {
width: 100%;
display: flex;
justify-content: center;
}
.mangaprofile__inner--anjuProfile {
width: 100%;
}
.overflow-container ul li {
width: 47%;
}
.about__innerBottom--middleImg {
display: flex;
justify-content: center;
}
.message__inner--ceo {
width: 100%;
}
.message__inner--ceoImg {
width: 100%;
display: flex;
justify-content: center;
}
section#manga:before {
width: 80%;
}
.footer__inner--bottomLogo {
flex-direction: column;
gap: 25px;
}
.about__innerBottom--middle.detailList ul {
padding: 30px 35px;
}
.komonPeople__right {
width: 100%;
}
.komonPeople__right h4 {
text-align: center;
line-height: 1.53;
}
.movie__inner {
padding-left: 4%;
padding-right: 4%;
}
}
@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
body:after {
background-position-x: right;
background-size: cover;
height: 860px;
}
p {
letter-spacing: 1px;
}
#floatBtn {
padding-top: 6px;
padding-bottom: 6px;
}
.heading__header img {
max-height: 70px;
}
#cursor {
display: none;
}
/* header */
.header__inner {
justify-content: center;
}
header#header a.primaryBtn.headerBtn {
display: none;
}
/* hero */
section#about:before {
width: 280px;
height: 280px;
}
.hero__inner {
padding-left: 4%;
padding-right: 4%;
height: 860px;
padding-top: 20px;
}
.hero__inner--left {
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.4);
border-right-color: rgba(255, 255, 255, 0.2);
border-bottom-color: rgba(255, 255, 255, 0.2);
border-radius: 5px;
backdrop-filter: blur(10px);
}
.hero__inner--left h1 {
letter-spacing: 2px;
font-size: 1.9rem;
}
.hero__inner--left h1 br {
display: none;
}
.hero__inner--left a.primaryBtn {
margin: 0 auto;
position: relative;
}
.hero__inner--right {
padding-right: 0;
justify-content: center;
}
.hero__inner--left p br {
display: none;
}
.hero__inner--left:before {
right: auto;
bottom: auto;
width: 100%;
height: 100%;
left: 0;
background: rgb(255, 255,255, 0.5);
border-radius: 5px;
top: 0;
}
/* about */
.about__inner {
padding-top: 60px;
padding-bottom: 60px;
}
.about__innerTop {
gap: 40px;
}
.about__inner--left {
width: 100%;
}
.about__inner--leftFooter {
display: flex;
justify-content: center;
}
.about__inner--right {
width: 100%;
gap: 30px;
}
.about__innerBottom--header h3 {
line-height: 1.53;
}
.about__innerBottom--middleImg img {
object-fit: cover;
height: 400px;
object-position: right;
}
.about__innerBottom--bottom p br {
display: none;
}
.about__innerBottom--middle ul {
width: 93%;
padding: 20px 25px;
}
.about__innerBottom--middle ul li {
letter-spacing: 1px;
padding-left: 30px;
}
.about__innerBottom--middle.detailList ul {
width: 100%;
}
.about__innerBottom--bottom p {
letter-spacing: 2px;
line-height: 1.53;
}
/* manga */
section#manga {
padding-bottom: 80px;
}
.manga__inner {
padding-top: 60px;
}
.swiper-button-next, .swiper-button-prev {
display: none;
}
.manga__inner--middleSliderText p {
font-size: 0.9rem;
}
.mangaprofile__inner--chara {
width: 100px;
height: 100px;
}
.mangaprofile__inner--anjuProfileHeader h3 {
line-height: 1.53;
}
/* detail */
.detail__inner {
padding-top: 60px;
}
.overflow-container ul li {
width: 100%;
}
.about__innerBottom--middle.detailList ul {
width: 93%;
padding: 20px 25px;
}
/* schedule */
.schedule__inner {
padding-top: 60px;
padding-bottom: 60px;
}
/* entry */
section.entryCta:after {
height: 80%;
}
.entry__inner {
padding-left: 4%;
padding-right: 4%;
}
.entry__inner img {
max-height: 100px;
}
/* 募集要項 */
.requirements__inner {
padding-bottom: 60px;
}
.panel__inner {
padding: 5% 7%;
}
.komonPeople__comment:before {
left: 50%;
}
/* question */
.question__inner {
padding-top: 60px;
padding-bottom: 80px;
}
.question__inner--list {
gap: 50px;
}
ul.question__inner--listUl {
width: 100%;
}
/*message */
.message__inner {
padding-top: 60px;
}.message__inner--ceo h3 br {
display: none;
}
/* footer */
.footer__inner--top {
background-size: cover;
height: 120px;
}
.footer__inner--bottomLogo {
padding-top: 150px;
}
.footer__inner--bottomLogoCta {
display: none;
}
/* YouTube */
ul.youtubeList li {
width: 100%;
}
.movie__inner--top .heading__header h3 {
line-height: 1.33;
text-align: center;
}
}