line.scss
// メインカラーを設定
$line_accent: #031f4d;
// サブカラーを設定
$line_sub: #ffbba0;
// 彩度の低い背景色を設定
$line_primary: #dbe4f3;
#page_line-contact {
max-width: 770px;
margin: 4% auto 0;
overflow-x: hidden;
a {
display: block;
}
.line-contact-btn {
max-width: 450px;
margin: 0 auto;
@media screen and (max-width: 767px) {
max-width: 300px;
width: 80%;
}
}
.display_sp {
display: none;
@media screen and (max-width: 767px) {
display: block;
}
}
.display_pc {
@media screen and (max-width: 767px) {
display: none;
}
}
.line-btn {
a {
max-width: 450px;
width: 100%;
margin: 0 auto;
@media screen and (max-width: 767px) {
width: 90%;
}
}
}
.width-730 {
max-width: 770px;
box-sizing: border-box;
margin: 0 auto;
padding: 0 20px;
@media screen and (max-width: 1024px) {
padding: 0 2%;
}
@media screen and (max-width: 767px) {
padding: 0 4%;
}
}
img {
display: block;
margin: 0 auto;
}
.display-sp {
display: none;
@media screen and (max-width: 767px) {
display: block;
}
}
.section001 {
h2 {
aspect-ratio: 770/400;
}
}
.section002 {
padding: 50px 0;
@media screen and (max-width: 1024px) {
padding: 5% 0;
}
}
.section004 {
padding: 50px 0 0;
@media screen and (max-width: 1024px) {
padding: 5% 0 0;
}
&__inner {
p {
margin: 0 auto 20px;
font-size: 1.8rem;
line-height: 2em;
max-width: 650px;
@media screen and (max-width: 1024px) {
margin: 0 auto 2%;
max-width: 540px;
font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
font-size: 1.4rem;
text-align: center;
}
@media screen and (max-width: 540px) {
font-size: 1.3rem;
}
}
&--ttl {
text-align: center;
font-size: 2.8rem;
font-weight: bold;
margin: 0 0 30px;
width: 100%;
line-height: 1.8em;
@media screen and (max-width: 1024px) {
margin: 0 auto 3%;
}
@media screen and (max-width: 767px) {
line-height: 1.4em;
font-size: 2rem;
}
strong {
color: $line_accent;
}
}
}
}
// .section006 {
// margin-top: 50px;
// background-color: #eee;
// width: 100%;
// max-width: 770px;
// height: auto;
// @media screen and (max-width: 1024px) {
// margin-top: 5%;
// }
// &__inner {
// padding: 50px;
// @media screen and (max-width: 1024px) {
// padding: 5%;
// }
// .bottom {
// padding-bottom: 50px;
// @media screen and (max-width: 1024px) {
// padding-bottom: 5%;
// }
// }
// div {
// margin: 0 0 20px;
// @media screen and (max-width: 1024px) {
// margin: 0 0 2%;
// }
// &:last-of-type {
// margin: 0;
// }
// }
// h3 {
// text-align: center;
// font-size: 2.8rem;
// font-weight: bold;
// margin: 0 0 30px;
// width: 100%;
// line-height: 1.8em;
// max-width: none;
// @media screen and (max-width: 1024px) {
// margin: 0 auto 3%;
// }
// @media screen and (max-width: 767px) {
// line-height: 1.4em;
// font-size: 2rem;
// }
// }
// }
// }
.section007 {
&__inner {
.sec007-ttl {
padding: 50px;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 5%;
}
}
.bottom {
padding-bottom: 50px;
@media screen and (max-width: 1024px) {
padding-bottom: 5%;
}
}
h3 {
text-align: center;
font-size: 2.8rem;
font-weight: bold;
margin: 60px 0 30px;
width: 100%;
line-height: 1.8em;
max-width: none;
@media screen and (max-width: 1024px) {
margin: 6% auto 3%;
}
@media screen and (max-width: 767px) {
line-height: 1.4em;
font-size: 2rem;
}
}
}
}
.section009 {
margin-top: 50px;
background-color: #eee;
width: 100%;
max-width: 770px;
height: auto;
@media screen and (max-width: 1024px) {
margin-top: 5%;
}
&__inner {
margin-bottom: 50px;
padding: 50px;
@media screen and (max-width: 1024px) {
margin-bottom: 5%;
padding: 5%;
}
.bottom {
padding-bottom: 50px;
@media screen and (max-width: 1024px) {
padding-bottom: 5%;
}
}
div {
margin: 0 0 20px;
@media screen and (max-width: 1024px) {
margin: 0 0 2%;
}
&:last-of-type {
margin: 0;
}
}
h3 {
text-align: center;
font-size: 2.8rem;
font-weight: bold;
margin: 0 0 30px;
width: 100%;
line-height: 1.8em;
max-width: none;
@media screen and (max-width: 1024px) {
margin: 0 auto 3%;
}
@media screen and (max-width: 767px) {
line-height: 1.4em;
font-size: 2rem;
}
strong {
font-size: 3.8rem;
color: $line_accent;
margin: 0 0.4%;
@media screen and (max-width: 767px) {
font-size: 3.8rem;
}
}
}
}
}
.section010 {
&__inner {
.bottom {
padding-bottom: 50px !important;
@media screen and (max-width: 1024px) {
padding-bottom: 5%;
}
}
}
}
}
// add20220705
#page_line-contact {
p,
li,
h3,
h4 {
font-size: 2rem;
line-height: 1.6em;
letter-spacing: 0.1em;
@media screen and (max-width: 767px) {
font-size: 1.6rem;
}
}
.section003 {
/* ドット（水玉）模様のCSS */
background-color: $line_primary;
background-image: radial-gradient(#f6f6f6 31%, transparent 31%), radial-gradient(#f6f6f6 31%, transparent 31%);
background-position: 0 0, 5px 5px;
background-size: 10px 10px;
padding: 7% 0 0;
h3 {
text-align: center;
font-size: 2.8rem;
font-weight: bold;
width: 100%;
line-height: 1.8em;
@media screen and (max-width: 767px) {
font-size: 2rem;
}
span {
font-size: 3.2rem;
padding-top: .2em;
background-position: top left -2px;
background-repeat: repeat-x;
background-size: 1.1em .3em;
background-image: radial-gradient(.15em .15em at center center, $line_accent, $line_accent 100%, transparent);
@media screen and (max-width: 767px) {
font-size: 2.2rem;
}
}
}
ul {
box-sizing: border-box;
padding: 0 8% 2%;
li {
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding: 3%;
&:not(:last-of-type) {
border-bottom: 1px dashed #999;
}
.svg {
width: 45px;
margin-right: 2%;
display: flex;
align-items: center;
justify-content: center;
@media screen and (max-width: 767px) {
width: 65px;
}
.st0 {
fill: $line_accent;
}
svg {
width: 100%;
height: 100%;
}
g {
width: 100%;
height: 100%;
}
}
}
}
.svg-wave {
position: relative;
bottom: -5px;
svg {
path {
fill: #fff;
}
}
}
}
.section006 {
background-color: $line_primary;
padding: 5%;
box-sizing: border-box;
margin: 8% 0;
h3 {
font-size: 2.8rem;
text-align: center;
font-weight: bold;
margin-bottom: 4%;
@media screen and (max-width: 767px) {
font-size: 2rem;
}
}
ul {
li {}
.item {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: stretch;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
border: 2px solid $line_accent;
max-width: 650px;
margin: 0 auto;
@media screen and (max-width: 520px) {
border-radius: 7px;
}
&:not(:last-of-type) {
margin-bottom: 3%;
}
&__num {
position: relative;
display: block;
background-color: $line_accent;
width: 100px;
height: 100px;
@media screen and (max-width: 767px) {
width: 80px;
height: 80px;
}
@media screen and (max-width: 520px) {
width: 14vw;
height: 17vw;
}
span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 3.8rem;
font-weight: bold;
@media screen and (max-width: 767px) {
font-size: 3.2rem;
}
@media screen and (max-width: 520px) {
font-size: 2.4rem;
}
}
}
&__txt {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4%;
width: calc(100% - 100px);
font-weight: bold;
@media screen and (max-width: 767px) {
width: calc(100% - 80px);
}
@media screen and (max-width: 520px) {
font-size: 3.3vw;
line-height: 1.4em;
width: calc(100% - 14vw);
}
i {
color: $line_accent;
font-size: 6rem;
@media screen and (max-width: 767px) {
font-size: 8vw;
}
}
}
}
}
}
.section007 {
&__list {
background-color: $line_primary;
border-radius: 10px;
border-top: 1px solid $line_accent;
border-right: 1px solid $line_accent;
border-bottom: 3px solid $line_accent;
border-left: 1px solid $line_accent;
max-width: 650px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
padding: 3%;
&--item {
position: relative;
&:nth-of-type(1) {
margin-bottom: 2%;
}
i {
position: absolute;
display: block;
width: 15px;
height: 15px;
background-color: $line_accent;
transform: rotate(-45deg);
top: 12px;
left: 0;
@media screen and (max-width: 767px) {
width: 10px;
height: 10px;
top: 1.4vw;
}
@media screen and (max-width: 480px) {
top: 1.8vw;
}
}
p {
font-size: 2.3rem;
padding-left: 23px;
font-weight: bold;
letter-spacing: 0;
@media screen and (max-width: 767px) {
font-size: 1.8rem;
width: 63vw;
padding-left: 16px;
}
@media screen and (max-width: 480px) {
font-size: 1.4rem;
}
}
}
&::after {
position: absolute;
content: "";
display: block;
background-image: url(../images/line/section007_pic1.png);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
width: 114px;
height: 120px;
right: 10px;
bottom: 10px;
@media screen and (max-width: 767px) {
width: 80px;
height: 110px;
}
@media screen and (max-width: 480px) {
width: 60px;
height: 90px;
}
}
}
}
.section009 {
background-color: $line_primary;
ul {
max-width: 650px;
width: 100%;
margin: 0 auto;
li {
box-sizing: border-box;
background-color: #fff;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 2% 4%;
border: 2px solid $line_accent;
border-radius: 10px;
@media screen and (max-width: 480px) {
padding: 3% 4%;
border-radius: 8px;
}
.step {
margin: 0 30px 0 0;
@media screen and (max-width: 767px) {
margin: 0 3% 0 0;
}
@media screen and (max-width: 480px) {
margin: 0 4% 0 0;
}
span {
color: $line_accent;
font-weight: bold;
&:nth-of-type(1) {
font-size: 1.8rem;
letter-spacing: 0;
line-height: 1.1em;
display: block;
@media screen and (max-width: 480px) {
font-size: 2.4vw;
}
}
&:nth-of-type(2) {
font-size: 3.6rem;
display: block;
text-align: center;
@media screen and (max-width: 480px) {
font-size: 5.2vw;
line-height: 1.2em;
}
}
}
}
.txt {
font-size: 2.6rem;
font-weight: bold;
margin-right: 20px;
line-height: 1.2em;
@media screen and (max-width: 767px) {
font-size: 2rem;
margin-right: 3%;
width: 50vw;
}
@media screen and (max-width: 480px) {
font-size: 1.4rem;
}
@media screen and (max-width: 340px) {
font-size: 1.3rem;
}
}
.img {
margin: 0 0 0 auto;
img {
margin: 0 0 0 auto;
@media screen and (max-width: 767px) {
width: 142px;
}
@media screen and (max-width: 480px) {
width: 20vw;
}
}
}
&:not(:last-of-type) {
margin-bottom: 20px;
@media screen and (max-width: 767px) {
margin-bottom: 4%;
}
}
}
}
}
.section010 {
.heart {
position: relative;
display: block;
margin: 0 auto 3%;
@media screen and (max-width: 480px) {
width: 27vw;
}
i {
position: absolute;
font-size: 3rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: $line_accent;
@media screen and (max-width: 480px) {
font-size: 2rem;
}
}
}
h3 {
font-weight: bold;
font-size: 2.8rem;
text-align: center;
margin-bottom: 40px;
@media screen and (max-width: 767px) {
font-size: 4.2vw;
margin-bottom: 6%;
}
@media screen and (max-width: 480px) {
font-size: 5.2vw;
}
b {
font-size: 3.2rem;
background: linear-gradient(transparent 70%, $line_sub 70%);
display: block;
width: 680px;
margin: 0 auto 2%;
@media screen and (max-width: 767px) {
font-size: 5.6vw;
width: 80vw;
background: linear-gradient(transparent 80%, $line_sub 80%);
margin: 0 auto 4%;
}
@media screen and (max-width: 480px) {
font-size: 6.6vw;
width: 88vw;
line-height: 1.3em;
}
}
.display-sp {
display: none;
@media screen and (max-width: 767px) {
display: block;
}
}
}
}
.section-btn {
.btn {
box-sizing: border-box;
max-width: 450px;
display: flex;
margin: 0 auto;
background-color: $line_accent;
padding: 0 2%;
&__hand {
width: 150px;
img {
margin: 0;
}
}
&__txt {
width: 200px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
p {
&:nth-of-type(1) {
background-color: $line_sub;
padding: 1% 2%;
box-sizing: border-box;
border-bottom: 2px solid #fff;
border-radius: 5px;
font-size: 1.2rem;
}
&:nth-of-type(2) {
font-size: 2rem;
color: #fff;
}
&:nth-of-type(3) {
font-size: 1.2rem;
color: #fff;
}
}
}
&__qr {
width: 100px;
}
}
}
}