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



/************************************
** 追従ボタン（丸形、オンマウスで文字表示、逆グラデーション、直径120px、文字中央配置）
************************************/

/* 全体を囲むコンテナのスタイル */
.floating-contact {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* ボタン間の余白 */
  z-index: 1000; /* 前面に表示 */
}

/* ボタンの基本スタイル */
.contact-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 120px; /* ボタンの直径 */
  height: 120px; /* ボタンの直径 */
  border: none;
  border-radius: 50%; /* 丸形 */
  background-color: #e51923;

  color: #ffffff; /* 初期文字色 */
  font-size: 16px; /* テキストサイズ */
  font-weight: bold;
  cursor: pointer;
  text-align: center; /* テキストを中央揃え */
  transition: background-color 1s ease, background-image 1s ease, color 1s ease;
}

/* アイコンのスタイル */
.btn-icon {
  font-size: 36px; /* アイコンサイズを調整 */
  transition: opacity 1s ease; /* 透明度の変化をスムーズに */
  opacity: 0;
}

/* 文字のスタイル（デフォルトは非表示） */
.contact-btn span {
  position: absolute;
  top: 50%; /* 上から50% */
  left: 50%; /* 左から50% */
  transform: translate(-50%, -50%); /* 完全に中央揃え */
  white-space: nowrap; /* テキストを1行にする */
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 1s ease; /* スムーズな変化 */
}

/* ボタンホバー時のスタイル */
.contact-btn:hover {
  background-image: none; /* グラデーションを解除 */
  background-color: #444444; /* ホバー時の背景色 */
}

/* ホバー時のアイコン（フェードアウト） */
.contact-btn:hover .btn-icon {
  opacity: 1;
}

/* ホバー時の文字（フェードイン） */
.contact-btn:hover span {
  opacity: 0;
  visibility: visible; /* 表示状態にする */
}


/* デフォルトのスタイル（パソコン用） */
.contact-btn-mail {
  display: block; /* パソコンで表示 */
}
.contact-btn-tel {
  display: none;  /* パソコンで非表示 */
}
/* スマホ用（画面幅600px以下） */
@media (max-width: 600px) {
  .contact-btn-mail {
    display: block;  /* スマホで非表示 */
  }
  .contact-btn-tel {
    display: block; /* スマホで表示 */
  }
  .contact-btn {
   width: 90px; /* ボタンの直径 */
   height: 90px; /* ボタンの直径 */
   font-size: 12px; /* テキストサイズ */

  }
}
}




/************************************
** 赤青のバックグラウンドに金色ボタン
************************************/
.c-cta__button-contact{
	background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #DAAF08 70%, #DAAF08 85%, #B67B03 90% 100%);
	text-decoration: none;
	color:#333333;
}
a .c-cta__button-contact {
	text-decoration: none !important;
	color:#333333 !important;
}
button.c-cv-link {
	font-weight:bold;
}





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

/************************************
** アイキャッチセンタリング
************************************/
.eye-catch{margin: auto;}

/************************************
** 特定のアイキャッチ削除
************************************/
.category-voice-post .eye-catch{display:none;}

/************************************
** 最新の投稿
************************************/
ul.wp-block-latest-posts{text-align:center;}
ul.wp-block-latest-posts li{padding:0.5em;border: 1px solid #ccc;}
ul.wp-block-latest-posts li a img{margin: 0 auto;}
ul.wp-block-latest-posts li a {margin: 0 auto;}
ul.wp-block-latest-posts li time {text-align:right;}

ul.wp-block-latest-posts a{overflow: hidden;cursor: pointer;}
ul.wp-block-latest-posts a img{transition-duration: 0.5s;}
ul.wp-block-latest-posts a img:hover{transform: scale(1.1);transition-duration: 1s;}

ul.wp-block-latest-posts li a {text-decoration:none;color:#333;}

ul.wp-block-latest-posts.is-grid li{margin:5px;}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
.pc_only{display:block !important;}
.sp_only{display:none !important;}

html {
  scroll-behavior: smooth;
}

/*1023px以下*/
@media screen and (max-width: 1023px){
	/*モバイルユーザビリティの問題が検出されたとき*/
	.nt-warning{font-size:16px !important;line-height:1.2em !important;}
	.date-tags{font-size:16px !important;line-height:1.2em !important;}
	.btn-l{font-size:16px !important;line-height:1.2em !important;}
	.entry-category, .post-date, .post-update, .post-author, .amp-back{font-size:16px !important;line-height:1.2em !important;}

	.pc_only{display:none !important;}
	.sp_only{display:block !important;}
	.navi-in .menu-pc {display: flex !important;}
}
/*1023px以下*/
@media screen and (max-width: 1023px){
.midashi2,.midashi2 span{font-size:20px !important;}
.midashi3,.midashi3 span{font-size:20px !important;}
.midashi4,.midashi4 span{font-size:14px !important;}
}



/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  .navi-in .menu-pc {display: none !important;}
}

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

/************************************
** アピールエリア調整
************************************/
.appeal{background-position: top center !important;background-size: auto 100% !important;}


/************************************
**  フォント
************************************/
.gothic{font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;}
.serif{font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}

/************************************
**  追従メニュー
************************************/
.fixed-header{background-color: #FFF;}/* 追従メニューの色 */
.hlt-top-menu .menu-item .item-label{font-size:130%;}
#navi .navi-in > .menu-header .item-label{font-size:130%;}


/************************************
**  メニュー横幅設定
************************************/
#header-container #header-container-in.wrap{width:100% !important;}



/************************************
** モバイルフッターボタン
************************************/
.mobile-footer-menu-buttons .navi-menu-button:nth-child(1){background-color:#0E2E9E;color:#FFF;font-weight:bold;}
.mobile-footer-menu-buttons .navi-menu-button:nth-child(1) .navi-menu-content{background-color:#fff;color:#000;font-weight:normal;}
.mobile-footer-menu-buttons .sidebar-menu-button{background-color:#0E2E9E;color:#FFF;font-weight:bold;}
.mobile-footer-menu-buttons .sidebar-menu-button .sidebar-menu-content{background-color:#fff;color:#000;font-weight:normal;}
.mobile-footer-menu-buttons .navi-menu-button:nth-child(2){background-color:#0E2E9E;color:#FFF;font-weight:bold;}
.mobile-footer-menu-buttons .navi-menu-button:nth-child(2) .custom-menu-icon{font-weight:bold;color:#FFF;}
.mobile-footer-menu-buttons .navi-menu-button:nth-child(2) .custom-menu-icon::after {content:"";}
.mobile-footer-menu-buttons .navi-menu-button:nth-child(2) .menu-caption{font-weight:bold;color:#FFF;}


/************************************
** LPランディングページ横幅いっぱい
************************************/
/**上下のセクションをピッタリとくっつけるための処理**/
#content{overflow: hidden;}
.content{margin: 5px 0 0 0 !important;}
.entry-content{margin:0 !important;}
.footer{margin:0 !important;}
.article{margin:0 !important;}
#main{padding:0 !important;}
/*1023px以下*/
@media screen and (max-width: 1023px){
	#main{padding:0 0.5em !important;}
}

.editor-styles-wrapper .block-editor-block-list__block.lp_box{
	width: 100% !important;
	margin: 1em auto !important;
	padding: 1em 0 !important;
	border:3px dotted #ccc !important;
}
.lp_box{
	margin: 0 calc((100% - 100vw) / 2) 0 calc((100% - 100vw) / 2) !important;
	padding: 0 calc(50vw - 50% ) 0 calc(50vw - 50% ) !important;
	width: 100vw;
	overflow: hidden;
	box-sizing: border-box;
	border: 0;
}
.lp_box_full{padding:0 !important;}
/*1023px以下*/
@media screen and (max-width: 1023px){
	.lp_box{
		margin: 0 calc((100% - 100vw) / 2) 1.8em calc((100% - 100vw) / 2) !important;
		padding: 0 calc(50vw - 50% ) 0 calc(50vw - 50% ) !important;
		width: 100vw;
		overflow: hidden;
		box-sizing:border-box;
		border:0 !important;
		border-radius: 0 !important;
	}
}
.midashi_top1{font-size:180% !important;text-align:center;padding:1em;font-weight:bold;}
.img_top1{height:500px;background-size: cover;background-image: url(https://office-align.com/wp-content/uploads/2022/09/fiji.jpg);}
.img_top2{height:300px;background-size: cover;background-image: url(https://office-align.com/wp-content/uploads/2022/09/align_sora.jpg);}
.img_top2 p{line-height:300px;color:#fff;margin:0 !important;padding 0 !important;}
.img_top2 p{font-size:clamp(12px, 5vw, 36px);font-weight:bold;}


.h2_top{border:0 !important;font-size:24px !important;margin:0 0 1em 0 !important;text-align:center;background:transparent !important;}
.h3_top{border:0;font-size:24px !important;margin:3em 0 1em 0 !important;text-align:center;background:transparent !important;}


/************************************
** LPランディングページ 古物商LP
************************************/
.lp_box_kobutsu{
	margin: 0 calc((100% - 100vw) / 2) 0.5em calc((100% - 100vw) / 2) !important;
	padding: 0  !important;
	width: 100vw;
	overflow: hidden;
	box-sizing: border-box;
	border: 0;
	border-radius: 0 !important;
}
.lp_box_kobutsu .kobutsu_midashi{
	padding: 0 !important;
	margin: 0.5em 0 !important;
	font-size: 3vw;
	font-weight:bold;
	border:0;
	text-align:center;
	border-radius: 0 !important;

	color: #FF0000; /*文字色*/
	padding: 0.5em 0; /*上下の余白*/
	border-top: solid 8px #FF0000; /*上線*/
	border-bottom: solid 8px #FF0000; /*下線*/
}
@media screen and (max-width: 1023px){
	.lp_box_kobutsu .kobutsu_midashi{font-size: 120%;}
}


.lp_box_kobutsu_inner{
	margin: 0 calc(50vw - 30% ) 0 calc(50vw - 30% ) !important;
	border:0px;
}
@media screen and (max-width: 1023px){
	.lp_box_kobutsu_inner{
		margin: 0 !important;
	}
}


.kobutsu_tel a.btn{font-size:3vw;}
@media screen and (max-width: 1023px){
	.kobutsu_tel a.btn{font-size: 120%;}
}


.lp_box_kobutsu_bg{
background-color: #ffffff;
background-size: 10px 10px;
background-image: repeating-linear-gradient(45deg, #d0d0d0 0, #d0d0d0 1px, #ffffff 0, #ffffff 50%);
}

/************************************
** 中心に来るタイトル
************************************/
.front-top-page .entry-title{position: relative;padding: 1rem 2rem;border-bottom: 1px solid #0e2e9e;text-align:center;font-size:200%;}

/************************************
** 見出し
************************************/
.article h2{
	margin:73px 0 15px;
	padding:5px 0;
	font-size:28px;
	font-weight:700;
	border-bottom:2px solid #181818;
	background-color: transparent;
}
@media screen and (max-width:768px){
	.article h2{
	margin:41px 0 22px;
	padding:8px 0;
	font-size:22px;
	line-height:1.5;
	background-color: transparent;
	}
}
.article h3{
	margin:56px 0 20px;
	padding:13px 28px 12px;
	font-size:21px;
	font-weight:700;
	background:#f3f3f3;
	border-radius:10px;
	border:0px;
}
@media screen and (max-width:768px){
	.article h3{
	margin:25px 0 18px;
	padding:16px 10px 15px;
	font-size:20px;
	border-radius:4px;
	}
}

/************************************
** フォームとテーブルのデザイン
************************************/
.table{

}
form u.hissu {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #bf0000;
	border: 1px solid #bf0000;
}
form u.nini {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #999;
	border: 1px solid #999;
}
form u.kotei {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #333;
	border: 1px solid #333;
}
/* チェック・ラジオを一行ごとに */
.wpcf7-form-control .wpcf7-list-item{
	display:block;
}
/* ボタン */
input[type="submit"] {
  display:block;
  color:#fff;
  font-weight:bold;
  text-align:center;
  margin: 0 auto;
  width: 80%;
  font-size:120%;
  text-decoration: none;
  background-color: #c9171e;
  border-radius: 4px;
}
/* 禁止マーク */
input:disabled {
    cursor: not-allowed;
}
label.disabled {
    cursor: not-allowed;color:#999;
}

/************************************
** テーブルのデザイン
************************************/
.table{font-size:0.9em;border-collapse: collapse;}
.table .tr{display: table;width: 100%;border-collapse: collapse;border-spacing: 0;}
@media screen and (max-width: 767px) {
  .table .tr{
    display: block;
    width:100%;
  }
}
.table .tr .td{
	display: table-cell;
	border-left: 1px solid #f0f0f0;border-right: 1px solid #f0f0f0;border-top: 1px solid #f0f0f0;
	padding: 8px 13px;
	vertical-align:top;border-collapse: collapse;border-spacing: 0;
}
.table .tr .td:last-child{
	border-bottom: 1px solid #f0f0f0;
}

@media screen and (max-width: 767px) {
  .table .tr .td{
    display: block;
    width:100%;
  }
}
.table .label{
	background    : #fcfcfc;
	width:30%;
}
.table .input{
	width:70%;
}

.table .tr .td:nth-child(2){
width:70%;
}
@media screen and (max-width: 767px) {
  .table .tr .td:nth-child(2){
    display: block;
    width:100%;
  }
}