header {
animation: 6s forwards head;
position: relative;
}
footer {
position: relative;
z-index: 10;
}
@keyframes head {
0% {
z-index: 1;
top: -100vh
}
60% {
z-index: 1;
top: -100vh
}
80% {
z-index: 100;
top: 0;
}
100% {
z-index: 105;
top: 0;
}
} .view-over {
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
background: #fff;
animation: 6s forwards dawn;
z-index: 1;
}
@keyframes dawn {
0% {
opacity: 1;
z-index: 100;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
z-index: 1;
}
100% {}
}
.view-text {
animation: 6s forwards text;
z-index: 1;
}
.view-text img {
width: 800px;
}
@keyframes text {
0% {
opacity: 1;
z-index: 100;
}
30% {
opacity: 1;
}
50% {
opacity: 0;
z-index: 1;
}
80% {
opacity: 0;
z-index: 1;
}
100% {
opacity: 0;
z-index: 1;
}
}
.main-over {
position: relative;
animation: 6s forwards main;
}
@keyframes main {
0% {
z-index: 1;
}
80% {
z-index: 1;
}
100% {
z-index: 100;
}
}
.kv-movie-sub1 {
margin-top: 30px;
}
.kv-wrapper {
display: flex;
margin-top: 20px;
justify-content: space-between;
}
.kv-left {
width: 440px;
padding: 60px 0px;
}
.kv-right {
width: calc(1200px - 440px - 50px);
position: relative;
}
.kv-left span {
font-size: 100px;
color: #4b3f1f;
font-style: italic;
font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}
.kv-photo1 {
width: 120px;
margin: 0 auto;
}
.kv-photo2 {
width: 100%;
}
.kv-movie1 {
width: 500px;
border-radius: 50px;
overflow: hidden;
border: solid 3px #c4b283;
position: absolute;
top: 50px;
right: 0;
}
.kv-movie2 {
width: 500px;
border-radius: 50px;
overflow: hidden;
border: solid 3px #c4b283;
position: absolute;
bottom: 50px;
z-index: 3;
}
video {
vertical-align: top;
width: 100%;
}
.kv-logo {
width: 50%;
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
} #message {
margin-top: 150px;
}
.message-under-triangle {
width: 0;
height: 0;
border-style: solid;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-top: 25px solid #c4b283;
border-bottom: 0;
margin: 0 auto;
margin-top: 50px;
}
.message-bar {
padding: 30px 0px 40px;
background: rgb(230, 209, 166, .2);
position: relative;
}
.message-title {
height: 60px;
position: absolute;
top: -58px;
right: 0;
left: 0;
margin: auto;
width: max-content;
}
.message-title img {
width: auto;
height: 100%;
}
.message-over {
width: 1000px;
margin: 0 auto;
}
#message .page-title {
width: 1000px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
}
#message .page-title p {
display: block;
font-size: 20px;
letter-spacing: .16em;
line-height: 1.4;
color: #6b4f36;
margin-top: 15px;
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}
#message .page-title img {
width: 700px;
}
.message-wrapper1 {
width: 1000px;
margin: 0 auto;
margin-top: 60px;
display: flex;
justify-content: space-around;
}
.message-photo1 {
width: 150px;
margin: 0 auto;
}
.message-text p span {
font-weight: 600;
}
.message-text p {
margin-bottom: 25px;
font-size: 18px;
}
.message-text p:last-child {
margin-bottom: 0;
}
.message-text1 {
margin-top: 50px;
}
.message-text2 {
margin-top: 30px;
}
.message-text2 p {
font-size: 18px;
margin-bottom: 30px;
}
.message-text3 {
text-align: center;
border: solid 1px #c4b283;
padding: 30px 0;
margin-top: 40px;
background: rgb(230, 209, 166, .2);
}
.message-text3 p {
font-weight: 600;
font-size: 22px;
color: #4b3f1f;
}
.message-list ul li {
list-style: none;
background-size: 20px;
background-repeat: no-repeat;
padding-left: 30px;
background-position: center left;
margin-bottom: 5px;
font-size: 18px;
font-weight: 600;
letter-spacing: .1em;
color: #4b3f1f;
}
.message-list1 ul li {
background-image: url(//chikaumino.com/wp-content/themes/nqm/assets/img/top/list-pin.webp);
}
.message-list2 ul li {
background-image: url(//chikaumino.com/wp-content/themes/nqm/assets/img/top/check-pin.webp);
}
.message-list2 ul li span {
color: #3a4355;
font-weight: 600;
background: rgba(170, 178, 217, 0.2);
}
.message-list1, .message-list2 {
margin-top: 30px;
} .concept-super {
max-width: 1400px;
margin: 0 auto;
margin-top: 50px;
background: rgb(238, 234, 224, .3);
background-image: url(//chikaumino.com/wp-content/themes/nqm/assets/img/top/bg-logo.webp);
background-repeat: no-repeat;
background-position: bottom -50px right -50px;
background-size: 500px 500px;
border-radius: 200px 200px 0px 0px;
padding: 70px 0px;
}
.concept-wrapper1 {
width: 85%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.concept-left {
width: 38%;
}
.concept-movie1 {
width: 80%;
margin-left: 0px;
margin-right: auto;
}
.concept-movie2 {
width: 80%;
margin-left: auto;
margin-right: 0px;
}
.concept-movie3 {
width: 80%;
margin-left: 0px;
margin-right: auto;
}
.concept-movie1, .concept-movie2 {
margin-bottom: 40px;
}
.concept-movie video {
box-shadow: rgba(93, 67, 50, 0.25) 0px 50px 100px -20px, rgba(93, 67, 50, 0.3) 0px 30px 60px -30px, rgba(71, 35, 12, 0.35) 0px -2px 6px 0px inset;
transform: rotate(-3deg);
}
.concept-movie2 video {
transform: rotate(3deg);
}
.concept-right {
width: 55%;
display: flex;
flex-direction: column;
justify-content: center;
}
.concept-photo2 {
width: 90%;
box-shadow: rgba(93, 67, 50, 0.25) 0px 50px 100px -20px, rgba(93, 67, 50, 0.3) 0px 30px 60px -30px, rgba(71, 35, 12, 0.35) 0px -2px 6px 0px inset;
}
.concept-photo3 {
width: 90%;
margin-right: 0;
margin-left: auto;
margin-top: 20px;
box-shadow: rgba(93, 67, 50, 0.25) 0px 50px 100px -20px, rgba(93, 67, 50, 0.3) 0px 30px 60px -30px, rgba(71, 35, 12, 0.35) 0px -2px 6px 0px inset;
}
.concept-text1 p {
font-size: 18px;
margin-bottom: 30px;
}
.concept-text1 p:last-child {
margin-bottom: 0;
}
.concept-list1, .concept-list2 {
margin-top: 40px;
}
.concept-list ul li {
background-image: url(//chikaumino.com/wp-content/themes/nqm/assets/img/top/list-pin.webp);
list-style: none;
background-size: 20px;
background-repeat: no-repeat;
padding-left: 30px;
background-position: center left;
margin-bottom: 15px;
line-height: 1.6;
font-size: 18px;
color: #4b3f1f;
font-weight: 600;
letter-spacing: .08em;
}
.concept-list2 ul li {
margin-bottom: 10px;
}
.concept-over {
width: 1000px;
margin: 0 auto;
margin-top: 50px;
}
.concept-text p {
font-size: 18px;
margin-bottom: 20px;
}
.concept-text p:last-child {
margin-bottom: 0;
}
.concept-text2, .concept-text4 {
margin-top: 20px;
}
.contents-wrapper1 {
width: 1000px;
margin: 0 auto;
margin-top: 80px;
display: flex;
justify-content: space-between;
}
.contents-photo2 {
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
}
.contents-text4 {
width: 55%;
display: flex;
flex-direction: column;
justify-content: center;
}
.contents-text4 p {
font-size: 18px;
margin-bottom: 20px;
}
.contents-text4 p:last-child {
margin-bottom: 0;
}
.contents-text5 {
margin-top: 50px;
}
.contents-text5 p {
font-size: 18px;
margin-bottom: 15px;
}
.contents-text5 .font-orange {
font-size: 24px;
}
.contents-text5 p:last-child {
margin-bottom: 0;
} #ism {
margin-top: 80px;
}
.ism-text {
width: 1000px;
margin: 0 auto;
text-align: center;
}
.ism-text p {
margin-bottom: 25px;
font-size: 18px;
}
.ism-text .font-orange {
font-size: 30px;
}
.ism-text p:last-child {
margin-bottom: 0;
}
.ism-photo {
margin-top: 80px;
} .more-link-wrapper {
width: 1000px;
margin: 0 auto;
margin-top: 50px;
display: flex;
justify-content: space-between;
}
.more-link-wrapper a {
width: 45%;
}
.more-link {
width: 100%;
background-color: #fff;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
display: block;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: relative;
width: 350px;
margin: auto;
padding: 1rem 3rem;
font-weight: bold;
border-radius: 10px;
color: #a89458;
border: 3px solid #a89458;
box-shadow: 5px 5px #a89458;
transition: 0.3s ease-in-out;
}
.more-link:hover {
box-shadow: none;
transform: translate(5px, 5px);
color: #a89458;
}
.more-link span {
color: #a89458;
font-size: 18px;
font-weight: 600;
letter-spacing: .08em;
font-family: "futura-pt", sans-serif;
line-height: 1.6;
}
.link-more{
display: flex;
justify-content: space-between;
width: 1000px;
margin: 0 auto;
}
.link-more .more-link {
margin: 0 auto;
margin-top: 50px;
}
.link-more .more-link span {
font-size: 16px;
font-weight: 600;
letter-spacing: .14em;
font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
}
.partner-more {
display: flex;
justify-content: space-between;
width: 100%;
}
.partner-more a {
width: 48%;
}
.partner-more .more-link {
width: calc(100% - 6rem);
margin: 0 auto;
margin-top: 30px;
}
.partner-more .more-link span {
font-size: 16px;
font-weight: 600;
letter-spacing: .2em;
font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
}
#partner {
padding: 80px 0px;
background: url(//chikaumino.com/wp-content/themes/nqm/assets/img/common/note-bg.webp);
background-repeat: repeat;
background-size: 50%;
}
.partner-left {
width: 1000px;
margin: 0 auto;
} #partner h2 {
font-size: 50px;
line-height: 1.2;
color: #d2a005;
font-family: 'Futura', sans-serif;
}
.partner-inner {
display: flex;
}
#partner .title span {
font-size: 20px;
font-weight: 600;
display: flex;
color: #d2a005;
flex-direction: column;
justify-content: center;
padding-left: 5px;
}
.partner-photo1 {
width: 25%;
display: flex;
flex-direction: column;
justify-content: center;
}
.partner-info1 {
display: flex;
}
.partner-text1 {
width: 65%;
display: flex;
flex-direction: column;
justify-content: center;
}
.partner-text2 {
margin-top: 25px;
}
.partner-text p {
font-size: 16px;
margin-bottom: 15px;
}
.partner-icon {
display: flex;
margin-left: 15px;
}
.partner-icon a {
display: flex;
flex-direction: column;
justify-content: center;
}
.partner-info1 h3 {
font-size: 30px;
color: #4b401f;
font-family: 'Futura', sans-serif;
}
.partner-icon img {
width: 35px;
margin-right: 10px;
}
.partner-info2 {
margin-top: 15px;
}
.partner-info2 li {
font-size: 16px;
list-style: none;
position: relative;
color: #4b401f;
padding-left: 20px;
letter-spacing: .14em;
padding-bottom: 5px;
font-weight: 600;
}
.partner-info2 li::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent transparent #a89458;
border-width: 6px 0px 6px 12px;
position: absolute;
top: 6px;
left: 0;
}
#partner .more-button {
width: 100%;
margin-top: 15px;
padding: 10px 0;
}
.partner-text3 {
margin-top: 30px;
padding: 20px 30px;
background: rgb(241, 235, 216, .5);
}
.partner-text3 p{
color: #4b3f1f;
}
.partner-text3 p:last-child {
margin-bottom: 0;
}
@media screen and (max-width:1200px) {
.view-text img {
width: 95%;
margin: 0 auto;
}
#message {
margin-top: 120px;
}
#message .page-title {
width: 100%;
}
#message .page-title img {
width: 70%;
}
.message-over {
width: 85%;
}
.message-text3 {
text-align: left;
padding: 20px 30px;
}
.message-text3 p {
font-size: 20px;
}
.message-photo1 {
width: 100px;
}
#message .page-title p {
font-size: 18px;
} .concept-super {
width: 95%;
}
.concept-left {
width: 70%;
margin: 0 auto;
}
.concept-right {
width: 100%;
margin: 0 auto;
}
.concept-over {
width: 85%;
}
.concept-wrapper1 {
display: block;
}
.concept-photo1 {
width: 50%;
margin: 0 auto;
}
.concept-text1 {
width: 100%;
margin-top: 50px;
}
.concept-text2 {
margin-top: 30px;
}
.concept-text5 p {
font-size: 22px;
}
#concept .page-title h1 {
font-size: 30px;
}
#concept .page-title {
margin-top: 50px;
}
.contents-wrapper1 {
display: block;
margin-top: 30px;
width: 85%;
}
.contents-photo2 {
width: 70%;
margin: 0 auto;
}
.contents-text4 {
width: 100%;
margin-top: 50px;
}
.contents-text4 p {
margin-bottom: 30px;
} #ism {
width: 100%;
margin-top: 30px;
}
.ism-text {
width: 85%;
margin: 0 auto;
text-align: left;
}
.ism-text p {
font-size: 18px;
}
.ism-text .font-orange {
font-size: 30px;
}
.ism-photo {
margin-top: 80px;
}
.link-more {
width: 90%;
}
.link-more a {
width: 48%;
} #partner {
padding: 80px 0px 60px;
}
.partner-right {
display: none;
}
.partner-wrapper {
width: 90%;
position: relative;
}
.partner-right {
position: absolute;
right: 0;
}
.partner-left {
width: 90%;
}
.partner-inner {
display: block;
justify-content: unset;
padding: 20px 0 0;
}
.partner-photo1 {
width: 35%;
margin: 0 auto;
margin-top: 15px;
}
.partner-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.partner-text1 {
width: 85%;
margin: 0 auto;
margin-top: 20px;
}
.partner-text3 {
margin-top: 15px;
}
.partner-more .more-link, .link-more .more-link{
width: calc(100% - 0rem);
padding: 15px 0px;
margin-top: 30px;
}
.more-link {
margin-top: 30px;
padding: 20px 0px;
width: 90%;
}
.more-link-wrapper {
width: 100%;
display: block;
}
}
@media screen and (max-width:750px) {
header {
animation: 4s forwards head;
}
.view-over {
animation: 4s forwards dawn;
}
.view-text {
animation: 4s forwards text;
}
.main-over {
animation: 4s forwards main;
}
.kv-movie-sub video {
width: 100%;
} #message {
margin-top: 80px;
}
#message .page-title p {
font-size: 14px;
}
.message-title {
height: 40px;
top: -38px;
}
.message-text1 {
margin-top: 30px;
}
#message .page-title img {
width: 98%;
}
.message-under-triangle {
margin-top: 30px;
}
.message-text p {
margin-bottom: 20px;
font-size: 15px;
}
.message-list1 ul li {
font-size: 16px;
}
.message-text3 {
margin-top: 30px;
padding: 30px 20px;
}
.message-text3 p {
font-size: 16px;
letter-spacing: .05em;
}
.message-list2 ul li {
padding-left: 25px;
background-size: 15px;
}
.message-list2 ul li span {
font-size: 16px;
line-height: 1.6;
letter-spacing: .08em
}
.message-list2 {
margin-top: 20px;
} .concept-super {
margin-top: 30px;
border-radius: 100px 100px 0px 0px;
padding: 30px 0px 50px;
background-size: 300px 300px;
}
.concept-movie1, .concept-movie2 {
margin-bottom: 20px;
}
.concept-list ul li {
font-size: 15px;
}
.concept-list1 {
margin-top: 30px;
}
#concept .page-title h1 {
font-size: 22px;
line-height: 1.6;
}
.concept-text1 {
width: 100%;
margin-top: 15px;
}
.concept-wrapper1 {
margin-top: 30px;
display: block;
}
.concept-wrapper2 {
margin-top: 30px;
display: block;
}
.concept-wrapper3 {
display: block;
margin-top: 30px;
}
.concept-text p {
font-size: 15px;
margin-bottom: 15px;
}
.concept-text2 {
margin-top: 20px;
}
.concept-list2 {
margin-top: 30px;
}
.concept-photo1 {
width: 70%;
}
.concept-right {
margin-top: 30px;
}
.concept-left {
width: 90%;
margin: 0 auto;
}
.concept-text3 p {
margin-bottom: 20px;
}
.concept-photo4 {
width: 90%;
margin: 0 auto;
}
.concept-text4 {
width: 100%;
margin-top: 30px;
}
.concept-text4 p {
margin-bottom: 20px;
}
.contents-photo2 {
width: 100%;
}
.contents-text4{
margin-top: 30px;
}
.contents-text4 p {
font-size: 15px;
margin-bottom: 20px;
} #ism {
margin-top: 30px;
}
.ism-text {
width: 85%;
margin: 0 auto;
}
.ism-text p {
text-align: left;
font-size: 15px;
}
.ism-text .font-orange {
font-size: 20px;
}
.ism-photo {
margin-top: 50px;
}
.link-more .more-link {
width: 85%;
}
.link-more .more-link span {
font-size: 15px;
} #partner {
padding-top: 20px;
padding: 50px 0px 60px;
background-size: 100%;
}
#partner h2 {
font-size: 40px;
}
#partner .title {
display: unset;
}
#partner .title span {
font-size: 16px;
}
.partner-left {
width: 85%;
}
.partner-inner {
display: block;
justify-content: space-between;
padding: unset;
margin-top: 10px;
}
.partner-photo1 {
width: 60%;
}
.partner-text {
max-width: unset;
width: 100%;
margin: 0 auto;
}
.partner-text p {
margin-bottom: 20px;
}
.partner-text3 {
width: 90%;
padding: 20px 15px;
margin-top: 10px;
}
.partner-text3 p {
font-weight: normal;
padding-left: 0;
font-size: 14px;
letter-spacing: .08em;
}
.partner-text2 {
margin-top: 20px;
}
.partner-text2 p {
font-size: 15px;
}
.partner-text1 {
margin-top: 20px;
}
.partner-info1 h3 {
font-size: 28px;
}
.partner-info2 li {
font-size: 14px;
line-height: 1.6;
}
.more-link-wrapper {
margin-top: 30px;
}
.more-link span {
font-size: 16px;
}
.more-link {
margin-top: 20px;
padding: 15px 0px;
}
.link-more{
width: 95%;
display: block;
}
.partner-more {
width: 95%;
display: block;
}
.partner-more a:last-of-type .more-link {
margin-top: 30px;
}
.partner-more .more-link span {
font-size: 15px;
letter-spacing: .12em;
}
}