@charset "UTF-8";

main > section {
overflow: hidden;
}

/* =======================================
プラン一覧 #planList
======================================= */
#planList {
width: 90%;
margin: 5rem auto 0;
max-width: 1280px;
position: relative;
}
#planList:before,
#planList:after {
content: "";
width: 400px;
height: 400px;
display: block;
position: absolute;
top: -180px;
left: -40px;
background: url("../img/kids/ribbon-pic.png") no-repeat center left;
background-size: contain;
z-index: -1;
}
#planList:after {
background: url("../img/kids/ribbon-pic02.png") no-repeat center left;
left: 75%;
}
#planList ul {
display: flex;
flex-wrap:wrap;
justify-content: space-between;
margin-top: 1rem;
}
#planList ul li {
width: 32%;
margin-top:3rem;
background-color:#E0FAFF;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
background-size: 7px 7px;
position: relative;
padding-bottom: 5.5rem;
}
#planList ul li figure {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
height: 337px;
}
#planList ul li figcaption {
width: 80%;
display: block;
margin: -1.5rem auto 1.5rem;
background: #9CD8D8;
position: relative;
text-align: center;
padding: .8rem;
color: #fff;
border-radius: 30px;
font-size: 1.2rem;
}
#planList ul li figure + p {
width: 94%;
margin: 0 auto;
text-align: center;
}
#planList ul li a {
position: absolute;
display: block;
width: 230px;
left: calc(50% - 115px);
text-align: center;
border-radius: 30px;
background: #F7B1C8;
bottom: 1.5rem;
color: #fff;
display: inline-block;
padding: .5rem;
}
#planList ul li a:after {
content: '\f054';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #fff;
padding-left: .5rem;
right: 20px;
position: absolute;
}
#planList ul li figure img {
width: 100%;
height: 280px;
object-fit: cover;
}

@media screen and (max-width: 1280px) {
#planList ul li figure {
height: 290px;
}
#planList ul li figure img {
height: 240px;
}
#planList ul li figure + p {
text-align: left;
width: 88%;
}
#planList ul li figure + p br {
display: none;
}
#planList:before,
#planList:after {
top: -100px;
left: -40px;
background-size: contain;
width: 300px;
height: 300px;
}
#planList:after {
left: 70%;
}
}

@media screen and (max-width: 812px){
#planList:before,
#planList:after {
top: -50px;
background-size: contain;
width: 230px;
height: 230px;
}
#planList ul li {
width: 48%;
margin-top:3rem;
}
}

@media screen and (max-width: 480px){ 
#planList ul li {
width:100%;
margin-top:3rem;
}
#planList:before,
#planList:after {
top: 50px;
width: 120px;
height: 120px;
}
}

/* =======================================
mainvisual タイトルetc
======================================= */
nav + section {
position: relative;
height: 938px;
}
nav + section > div {
position: absolute;
max-width: 600px;
width: 90%;
left: 10%;
top: 28%;
z-index: 3;
background: #fff;
box-shadow: 0 0 10px #ddd;
border-radius: 15px;
}
nav + section > div div {
position: relative;
padding: 5rem 4em;
}
nav + section > div.txtArea div:after {
content: "";
background: url("../img/common/frame-flower02.png") repeat-x;
width: 100%;
height: 50px;
display: block;
position: absolute;
bottom: 0;
left: 0;
}
nav + section > div.txtArea h2 {
color: #9CD8D8;
font-size: 2rem;
position: relative;
text-align: center;
}
nav + section > div.txtArea h2 span {
font-size:1rem;
display: block;
line-height: 100%;
}
nav + section > div.txtArea h2:after {
content: "";
display: block;
left: calc(50% - 25px);
position: absolute;
width: 50px;
height: 2px;
background: #9CD8D8;
bottom: -15%;
}
nav + section > div.txtArea {
text-align: center;
}
nav + section > div.txtArea p {
margin: 3rem auto 0;
display: inline-block;
text-align: left;
}
#sub #mainVisual:not(.width100) {
width: 70%;
margin:  0 0 0 auto !important;
position: relative;
}
#sub #mainVisual:not(.width100):after {
content: "";
background: linear-gradient(to right, #FFF, transparent);
width: 30%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
}

@media screen and (max-width: 1400px) {
nav + section > div div {
padding: 3rem 3rem 4rem;
}
nav + section > div  {
left: 2%;
margin-bottom: 5rem;
}
}

@media screen and (max-width: 1280px) {
nav + section > div {
max-width:500px;
left: 5%;
top: 10%;
}
#sub #mainVisual {
width: 100%;
}
#sub #mainVisual:after {
display: none;
}
nav + section > div {
max-width: none;
position: relative;
margin-top: -2rem;
}
nav + section {
height: auto;
}
nav + section > div {
width: 80%;
left: 10%;
}
nav + section > div.txtArea h2 {
color: #9CD8D8;
font-size: 1.5rem;
position: relative;
text-align: center;
}
#sub #mainVisual:not(.width100) {
width: 100%;
margin:  0 0 0 auto !important;
position: relative;
}
#sub #mainVisual:not(.width100):after {
display: none;
}
}

@media screen and (max-width: 812px){ 
nav + section > div.txtArea {
margin-bottom: 50px;
}
}

@media screen and (max-width: 480px){ 
nav + section {
margin-bottom: 1rem;
}
nav + section > div {
width: 96%;
left: 2%;
}
nav + section > div div {
padding: 2rem 2rem 2.5rem;
}
main h2 {
font-size: 1.5rem;
}
}

/* =======================================
Quality　M'sならではのこだわり
======================================= */
#points {
background: url("../img/common/paper_bg01.jpg");
padding: 5rem 0 0;
counter-reset: subsection;
}
#points section {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
flex-wrap:nowrap;
width: 90%;
max-width: 1000px;
margin: 5rem auto ;
}
#points section figure {
max-width:330px;
margin-right: 2%;
position: relative;
}
#points section figure img {
width: 540px;
height: 265px;
object-fit: cover;
}
#points section figcaption {
position: absolute;
top: -50px;
left: -70px;
width: 150px;
height: 150px;
border-radius: 85px;
padding-top: 2rem;
color: #fff;
line-height: 180%;
font-size: 1.3rem;
text-align: center;
background: #9CD8D8;
}
#points section figcaption span {
display: block;
font-size: 150%;
}
#points section figcaption span::before {
counter-increment: subsection;
content: " 0"counter(subsection)" ";
}
#points section:nth-child(n+10) figcaption span::before {
content: " "counter(subsection)" ";
}
#points section .txtArea {
width: 100%;
background: #fff;
padding: 3rem 3rem;
position: relative;
}
#points section .txtArea:after {
position: absolute;
content: "";
width: 200px;
height: 100%;
background: url("../img/common/frame-flower01@2x.png") no-repeat top right;
background-size:contain;
right: -30px;
top: -20px;
}
#points section h3 {
display: inline-block;
background: #E87DB7;
color: #fff;
margin-bottom: 2rem;
line-height: 120%;
padding: .5rem;
position: relative;
z-index: 1;
}

@media screen and (max-width: 1024px){ 
#points section figcaption {
left: -45px;
}
}

@media screen and (max-width: 812px){ 
#points section figure {
order: -1;
max-width: none;
display: flex;
}
#points section .txtArea,
#points section figure {
width: 100%;
}
#points section figure {
margin-right: 0;
}
#points section figcaption {
position: relative;
left: auto;
top: auto;
width: 100%;
height: 100%;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
padding:2rem;
}
#points section figure img {
width: 50%;
}
#points {
margin-top: 50px;
}
#points section {
margin: 50px auto;
flex-wrap: wrap;
}
#points section .txtArea:after {
z-index: 10;
}
}

@media screen and (max-width: 480px){ 
#points section figure img{
height: 150px;
}
#points section .txtArea {
padding: 1.5rem;
}
#points section h3 {
margin-bottom: 1rem;
}
#points section .txtArea:after {
width: 130px;
right: -20px;
}
#points section {
margin: 30px auto;
}
#points {
padding: 50px 0;
}
#points section:last-child {
margin-bottom: 0;
}
}

/* =======================================
#campaign キャンペーン
======================================= */
#campaign {
background-image:url("../img/kids/omiya/ribbon-title.png"), url("../img/common/kira_bg.svg");
background-repeat:no-repeat,repeat;
background-position:center 50px, center;
background-size: 900px 150px,auto;
margin-top: 0;
padding: 13rem 0 5rem;
}
#campaign h3 {
margin: 0 auto;
text-align: center;
color:#78BCED;
font-weight: 700;
width: 90%;
}
#campaign h3 img {
max-width: 240px;
display: block;
margin: 0 auto;
}
#campaign .detail {
width: 90%;
max-width: 1280px;
margin: 4rem auto 0;
display: flex;
flex-wrap:wrap;
justify-content: center;
counter-reset: subsection;
}
#campaign .detail.plan {
counter-reset: count;
}
#campaign .detail.plan article {
counter-increment: count;
}
#campaign .detail article:nth-child(+n+4) {
margin-top: 3rem;
}
#campaign .detail.plan h4 > span span:before {
content: " " counter(count, upper-alpha) "";
}
#campaign .detail figure {
border: 10px solid #FEFFA0;
box-shadow: 10px 10px 0 #FEFFA0;
}
#campaign .detail figure img {
object-fit: contain;
object-position: center;
}
#campaign .detail figure + p {
text-align: center;
line-height: 160%;
margin-top: 1.5rem;
}
#campaign .detail figure + p strong  {
display: block;
color: #F27676;
margin-bottom: .5rem;
}
#campaign .detail h4 > span {
/* width: 130px; */
/* height: 75px; */
text-align: center;
background: #FEFFA0;
border-top-right-radius: 75px;
border-top-left-radius: 75px;
display: flex;
align-items: flex-end;
margin-right: 1rem;
justify-content: center;
font-size: .9rem;
padding: 33px 20px 0;
}
#campaign .detail article {
width: 32%;
margin-right: 2%;
}

#campaign .detail article:nth-child(3n+3) {
margin-right: 0;
}
#campaign .detail article:last-child {
margin-right: 0;
}
#campaign .detail h4 > span span {
font-size: 1.5rem;
padding-left: .5rem;
}
#campaign .detail h4 > span span:before {
counter-increment: subsection;
content: " "counter(subsection)" ";
}
#campaign .detail h4 {
display: flex;
font-size: 1.2rem;
padding-left: 1rem;
align-items: flex-end;
}
#campaign .detail article figure {
box-shadow: 10px 10px 0 #FEFFA0;
border: 10px solid #FEFFA0;
}
#campaign .detail article h4 > span{
background: #FEFFA0;
}

/*------------ color blc --------------*/
#campaign .detail article.red figure {
box-shadow: 10px 10px 0 #F27676;
border: 10px solid #F27676;
}
#campaign .detail article.red h4 > span {
background: #F27676;
color: #fff;
}

#campaign .detail article.yellow h4 > span {
background: #FEFFA0;
}
#campaign .detail article.yellow figure {
box-shadow: 10px 10px 0 #FEFFA0;
border: 10px solid #FEFFA0;
}

#campaign .detail article.blue h4 > span {
background: #006ebb;
color: #fff;
}
#campaign .detail article.blue figure {
box-shadow: 10px 10px 0 #006ebb;
border: 10px solid #006ebb;
}

#campaign .detail article.skyblue h4 > span {
background:#BAF4FF;
}
#campaign .detail article.skyblue figure {
box-shadow: 10px 10px 0 #BAF4FF;
border: 10px solid #BAF4FF;
}

#campaign .detail article.green h4 > span {
background: #D5FFBA;
}
#campaign .detail article.green figure {
box-shadow: 10px 10px 0 #D5FFBA;
border: 10px solid #D5FFBA;
}

#campaign .detail article.pink figure {
box-shadow: 10px 10px 0 #FFB4B4;
border: 10px solid #FFB4B4;
}
#campaign .detail article.pink h4 > span {
background: #FFB4B4;
color: #fff;
}

@media screen and (max-width: 812px){
#campaign .detail article {
width: 48%;
margin-top: 3rem;
margin-right: 4%;
}
#campaign .detail article:nth-child(2n+2) {
margin-right: 0 !important;
}
#campaign .detail article:nth-child(3n+3) {
margin-right: 4%;
}
}

@media screen and (max-width: 480px) {
#campaign {
background-image:url("../img/kids/omiya/ribbon-title.png"), url("../img/common/kira_bg.svg");
background-size: 500px 80px,auto;
padding: 7rem 0 5rem;
}
#campaign {
padding: 7rem 0 50px;
}
#campaign .detail article:nth-child(3n+3) {
margin-right: 0;
}
#campaign .detail article {
margin-right: 0;
}
}

/* =======================================
.weekday
======================================= */
.weekday {
width: 90%;
max-width:1280px;
margin:  5rem auto 0;
}
.weekday h4{
position: relative;
text-align: center;
padding:10px 20px;
font-size:20px;
color:#FFF;
width: calc(100% - 80px);
box-sizing: border-box;
margin-left: 40px;
background: #FFB4B4;
box-shadow:0 1px 3px rgba(0,0,0,0.25);
max-width: 500px;
margin: 0 auto;
}
.weekday h4:before,
.weekday h4:after{
content: "";
position: absolute;
top:15px;
height: 0;
width: 0;
border: 25px solid #FFB4B4;
z-index:0;
}
.weekday h4:before{
right: -40px;
border-right-color: transparent;
}
.weekday h4:after{
left: -40px;
border-left-color: transparent;
}
.weekday h4 span{
display:block;
}
.weekday .flexBox {
background: #fff;
flex-wrap: nowrap;
}
.weekday .flexBox > * {
margin-top: -50px;
width: 100%;
}
.weekday .flexBox div {
padding: 3rem 2rem 2rem 2rem;
text-align: center;
}
.weekday .flexBox div  img {
max-width: 380px;
margin: 0 auto;
}
.weekday .flexBox div p {
text-align: left;
display: inline-block;
}
.weekday .flexBox div dl,
.weekday.column > section dl {
display: flex;
flex-wrap:wrap;
align-items: flex-start;
border-top: 1px solid #75c49c;
padding-top: 2rem;
margin-top: 2rem;
text-align: left;
}
.weekday.column > section dl {
width: 80%;
margin: 0 auto;
}
.weekday .flexBox div dt,
.weekday.column > section dt {
width: 20%;
max-width:100px;
background: #75C49C;
color: #fff;
text-align: center;
margin-top: .5rem;
}
.weekday .flexBox div dd,
.weekday.column > section dd {
width: 80%;
margin-top: .5rem;
padding-left: .5rem;
}
.weekday .flexBox figure img {
border-top-left-radius:15px;
border-bottom-left-radius:15px;
}

/* new version | 3 colum */
.weekday.column {
width: 90%;
max-width:1500px;
display: flex;
flex-wrap:wrap;
justify-content: center;
}
.weekday.column > section:nth-child(1), 
.weekday.column > section:nth-child(2) {
margin-top: 0;
}
.weekday.column > section:nth-child(2n+2) {
margin-right: 0;
}
.weekday.column > section {
width: 48%;
margin-top: 7rem;
margin-right: 4%;
}
.weekday.column > section:last-child {
margin-right: 0;
}
/* new version | 3 colum */

.weekday.column > section:not(.special) > div {
background: #fff;
padding: 2.5rem;
height: 100%;
text-align: center;
box-shadow:0 0 5px #ddd;
}
.weekday.column > section > div img {
max-width:480px;
}
.weekday.column > section > div p,
.weekday.column .special h5 + p {
display: inline-block;
text-align: left;
margin: 1rem auto;
}
.weekday.column > section > div p  strong {
color: #FFB4B4;
font-size: 1.1rem;
}
.weekday.column .special,.special{
width: 90%;
max-width:1080px;
margin: 0 auto;
text-align: center;
}
.weekday.column .special h5,
.special h5 {
max-width:420px;
margin: 10rem auto 2rem;
}
.weekday.column .special h6,
.special.red h6 {
font-size: 1.5rem;
color: #F08989;
text-align: left;
}
.special h6 {
font-size: 1.5rem;
color:#88CCFF;
margin-bottom: 1.5rem;
}
.weekday.column .special h6 span,
.special h6 span,
.special.red h6 span{
background: #F08989;
color: #fff;
display: inline-block;
padding: 0 .3rem;
}
.special h6 span {
background: #88CCFF;
color: #fff;
}
.weekday.column .special .txtArea,.special .txtArea {
width: 70%;
max-width: 680px;
padding: 5rem;
background: #fff;
box-shadow:0 0 5px #ddd;
text-align: left;
margin: 5rem 0 0 auto;
position: relative;
}
.weekday.column .special .txtArea figure,
.special .txtArea figure{
position: absolute;
left: -60%;
top: -10%;
box-shadow: 10px 10px 0 #cbe6ff;
}
.special.red .txtArea figure {
box-shadow:10px 10px 0 #F08989;
}
.weekday.column .special .txtArea figure img,
.special .txtArea figure img{
height: 550px;
width: 100%;
max-width:420px;
object-fit: cover;
}
.special.rental {
position: relative;
margin-top: 8rem;
}
.special.rental > figure {
position: absolute;
top: -120px;
right: -50px;
width:40%;
max-width:450px;
}

@media screen and (min-width: 481px){ 
.weekday.column .special .txtArea,.special .txtArea {
min-height: 500px;
}
}

@media screen and (max-width: 1366px){ 
.weekday .flexBox figure img {
height: 100%;
object-fit:cover;
}
.weekday.column > section dl {
width: 100%;
}
}

@media screen and (max-width: 1024px){ 
.weekday.column .special,
#spacial {
width: 100%;
}
.weekday.column .special .txtArea,
.special .txtArea {
padding: 3rem;
width: 60%;
}
.weekday.column .special .txtArea figure,
.special .txtArea figure {
left: -70%;
top:-12%;
}
.weekday.column .special .txtArea figure img,
.special .txtArea figure img{
height: 480px;
width: 100%;
max-width:380px;
object-fit: cover;
}
.special.rental > figure {
top: -50px;
width:35%;
}
}

@media screen and (max-width: 812px){
.weekday.column .special .txtArea figure,
.special .txtArea figure {
top: 5%;
}
.weekday.column .special .txtArea figure img,
.special .txtArea figure img {
height: 100%;
width: 100%;
max-width: 100%;
}
.special.rental > figure {
top: -60px;
width:30%;
right:0%;
}
.weekday .flexBox {
flex-wrap: wrap;
}
.weekday .flexBox figure img {
border-top-right-radius: 15px;
border-bottom-left-radius: 0;
}
.weekday.column .special .txtArea,
.special .txtArea{
width: 100%;
max-width: 100%;
margin-top: 2rem;
padding: 2rem;
}
.weekday.column .special .txtArea figure,
.special .txtArea figure {
position: relative;
top: auto;
left: auto;
margin-top: 2rem;
}
}
@media screen and (max-width: 640px) {
.weekday.column > section {
width: 100%;
margin: 0 0 3rem 0;
}
.weekday.column > section:last-child {
margin-bottom: 0;
}
.weekday.column > section:not(.special) > div {
height: auto;
}
}
@media screen and (max-width: 480px) {
.weekday .flexBox > *,
#campaign .detail article {
width: 100%;
}
.weekday .flexBox div,
#campaign .detail article:first-of-type {
margin-top: 0;
}

#tab ul li {
min-width: 100px;
}
.weekday.column .special h5, .special h5 {
margin: 5rem auto 2rem;
}
.weekday.column .special .txtArea figure img,
.special .txtArea figure img {
height: 350px;
}
.special.rental {
margin-top: 4rem;
}
.special.rental > figure {
top: -60px;
width:50%;
right:0%;
}
.weekday .flexBox figure img {
border-top-left-radius:15px;
border-bottom-left-radius:0px;
border-top-right-radius:15px;
}
}

/* =======================================
#map お宮参りマップ
======================================= */
#map {
max-width: 980px;
width: 90%;
margin: 8rem auto;
}
#map .flexBox {
justify-content: space-between;
margin-top: 5rem;
}
.modalOpen {
width: 49%;
display: block;
border: 1px solid #333;
}
.modal{
display: none;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
left: 0;
z-index: 80;
text-align: center;
}
.modal img {
width: 100%;
max-width: 700px;
}
.modalBg{
background: rgba(0,0,0,0.8);
height: 100vh;
position: absolute;
width: 100%;
}
.modalContent{
background: #fff;
left: 50%;
padding: 40px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 60%;
}
.modalContent .modalClose {
display: block;
background: #49BD6A;
color:#fff;
padding: .5rem;
max-width: 500px;
width: 90%;
margin: 0 auto;
}

@media screen and (max-width: 812px){ 
#map .flexBox {
margin-top: 50px;
}
#map {
margin: 5rem auto;
}
}

@media screen and (max-width: 480px){ 
#map .flexBox {
justify-content: center;
margin-top: 30px;
}
.modalOpen {
width: 90%;
display: block;
border: 1px solid #333;
margin-bottom: 1rem;
}
.modalContent {
width: 90%;
padding: 1%;
}
#map {
margin: 50px auto;
}
}

/* =======================================
#gallery 
======================================= */

#picGallery {
position: relative;
padding: 0 0 3rem;
margin: 8rem auto 0;
}
#gallery {
width: 90% !important;
max-width:1280px !important;
margin: 5rem auto 3rem;
}
#gallery .item:nth-child(-n+10) {
display: block;
}
#gallery .item {
width: 19%;
margin: .5%;
display: none;
}
#gallery + p a {
background: #fff;
color: #9cd8d8;width: 90%;
max-width:380px;
display: block;
padding: .5rem;
text-align: center;
margin: 0 auto;
border-radius:  30px;
}
#picGallery:after {
content: "";
width: 100%;
display: block;
height: 60%;
background: #9CD8D8;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}

@media screen and (max-width: 1366px){ 
#gallery {
width: 98% !important;
}
}

@media screen and (max-width:1080px){ 
#gallery .item {
width: 32%;
}
}

@media screen and (max-width: 812px){
#gallery {
margin-top: 50px;
}
#picGallery {
margin: 5rem auto 0;
}
}

@media screen and (max-width: 480px){
#gallery {
display: flex;
flex-wrap:wrap;
justify-content: space-between;
margin-top: 30px;
}
#gallery p {
width: 49% !important;
}
#picGallery {
margin: 50px auto 0;
}
}

/* =======================================
#bnrList バナー 
======================================= */
#bnrList {
display: flex;
flex-wrap:wrap;
max-width: 1280px;
margin: 5rem auto;
justify-content: center;
}
#bnrList li {
width: 31%;
margin: 0 1%;
}

@media screen and (max-width: 480px){
#bnrList li {
width: 48%;
margin-bottom: 1rem;
}
#bnrList li:last-child{
margin-bottom: 0;
}
}

/* =======================================
.book 七五三ブック配布
======================================= */
.book {
background:#F7FDFF;
padding: 5rem 0;
}
.book + .book {
border-top: 1px solid #7dccb9;
}
.book h5.txt {
font-size:2.5rem;
font-weight: 700;
background: #7dccb9;
color: #fff;
display: inline-block;
padding: 0 .5rem;
}
.book > section {
display: flex;
flex-wrap:wrap;
max-width: 1180px;
margin: 0 auto;
justify-content: center;
align-items: center;
width:90%;
}
.book > section .txtArea,
.book > section figure{
width: 48%;
}
.book > section .txtArea h5 {
max-width: 480px;
margin-bottom: 2rem;
line-height: 100%;
padding: .5rem;
}

@media screen and (max-width: 812px){
.book > section .txtArea,
.book > section figure {
width: 100%;
max-width:550px;
}
.book > section figure {
margin-top: 2rem;
}
}

@media screen and (max-width: 480px){
.book {
padding: 50px 0;
}
}


/* =======================================
#isyoupkan 衣装プラン
======================================= */
#isyouplan {
max-width:1240px;
width: 90%;
display: flex;
flex-wrap:wrap;
justify-content: space-between;
margin: 3rem auto;
}

#isyouplan > section {
width: 48%;
margin-top: 3rem;
}

#isyouplan > section h5 {
background: #7DD1E0;
border-radius: 30px;
color: #fff;
text-align: center;
padding: .3rem;
font-size: 1.5rem;
font-weight: bold;
position: relative;
margin-bottom: 1.5rem;
}
#isyouplan > section h5:after {
content: "";
display: block;
width: 0;
height: 0;
bottom: -13px;
position: absolute;
left: calc(50% - 13px);
border-style: solid;
border-width: 13.0px 7.5px 0 7.5px;
border-color: #7DD1E0 transparent transparent transparent;
}
#isyouplan figure {
background: #fff;
padding: 2rem .5rem;
text-align: center;
}

#isyouplan figure img {
max-width:550px;
}

#isyouplan div {
background: #fff;
margin-top: 1rem;
border-top:1px solid #7DD1E0;
border-bottom:1px solid #7DD1E0;
padding: 3rem 2rem;
text-align: center;
position: relative;
}
#isyouplan div:before,
#isyouplan div:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 3px;
background:#7DD1E0;
top: -7px;
left: 0;
}
#isyouplan div:after {
top:auto;
bottom: -7px;
left: 0;
}

#isyouplan div p {
display: inline-block;
text-align: left;
}

@media screen and (max-width: 480px){
#isyouplan > section {
width: 100%;
margin-top: 3rem;
}
}