/* ▼ 大きい表示用（custom_post_list_shortcode） ▼ */
/* このスタイルは .custom-post-list 内にある要素にのみ適用されます */
.custom-post-list .custom-post-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.custom-post-list .custom-post-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* 立体感を出すシャドウ */
    transition: box-shadow 0.3s ease;
    margin-bottom: 20px;
}

.custom-post-list .custom-post-link:hover .custom-post-item {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.custom-post-list .custom-post-image {
    flex: 0 0 auto;
    margin-right: 20px;
}

.custom-post-list .custom-post-image img {
    width: 150px;
    height: 84.38px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.custom-post-list .custom-post-content {
    flex: 1 1 auto;
}

.custom-post-list .custom-post-title {
    font-size: 32px;
    margin: 0 0 5px;
}

.custom-post-list .custom-post-date {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: #666;
}

.custom-post-list .custom-pagination {
    font-size: 25px;
}

@media (max-width: 768px) {
    .custom-post-list .custom-post-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .custom-post-list .custom-post-image {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/* ▼ 小さめ表示用（custom_post_list_small_shortcode） ▼ */
/* こちらは元々の（修正前の）見た目を保持するためのスタイルです */
/* 親要素 */
.custom-post-list-small {
  /* グリッドレイアウトで横並びを実現 */
  display: grid;
  /* 3カラムや、画面幅に応じて可変にしたい場合は下記を調整 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;

  max-width: 1000px; /* 任意。中央寄せにしたい場合など */
  margin: 0 auto;
}

/* 各アイテムのボックス */
.custom-post-list-small .custom-post-item {
  display: flex;
  flex-direction: column; /* 上が画像、下がテキスト */
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden; /* 枠からはみ出さないようにする */
  background-color: #fff; /* 任意で背景色をつける */
}

/* 画像を一定の横長比率（16:9など）にするためのテクニック */
.custom-post-list-small .custom-post-image {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 → 9/16=0.5625 → 56.25% */
  /* もし 3:2 比率が良ければ 66.66...% にする、など */
  overflow: hidden;
}

.custom-post-list-small .custom-post-image img {
  position: absolute;
  top: 0;
  left: 0;
  /* コンテナ（.custom-post-image）いっぱいに拡大 */
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 画像の中央を切り抜く */
  object-position: center;
}

/* テキスト部分 */
.custom-post-list-small .custom-post-content {
  padding: 10px; /* ボックス内の余白 */
}

.custom-post-list-small .custom-post-date {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 5px;
}

.custom-post-list-small .custom-post-title {
  font-size: 1rem;
  margin: 0;
}

.custom-post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2行で切り捨て */
  -webkit-box-orient: vertical;
  overflow: hidden;
}



/*画像ボックスの四隅が丸いのを四角にする*/
.elementskit-info-image-box,
.elementskit-box-body {
    border-radius: 0 !important;
}

   /* 通常のテキストエディター内のリンク（.linktext内のaタグ）だけ色を変えてアンダーラインを適用 */
html body #linktext.elementor-element.linktext.elementor-widget-text-editor a {
    color: #08548E !important;
    text-decoration: underline !important;
}

/* 必要なら、ボタン内のリンクはリセットする（ボタンのスタイルを維持するため） */
.elementor-widget-button a,
.elementor-widget-elementskit-button a {
    color: inherit;
    text-decoration: none;
}

/* 記事内CTA用追加 */
.ctaWindow {
	box-sizing: border-box;
	width: 100%;
	max-width: 760px !important;
	margin: 40px auto;
	padding: 30px 40px 40px 40px;
	background-color: #ffffff;
	background-image: url("https://space-core.jp/wp-content/uploads/2024/04/app_smartCore.png");
	background-position: top 100px right 50px;
	background-size: calc(255 / 900 * 100%);
	background-repeat: no-repeat;
	border-radius: 6px;
	border: 1px solid #c1c1c1;
}
.ctaWindow .pc {
	display: block;
}
.ctaWindow .sp {
	display: none;
}
.ctaWindow .ctaHead {
	box-sizing: border-box;
	display: flex;
	gap: 30px;
	align-items: center;
}
.ctaWindow .ctaHead .ctaTitle {
	font-size: 25px;
	font-weight: bold;
	line-height: 1;
}
.ctaWindow .spacecoreBanner {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin:0 0 15px;
}
.ctaWindow .spacecoreBanner img {
	width: 100%;
}
.ctaWindow [class^="ctaBtn"] {
	box-sizing: border-box;
	border-radius: 4px;
	display: block;
	width: 70%;
	max-width: 440px;
	height: 60px;
	margin: 15px 0;
	padding: 0 1em 0 0;
	font-size: 20px;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	line-height: 60px;
	padding:0;
	/*background-color: #d1d1d1;
	background-image: url("https://space-core.jp/renew/img/arrow_right.svg");
	background-size: 1em;
	background-position: right 1em top 50%;
	background-repeat: no-repeat;
	transition: 0.2s;*/
}
.ctaWindow [class^="ctaBtn"]:hover {
	background-position:  right 0.7em top 50%;
	opacity: 0.8;
}
.ctaWindow .ctaBtn01 {
	background-color: #07548e;
	margin: 0;
}
.ctaWindow .ctaBtn02 {
	margin-bottom: 0;
	background-color: #318abe;
}
.ctaWindow .ctaBtn02 span {
	color: #318abe;
	padding: 0 8px;
	background-color: #fff;
	display: inline-block;
    border-radius: 4px;
	line-height: 1.4em;
    font-size: 18px;
    margin: 0 10px 0 0;	
	}

@media only screen and (max-width: 1200px) {
	.ctaWindow {
		background-size: 30%;
	}
	.ctaWindow .ctaHead .ctaTitle {
		font-size: calc(25 / 1200 * 100vw);
	}
}
@media only screen and (max-width: 767px) {
	.ctaWindow {
		width: 90%;
		min-width: 90%;
		padding: 5vw;
		background-size: 29%;
		background-position: top 5vw right 6vw;
	}
	.ctaWindow .pc {
	display: none;
}
.ctaWindow .sp {
	display: block;
}
.ctaWindow .ctaHead {
		flex-direction: column;
		justify-content: start;
		align-items: start;
		gap: 5vw;
		margin: 0;
	}
	.ctaWindow .ctaHead .ctaTitle {
		font-size: calc(40 / 768 * 100vw) !important;
	}
	.ctaWindow .spacecoreBanner {
		width: 100%;
		margin-bottom: 10px;
	}
	.ctaWindow [class^="ctaBtn"] {
		width: 100%;
		max-width: 380px;
		height: 50px;
		margin: 10px auto 10px 0;
		margin: 0;
		font-size: 16px;
		line-height: 50px;
		background-position: right 0.5em top 50%;
	}
	.ctaWindow .spacecoreBanner img {
		width:68%;
	}
	.ctaWindow [class^="ctaBtn"]:hover {
		background-position:  right 0.2em top 50%;
	}
	.ctaWindow .ctaBtn02 {
		margin: 10px 0 0;
	}
	.ctaWindow .ctaBtn02 span {
		padding: 0 4px;
		line-height: 1.4em;
	}
}

/*メディア記事のCTAでは下線をつけない。文字色も白にする。*/
body #ctaContainer .ctaWindow .ctaBtn01,
body #ctaContainer .ctaWindow .ctaBtn01:hover,
body #ctaContainer .ctaWindow .ctaBtn01:focus,
body #ctaContainer .ctaWindow .ctaBtn01:active,
body #ctaContainer .ctaWindow .ctaBtn01:visited,
body #ctaContainer .ctaWindow .ctaBtn02,
body #ctaContainer .ctaWindow .ctaBtn02:hover,
body #ctaContainer .ctaWindow .ctaBtn02:focus,
body #ctaContainer .ctaWindow .ctaBtn02:active,
body #ctaContainer .ctaWindow .ctaBtn02:visited {
    color: #fff !important;
    text-decoration: none !important;
    outline: none !important;
}


/* CTA内のボタンだけはアニメ下線を消す */
.underline-link-effect .ctaWindow .ctaBtn01::after,
.underline-link-effect .ctaWindow .ctaBtn02::after {
  content: none !important;
  /* さらに背景やtransformなども消すなら */
  background: none !important;
  transform: none !important;
}