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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body{
  overflow-x: hidden;
}
/* 見出しの装飾リセット */
/* H1 */
.article h1{
	margin-top:50px;
	color:#47b1c2;
}

/* H2 */
.article h2{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
background:none;
color:#47b1c2;
}

/* H3 */

.article h3{
border-top:none;
border-bottom:none;
border-right:none;
border-left: none;
}

/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}

/* 投稿日を非表示 */
.post-135 .date-tags
{
display: none;
}

/*リンクのホバー色*/
a:hover{
color:#7bcedb;
}
/* 良い位置で改行する用 */
 span {
    display: inline-block;
   }

/* メイン部分の上の隙間削除	 */
.main{
	padding:0;
}
.content{
	margin-top:0;
}
.article{
	margin-top:-20px;
}

/* 送信ボタン */
input[type=submit] {
	background-color:#47b1c2;
	color:white;
}

/*選ばれる理由のデザイン*/
.reason{
	border-bottom:solid 2px #ffeb9b;
	border-right:solid 1px #ffeb9b;
	border-radius:10px;
	padding:20px;
}

/* 選ばれる理由のパネルデザイン（新） */
.square{
	border:2px solid #dcefee;
	padding:14px;
	border-radius:10px;
}

.back-cl{
	background-color:#dcefee;
	padding:30px;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

/* スライドイン */
.slide-in{
	opacity:0;
	animation: slideIn 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay:0.5s;
}
 
@keyframes slideIn {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

/* フェードイン */
.fade-in{
	animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* 跳ねる */
.jamp {
	animation: blinking 3s ease-in-out infinite alternate;
}

@keyframes blinking {
	0% {
		transform: translateY(0);
	}
	10% {
		transform: translateY(10px);
	}
	20% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(10px);
	}
	40% {
		transform: translateY(0);
	}
	100% {
		transform: translateX(0);
	}
}

/* プラン */
.standard {
  position: relative;
}
.standard:before{
  position: absolute;
  content: '人気';
  top: 0.2em;
  left: 5%;
  color: white;/*文字色*/
  padding: 0.4em;/*余白*/
  border-radius : 50px;
  background: #ffeda3;/*背景色*/
  color : #00a799;
}

/*****診断結果のCSS*********************************/
/* 上部のバッジ（あなたの診断結果） */
.result{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #FFFFFF;
  border: 1px solid #E6DFD5;
  padding: 8px 24px;
  border-radius: 30px; /* 完全なカプセル型 */
  font-size: 14px;
  color: #7e7e7e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  margin-bottom: 30px;
}

/* カテゴリタグ（運用かんたん） */
.result-tag {
  display: inline-block;
  background-color: #00a799;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 24px;
  border-radius: 20px;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}



/* 説明のカードボックス */
.white-base {
  background-color: #FFFFFF;
  border: 2px solid #EFEBE4;
  border-radius: 18px; /* 滑らかな角丸 */
  padding: 25px 30px;
  text-align: left; /* 左寄せ */
  max-width: 800px;
  margin: 0 auto 40px auto;
  box-shadow: 0 4px 12px rgba(140, 118, 98, 0.03);
}

.plan-base{
  margin : auto;
  background-color : #ffffff;
  border: 1px solid #00a799;
  border-radius:20px;
  max-width:800px;
  overflow : hidden;
  height:100%;
}
.plan-base p{
  margin :0 ;
}

.plan-base hr{
  width: 100px;
  margin-bottom:10px;
}
.plan-inner{
  padding :20px;
}

.back-color{
  background-color : #eafbff;
  border-radius:20px;
  padding:20px;
}

.questions{
  background-color : #ffffff;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-top:20px;
  padding-bottom : 60px ;
  margin-bottom:0;
}

.ok-content{
  background-color : #FFFFFF;
  border-radius:20px;
  border : 1px solid #00a799;
  padding:14px;
}

.price{
  margin : 0;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*835以上【PC用】*/
@media screen and (min-width: 835px){
  /*必要ならばここにコードを書く*/
	/*サービス欄×３デザイン*/
	.service{
		padding:20px;
		border-right:1px solid #dcefee;
	}
	.service:last-child{
		border-right:none;
	}
	.service-title{
		height:2em;
	}
	.service-text{
		height:2em;
	}
	
	/*スマホのみ*/
	.smp-only{
		display:none;
	}
}

/*834px以下【スマホ用】*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	/* 上の隙間削除 */
	#main.main{
		padding:0;
	}
	.content-width{
		padding-left:20px;
		padding-right:20px;
	}

	/* トップの背景色 */
	.top{
  		background:#dcefee;
		padding:20px;
		padding-bottom:40px;
	}
	.back-img{
		height:
	}

	/*サービス欄×３デザイン*/
	.service{
		padding:20px;
		border-bottom:1px solid gray;
	}
	.service:last-child{
		border-bottom:none;
	}
	
	
	/*PCのみ*/
	.pc-only{
		display:none;
	}
}