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

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

/*全体*/
* {
	transition: all .3s;
}

/*フロント固定ページのタイトル,投稿日,投稿者名を非表示*/
.entry-title,
.post-date,
.author-info,
.entry-header,
.date-tags,
span.navi-menu-caption.menu-caption{
  display: none;
}

/*マージンの上を0に*/
.content, .footer, .entry-content {
	margin-top: 0;
}
/*セパレータのmarginを1remに*/
.wp-block-separator {
	margin-bottom: 1rem !important;
}
/*mainコンテンツの上を消す*/
.main {
	padding: 0 16px 16px 16px;
	border: none;
}

.align-center {
	text-align: center;
}
/*背景を白に*/
div#content {
	background: #fff;
}
/*ブルー*/
.color-ch-blue {
	color: #00a9e3;
	font-size: 120%;
}
/*黄色*/
.color-ch-yellow {
	color: yellow;
	font-size: 120%;
}
/*h2の背景色削除*/
.article h2 {
	background-color: transparent;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}
/*画面横全幅用class*/
.fluid-box {
	width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 40px;
}
/*セクションの上にスペース*/
.warpper {
	padding: 16px 0;
}
/*ボタンのサイズ調整*/
.link-btn {
	
}

/********フォントサイズ***********/
.article h2 {
	font-size: 2rem;
}

@media screen and (max-width: 834px) {
	.article h2 {
		font-size: 1.5rem;
	}
}

/*******************************
****ヘッダー
*******************************/
.header-container {
	height: 100px;
}

.header-container-in.hlt-top-menu {
	height: 100%;
}

.header {
	display: flex;
}

.item-label {
	font-weight: bold;
}
/*メニューのフォント関係*/
.nav-in a {
	font-weight: bold;
}

/************************************
****　アピールエリア
************************************/
.appeal {
	height: calc(100vw * calc(980 / 1935));
/* 	background-size: contain; */
}

/*********************************
 * 注意書き
*********************************/
.attention-section {
	width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px;
	background-color: #e8e8e8;
}

@media screen and (max-width: 834px) {
	.attention-text {
		font-size: 12px;
	}	
}

/***********************************
 * ニュースコンテンツ
 **********************************/
.info-warpper {
	padding: 16px 0;
}

.info-warpper div {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 2px solid #f4f5f7;
/* 	max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important; */
}

.info-warpper div:hover {
	border-bottom: 2px solid #9ea1a7;
}

.info-warpper .info-days {
	font-size: 12px;
	margin: 0;
}

.info-warpper .info-text {
	font-size: 16px;
	margin: 0;
}

/****************************
 * サービス一覧カード*
****************************/
/*カードデザイン*/
.sh-hover {
	background-color: #fff;
	padding-bottom: 1.2em;
}

/*カードのシャドウ*/
.border-line {
	box-shadow: 0 2px 5px #ccc;
}

p.padding-5px {
	padding: 0 1rem;
}

/*ボタンデザイン*/
.wp-block-button.is-style-outline>.wp-block-button__link {
	border: none;
	color: #fff !important;
	background-color:#00a9e3 !important;
}

.wp-block-button.card-btn:hover a.wp-block-button__link.has-black-color.has-white-background-color {
	padding: 0.667em 2.333em;
	color: #fff !important;
	background-color: #0177b7 !important;
}

.option-hover img{
	border-radius: 150px !important;
}

.option-hover:hover img{
	border-radius: 0 !important;
}

.card-title {
	position: relative;
}

.card-title::after{
	content: "";
	width: 150px;
	height: 3px;
	background-color:#0097A7;
    position:absolute;
   	bottom:0;
   	left: calc(50% - 75px);
}

/******ランキング******/
.rank1, .rank2, .rank3 {
	position: relative;
}

.rank1:after, .rank2:after, .rank3:after {
	content: "";
	position: absolute;
	top: -24px;
	left: -15px;
	width: 150px;
	height: 150px;
	background-size: contain; /* 画像が要素内に収まるように調整 */
  	background-repeat: no-repeat;
}

@media screen and (max-width: 1023px) {
	.rank1:after, .rank2:after, .rank3:after {
		width: 100px;
		height: 100px;
	}
}

.rank1:after {
	background-image: url(https://conpa.jp/wp-content/uploads/2024/03/rank1.png);
}

.rank2:after {
	background-image: url(https://conpa.jp/wp-content/uploads/2024/03/rank2.png);
}

.rank3:after {
	background-image: url(https://conpa.jp/wp-content/uploads/2024/03/rank3.png);
}

/*一覧のギャップ調整*/
.is-layout-flex.wp-block-columns {
	gap: 1rem;
}


/**********************/
/*　 ４つの理由 */
/*********************/
.tips-number {
	margin-bottom: 0 !important;
}

/**********************/
/*　 FQA    */
/*********************/
/*アコーディオン左寄せ*/
.p-center {
	display: inline-block;
	text-align: right;
}

.toggle-box {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}

.toggle-button {
	color: #000 !important;
	text-align: center;
}

.toggle-button::before {
	margin-right: 0;
	width: 0;
	height: 0;
}

/***********電話番号リンク***********/
.phone-icon {
	margin-right: 1rem;
	width: 60px;
	height: 60px;
	margin-bottom: 0 !important;
	display: flex;
	align-items: center;
}

.phone-link  > a {
	font-size: 2rem;
	font-weight: bold;
	text-decoration: none;
	transition: all .3s;
}

.phone-link > a:hover {
	text-decoration: underline;
}

/**********************/
/*　 フォーム全体    */
/*********************/
#cf7-area {
width:100%;
margin: 0 auto;
}

.cf7-item {
border-top: 1px solid #ddd;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}

.cf7-q {
width: 30%;
padding: 24px 0 24px 20px;
background-color: #F0F8FF;
}

.textarea {
	padding: 100px 0 100px 20px;
}

.cf7-q p, .cf7-a p {
	margin-bottom: 0;
}

.cf7-a {
	width: 60%;
	padding: 18px 0px 18px 20px;
}

/* 各項目共通 */
.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {
	border-radius: 0 !important;
}

#cf7-area label{
	font-weight:bold;
}

#cf7-area input[type="text"],#cf7-area input[type="email"],#cf7-area input[type="tel"],#cf7-area textarea {
	width: 100%;
}

#cf7-area input[type="text"]:focus,#cf7-area input[type="email"]:focus,#cf7-area input[type="tel"]:focus,#cf7-area textarea:focus {
	border: 2px solid #FF1493;
	outline: 0;
}

#cf7-area input[type="checkbox"], #cf7-area input[type="radio"]{
	appearance: auto;
}

#cf7-area .wpcf7-list-item {
	display: block;
}

#cf7-area textarea{
	height:200px;
	padding: 0.625em 0.4375em;
}

.cf7-accept-check{
	text-align: center;
	margin: 50px auto;
}

/*ラジオボタン*/
.wpcf7-radio {
	display: flex;
	flex-direction: row;
}

.wpcf7-radio .first {
	margin-left: 0;
}

.cf7-submit {
	width: 40%;
	margin: 0 auto;
	text-align: center;
}

#cf7-area input[type="submit"] {
	width: 100%;
	background-color: #016FB9;
	color: #ffffff;
	border-radius: 5px;
	font-size: 1.2em;
	padding: 1em 10px;
	border: 1px solid #016FB9;
}

#cf7-area input[type="submit"]:hover {
	background-color:#ffffff;
	border: 1px solid #191970;
	color:#191970;
}

.cf7-btn {
	width: 40%;
	margin: 0 auto;
	text-align: center;
}

/*　必須ラベル　*/
.cf7-req{
	font-size:.8em;
	padding: 4px 6px;
	background: #eb2a2a;
	color: #ffffff;
	margin-left: 10px;
	display:inline-block;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
	h2.text-2-size {
		padding-bottom: 0;
	}
	p.text-5-size {
		font-size: 16px;
	}
	
	/**/
	.mobile-header-menu-buttons {
		background-color: #00a9e3;
	}
	
	.mobile-menu-buttons > li {
		padding-bottom: 8px;
		padding-top: 8px !important;
	}
	
	.mobile-menu-buttons a .menu-icon{
		display: none;
	}
	
	.mobile-menu-buttons a .menu-caption {
		margin-left: 1.8em;
		opacity: 1;
	}

	.mobile-menu-buttons .menu-icon {
		text-align: right;
	}
	
	span.navi-menu-icon .fa-bars {
		color: #fff;
		font-size: 1.8em;
		margin-right: 1em;
	}
	
	.mobile-menu-buttons > li {
		padding-top: 16px;
	}
	
	.header-container {
		display: none;	
	}
}

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

	.cf7-item {
		display: block;
	}

	#cf7-area label{
		display: block;
		margin-bottom: 10px;
	}

	.cf7-q {
		width: 100%;
		padding: 10px 0 1px 10px;
	}

	.cf7-a {
		width: 100%;
		padding: 13px 0;
	}
	
	.wpcf7-radio {
		justify-content: space-evenly;
	}

	#cf7-area input[type="text"], #cf7-area input[type="email"], #cf7-area input[type="tel"], #cf7-area textarea{
	margin-left: 0;
	}

	.cf7-submit{
	width: 90%;
	}
	
	h2.text-3-size {
		font-size: 24px;
   }
	
	.phone-link  > a{
		font-size: 1.5rem;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	p.text-5-size {
		font-size: 24px;
	}
}