present-6.scss
#present-6-page {
width: 100%;
max-width: 770px;
margin: 6% auto 0;
* {
font-family: "Noto Sans JP", sans-serif;
box-sizing: border-box;
line-height: 1.15;
letter-spacing: 0;
}
img {
max-width: 100%;
height: auto;
display: -webkit-box;
display: -moz-box;
display: block;
}
a {
display: -webkit-box;
display: -moz-box;
display: block;
text-decoration: none;
}
.txt-red {
color: #e23b3b;
}
.sp-none {
display: -moz-box;
display: -webkit-box;
display: block;
@media (max-width: 770px) {
-moz-display: none;
-webkit-display: none;
display: none;
}
}
.sp-none-inline {
-moz-display: inline-block;
-webkit-display: inline-block;
display: inline-block;
@media (max-width: 770px) {
-moz-display: none;
-webkit-display: none;
display: none;
}
}
.pc-none {
-moz-display: none;
-webkit-display: none;
display: none;
@media (max-width: 770px) {
display: -moz-box;
display: -webkit-box;
display: block;
}
}
.pc-none-inline {
-moz-display: none;
-webkit-display: none;
display: none;
@media (max-width: 770px) {
-moz-display: inline-block;
-webkit-display: inline-block;
display: inline-block;
}
}
@keyframes slideTextX100 {
from {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
to {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideTextX-100 {
from {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
to {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.present-6-page__main {
width: 100%;
padding-bottom: 25px;
position: relative;
background: url(/images/present-6/main-bg-01_pc.jpg) top center / cover;
@media (max-width: 770px) {
padding-bottom: 3%;
}
&__head {
width: 100%;
max-width: 770px;
margin: 0 auto;
position: relative;
overflow: hidden;
display: block;
&::before {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 50%;
height: 100%;
background: linear-gradient(120deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 100%);
animation: shine 3.5s infinite;
z-index: 10;
}
@keyframes shine {
0% {
left: -300%;
}
100% {
left: 600%;
}
}
}
&__ttl {
width: 100%;
max-width: 770px;
margin: 60px auto 10px;
@media (max-width: 770px) {
margin: 8% auto 2%;
}
}
&__img {
width: 100%;
max-width: 770px;
margin: 0 auto 30px;
@media (max-width: 770px) {
margin: 0 auto 5%;
}
&.top {
margin: 0 auto 20px;
@media (max-width: 770px) {
margin: 0 auto 3%;
}
}
&.no {
margin: 0 auto;
}
}
&__contact {
width: 100%;
max-width: 770px;
margin: 0 auto;
}
}
.present-6-page__contact {
width: 100%;
padding-bottom: 60px;
position: relative;
z-index: 2;
background: #ffdc36;
@media (max-width: 770px) {
padding-bottom: 8%;
}
&__ttl {
width: 100%;
max-width: 770px;
margin: 0 auto 30px;
@media (max-width: 770px) {
margin: 0 auto 5%;
}
}
&__flex {
@media (max-width: 770px) {
padding: 0 6%;
}
}
&__tel {
width: 100%;
max-width: 670px;
margin: 0 auto;
background: #fff;
border-radius: 15px;
border: 5px solid #ff6216;
display: -moz-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-direction: column;
-webkit-box-direction: normal;
flex-direction: column;
-moz-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
@media (max-width: 770px) {
border-radius: 10px;
border: 3px solid #ff6216;
}
&-ttl {
@media (max-width: 770px) {
height: 14vw;
}
&-txt {
margin: 20px 0 20px 95px;
@media (max-width: 770px) {
margin: 4% 0 4% 12%;
}
p {
font-weight: 500;
font-size: 26px;
line-height: 32px;
letter-spacing: 1px;
color: #000;
position: relative;
@media (max-width: 770px) {
font-size: 3.5vw;
line-height: 5vw;
letter-spacing: 0;
}
}
}
&-img {
position: absolute;
top: -40px;
right: 45px;
@media (max-width: 770px) {
max-width: 22vw;
top: -6vw;
right: 4vw;
}
}
}
&-top {
padding-left: 30px;
margin-bottom: 5px;
display: -moz-flexbox;
display: -webkit-box;
display: flex;
-moz-flex-align: center;
-webkit-box-align: center;
align-items: center;
-moz-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
position: relative;
@media (max-width: 770px) {
padding-left: 5%;
}
&__txt {
display: -moz-flexbox;
display: -webkit-box;
display: flex;
p {
font-weight: 900;
font-size: 64px;
letter-spacing: 1px;
color: #222;
position: relative;
@media (max-width: 770px) {
font-size: 9vw;
letter-spacing: 0;
}
&:before {
width: 92px;
height: 60px;
margin-right: 20px;
content: "";
display: inline-block;
background: url(/images/present-6/contact-img-02_pc.png) top center / cover;
@media screen and (max-width: 770px) {
width: 11vw;
height: 7vw;
margin-right: 5px;
}
}
}
}
&::after {
position: absolute;
content: "\f138";
font-size: 24px;
font-weight: 900;
font-family: "Font Awesome 5 Free";
color: #ff6216;
position: absolute;
right: 15px;
top: 57%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
@media screen and (max-width: 770px) {
right: 1vw;
top: 57%;
font-size: 5vw;
}
}
}
&-txt {
padding-left: 16px;
padding-bottom: 20px;
@media (max-width: 770px) {
padding-left: 0;
padding-bottom: 4%;
display: flex;
justify-content: center;
}
p {
font-weight: 900;
font-size: 21.6px;
color: #222;
@media (max-width: 770px) {
text-align: center;
font-size: 3vw;
line-height: 3.2vw;
letter-spacing: 0.1vw;
}
}
}
}
&__text {
text-align: center;
padding: 0px 6%;
line-height: 1.6em;
@media (max-width: 480px) {
padding: 3%;
line-height: 1.6em;
border: solid 2px #fb5c1f;
width: 88%;
margin: 0 auto;
background: rgba(255, 255, 255, .74);
}
}
}
.nbp2-yokkaichi-page {
&__from-method {
width: 88%;
max-width: 670px;
margin: 30px auto;
display: -moz-flexbox;
display: -webkit-box;
display: flex;
justify-content: -moz-space-between;
justify-content: -webkit-space-between;
justify-content: space-between;
-moz-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
gap: 15px;
@media (max-width: 480px) {
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
&-item {
width: 100%;
max-width: 450px;
display: -moz-flexbox;
display: -webkit-box;
display: flex;
justify-content: -moz-space-between;
justify-content: -webkit-space-between;
justify-content: space-between;
-ms-flex-direction: column;
-webkit-box-direction: normal;
flex-direction: column;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
.nbp2-yokkaichi-page__from-button {
width: 100%;
max-width: 410px;
margin: 0 auto;
padding: 0;
}
.nbp2-yokkaichi-page__from-link {
width: 100%;
height: 80px;
cursor: pointer;
display: -moz-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-direction: column;
-webkit-box-direction: normal;
flex-direction: column;
-moz-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
border-radius: 100px;
position: relative;
filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, .2));
margin: 0 auto;
span {
text-align: center;
font-weight: 600;
font-size: 1.8rem;
color: #fff;
}
&::after {
position: absolute;
content: '\f138';
font-weight: 900;
font-family: "Font Awesome 5 Free";
font-size: 2rem;
color: #fff;
right: 20px;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
}
&:nth-of-type(1) {
.nbp2-yokkaichi-page__from-link {
background: linear-gradient(90deg, #ff0101, #de0101, #b20000);
}
}
&:nth-of-type(2) {
.nbp2-yokkaichi-page__from-link {
background: linear-gradient(90deg, #01b901, #01a501, #008300);
}
}
}
}
}
}