@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

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


/* 【↓】ボタンBOX-red(ここから) */

.button-box-red {
    width: 80%;
    margin: 8px auto;
    padding: 0;
    border: none;
    background: none;
    display: block;
}

.button-box-red a {
    display: block;
    padding: 15px 10px;
    background-color: #ff5133;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border-radius: 4px;
    box-sizing: border-box;
    transition: 0.3s;
}

.button-box-red a:hover {
    background-color: #e35133;
    color: #fff;
}

/* 【↑】ボタンBOX-red(ここまで) */

/* 【↓】ボタンBOX-green(ここから) */

.button-box-green {
    width: 80%;
    margin: 8px auto;
    padding: 0;
    border: none;
    background: none;
    display: block;
}

.button-box-green a {
    display: block;
    padding: 15px 10px;
    background-color: #00b93f;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border-radius: 4px;
    box-sizing: border-box;
    transition: 0.3s;
}

.button-box-green a:hover {
    background-color: #008f30;
    color: #fff;
}

/* 【↑】ボタンBOX-green(ここまで) */

/* 【↓】ボタンBOX-orange(ここから) */

.button-box-orange {
    width: 80%;
    margin: 8px auto;
    padding: 0;
    border: none;
    background: none;
    display: block;
}

.button-box-orange a {
    display: block;
    padding: 15px 10px;
    background-color: #f79901;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border-radius: 4px;
    box-sizing: border-box;
    transition: 0.3s;
}

.button-box-orange a:hover {
    background-color: #cb9900;
    color: #fff;
}

/* 【↑】ボタンBOX-orange(ここまで) */

/* 【↓】ボタンBOX-blue(ここから) */

.button-box-blue {
    width: 80%;
    margin: 8px auto;
    padding: 0;
    border: none;
    background: none;
    display: block;
}

.button-box-blue a {
    display: block;
    padding: 15px 10px;
    background-color: #2c6ebd;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border-radius: 4px;
    box-sizing: border-box;
    transition: 0.3s;
}

.button-box-blue a:hover {
    background-color: #2c4c79;
    color: #fff;
}

/* 【↑】ボタンBOX-blue(ここまで) */




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

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

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

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