@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.2
*/

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

/***** フローチャート関連のCSS *****/
.flowchart {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 0;
}
.flowchart > div {
  margin: 0;
  text-align: center;
}
.flowchart div img {
  vertical-align: top;
}
.flowchart > div > *:first-child {
  margin-top: 0;
}

.flw1 {
  width: 100%;
}
.flw2 {
  width: 49.5%;
}
.flw3 {
  width: 32.666%;
}
.flw2-3 {
  width: 66.5%;
}

/***** 項目：グリーン *****/
.flowbtn-green,
a.flowbtn-green {
  width: 100%;
  color: #333;
  background-color: #d1d89d;
}
.flowbtn-green:hover,
a.flowbtn-green:hover {
  color: #333;
  background: #bec88c;
}

/***** 項目：オレンジ *****/
.flowbtn-orange,
a.flowbtn-orange {
  width: 100%;
  color: #333;
  background-color: #f1bf94;
}
.flowbtn-orange:hover,
a.flowbtn-orange:hover {
  color: #333;
  background: #dcaa82;
}

/***** 項目：イエロー *****/
.flowbtn-yellow,
a.flowbtn-yellow {
  width: 100%;
  color: #333;
  background-color: #f1ce6e;
}
.flowbtn-yellow:hover,
a.flowbtn-yellow:hover {
  color: #333;
  background: #dcbe5a;
}

/***** 項目：ブルー *****/
.flowbtn-blue,
a.flowbtn-blue {
  width: 100%;
  color: #333;
  background-color: #c6d9d9;
}
.flowbtn-blue:hover,
a.flowbtn-blue:hover {
  color: #333;
  background: #b4c8c8;
}

/***** 項目：パープル *****/
.flowbtn-purple,
a.flowbtn-purple {
  width: 100%;
  color: #333;
  background-color: #d9bbcb;
}
.flowbtn-purple:hover,
a.flowbtn-purple:hover {
  color: #333;
  background: #c8aab4;
}

/***** 項目：ピンク *****/
.flowbtn-pink,
a.flowbtn-pink {
  width: 100%;
  color: #333;
  background-color: #f191a5;
}
.flowbtn-pink:hover,
a.flowbtn-pink:hover {
  color: #333;
  background: #dc8296;
}

/***** 項目：インディゴ *****/
.flowbtn-indigo,
a.flowbtn-indigo {
  width: 100%;
  color: #333;
  background-color: #b0bfe0;
}
.flowbtn-indigo:hover,
a.flowbtn-indigo:hover {
  color: #333;
  background: #a0aace;
}

/***** 項目：ブラウン *****/
.flowbtn-brown,
a.flowbtn-brown {
  width: 100%;
  color: #333;
  background-color: #c4c0a9;
}
.flowbtn-brown:hover,
a.flowbtn-brown:hover {
  color: #333;
  background: #b4aa96;
}


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

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

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