html,
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
border: none;
}
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,p,a {
margin: 0;
padding: 0;
line-height: 2;
text-decoration: none;
color: #000;
}
#lp_wrap {
position: relative;
font-family: "Hanken Grotesk", "Noto Sans JP", sans-serif;
letter-spacing: 1px;
line-height: 2;
font-size: 12px;
}
@media only screen and (min-width: 769px) {
}
#visual {
position: relative;
width: 100%;
height: 700px;
min-height: 100vh;
overflow: hidden;
}
#visual .bg {
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
}
#visual .bl {
background: url("../img/BL_top.jpg") no-repeat top;
background-size: cover;
}
#visual .br {
background: url("../img/BR_top.jpg") no-repeat top;
background-size: cover;
}
#visual .by {
background: url("../img/BY_top.jpg") no-repeat top;
background-size: cover;
}
#visual .cl {
background: url("../img/CL_top.jpg") no-repeat top;
background-size: cover;
}
#visual .ch {
background: url("../img/CH_top.jpg") no-repeat top;
background-size: cover;
}
#visual .bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*/カミスン用0.5→本番は0.3/*/
background: rgba(0,0,0,0.5)
}
#visual h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 50%;
line-height: 0;
/*/カミスン用/*/
opacity: 40%;
}
#visual .logo {
position: absolute;
bottom: 24%;
left: 50%;
transform: translate(-50%,0%);
width: 60%;
line-height: 0;
filter: invert(1);
}
#contents_wrap h1 {
display: none;
}
#contents_wrap .logo {
display: none;
}
@media only screen and (min-width: 769px) {
#visual {
position: fixed;
width: 45%;
height: 700px;
min-height: 100vh;
overflow: hidden;
}
#visual h1 {
display: none;
}
#visual .logo {
display: none;
}
#visual .bg::before {
/*カミスン0.5本番は0*/
background: rgba(0,0,0,0.5)
}
#contents_wrap {
position: relative;
width: 55%;
margin: 0 0 0 45%;
background: #FFF;
padding: 7% 2% 0;
/*border-radius: 50px 50px 0 0;*/
box-sizing: border-box;
}
#contents_wrap h1 {
display: block;
width: 40%;
margin: 0 auto;
line-height: 0;
filter: invert(1);
}
#contents_wrap .logo {
display: block;
width:30%;
margin: 10% auto;
line-height: 0;
}
}
#information {
position: relative;
margin: 0 auto;
}
#information .copy {
margin: 15% auto;
width: 84%;
max-width: 500px;
}
#information .copy h2 {
text-align: center;
font-size: 16px;
font-weight: 600;
margin-bottom: 10%;
}
#information .copy p {
font-size: 12px;
}
#information .present {
background: #e1d9cc;
padding: 10% 0 15%;
}
#information .box {
padding: 6% 0;
}
#information .box h3 {
text-align: center;
font-size: 24px;
letter-spacing: 2px;
font-weight: 600;
margin-bottom: 2%;
}
#information .box p {
text-align: center;
font-size: 14px;
}
#information .box p span {
font-weight: 700;
border-bottom: 1px solid #000;
}
#information .btn a {
display: block;
width: 90%;
max-width: 400px;
border: 1px solid #000;
box-sizing: border-box;
padding: 5px;
text-align: center;
font-size: 16px;
font-weight: 600;
margin: 5% auto;
}
#contents {
position: relative;
margin: 10% auto;
}
#contents h3 {
text-align: center;
font-size: 24px;
letter-spacing: 2px;
font-weight: 600;
margin-bottom: 2%;
}
#contents ul {
margin: 10% auto;
}
#contents li {
position: relative;
margin: 15% auto;
padding-top: 5%;
}
#contents .no {
position: absolute;
top: 0px;
left: 20px;
font-weight: 600;
font-size:20px;
writing-mode: vertical-rl;
line-height: 1;
z-index: 10
}
#contents .item {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5px;
}
#contents .item .img {
line-height: 0;
}
#contents .item .img:nth-of-type(1) {
grid-column: 1/3;
grid-row: 1/3;
}
@media only screen and (min-width: 769px) {
#contents .item {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 5px;
}
#contents .item .img:nth-of-type(1) {
grid-column: 1/3;
grid-row: 1/3;
}
}
#contents .name {
margin: 5% auto;
width: 90%;
}
#contents .name h4 {
font-size: 20px;
font-weight: 500;
letter-spacing: 2px;
position: relative;
padding-bottom: 5%;
}
#contents .name h4 span{
font-size: 10px;
}
#contents .name h4::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 25px;
height: 1px;
background: #000;
}
#contents .name .data {
margin: 5% auto;
display: grid;
grid-template-columns: 40% 55%;
column-gap: 5%;
}
#contents .name .comment {
grid-row: 1/3;
}
#contents .name .detail {
grid-row: 1/2;
}
#contents .name .btn {
grid-row: 2/3;
}
#contents .name p {
font-size: 10px;
}
#contents .name .detail p {
font-weight: 600;
font-size: 12px;
}
#contents .name .btn a {
box-sizing: border-box;
border: 1px solid #000;
text-align: center;
font-size: 12px;
font-weight: 600;
display: block;
width: 100%;
padding: 5px ;
margin-top: 10%;
}
#contents .vote a {
box-sizing: border-box;
border: 1px solid #000;
text-align: center;
font-size: 20px;
font-weight: 600;
display: block;
width: 90%;
max-width: 400px;
padding: 5px;
margin: 20% auto;
}
#contents .vote a span {
font-size: 10px;
margin-left: 10px
}
@media only screen and (min-width: 769px) {
#contents .name h4 {
padding-bottom: 2%;
}
#contents .name .data {
margin: 2% auto;
display: grid;
grid-template-columns: 40% 50%;
column-gap: 10%;
}
}
#footer {
margin: 25% auto;
position: relative;
}
#footer h3 {
text-align: center;
font-size: 24px;
letter-spacing: 2px;
font-weight: 600;
margin-bottom: 2%;
}
#footer .coupon {
background: #e1d9cc;
padding: 10% 0 15%;
margin: 10% auto;
}
#footer .coupon h4 {
text-align: center;
font-size: 16px;
}
#footer .coupon .img {
width: 80%;
max-width: 400px;
margin: 5% auto;
}
#footer .coupon p {
width: 80%;
font-size: 10px;
margin: 0 auto;
}
#footer .howto {
position: relative;
}
#footer .howto li {
position: relative;
width: 90%;
margin: 15% auto;
}
#footer .howto li::before {
content: "";
position: absolute;
bottom: 0;
left: 3.8%;
width: 96.2%;
height: 1px;
background: #000;
}
#footer .howto .no {
writing-mode: vertical-rl;
position: absolute;
top: 0;
left: 0;
height: 100%;
z-index: 10
}
#footer .howto .no span {
background: #FFF;
display: inline-block;
z-index: 10;
position: relative;
padding-bottom: 5%;
}
#footer .howto .no::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background: #000;
transform: translate(-50%,0);
}
#footer .howto h4 {
font-size: 22px;
font-weight: 600;
}
#footer .howto p {
font-size: 12px;
font-weight: 600;
margin: 2% 0
}
#footer .howto p.small {
font-size: 10px;
font-weight: 400;
margin: 2% 0
}
#footer .howto .img {
box-sizing: border-box;
padding: 10% 0;
width: 85%;
}
#footer .howto .inner {
width: 85%;
margin-left: 15%;
}
@media only screen and (min-width: 769px) {
#footer .howto li {
width: 70%;
margin: 15% auto;
}
#footer .howto li::before {
left: 3%;
width: 97%;
}
}
#footer .txt {
width: 90%;
margin: 25% auto;
}
#footer .txt p {
margin: 10px auto;
font-size: 10px;
}
#footer .txt p span {
font-weight: 600;
display: block;
}
#footer .other {
margin: 25% auto;
}
#footer .other ul {
margin: 10% auto;
display: grid;
grid-template-columns: 1fr 1fr;
box-sizing: inherit;
padding: 5px
}
#footer .other ul li {
position: relative;
margin: 2px
}
#footer .other ul li a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10
}
#footer .other ul li .img {
line-height: 0;
}
#footer .other ul li .brand {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
transform: translate(-50%,-50%);
filter: invert(1)
}
#footer .er {
width: 50%;
margin: 10% auto 5%;
}
#footer .copyright {
font-size: 10px;
text-align: center;
}
@media only screen and (min-width: 769px) {
#footer .txt {
width: 70%;
margin: 25% auto;
}
}
#visual .bg {
animation: 2.5s keyimg 0s forwards;
}
@keyframes keyimg {
0% {
opacity: 0;
transform:scale(1.1)
}
100% {
opacity: 1;
transform: scale(1)
}
}
.spview {
display: block;
}
.pcview {
display: none;
}
@media only screen and (min-width: 768px) {
.spview {display: none;}
.pcview {display: block;}
}
/*/カミスン用/*/
#visual .cms{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 84%;
line-height: 0;
z-index: 999;
}
@media only screen and (min-width: 769px) {
#visual .cms{
width: 68%;
}
}
/*/END/カミスン用/*/
.anim {
opacity: 0;
transition: 1.6s all 0s ease;
}
.anim.ac {
opacity: 1;
}