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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
#appeal { 
height: calc(100vw * calc(800 / 1280)); 
}

h1 {
  color: #6594e0;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #6594e0;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
.two1{width: 48%;
margin: 5px 1%;
padding: 0px;
float: left;}
	
.two{width: 48%;
margin: 5px 1%;
padding: 0px;
float: left;}

.three1{width: 31%;
margin: 5px 1%;
float: left;}

.three2{width: 62%;
margin: 5px 1%;
float: left;}

.four1{width: 23%;
margin: 5px 1%;
padding: 0px;
float: left;}
	
.five{width: 20%;
margin: 5px 0%;
padding: 0px;
float: left;}	
	
}

.xxx-large {
    font-size: 1.75rem;
    line-height: 1.4285714286;
}

.card-list.with-content .card .title {
    font-size: 1.375rem;
    margin: .25em .5em 0;
    border-bottom: 3px solid #679e47;
}

.container1 {
  display: flex !important;
  flex-wrap: wrap !important;
  max-width: 1200px;
  margin: 0 auto;
}

.column-left1 {
    width: 25%;
	float: left;
}

.column-right1 {
    width: 74%;
	float: left;
}


.box {
width: 45%;
margin: 2% !important;
  box-sizing: border-box;
  padding: 20px;
  color: #333;
  background: #fff;

}

.box h3 {
  font-size: 1.2em;
  margin: 0;
  font-weight: normal;

  /* 必要に応じて他のプロパティも指定し、望まない装飾を上書きする */
}

.box p {
  margin: 0 0 10px;
  font-size: 0.95em;
  line-height: 1.4em;
}

.price {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
}

.btn1 {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.9em;
	background:#37B34A;
}

.btn2 {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.9em;
	background:#9C4FB4;;
}

.btn3 {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.9em;
	background:#FF9800;
}

.btn4 {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.9em;
	background:#FBC02D;
}

.btn5 {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.9em;
	background:#2196F3;
}


.btn6 {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.9em;
	background:#795548;
}

/* カラー設定（枠線・ボタン） */
.green { border: 10px solid #37B34A; }
.purple     { border: 10px solid #9C4FB4; }
.orange     { border: 10px solid #FF9800; }
.yellow     { border: 10px solid #FBC02D; }
.blue       { border: 10px solid #2196F3; }
.brown      { border: 10px solid #795548; }
.khaki      { border-color: #8BC34A; }
.lightgreen { border: 6px solid #7CB342; }

/* ボタンカラー */
.green-btn      { background: #37B34A; }
.purple-btn     { background: #9C4FB4; }
.orange-btn     { background: #FF9800; }
.yellow-btn     { background: #FBC02D; color: #333; font-weight: bold; }
.blue-btn       { background: #2196F3; }
.brown-btn      { background: #795548; }
.khaki-btn      { background: #8BC34A; color: #333; font-weight: bold; }
.lightgreen-btn { background: #7CB342; }



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

/*480px以下*/
@media screen and (max-width: 480px){

.three{width:45%; margin:5px 0;}
.three1{width:100%; margin:5px 0;}

.two{width: 100%;
margin: 5px 2% 0 0;
padding: 0;
}

.two1{width:48%; margin:5px 2%; padding:0;}
	
.four{width:45%; margin:5px 2%; padding:0;}
	

.four1 {width:30%; margin:5px 2%; padding:0;}	

.five {width:20%; margin:5px 0%; padding:0;}	
	
	
.box green {width: 100%;
margin: 5px 2% 0 0;
padding: 0;
}
.box purple {width: 100%;
margin: 5px 2% 0 0;
padding: 0;
}
.box orange {width: 100%;
margin: 5px 2% 0 0;
padding: 0;
}
.box blue {width: 100%;
margin: 5px 2% 0 0;
padding: 0;
}
.box brown {width: 100%;
margin: 5px 2% 0 0;
padding: 0;
}
	
.source-org {
font-size: 10px;
	
	
}
	
.column-left1 {
    width: 25%;
	float: left;
}
	
.column-right1 {
    width: 74%;
	float: left;
}	

h2 {
    font-size: 22px;
    line-height: 1.4;
    margin: 1em 0;
  }	
	
/* PCだけ表示 */
.only-pc {
  display: block;
}

@media (max-width: 1023px) {
  .only-pc {
    display: none;
  }
}

/* スマホだけ表示 */
.only-mobile {
  display: none;
}

@media (max-width: 1023px) {
  .only-mobile {
    display: block;
  }
}