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

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



/*見出しデザインのリセット*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
background-color: transparent; /* 背景色を透明に*/
border: none; /*枠線なし*/
border-radius: 0; /*角の丸みなし*/
padding-left: 0px;
padding-right: 0px;
	padding-bottom: 0px;
}

/*フォント設定*/

.tab-caption-box-label-text.block-box-label-text.box-label-text {
color: #fff !important;
} 

body, p, h2, h1, a, span {
  font-family: "Forum", "Shippori Mincho B1", serif;
  font-weight: 300 !important;
  font-style: normal;
	color: #4d4a44;
}

/*メニューの文字色*/
.item-label {
	color: #fff !important;
}

.top-has-sub.has-sub.has-icon {
	color: #fff !important;
}



.wp-block-button {
  font-family: "Forum", "Shippori Mincho B1", serif;
  font-weight: 300 !important;
  font-style: normal;
}

/*字間*/
p, body {
letter-spacing: 1.5px;
}

h1, h2, h3 {
letter-spacing: 1.5px;
}

/*リンクホバー色*/
a:hover {
color: #666666;
transition : 0.5s;
}

/*ヘッダーフッターまわりの調整*/
.breadcrumb,
.article-header,
.article-footer {
display: none;
}

.header-container-in {
padding-top: 10px;
padding-bottom: 10px;
}

/*セクションまわりの細々とした余白の調整*/
.main {
	border: none;
padding-bottom:0!important;
margin-bottom:0!important;
margin-left:0!important;
margin-right:0!important;
}

/*フルワイドと余白の調整*/
.wp-block-cover, .n2-section-smartslider {
margin-bottom:0!important;
margin-top:0!important;
padding-bottom:0!important;
bottom: 0;
}

.wp-block-columns {
margin-bottom:0!important;
}

.entry-content, .content {
padding-top:0!important;
padding-bottom:0!important;
margin-top:0!important;
margin-bottom:0!important;
}

.content-bottom {
margin:0;
}

.article {
padding-bottom:0px!important;
margin-bottom:0px!important;
}

/*メニュー画像のホバーズーム*/
/*表示したいボックスサイズ*/
.wp-block-column.has-border-color.has-key-color-border-color.is-layout-flow.wp-block-column-is-layout-flow {
  overflow: hidden; /*拡大した時はみ出た部分を隠す*/
}

/*画像の調整*/
.menuimage:hover img {
transform: scale(1.1);
transition: transform 0.3s;
}




/* 通常状態 */
.wp-block-button__link.has-key-color-background-color {
  background-color: #bcb0a9; /* 現在のボタン色に合わせてください */
  color: #fff !important;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* ホバー時：背景色を少し明るく */
.wp-block-button__link.has-key-color-background-color:hover {
  background-color: #c7bdb7 !important; /* 元の色より少し明るい */
  transform: translateY(-1px); /* ほんの少し浮かせて軽くする（お好みで） */
}




/*フッター*/
.footer {
margin-top:0px;
}

/*SNSシェア非表示*/
.page .sns-share,
.page .sns-follow {
display: none ;
}

.veu_socialSet.veu_socialSet-position-after.veu_contentAddSection {
	display: none;
}

/*水平スクロールバー非表示*/
body {
overflow-x:clip;
font-size: 12px;
}

/*フルワイド*/
.fullwideblock {
width: 100vw;
margin: 0 calc(50% - 50vw);
padding: 0 calc(50vw - 50%);
}

/*グローバルメニュー*/
/*メニュー項目の左右の余白*/
#navi .navi-in>ul>li>a{
padding: 0 0em;
}

/*ホバー時にメニューの色が薄くなるのをやめる*/
#navi .navi-in a:hover {
background-color: rgb(255 255 255 / 0);
}

/*ホバー時にメニューにアンダーラインを出す*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
opacity: .5;
left: 0px;/*線の位置*/
bottom: 0;/*線の位置*/
height: 100%;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #dddddd ;/*線の色*/
transform: scale(0,1);/*ホバー前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/*フォントサイズ等変更*/
.navi-in .menu-header .item-label{
letter-spacing: 2px;
font-size: 13px;
font-weight: 600;
}

/*メニュー項目の幅*/
.menu-item {
width: 10px;
}
/*グローバルメニュー終わり*/

/*ブログ記事一覧のカスタマイズ*/
.new-entry-cards {
margin: auto;
width: 110vh;
}

.new-entry-card-thumb {
transition-duration: 0.3s; /*アニメーションの時間*/ box-shadow: 0px 10px 10px -5px rgba(85,85,85,0.75); /*通常時の画像の影*/
}

.new-entry-card-thumb:hover {
transform: translateY(-6px); /*マウスホバーで上に移動*/
box-shadow: 0px 5px 5px -5px rgba(85,85,85,0.75); /*マウスホバー時の画像の影*/
}

.new-entry-card-thumb img { /*画像下の隙間を消す*/
vertical-align: bottom;
}

.widget-entry-card-thumb {
width: 200px !important;
}

.new-entry-card-title {
margin-top: 5px; /*上に余白を付ける*/
line-height: 1; /*行間を広く*/
font-size: 14px !important;
padding-bottom: 0px!important;
}

.is-list-horizontal.large-thumb .card-title, .is-list-horizontal.large-thumb-on .card-title {
height: 1.5em;
}








/* --- ヘッダー全体とナビゲーションを透過 --- */
.header-container,
.header-container-in,
#header-container-in,
.header-in,
.header,
.wrap,
#navi,
#navi-in,
#menu-pc,
.menu-top,
.menu-header,
ul.menu-top {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* --- ヘッダーを上に重ねて前面に表示 --- */
.header-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: transparent !important;
}

/* --- ロゴエリアも透過 --- */
.logo,
.logo-header,
.logo-header .logo-image,
#header .logo,
#header-in .logo {
  background: transparent !important;
}

/* ── サブメニューを透過 ─────────────────────────── */
#navi .sub-menu {
  background: rgba(255, 255, 255, 0.1) !important; /* 20%の白透過 */
  backdrop-filter: blur(4px); /* 背景を軽くぼかして高級感を出す */
  border: none !important;
  box-shadow: none !important;
}

/* メニュー項目のテキスト色を白に（必要に応じて） */
#navi .sub-menu a {
  color: #fff !important;
}

/* ホバー時に少し明るく */
#navi .sub-menu a:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}












/*タイトルと日付の間の調整*/
.new-entry-card-title:hover {
color: #85A4B5 ;/*マウスホバー時の色*/
}
@media screen and (max-width: 768px){
.new-entry-cards {
margin: auto;
width: 45vh;
}
.new-entry-card-title {
font-size: 12px; /*スマホでの文字の大きさ*/
padding-left:5px;
line-height: 1.2; /*スマホでの行間*/
}

.e-card-info {
color: #666 ; /*色を薄く*/
}

.new-entry-card-snippet { padding-left: 5px; font-size: 10px; } 
.e-card-info {font-size: 11px; /*スマホでの文字サイズ*/}
}

/*記事一覧の投稿日表示カスタム*/
/*ウィジェット記事の投稿日・更新日を表示*/
.widget-entry-card-date {
display:block;
text-align: right;/*右寄せ*/
}

/*更新日を非表示にする*/
.widget-entry-card-update-date{
display: none;
}

/*日付にアイコン追加*/
.widget-entry-card-post-date::before,

.widget-entry-card-update-date::before{
font-family: "Font Awesome 5 Free";
padding-right: 3px; /*右余白*/
font-size:10px;
}

/*更新日アイコン*/
.widget-entry-card-update-date::before{
font-weight:bold;
content: "\f1da"; /*fa-historyアイコン*/
}

/*記事一覧カスタマイズ終わり*/

/*ヘッダーインスタfunction編集必要*/
.header-insta {
margin-bottom: 40px !important;
padding-top: 18px;
height: 30px;
width: 30px;
transition-property: opacity;
transition-duration: 0.5s;
}
.header-insta:hover {
opacity: 0.4;
}

/*ヘッダーライン*/
.header-line {
margin-bottom: 40px !important;
padding-top: 18px;
margin-right: 30px;
margin-left: 10px;
height: 30px;
width: 30px;
transition-property: opacity;
transition-duration: 0.5s;
}
.header-line:hover {
opacity: 0.4;
}

/*お問い合わせボタン（ヘッダー）*/
/*ヘッダーロゴ(テキスト)の反対側に問い合わせボタン表示*/

div#header-in {
/* ヘッダーロゴ(テキスト)と問い合わせボタンを横並び */
flex-direction: row;
}

.header-in .logo-header {
/* ヘッダーロゴ(テキスト)と問い合わせボタンの位置を両端にする */
margin-right: auto;

}
.header-contact {
/* 問い合わせボタン見た目を整える */
 margin-top: 10px !important;
margin-top: 30px;
padding-right: 20px;
height:50px;

}

.btn {
color: #fff ;
border-color: #F39800 ;
border-radius: 6px;
height: 45px;
font-size: 14px;
padding-top: 10px;
background: #F39800 ;
}

}
/*お問い合わせボタン終わり*/

/*人気アイコン*/
.wp-block-cover .popular .has-link {
  position: relative;
	}

	.recommend {
		position: absolute;
	top: 0px;
	left: 0px;
}




.wp-block-cover .wp-block-cover__inner-container,.wp-block-cover-image .wp-block-cover__inner-container {
position: static;
	z-index: 200;
}






/* ================================
   企業様向けお問い合わせ（page-id-1274 限定）
   ================================ */
.page-id-1274 {
  --dusty-blue: #BCB0A9; /* くすみブルー（必要なら調整） */
}

/* テーブル本体 */
.page-id-1274 table.CF7_table {
  width: 90%;
  max-width: 760px;
  margin: 0 auto 10px;
  border: 3px solid #E5E5E5;
  border-collapse: collapse;
  color: #333;
}

/* 行・セル */
.page-id-1274 table.CF7_table tr { border-top: 1px solid #E5E5E5; }
.page-id-1274 .CF7_table th {
  width: 32%;
  background: #EBEDF5;
  text-align: left;
  font-size: 15px; /* ← 項目フォントを1px小さく */
  line-height: 1.6;
  padding: 10px;
}
.page-id-1274 .CF7_table td {
  padding: 10px;
  background: #fff;
}

/* 入力欄 */
.page-id-1274 .CF7_table input,
.page-id-1274 .CF7_table textarea,
.page-id-1274 .CF7_table select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #D8D8D8;
}
.page-id-1274 .CF7_table ::placeholder {
  color: #797979;
}

/* 必須・任意ラベル */
.page-id-1274 .CF7_req,
.page-id-1274 .CF7_unreq {
  font-size: 0.85em;
  padding: 4px 8px;
  color: #fff;
  border-radius: 3px;
  margin-right: 0.7em;
}
.page-id-1274 .CF7_req {
  background: var(--dusty-blue); /* くすみブルー */
}
.page-id-1274 .CF7_unreq {
  background: #BDBDBD;
}

/* スマホ */
@media (max-width: 768px) {
  .page-id-1274 table.CF7_table {
    width: 95%;
  }
  .page-id-1274 .CF7_table tr,
  .page-id-1274 .CF7_table th,
  .page-id-1274 .CF7_table td {
    display: block;
    width: 100%;
    border: none;
  }
  .page-id-1274 .CF7_table th {
    border-radius: 3px 3px 0 0;
    font-size: 14px; /* モバイルでも1px小さく調整 */
    padding: 8px 10px;
  }
  .page-id-1274 .CF7_table td {
    border-radius: 0 0 3px 3px;
    padding: 8px 10px;
  }
}

/* 送信ボタン：くすみブルー */
.page-id-1274 .wpcf7 input.wpcf7-submit {
  display: block;
  width: 200px; /* フル幅にしたい場合は 100% に変更 */
  height: 48px;
  margin: 16px auto 0;
  background: var(--dusty-blue);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-size: 1.1em;
  font-weight: 700;
  transition: opacity 0.25s ease;
}
.page-id-1274 .wpcf7 input.wpcf7-submit:hover {
  opacity: 0.85;
}

/* ボタン行 */
.page-id-1274 .CF7_btn {
  text-align: center;
  margin-top: 16px;
}

/* このページのフォームだけ：p の下マージンをゼロ */
.page-id-1274 .CF7_table p {
  margin-bottom: 0 !important;
}

/* スピナー非表示 */
.page-id-1274 .wpcf7-spinner {
  width: 0;
  margin: 0;
  display: none;
}

/* ================================
   ラジオボタンのボタン＋文字を横並びに
   ================================ */
/* ================================
   ラジオボタン：ボタンと文字を横並びに
   ================================ */
.page-id-1274 .wpcf7-form-control.wpcf7-radio {
  display: flex;
  align-items: center;
  gap: 20px; /* 「メール」「お電話」の間隔 */
  flex-wrap: nowrap;
}

/* 各選択肢（ラジオボタン＋テキスト） */
.page-id-1274 .wpcf7-list-item {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap; /* ← 改行を禁止！ */
  margin-right: 18px;
}

/* ラベル全体 */
.page-id-1274 .wpcf7-list-item label {
  display: inline-flex !important; /* ← ボタンと文字を横並び */
  align-items: center;
  gap: 6px; /* ボタンと文字の間 */
  margin: 0;
  cursor: pointer;
  white-space: nowrap; /* ← 改行禁止（重要） */
}

/* テキスト部分（label内のspan） */
.page-id-1274 .wpcf7-list-item-label {
  display: inline-block;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap; /* ← テキストを1行に */
}

/* 不要な改行を削除 */
.page-id-1274 .wpcf7-form-control-wrap[data-name="radio-904"] br {
  display: none !important;
}







/*サブメニュー文字太さ*/

.menu-item-1127 {
  font-weight: 400 !important;
}

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

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

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

	/*TOPページロゴ一番上の丸サイズ調整*/
.toplogo {
	margin: auto;
	width: 30vw !important;
	margin-bottom: 30px !important;
}
	
	
	/*トップページテキストの字間*/
	.maintext {
			letter-spacing: 0px !important;
		font-size: 12px !important;
	}
	

	
	/*字間*/
	body {
		letter-spacing: 1px !important;
	}
	
	/*パーソナルカラー診断の説明*/
	.list2 {
		padding-left: 0.5px !important;
		padding-right: 0.5px !important;
	}
	
	.colorimage2 {
		width: 65% !important;
	}
	
	.colorimage3 {
		width: 90% !important;
	}
	
.wp-block-column .popular .is-layout-flow .wp-block-column-is-layout-flow {
  position: relative;
	}
	
.recommend {
		position: absolute;
	top: 0px;
	right: 0px;
}
	
.popularicon {
	position: absolute;
	top: 357px;
	left: 10px;
	z-index: 100;
}



	
/*へっだー非表示*/ .header-container { display: none; } 
}




	@media (max-width: 785px) {

  /* 該当ページだけ:*/
	
		.menu .wp-block-cover__image-background{
	      background-image: url('https://moi-lachic.com/wp-content/uploads/2025/10/483fa479fbb1790ac65d39b1796d7864-1.png') !important;
    background-size: contain !important;   /* 拡大しない */
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
	
	.details .wp-block-cover__image-background{
	      background-image: url('https://moi-lachic.com/wp-content/uploads/2025/10/2f3a366dfce7e70ce2043180ce4d26d7.png') !important;
    background-size: contain !important;   /* 拡大しない */
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
	
	.explain .wp-block-cover__image-background{
	      background-image: url('https://moi-lachic.com/wp-content/uploads/2025/10/c1a27ca0e5bbf43a9badff4f635103ec.png') !important;
    background-size: contain !important;   /* 拡大しない */
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
	

	
}

/* スマホだけ TOPカバー画像を差し替え（HOMEのみ） */
@media (max-width: 768px) {
  .home .wp-block-cover.alignfull.is-light.fullwideblock.top {
    background-image: url('https://moi-lachic.com/wp-content/uploads/2025/11/812c447daaa2c189304087dc8b79cc5c-2.png') !important;
    background-size: cover !important;
    background-position: center center !important;
  }
  /* もとのIMGを隠す（これをしないと上に出たまま） */
  .home .wp-block-cover.alignfull.is-light.fullwideblock.top
  img.wp-block-cover__image-background {
    opacity: 0 !important;
    pointer-events: none;
  }
	
	
	 /* 元画像の縦横比（高さ ÷ 幅 = 1024/1536） */
  .hero-cover{
    --ar: 1024/1536;
    min-height: calc(100vw * var(--ar)) !important;
    height: auto !important;
  }

  /* 画像をトリミングせず全部見せる */
  .hero-cover .wp-block-cover__image-background{
    object-fit: contain !important;
  }

  /* Cover 編集画面で自動付与される min-height を上書き */
  .hero-cover[style*="min-height"]{
    min-height: calc(100vw * var(--ar)) !important;
  }
	
	/*ロゴサイズ*/
	img.wp-image-404 {
		    width: 100px !important;
    height: auto !important;
	}
	
		img.wp-image-403 {
		    width: 150px !important;
    height: auto !important;
	}
	
	  figure.toplogo{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  figure.toplogo img{
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
	
	
}