amamori.scss
.amamori {
position: relative;
overflow-x: hidden;
img {
border-style: none;
max-width: 100%;
width: auto;
height: auto;
vertical-align: middle;
display: block;
}
section {
box-sizing: border-box;
}
.display-pc {
display: block;
@media screen and (max-width: 767px) {
display: none;
}
}
.display-tb {
display: none;
@media screen and (max-width: 1024px) {
display: block;
}
}
.display-sp {
display: none;
@media screen and (max-width: 767px) {
display: block;
}
}
.display-sp2 {
display: none;
@media screen and (max-width: 767px) {
display: block;
}
@media screen and (max-width: 374px) {
display: none;
}
}
.display-sp3 {
display: none;
@media screen and (max-width: 767px) {
display: none;
}
@media screen and (max-width: 374px) {
display: block;
}
}
.display-sp4 {
display: none;
@media screen and (max-width: 430px) {
display: block;
}
}
p {
letter-spacing: 0;
}
.amamori001 {
&__wide {
@media screen and (min-width: 1331px) {
width: 1920px;
position: relative;
right: calc(960px - 50%);
}
@media screen and (max-width: 1330px) and (min-width: 1025px) {
width: 144.36vw;
position: relative;
right: calc(72.18vw - 50%);
}
h2 {
@media screen and (max-width: 1024px) {
height: 51vw;
}
@media screen and (max-width: 767px) {
height: auto;
}
img {
@media screen and (max-width: 1024px) {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
}
.amamori002 {
padding: 100px 0 80px;
@media screen and (max-width: 1024px) {
padding: 4% 0;
}
@media screen and (max-width: 767px) {
padding: 8.93% 0 12%;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
margin: 0 auto;
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
> img {
margin-bottom: 20px;
@media screen and (max-width: 1024px) {
margin-bottom: 2%;
}
}
}
}
}
.amamori003 {
background-color: #eeeeee;
padding: 80px 0 40px;
@media screen and (max-width: 1024px) {
padding: 6% 0 4%;
}
@media screen and (max-width: 767px) {
padding: 16.67% 0 7.73%;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
text-align: center;
> img {
margin: 0 auto 65px;
@media screen and (max-width: 1024px) {
width: 72.46%;
margin-bottom: 4%;
}
@media screen and (max-width: 767px) {
width: auto;
margin-bottom: 10.29%;
}
}
}
&--cnt {
> li {
float: left;
margin-bottom: 30px;
@media screen and (max-width: 1024px) {
width: 48.5%;
margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
width: 100%;
margin-bottom: 5.15%;
}
&:nth-of-type(odd) {
margin-right: 30px;
@media screen and (max-width: 1024px) {
margin-right: 3%;
}
@media screen and (max-width: 767px) {
margin-right: 0;
}
}
> h4 {
text-align: center;
letter-spacing: 0.06em;
font-size: 28px;
font-weight: bold;
color: #fff;
background-color: #d30e1e;
padding: 25px 0;
border-radius: 10px 10px 0 0;
@media screen and (max-width: 1024px) {
padding: 2.5% 0;
font-size: 2.7vw;
}
@media screen and (max-width: 767px) {
font-size: 4vw;
border-radius: 1.56vw 1.56vw 0 0;
}
}
> img {
border-radius: 0 0 10px 10px;
@media screen and (max-width: 767px) {
border-radius: 0 0 1.56vw 1.56vw;
}
}
}
}
}
}
.amamori004 {
padding-bottom: 80px;
margin-top: -1px;
@media screen and (max-width: 1024px) {
padding-bottom: 8%;
}
@media screen and (max-width: 767px) {
padding-bottom: 12.53%;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
&--arrow {
text-align: center;
margin-bottom: 50px;
@media screen and (max-width: 1024px) {
margin-bottom: 4.88%;
}
@media screen and (max-width: 767px) {
margin-bottom: 6%;
}
span {
width: 0;
height: 0;
border-style: solid;
border-width: 100px 150px 0 150px;
border-color: #eee transparent transparent transparent;
display: inline-block;
@media screen and (max-width: 1024px) {
border-width: 9.77vw 14.65vw 0 14.65vw;
}
@media screen and (max-width: 767px) {
border-width: 12.53vw 18.73vw 0 18.73vw;
}
}
}
> img {
margin: 0 auto 60px;
@media screen and (max-width: 1024px) {
margin: 0 auto 6%;
}
@media screen and (max-width: 767px) {
margin: 0 auto 4%;
}
}
> h3 {
> img {
margin: 0 auto 60px;
@media screen and (max-width: 1024px) {
margin-bottom: 6%;
}
@media screen and (max-width: 767px) {
width: 75.4%;
margin-bottom: 5.44%;
}
}
}
&--cnt {
border-radius: 10px;
background-color: #f1f3f8;
padding: 30px 40px;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 3% 4%;
}
@media screen and (max-width: 767px) {
padding: 5.15%;
}
> p {
line-height: 1.625em;
font-size: 16px;
font-weight: 500;
@media screen and (max-width: 767px) {
line-height: 1.85;
}
> img {
float: right;
margin-top: -70px;
margin-left: 10px;
margin-bottom: 70px;
@media screen and (max-width: 1024px) {
margin-top: 0;
margin-left: 2%;
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
width: 29%;
}
}
> strong {
color: #e67201;
}
}
}
}
}
.amamori005 {
background-color: #faf6f6;
padding: 70px 0 60px;
@media screen and (max-width: 1024px) {
padding: 6% 0;
}
@media screen and (max-width: 767px) {
padding: 15.07% 0 7.87%;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
> img {
margin: 0 auto 70px;
@media screen and (max-width: 1024px) {
width: 53.42%;
margin-bottom: 4%;
}
@media screen and (max-width: 767px) {
width: 93.72%;
margin-bottom: 10.44%;
}
}
}
> ul {
> li {
float: left;
margin-bottom: 20px;
background-color: transparent;
border-radius: 10px;
@media screen and (max-width: 1024px) {
margin-bottom: 2%;
}
@media screen and (max-width: 767px) {
margin-bottom: 5.15%;
}
> h4 {
color: #fff;
background-color: #000f36;
text-align: center;
border-radius: 10px 10px 0 0;
font-size: 24px;
font-weight: bold;
padding: 20px;
@media screen and (max-width: 1024px) {
padding: 2%;
font-size: 2.3vw;
}
@media screen and (max-width: 767px) {
padding: 2%;
font-size: 4.5vw;
}
}
> div {
background-color: #fff;
border-radius: 0 0 10px 10px;
> img {
}
> ul {
}
}
}
}
&--cnt01 {
> li {
width: 328px;
@media screen and (max-width: 1024px) {
width: 32%;
}
@media screen and (max-width: 767px) {
width: 100%;
}
&:not(:last-of-type) {
margin-right: 20px;
@media screen and (max-width: 1024px) {
margin-right: 2%;
}
@media screen and (max-width: 767px) {
margin-right: 0;
}
}
> img {
@media screen and (max-width: 767px) {
padding: 2%;
background: #fff;
box-sizing: border-box;
width: 100%;
}
}
> div {
margin-top: -1px;
padding: 30px;
@media screen and (max-width: 1024px) {
padding: 3%;
}
strong {
font-size: 24px;
color: #d8323f;
> span {
font-size: 40px;
}
}
> img {
margin-bottom: 15px;
background-color: #fff;
@media screen and (max-width: 1024px) {
margin-bottom: 1.5%;
}
@media screen and (max-width: 767px) {
padding: 0 2% 2%;
}
}
> ul {
> li {
font-size: 12px;
line-height: 1.625em;
text-indent: -1em;
font-weight: 700;
letter-spacing: 0.01em;
padding-left: 1em;
&:first-letter {
color: #d8323f;
}
}
}
}
}
}
&--cnt02 {
> li {
width: 497px;
@media screen and (max-width: 1024px) {
width: 49%;
}
@media screen and (max-width: 767px) {
width: 100%;
}
&:nth-of-type(odd) {
margin-right: 20px;
@media screen and (max-width: 1024px) {
margin-right: 2%;
}
@media screen and (max-width: 767px) {
margin-right: 0;
}
}
> div {
text-align: center;
padding: 20px 0;
letter-spacing: -0.04em;
strong {
font-size: 24px;
color: #d8323f;
@media screen and (max-width: 767px) {
font-size: 4vw;
}
> span {
font-size: 40px;
@media screen and (max-width: 767px) {
font-size: 7vw;
}
}
}
span {
font-size: 24px;
@media screen and (max-width: 767px) {
font-size: 4vw;
}
}
}
}
}
}
}
.amamori006 {
padding: 40px 0 100px;
@media screen and (max-width: 1024px) {
padding: 4% 0;
}
@media screen and (max-width: 767px) {
padding: 11.6% 0 12%;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
margin: 0 auto;
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
> img {
margin-bottom: 20px;
@media screen and (max-width: 1024px) {
margin-bottom: 2%;
}
}
}
}
}
.amamori007 {
background-color: #faf6f6;
padding: 70px 0 80px;
@media screen and (max-width: 1024px) {
padding: 6% 0 8%;
}
@media screen and (max-width: 767px) {
padding: 14% 0 12%;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
@media screen and (max-width: 1024px) {
margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
margin-bottom: 10.29%;
}
img {
@media screen and (max-width: 767px) {
width: 81.38%;
}
}
}
&--cnt {
background-color: #fff;
box-sizing: border-box;
padding: 40px 30px;
margin-bottom: 60px;
border-radius: 10px;
@media screen and (max-width: 1024px) {
padding: 4% 3%;
margin-bottom: 6%;
}
@media screen and (max-width: 767px) {
padding: 6.62% 5.15% 19.12%;
margin-bottom: 8.97%;
}
> h4 {
text-align: center;
background-color: #000f36;
border-radius: 40px;
padding: 22px;
margin-bottom: 30px;
@media screen and (max-width: 1024px) {
margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
padding: 4.75% 7.38%;
margin: 0 auto 5.74%;
}
> img {
margin: auto;
@media screen and (max-width: 767px) {
max-width: 520px;
width: 100%;
}
}
}
> img {
margin-bottom: 30px;
@media screen and (max-width: 1024px) {
margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
max-width: 520px;
margin: 0 auto 3%;
width: 100%;
}
}
> ul {
padding-bottom: 20px;
@media screen and (max-width: 1024px) {
padding-bottom: 2%;
}
@media screen and (max-width: 767px) {
max-width: 520px;
margin: 0 auto;
}
&:last-of-type {
border-bottom: 2px solid #333;
margin-bottom: 20px;
@media screen and (max-width: 1024px) {
margin-bottom: 2%;
}
}
> li {
float: left;
margin-bottom: 20px;
@media screen and (max-width: 1024px) {
width: 31%;
margin-bottom: 2%;
}
@media screen and (max-width: 767px) {
float: none;
width: 100%;
}
&:not(:last-of-type) {
margin-right: 32px;
@media screen and (max-width: 1024px) {
margin-right: 3.5%;
}
}
> img {
margin-bottom: 20px;
@media screen and (max-width: 1024px) {
margin-bottom: 2%;
}
@media screen and (max-width: 767px) {
margin-bottom: 1%;
}
}
> span {
display: block;
text-align: center;
font-size: 24px;
font-weight: bold;
@media screen and (max-width: 1024px) {
font-size: 2.3vw;
}
@media screen and (max-width: 767px) {
font-size: 14px;
}
}
}
}
> p {
line-height: 1.625em;
font-size: 19.5px;
font-weight: 500;
@media screen and (max-width: 1024px) {
font-size: 16px;
}
@media screen and (max-width: 767px) {
max-width: 520px;
margin: 0 auto;
}
}
}
&--arrow {
text-align: center;
margin-bottom: 30px;
@media screen and (max-width: 1024px) {
margin-bottom: 2.93%;
}
@media screen and (max-width: 767px) {
margin: 2% 0 5.15% ;
}
span {
width: 0;
height: 0;
border-style: solid;
border-width: 60px 100px 0 100px;
border-color: #d70202 transparent transparent transparent;
display: block;
margin: auto;
@media screen and (max-width: 1024px) {
border-width: 5.86vw 9.77vw 0 9.77vw;
}
@media screen and (max-width: 767px) {
border-width: 9.33vw 15.6vw 0 15.6vw;
}
}
}
> img {
margin: 0 auto 40px;
@media screen and (max-width: 1024px) {
margin-bottom: 3.91%;
}
@media screen and (max-width: 767px) {
margin-bottom: 3.82%;
}
}
}
}
.amamori008 {
padding: 98px 0 110px;
@media screen and (max-width: 1024px) {
padding: 6% 0 8%;
}
@media screen and (max-width: 767px) {
padding: 15.33% 0 12.67%;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
> img {
margin: 0 auto 49px;
@media screen and (max-width: 1024px) {
width: 76.46%;
margin-bottom: 4%;
}
@media screen and (max-width: 767px) {
width: 81.2%;
margin-bottom: 10.88%;
}
}
}
&--arrow {
padding: 20px 0 50px;
margin: auto;
@media screen and (max-width: 1024px) {
padding: 1.95% 0 4.88%;
}
@media screen and (max-width: 767px) {
padding: 4.75% 0 5.41%;
}
span {
width: 0;
height: 0;
border-style: solid;
border-width: 60px 100px 0 100px;
border-color: #d70202 transparent transparent transparent;
display: block;
margin: auto;
@media screen and (max-width: 1024px) {
border-width: 5.86vw 9.77vw 0 9.77vw;
}
@media screen and (max-width: 767px) {
border-width: 9.33vw 15.6vw 0 15.6vw;
}
}
}
&--cnt {
background-color: #f1f3f8;
box-sizing: border-box;
border-radius: 10px;
padding: 40px 30px 20px;
@media screen and (max-width: 1024px) {
padding: 4% 3% 2%;
}
@media screen and (max-width: 767px) {
margin: 0 auto;
padding: 7.06% 5.15% 0;
}
> h3 {
> img {
margin-bottom: 30px;
@media screen and (max-width: 1024px) {
margin-bottom: 3%;
}
}
}
> img {
margin: 0 auto 40px;
@media screen and (max-width: 1024px) {
margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
margin-bottom: 7.7%;
}
}
> ul {
&:first-of-type {
padding-bottom: 20px;
@media screen and (max-width: 1024px) {
padding-bottom: 2%;
}
@media screen and (max-width: 767px) {
padding-bottom: 7.38%;
}
> li {
float: left;
margin-bottom: 20px;
@media screen and (max-width: 1024px) {
width: 31%;
margin-bottom: 2%;
}
@media screen and (max-width: 767px) {
float: none;
width: 100%;
}
&:not(:last-of-type) {
margin-right: 32px;
@media screen and (max-width: 1024px) {
margin-right: 3.5%;
}
}
> img {
margin-bottom: 20px;
@media screen and (max-width: 1024px) {
margin-bottom: 2%;
}
@media screen and (max-width: 767px) {
margin: 0 auto 1%;
}
}
> span {
display: block;
text-align: center;
font-size: 17px;
font-weight: bold;
letter-spacing: 0.06em;
line-height: 1.625em;
@media screen and (max-width: 1024px) {
font-size: 1.6vw;
}
@media screen and (max-width: 767px) {
font-size: 14px;
}
}
}
}
&:last-of-type {
> li {
&:nth-of-type(1) {
> h4 {
&::before {
@media screen and (min-width: 1025px) {
content: "1";
}
}
}
}
&:nth-of-type(2) {
> h4 {
&::before {
@media screen and (min-width: 1025px) {
content: "2";
}
}
}
}
&:nth-of-type(3) {
> h4 {
&::before {
@media screen and (min-width: 1025px) {
content: "3";
}
}
}
}
> h4 {
font-size: 34px;
letter-spacing: 0.06em;
line-height: 1.625em;
color: #fff;
font-weight: 700;
background-color: #000f36;
border-radius: 10px;
padding: 10px;
@media screen and (max-width: 1024px) {
font-size: 3.3vw;
padding: 1%;
}
@media screen and (max-width: 767px) {
font-size: 20px;
padding-top: 2%;
padding-right: 1%;
padding-bottom: 2%;
padding-left: 1.5em;
text-indent: -0.5em;
}
&::before {
@media screen and (min-width: 1025px) {
content: "";
color: #1c4d87;
background-color: #fff;
border-radius: 50%;
padding: 0 16.5px;
text-align: center;
display: inline-block;
margin-right: 20px;
font-weight: bold;
}
}
> .display-tb {
@media screen and (max-width: 1024px) {
display: inline-block;
}
}
}
> p {
padding: 30px 50px 40px;
font-size: 19.5px;
line-height: 1.625em;
font-weight: 500;
@media screen and (max-width: 1024px) {
padding: 3% 5% 4%;
font-size: 16px;
}
@media screen and (max-width: 767px) {
font-size: 16px;
line-height: 2;
padding: 3% 0 5.74%;
}
}
}
}
}
&--img01 {
@media screen and (max-width: 1024px) {
width: 76.46%;
}
@media screen and (max-width: 767px) {
width: 71.76%;
margin-bottom: 0%!important;
}
}
&--img02 {
@media screen and (max-width: 1024px) {
width: 65%;
}
@media screen and (max-width: 767px) {
width: auto;
}
}
}
> img {
margin-bottom: 40px;
@media screen and (max-width: 1024px) {
margin-bottom: 4%;
}
@media screen and (max-width: 767px) {
margin-bottom: 2%;
}
}
}
}
.amamori009 {
padding: 91px 0 80px;
background-color: #faf6f6;
@media screen and (max-width: 1024px) {
padding: 6% 0
}
@media screen and (max-width: 767px) {
padding: 18.53% 0 12.53%
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
margin-bottom: 50px;
@media screen and (max-width: 1024px) {
margin-bottom: 4%;
}
@media screen and (max-width: 767px) {
margin-bottom: 9.26%;
}
img {
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 45.7%;
}
@media screen and (max-width: 767px) {
width: 83.42%;
}
}
}
&--cnt {
background-color: #f1f3f8;
padding: 40px 30px;
box-sizing: border-box;
border-radius: 10px;
@media screen and (max-width: 1024px) {
padding: 4% 3%;
}
@media screen and (max-width: 767px) {
padding: 5.15%;
}
> div {
background-color: #fff;
padding: 30px 0 0;
box-sizing: border-box;
border-radius: 10px;
@media screen and (max-width: 1024px) {
padding: 3% 0;
}
@media screen and (max-width: 767px) {
padding: 5.74% 0;
margin: 0 auto;
}
> h4 {
font-size: 28px;
letter-spacing: 0.06em;
line-height: 1.625em;
color: #d70202;
font-weight: bold;
@media screen and (max-width: 767px) {
font-size: 20px;
}
> span {
position: relative;
color: #fff;
background-color: #000f36;
padding: 0 20px;
margin-right: 40px;
@media screen and (max-width: 767px) {
padding: 0 10px;
margin-right: 20px;
}
&::after {
content: "";
position: absolute;
display: inline-block;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #000f36;
top: 0;
bottom: 0;
right: -19px;
@media screen and (max-width: 767px) {
right: -14px;
border-width: 14.5px 0 14.5px 14.5px;
}
}
}
}
> p {
line-height: 1.625em;
font-size: 16px;
font-weight: 500;
padding: 30px;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 3%;
}
@media screen and (max-width: 767px) {
padding: 5% 3.93% 0;
}
}
}
> img {
padding: 20px 0;
@media screen and (max-width: 1024px) {
padding: 2% 0;
}
@media screen and (max-width: 767px) {
padding: 3% 0;
}
}
}
&--arrow {
background-color: transparent!important;
padding: 20px 0 !important;
@media screen and (max-width: 767px) {
padding: 5.74% 0!important;
}
span {
width: 0;
height: 0;
border-style: solid;
border-width: 60px 100px 0 100px;
border-color: #d70202 transparent transparent transparent;
display: block;
margin: auto;
@media screen and (max-width: 1024px) {
border-width: 5.86vw 9.77vw 0 9.77vw;
}
@media screen and (max-width: 767px) {
border-width: 9.33vw 15.6vw 0 15.6vw;
}
}
}
}
}
.amamori010 {
padding: 40px 0;
@media screen and (max-width: 1024px) {
padding: 4% 0;
}
@media screen and (max-width: 767px) {
padding: 9.2% 0;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
> img {
margin-bottom: 20px;
@media screen and (max-width: 1024px) {
margin-bottom: 2%;
}
}
}
}
}
.amamori011 {
background-color: #faf6f6;
padding: 78px 0 87px;
@media screen and (max-width: 1024px) {
padding: 6% 0;
}
@media screen and (max-width: 767px) {
padding: 15.33% 0 12.67%;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
> img {
margin: 0 auto 56px;
@media screen and (max-width: 1024px) {
width: 65.53%;
margin-bottom: 4%;
}
@media screen and (max-width: 767px) {
width: 80.7%;
margin-bottom: 9.26%;
}
}
}
&--cnt {
background-image: url(../images/amamori/tc_amamori_bg01_pc.png);
border-radius: 5px;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
box-sizing: border-box;
padding: 43px 30px 0;
@media screen and (max-width: 1024px) {
padding: 4% 3% 0;
}
@media screen and (max-width: 767px) {
background-image: url(../images/amamori/tc_amamori_bg01_sp.png);
background-position: bottom;
padding: 6.62% 5.15%;
}
> li {
@media screen and (max-width: 767px) {
max-width: 520px;
margin: 0 auto;
}
&:nth-of-type(1) {
> h4 {
&::before {
@media screen and (min-width: 1025px) {
content: "1";
}
}
}
}
&:nth-of-type(2) {
> h4 {
&::before {
@media screen and (min-width: 1025px) {
content: "2";
}
}
}
}
&:nth-of-type(3) {
> h4 {
&::before {
@media screen and (min-width: 1025px) {
content: "3";
}
}
}
}
&:nth-of-type(4) {
> h4 {
&::before {
@media screen and (min-width: 1025px) {
content: "4";
}
}
}
}
> h4 {
font-size: 34px;
letter-spacing: 0.06em;
line-height: 1.625em;
color: #fff;
font-weight: 700;
background-color: #000f36;
border-radius: 10px;
padding: 10px;
@media screen and (max-width: 1024px) {
padding: 1%;
font-size: 3.3vw;
}
@media screen and (max-width: 767px) {
font-size: 20px;
padding-top: 2%;
padding-right: 2%;
padding-bottom: 2%;
padding-left: 1.5em;
text-indent: -0.5em;
}
&::before {
@media screen and (min-width: 1025px) {
content: "";
color: #1c4d87;
background-color: #fff;
border-radius: 50%;
padding: 0 16.5px;
text-align: center;
display: inline-block;
margin-right: 20px;
font-weight: bold;
}
}
> .display-tb {
@media screen and (max-width: 1024px) {
display: inline-block;
}
}
}
> p {
padding: 30px 50px 40px;
font-size: 19.5px;
line-height: 1.625em;
font-weight: 500;
@media screen and (max-width: 1024px) {
padding: 3% 5% 4%;
font-size: 16px;
}
@media screen and (max-width: 767px) {
padding: 2% 0 3%;
}
}
}
}
}
}
.amamori012 {
padding: 108px 0 65px;
@media screen and (max-width: 1024px) {
padding: 6% 0;
}
@media screen and (max-width: 767px) {
padding: 12.13% 0 8.53%;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
> img {
margin: 0 auto 68px;
@media screen and (max-width: 1024px) {
width: 33.5%;
margin-bottom: 4%;
}
@media screen and (max-width: 767px) {
width: 59.18%;
margin-bottom: 8.97%;
}
}
}
&--cnt {
display: flex;
margin-bottom: 40px;
@media screen and (max-width: 1024px) {
margin-bottom: 4%;
}
@media screen and (max-width: 767px) {
display: block;
margin: 0 auto;
}
> li {
margin-bottom: 20px;
width: 328px;
@media screen and (max-width: 1024px) {
margin-bottom: 2%;
width: 32%;
}
@media screen and (max-width: 767px) {
width: 100%;
float: none;
}
&:not(:last-of-type) {
margin-right: 20px;
@media screen and (max-width: 1024px) {
margin-right: 2%;
}
@media screen and (max-width: 767px) {
margin-right: 0;
}
}
> img {
margin-bottom: 20px;
@media screen and (max-width: 1024px) {
margin-bottom: 2%;
}
@media screen and (max-width: 767px) {
margin: 0 auto 1%;
}
}
> span {
display: block;
text-align: center;
font-size: 20px;
font-weight: 700;
@media screen and (max-width: 1024px) {
font-size: 1.8vw;
line-height: 1.625em;
}
@media screen and (max-width: 767px) {
font-size: 16px;
}
}
br {
@media screen and (max-width: 1024px) {
display: none;
}
}
}
}
&--arrow {
margin-bottom: 48px;
@media screen and (max-width: 767px) {
margin: 10.29% auto 8.82%;
}
span {
width: 0;
height: 0;
border-style: solid;
border-width: 60px 100px 0 100px;
border-color: #d70202 transparent transparent transparent;
display: block;
margin: auto;
@media screen and (max-width: 1024px) {
border-width: 5.86vw 9.77vw 0 9.77vw;
}
@media screen and (max-width: 767px) {
border-width: 9.33vw 15.6vw 0 15.6vw;
}
}
}
> img {
&:nth-of-type(1) {
margin: 0 auto 51px;
@media screen and (max-width: 1024px) {
margin-bottom: 5%;
}
@media screen and (max-width: 767px) {
margin: 0 auto 5%;
max-width: 520px;
width: 100%;
}
}
&:nth-of-type(2) {
margin-bottom: 50px;
@media screen and (max-width: 1024px) {
margin-bottom: 5%;
}
}
}
}
}
.amamori013 {
background-color: #faf6f6;
padding: 78px 0 120px;
@media screen and (max-width: 1024px) {
padding: 6% 0 8%;
}
@media screen and (max-width: 767px) {
padding: 11.47% 0 9.47%;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
> img {
margin: 0 auto 76px;
@media screen and (max-width: 1024px) {
width: 55.37%;
margin: 0 auto 2%;
}
@media screen and (max-width: 767px) {
width: auto;
margin-bottom: 6.03%;
}
}
}
> img {
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 100%;
}
}
&__cnt {
background-color: #ededed;
border-radius: 10px;
padding: 40px;
@media screen and (max-width: 1024px) {
padding: 3.91%;
}
@media screen and (max-width: 767px) {
border-radius: 1.56vw;
padding: 5.15%;
}
&__item {
background: url(../images/amamori/voice_obi_pc.png) no-repeat top -28% left -5% / 173px 173px, #fff;
background-color: #fff;
border: 1px solid #000f36;
padding: 20px;
@media screen and (max-width: 1024px) {
background-size: 16.89vw 16.89vw;
padding: 1.95%;
}
@media screen and (max-width: 767px) {
background: url(../images/amamori/voice_obi_sp.png) no-repeat top -8% left -8% / 23.07vw 23.07vw, #fff;
padding: 3.93%;
}
&:not(:nth-last-of-type(1)) {
margin-bottom: 40px;
}
&--ttl {
background-color: #f1f3f8;
padding: 10px 20px;
img {
@media screen and (max-width: 767px) {
height: 4.27vw;
}
}
}
&--txt {
font-size: 2.4rem;
font-weight: 700;
line-height: 4.8rem;
padding: 43px 45px;
@media screen and (max-width: 1024px) {
font-size: 1.8rem;
line-height: 1.8;
padding: 4.2% 4.39%;
}
@media screen and (max-width: 767px) {
padding: 8.36% 3.77% 4.1%;
font-size: 1.6rem;
line-height: 1.8;
letter-spacing: 0.01em;
}
strong {
color: #d8323f;
}
}
}
}
/*&--cnt {
background-image: url(../../../../images/amamori/tc_amamori_add_bg_pc.png);
background-repeat: no-repeat;
background-size: contain;
max-width: 1196px;
height: 997px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
}
&--box01 {
font-size: 24px;
max-width: 680px;
padding: 220px 0 0 150px;
@media screen and (max-width: 1196px) {
width: 57vw;
padding: 18vw 0 0 13vw;
}
@media screen and (max-width: 1024px) {
padding: 13vw 0 0 13vw;
width: 50vw;
}
> p {
line-height: 1.625em;
@media screen and (max-width: 1196px) {
font-size: 2vw;
}
}
}
&--box02 {
font-size: 24px;
max-width: 680px;
padding: 220px 0 0 330px;
@media screen and (max-width: 1196px) {
width: 57vw;
padding: 17vw 0 0 28vw;
}
@media screen and (max-width: 1024px) {
width: 50vw;
padding: 17vw 0 0 27vw;
}
> p {
line-height: 1.625em;
@media screen and (max-width: 1196px) {
font-size: 2vw;
}
}
}
}*/
}
}
.amamori014 {
padding: 142px 0 110px;
@media screen and (max-width: 1024px) {
padding: 8% 0;
}
@media screen and (max-width: 767px) {
padding: 9.33% 0 10.67%;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 2%;
margin: 0 auto;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
> img {
margin: 0 auto 54px;
@media screen and (max-width: 1024px) {
width: 35.55%;
margin-bottom: 4%;
}
@media screen and (max-width: 767px) {
width: 62.56%;
margin-bottom: 6.91%;
}
}
}
&--cnt {
box-sizing: border-box;
padding: 40px 30px 10px;
background-color: #f1f3f8;
border-radius: 10px;
@media screen and (max-width: 1024px) {
padding: 4% 3% 1%;
}
@media screen and (max-width: 767px) {
border-radius: 1.56vw;
padding: 6.62% 5.15%;
}
> li {
margin-bottom: 30px;
@media screen and (max-width: 1024px) {
margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
margin-bottom: 5.25%;
}
> h4 {
background-color: #000f36;
color: #fff;
font-size: 24px;
font-weight: bold;
padding: 17px 30px;
box-sizing: border-box;
border-radius: 10px 10px 0 0;
line-height: 1.625em;
@media screen and (max-width: 1024px) {
padding-top: 2%;
padding-right: 3%;
padding-bottom: 2%;
padding-left: 2em;
font-size: 18px;
text-indent: -1.25em;
}
@media screen and (max-width: 767px) {
border-radius: 1.56vw 1.56vw 0 0;
}
}
> p {
box-sizing: border-box;
padding: 20px;
background-color: #fff;
border-radius: 0 0 10px 10px;
line-height: 1.625em;
font-size: 18px;
font-weight: 500;
@media screen and (max-width: 1024px) {
padding: 3%;
font-size: 16px;
}
@media screen and (max-width: 767px) {
padding: 4%;
border-radius: 0 0 1.56vw 1.56vw;
}
}
}
}
}
}
.amamori015 {
background-color: #faf6f6;
padding: 77px 0 65px;
@media screen and (max-width: 1024px) {
padding: 8% 0 6%;
}
@media screen and (max-width: 767px) {
padding: 8.53% 0;
}
&__inner {
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 2%;
max-width: 980px;
}
@media screen and (max-width: 767px) {
max-width: 750px;
padding: 0 4.67%;
}
> h3 {
> img {
margin-bottom: 70px;
@media screen and (max-width: 1024px) {
margin-bottom: 7%;
}
@media screen and (max-width: 767px) {
}
}
}
&--cnt {
background-color: #fff;
padding: 40px;
margin-bottom: 70px;
border-radius: 10px;
position: relative;
@media screen and (max-width: 1024px) {
padding: 4%;
margin-bottom: 7%;
}
@media screen and (max-width: 767px) {
padding: 10.15% 5.15% 4.41%;
margin-bottom: 8.82%;
}
> h3 {
margin-bottom: 30px;
@media screen and (max-width: 1024px) {
margin-bottom: 3%;
width: 70%;
}
@media screen and (max-width: 767px) {
width: auto;
}
img {
@media screen and (max-width: 767px) {
width: 75.64%;
margin: 0 auto 8.09%;
}
}
}
> p {
font-size: 18px;
line-height: 1.625em;
font-weight: 500;
@media screen and (max-width: 1024px) {
font-size: 16px;
}
> img {
float: right;
width: 25%;
margin-left: 2%;
@media screen and (max-width: 640px) {
width: 36%;
}
}
}
> img {
position: absolute;
bottom: 0;
right: 0;
width: 37%;
}
}
}
}
}
#amamori {
.footer {
margin: 0;
}
}
.yureru-j:hover {
animation: yureru-j 2s;
}
@keyframes yureru-j {
0% {
transform: translate(0px, 3px);
}
5% {
transform: translate(0px, -3px);
}
10% {
transform: translate(0px, 3px);
}
15% {
transform: translate(0px, -3px);
}
20% {
transform: translate(0px, 3px);
}
25% {
transform: translate(0px, -3px);
}
30% {
transform: translate(0px, 0px);
}
}