@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/*QPJ Original*/

.mask-image {
  --height: 20px;
  mask-image:
  url(wave.svg),
  linear-gradient(to bottom,
     transparent 0%,
      transparent var(--height),
       #000 var(--height),
        #000 100%);
  mask-size: 240px;
  margin-top: calc(-1 * var(--height));
}


#step {
background: #3EBA90;
margin: 0 -29px 40px;
padding-top: 20px;
}

#step .wp-block-columns.step{
  padding: 29px;
}

#step .wp-block-column {
background: #fff;
border-radius: 12px;
border: none;
}


.step h2.wp-block-heading {
  position: relative;
}

#step h2.stepTitle{
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 3000px 3000px;
border-bottom-left-radius: 3000px 3000px;
background: #fff;

display: flex;
flex-direction: column;
line-height: 1.6;
width: fit-content;
margin: -20px auto 10px;
padding: 20px 25px 25px;
  }
#step h2.stepTitle strong{
  font-size: 2.0rem;
  color: #FF9706;

}

/* 左右に斜め線(両端を丸く) */
#step h2.stepTitle strong {
  align-items: center; /* 線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
#step h2.stepTitle strong::before,
#step h2.stepTitle strong::after {
  background-color: #FF9706; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  content: "";
  height: 4px; /* 線の高さ */
  width: 1em; /* 線の長さ */
}
#step h2.stepTitle strong::before {
  margin-right: 10px; /* 文字との余白 */
  transform: rotate(60deg); /* 傾ける */
}
#step h2.stepTitle strong::after {
  margin-left: 10px; /* 文字との余白 */
  transform: rotate(-60deg); /* 傾ける */
}



#step .wp-block-columns.step h2.wp-block-heading{
padding: 1em;

border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-right-radius: 1000px 300px;
border-bottom-left-radius: 1000px 300px;
background: #fec;

  }
  
#step .wp-block-columns.step h2.wp-block-heading strong{
        position: absolute;
        background: #FF9706;
        color: #fff;
        border-radius: 50%;
        padding: 0.3em;
        top: -1.2em;
        left: 0.2em;
        font-size: 30px;
}

.step  p.wp-block-paragraph{
padding: 0 0.5em;
  line-height : 1.6;
}

@media(min-width:782px){
.footer_fixed{
  display: none;
}
.n2-section-smartslider {
  max-width: 640px;
  margin: 0 auto;
}


}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

@media (max-width: 781px) {
  .mask-image {
      --height: 10px;
      mask-size: 120px;
  }
  #step .wp-block-column{
    margin-bottom: 20px;
  }
  #step .wp-block-columns.step h2.wp-block-heading{
    font-size: 1.2rem;
    text-align: center;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}