/************************************************************/
/* title */
/************************************************************/
.receive-title-area {
background: #2fc6bd;
}
.receive-title {
padding: 2.4rem;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.receive-title::before {
content: ''; 
display: inline-block;
margin-right: 1.5vw;
background-image: url(img/receive-top.png); 
vertical-align: middle;
width: 70px;
height: 70px;
background-size: contain;
background-repeat: no-repeat;
}

@media screen and (max-width: 1199px) {
/*480px以下に適用されるCSS（スマホ用）*/
.receive-title {
padding: 1.6rem;
}
.receive-title::before {
width: 6vw;
height: 7vw;
}
}

/************************************************************/
/* MV */
/************************************************************/
.receive-mv {
display: flex;
background: #e4f5f3;
}
.receive-mv-title {
width: 50vw;
padding-top: 50px;
}
.receive-mv-title-point {
display: flex;
align-items: center;
width: 36.875vw;
margin: 0 auto 40px;
}
.receive-mv-title-point_img {
width: 7.2vw;
margin-right: 20px;
}
.receive-mv-title-point_p {
display: flex;
justify-content: center;
align-items: center;
width: 28.3vw;
padding: 2.5vw;
border-radius: 100px;
background-color: #fff;
position: relative;
z-index: 1;
color: #2fc6bd;
font-size: 2.5em;
font-weight: 700;
text-align: center;
white-space: nowrap;
}
.receive-mv-title-point_p::before {
position: absolute;
top: 60%;
left: 76%;
content: "";
width: 10vw;
height: 5vw;
background: url(img/receive-parts_white1.svg) no-repeat;
background-size: contain;
z-index: -1;
}
.receive-mv-title-tile {
display: flex;
margin: 0 auto;
justify-content: center;
margin-bottom: 40px;
}
.receive-mv-title-tileitem {
margin-right: 2px;
padding: 15px 0.4vw;
background-color: #FFD84D;
text-align: center;
font-size: 2.5em;
font-weight: bold;
}
.receive-mv-ex {
font-size: 1.1em;
font-weight: bold;
line-height: 2.61;
text-align: center;
}
.receive-mv-img {
max-width: 48vw;
}

@media screen and (max-width: 1199px) {
/*480px以下に適用されるCSS（スマホ用）*/
.receive-mv {
display: block;
}
.receive-mv-title {
width: 100vw;
padding-top: 0;
}
.receive-mv-title-point {
width: 80vw;
padding-top: 4vh;
margin: 0 auto 26px;
}
.receive-mv-title-point_img {
width: 15vw;
height: 15vw;
margin-bottom: 0;
}
.receive-mv-title-point_p {
width: 60vw;
font-size: 1.5em;
text-align: center;
}
.receive-mv-title-point_p::before {
top: 60%;
left: 76%;
height: 10vw;
}
.receive-mv-title-tile {
width: 42.5vw;
margin-bottom: 25px;
}
.receive-mv-title-tileitem {
margin-right: 2px;
width: 28px;
padding: 5px 1px;
font-size: 1.6em;
}
.receive-mv-ex {
display: block;
width: 80vw;
margin: 0 auto 4vh;
font-size: 1.6rem;
line-height: 140%;
}
.receive-mv-img {
max-width: 100vw;
}
}

/************************************************************/
/* subtitle */
/************************************************************/
.receive-subtitlearea {
padding: 20px;
background: #FFD84D;
}
.receive-subtitle {
position: relative;
text-align: center;
}
.receive-subtitle2 {
position: relative;
padding-top: 35px;
text-align: center;
}
.receive-subtitle_point {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-weight: 700;
font-size: 16px;
color: #fff;
padding: 8px 20px;
letter-spacing: 0.03em;
background-color: #000;
border-radius: 30px;
line-height: 1em;
}
.receive-subtitle_point::before {
position: absolute;
bottom: -7px;
left: 40px;
content: "";
width: 14px;
height: 25px;
background: url(img/receive-parts_black.svg) no-repeat;
background-size: contain;
z-index: -1;
box-sizing: border-box;
border-style: solid;
border-width: 0;
}

@media screen and (max-width: 1199px) {
/*480px以下に適用されるCSS（スマホ用）*/ 
.receive-subtitlearea {
padding: 1rem;
}
.receive-subtitle2 {
    padding: 40px 0 0;
}
.receive-subtitle_point {
top: 0;
font-size: 13px;
padding: 8px 20px;
}
}

/************************************************************/
/* 機能 */
/************************************************************/
.receive-kinou {
display: flex;
padding-bottom: 8vh;
}
.receive-kinou.first {
padding-top: 8vh;
}
.receive-kinou:last-of-type {
padding-bottom: 0;
}
.receive-kinou-info_l {
width: 50vw;
padding: 5vw 2vw 0 5vw;
}
.receive-kinou-info_r {
width: 50vw;
padding: 5vw 5vw 0 0;
}
.receive-kinou-info-title {
display: flex;
margin-bottom: 5vh;
align-items: center;
}
.receive-kinou-icon {
width: 7.6vw;
margin-right: 1.5vw;
}
.receive-kinou-info-ex {
color: #2fc6bd;
font-size: 2em;
font-weight: bold;
line-height: 1.45;
}
.receive-kinou-ex {
font-size: 1.1em;
line-height: 2.2;
}
.receive-kinou-img-area {
max-width: 50vw;
}
.circle_l {
background-image: radial-gradient(circle at left 15vw bottom -7vh, #e4f5f3 calc(65vw / 2 - 1px), transparent calc(100px / 2));
}
.circle_r {
background-image: radial-gradient(circle at right 15vw bottom 1vh, #e4f5f3 calc(65vw / 2 - 1px), transparent calc(100px / 2));
}
.receive-kinou-img_l {
padding-right: 5vw;
}
.receive-kinou-img_r {
padding-right: 8vw;
}

@media screen and (max-width: 1199px) {
/*480px以下に適用されるCSS（スマホ用）*/ 
.receive-kinou-area {
padding: 0;
}
.receive-kinou {
display: block;
padding-bottom: 8vh;
}
.receive-kinou.first {
padding-top: 4vh;
}
.receive-kinou-info_l,
.receive-kinou-info_r{
width: 80vw;
margin: 0 auto;
padding: 0;
}
.receive-kinou-info-title {
margin-bottom: 3vh;
}
.receive-kinou-icon {
width: 15vw;
margin-right: 7vw;
}
.receive-kinou-info-ex {
font-size: 1.8rem;
}
.receive-kinou-ex {
padding-bottom: 4vh;
font-size: .9em;
line-height: 180%;
letter-spacing: 0.01em;
}
.receive-kinou-img-area {
max-width: 100vw;
}
.circle_l {
background-image: radial-gradient(circle at left 30vw bottom 1vh, #e4f5f3 calc(120vw / 2 - 1px), transparent calc(100px / 2));
}
.circle_r {
background-image: radial-gradient(circle at right 30vw bottom 1vh, #e4f5f3 calc(120vw / 2 - 1px), transparent calc(100px / 2));
}
.receive-kinou-img_l {
padding-right: 0;
}
.receive-kinou-img_r {
padding-right: 0;
}
}

/************************************************************/
/* 職人BASEのはじめかた */
/************************************************************/
.receive-start-area {
margin-bottom: 10vh;
}
.receive-start__content {
margin-top: 52px;
}
.receive-start__inner {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 min(8.33vw, 120px);
}
.receive-start__list {
display: flex;
justify-content: space-between;
}
.receive-start__item {
width: 30%;
padding: min(1.67vw, 24px) min(1.5vw, 22px) min(3.61vw, 52px);
border-radius: 15px;
background-color: #2fc6bd;
display: flex;
flex-direction: column;
position: relative;
}
.receive-start__item:nth-child(2)::before,
.receive-start__item:nth-child(3)::before {
position: absolute;
top: 48%;
left: -12%;
content: "";
width: 20px;
height: 30px;
background: url(img/icon_arrow_next.svg) no-repeat;
background-size: contain;
}
.receive-start__item__number {
height: min(5.07vw, 73px);
border-radius: 15px 15px 0 0;
background-color: #fff;
display: flex;
justify-content: center;
}
.receive-start__item__number--01 img {
width: 6%;
display: block;
}
.receive-start__item__number--02 img {
width: 10%;
display: block;
}
.receive-start__item__number--03 img {
width: 10%;
display: block;
}
.receive-start__item__body {
margin-top: 25px;
}
.receive-start__item__comment {
height: min(2.4vw, 38px);
text-align: center;
font-weight: 700;
font-size: min(1.25vw, 18px);
line-height: min(2.4vw, 38px);
background-color: #fff;
border-radius: 15px;
position: relative;
z-index: 1;
}
.receive-start__item__comment::before {
position: absolute;
bottom: -16px;
left: 55px;
content: "";
width: 15px;
height: 30px;
background: url(img/parts_start.svg) no-repeat;
background-size: contain;
z-index: -1;
}
.receive-start__item__text {
margin-top: 32px;
text-align: center;
font-weight: 900;
font-size: min(2.1vw, 30px);
line-height: 1.5;
color: #fff;
}
.receive-start__free {
position: absolute;
bottom: 28px;
right: -15px;
width: min(7vw, 101px);
height: min(7vw, 101px);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffd84d;
transform: rotate(15deg);
}
.receive-start__free__text {
font-weight: 700;
font-size: min(1.7vw, 25px);
line-height: 1.1;
letter-spacing: 0.05em;
}

@media screen and (max-width: 1199px) {
/*480px以下に適用されるCSS（スマホ用）*/ 
.receive-start-area {
margin-bottom: 10vh;
}
.receive-start__content {
margin-top: 23px;
}
.receive-start__inner {
max-width: 500px;
padding: 0 20px;
}
.receive-start {
margin-top: 45px;
}
.receive-start__list {
flex-direction: column;
}
.receive-start__item {
width: 100%;
padding: 5px;
flex-direction: row;
}
.receive-start__item:not(:first-child) {
margin-top: 36px;
}
.receive-start__item__number {
height: auto;
border-radius: 10px 0 0 10px;
width: 18%;
}
.receive-start__item__number--01 img {
width: 28%;
}
.receive-start__item__number--02 img,
.receive-start__item__number--03 img {
width: 45%;
}
.receive-start__item:nth-child(2)::before,
.receive-start__item:nth-child(3)::before {
top: -25%;
left: 50%;
transform: translateX(-50%) rotate(90deg);
}
.receive-start__item__body {
margin: 0 4.6vw;
padding: 6px 0;
flex: 1;
}
.receive-start__item__comment {
height: min(5.9vw, 23px);
display: inline-block;
padding: 0 20px;
margin: 0;
font-size: min(3.33vw, 13px);
line-height: min(5.9vw, 23px);
}
.receive-start__item__comment::before {
display: none;
}
.receive-start__item__text {
margin-top: 6px;
text-align: left;
font-weight: 700;
font-size: min(5.4vw, 22px);
line-height: 1.35;
}
.receive-start__free {
bottom: 16%;
right: 4%;
width: min(18.5vw, 72px);
height: min(18.5vw, 72px);
}
.receive-start__free__text {
font-size: min(4.6vw, 18px);
}
}

/************************************************************/
/* INFO */
/************************************************************/
.receive-info-title {
display: flex;
justify-content: center;
align-items: center;
color: #2fc6bd;
font-size: 2.5em;
font-weight: bold;
line-height: 1.45;
}
.line1, .line2{
transform: rotate(60deg);
transform-origin: 0% 0%;
width: 40px;
border-top: 3px solid #2fc6bd;
margin: 0;
padding: 0;
position: relative;
top: -15px;
}
.line1 {
right: -35px;
}
.line2 {
right: -10px;
}
.line3, .line4 {
transform: rotate(120deg);
transform-origin: 0% 0%;
width: 40px;
border-top: 3px solid #2fc6bd;
margin: 0;
padding: 0;
position: relative;
top: -15px;
}
.line3 {
right: -20px;
}
.line4 {
right: 5px;
}
.receive-info-img {
display: block;
width: 16vw;
margin: 3vh auto 8vh;
}
.receive-info-tile {
display: flex;
margin: 0 auto;
justify-content: center;
align-items: baseline;
margin-bottom: 30px;
}
.receive-info-tileitem {
margin-right: 8px;
width: 5.6vw;
padding: 24px 8px;
background-color: #FFD84D;
text-align: center;
font-size: 3.5em;
font-weight: bold;
}
.receive-info-item {
font-size: 2.4em;
font-weight: bold;
}
.receive-info-line {
display: flex;
justify-content: center;
margin-bottom: 50px;
}

@media screen and (max-width: 1199px) {
/*480px以下に適用されるCSS（スマホ用）*/ 
.receive-info-title {
font-size: 1.5em;
text-align: center;
white-space: nowrap;
}
.line1, .line2, .line3, .line4 {
top: 0px;
}
.line2 {
right: -5px;
}
.line3 {
right: -30px;
}
.line4 {
right: 0px;
}
.receive-info-img {
width: 50vw;
}
.receive-info-tile {
display: flex;
margin: 0 auto;
justify-content: center;
align-items: baseline;
margin-bottom: 30px;
}
.receive-info-tileitem {
margin-right: 4px;
width: 12vw;
padding: 13px 4px;
font-size: 2.5em;
}
.receive-info-item {
font-size: 1.8em;
}
.receive-info-line {
padding: 0;
height: 16vw;
justify-content: center;
}
}