@charset "UTF-8";
/*
Theme Name: Emanon Premium child
Theme URI: https://wp-emanon.jp/emanon-premium/
Author: 株式会社イノ・コード
Author URI: https://innocord.co.jp/
Description: Emanon Premiumnの子テーマです。
Template: emanon-premium
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:one-column, two-columns, three-columns, left-sidebar, right-sidebar, theme-options
*/


/* フッターの項目の行間を詰める */
.footer-widget .widget_block p{
	padding: 0.5em 0;
	margin: 0;
}

/* ファーストビュー設定 */
:root {
    --ep-header-eyecatch-height-sp: 380px;
    --ep-header-eyecatch-height-pc: 550px;
    --ep-header-eyecatch-padding_left_sp: 0%;
    --ep-header-eyecatch-padding_right_sp: 0%;
    --ep-header-eyecatch-padding_left_pc: 0%;
    --ep-header-eyecatch-padding_right_pc: 0%;
    --ep-main-visual__background-height-sp: 100%;
    --ep-main-visual__background-height-pc: 100%;
    --ep-main-visual__title-align_sp: center;
    --ep-main-visual__title-align_pc: center;
    --ep-main-visual__title-font-size_sp: 17px;
    --ep-main-visual__title-font-size_tablet: 22px;
    --ep-main-visual__title-font-size_pc: 31px;
    --ep-main-visual__sub-title-font-size_sp: 16px;
    --ep-main-visual__sub-title-font-size_tablet: 16px;
    --ep-main-visual__sub-title-font-size_pc: 21px;
    --ep-main-visual__message-align_sp: center;
    --ep-main-visual__message-align_pc: center;
    --ep-main-visual__message-font-size_sp: 16px;
    --ep-main-visual__message-font-size_tablet: 16px;
    --ep-main-visual__message-font-size_pc: 30px;
    --ep-main-visual__btn-align_sp: center;
    --ep-main-visual__btn-align_pc: center;
    --ep-main-visual__down-icon-distance: 0%;
}

.main-visual {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.main-visual__layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 600px){
.main-visual__layer {
    width: 100%;
}
}

.header-eyecatch {
    position: relative;
    height: var(--ep-header-eyecatch-height-sp);
    padding-left: var(--ep-header-eyecatch-padding_left_sp);
    padding-right: var(--ep-header-eyecatch-padding_right_sp);
}
@media screen and (min-width: 600px){
.header-eyecatch {
    height: var(--ep-header-eyecatch-height-pc);
    padding-left: var(--ep-header-eyecatch-padding_left_pc);
    padding-right: var(--ep-header-eyecatch-padding_right_pc);
}
}

.main-visual__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.main-visual__background {
    position: relative;
    height: var(--ep-main-visual__background-height-sp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
@media screen and (min-width: 600px){
.main-visual__background {
    height: var(--ep-main-visual__background-height-pc);
}
}

.main-visual__background-img {
    width: 100%;
    height: 100%;
	object-fit: cover;
}

.main-visual__title {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Segoe UI", "Meiryo", sans-serif;
    font-weight: bold;
    display: inline;
    padding-left: 0px;
    padding-right: 0px;
    background-color: rgba( 0, 0, 0,0);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 1.35;
    letter-spacing: 0.04em;
    font-size: var(--ep-main-visual__title-font-size_sp);
    color: #ffffff;
}
@media screen and (min-width: 600px){
.main-visual__title {
    font-size: var(--ep-main-visual__title-font-size_tablet);
}
}
@media screen and (min-width: 960px){
.main-visual__title {
    font-size: var(--ep-main-visual__title-font-size_pc);
}
}

.header-eyecatch__item {
    position: absolute;
    top: 50%;
    right: 16px;
    left: 16px;
    transform: translateY(-50%);
    z-index: 101;
}
@media screen and (min-width: 600px){
.header-eyecatch__item {
    right: 0;
    left: 0;
}
}
@media screen and (min-width: 768px){
.l-content, .l-content__sm, .l-header .l-content {
    width: calc(768px - 32px);
}
}
@media screen and (min-width: 960px){
.l-content, .l-header .l-content {
    width: calc(960px - 32px);
}
}
@media screen and (min-width: 1200px){
.l-content, .l-header .l-content {
    width: calc(1212px - 32px);
}
}

.u-row-dir-reverse {
    flex-direction: row-reverse;
}
.u-row-cont-center {
    justify-content: center;
}
.u-row-item-center {
    align-items: center;
}
.u-row-wrap {
    flex-wrap: wrap;
}
.u-row {
    display: flex;
}
@media screen and (min-width: 600px){
.wrapper-column, .wrapper-column.has-sp-column {
    width: calc(100% + 24px);
}
.wrapper-column {
    width: 100%;
}
}
@media screen and (min-width: 600px){
.column-5 {
    margin-right: 24px;
    width: calc(41.667% - 24px);
}
}

.main-visual-inner__content {
    text-align: var(--ep-main-visual__title-align_sp);
}
@media screen and (min-width: 600px){
.main-visual-inner__content {
    text-align: var(--ep-main-visual__title-align_pc);
}
}
.main-visual__btn {
    justify-content: var(--ep-main-visual__btn-align_sp);
    margin-top: 32px;
}
@media screen and (min-width: 600px){
.main-visual__btn {
    justify-content: var(--ep-main-visual__btn-align_pc);
    margin-top: 48px;
}
}

.main-visual__btn .c-btn__outline, .header-eyecatch button, .header-eyecatch input[type="button"], .header-eyecatch input[type="submit"] {
    border: 2px solid #3aaed7;
    background-color: #3aaed7;
    color: #ffffff;
}
.main-visual.zumen .main-visual__btn .c-btn__outline, .header-eyecatch button, .header-eyecatch input[type="button"], .header-eyecatch input[type="submit"] {
    border: 2px solid #f07586;
    background-color: #f07586;
    color: #ffffff;
}
/* link用に追加 */
.main-visual.link .main-visual__btn .c-btn__outline, .header-eyecatch button, .header-eyecatch input[type="button"], .header-eyecatch input[type="submit"] {
    border: 2px solid #008073;
    background-color: #008073;
    color: #ffffff;
}

.main-visual__title.top{
	color: #ffff;
}
.main-visual__title.top-title{
	position: absolute;
    top: 100px;
    right: 135px;
    color: #333;
	font-size: 50px;
}
p.top-title{
    position: absolute;
    top: 178px;
    right: 270px;
    color: #333;
	font-size: 25px;
    line-height: 1.3;
}
@media screen and (max-width: 601px) and (max-width: 960px) {
	.main-visual__title.top-title{
		top: 50px;
		right: 100px;
		font-size: 27px;
	}
	p.top-title{
		top: 95px;
		right: 141px;
		font-size: 15px;
	}
}

.event-txt{
	position: absolute; 
	top: 305px; 
	right: 161px;
}
@media screen and (max-width: 600px) {
	.main-visual__title.top-title{
		top: 30px;
        right: 30px;
        font-size: 20px;
	}
	p.top-title {
        top: 75px;
        right: 34px;
        font-size: 12px;
    }
	.event-txt{
		position: relative;
		top: auto;
		right: auto;
		width: 90%;
    	margin: auto;
	}
}
/* トップページでのみアンカーリンクのアンダーバーを非表示にする */
body.home a[href="https://saas.kabuku.io/#dx-solution"] span::after {
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.13,0.61,0.26,0.94);
	transform: scale(0, 1) !important;
}
/* マウスホバー時にアンダーバーを表示 */
body.home a[href="https://saas.kabuku.io/#dx-solution"]:hover span::after {
	opacity: 1;
	transform: scale(1, 1) !important;
}

/* トップページのボタン */
@media screen and (min-width: 782px) and (max-width:1280px) {
	.epb-btn-size__m .epb-btn {
		padding-left: 35px;
		padding-right: 35px;
	}
	.epb-button .epb-btn-text{
		font-size: 13px;
	}
}
.wp-block-column.is-layout-flow .wp-block-button.contact-btn{
	margin: 0;
}
.wp-block-button.contact-btn a{
	background-color: #777777;
} 

/* 提供元 */
.provider{
	margin-block-start: 5px !important;
}

/* 資料ダウンロードページのタイトルを消す */
.l-content .article-header{
	display: none;
}

/* お問い合わせフォーム */
.wpcf7-form #cf-tbl{
	margin: auto;
}
textarea {
  resize: vertical;
}
.error-message {
    color: red;
    display: none;
    margin-top: 5px;
}
.wpcf7-list-item{
	margin: 0;
}

/* フッターウィジット */
.epb-l-content__main .wp-block-columns.is-layout-flex{
	padding: 0px 25px;
}
.wp-block-column.is-layout-flow .wp-block-button{
	margin: auto;
}
.epb-panel__wrapper>:nth-child(n+2) {
    margin-top: 5px;
}

/* ドロワーメニューの設定 */
#menu-item-2849 .sub-menu {
    height: auto;
    overflow: visible;
    visibility: visible;
    animation: fade 0.4s ease-in-out;
}
#menu-item-2849 .menu-item a{
	pointer-events: all;
}
/* タイトルの見た目を調整 */
#menu-item-2849 {
  pointer-events: none; /* タイトル部分をクリックできないようにする */
}
#menu-item-2849 .drawer-menu__toggle.drawer-menu__toggle-icon::after{
	display: none;
}


/* 1. ヒーローエリア全体：テーマの余白干渉を防ぐ */
.custom-hero {
  position: relative;
  height: 500px; /* 見本画像に合わせて少し低めに調整 */
  width: 100vw;  /* 画面幅いっぱい */
  margin-left: calc(50% - 50vw); /* Emanonのコンテナを突き抜けて全幅にする */
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 10; /* 他の要素より前面に */
}

/* 2. 背景：imgタグが崩れないように固定 */
.custom-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.custom-hero__bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

.custom-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
	width: 100%;
	height: 100%;
　 z-index: 2;
   background: linear-gradient(315deg, #000, #c4c4c4);
   opacity: 0.75;
}

.costpro-hero .custom-hero__overlay {
    background: linear-gradient(315deg, #d1e3f6, #333333);
    opacity: 0.75;
}

/* 3. コンテンツの中央配置：Flexboxを確実に適用 */
.custom-hero__inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1200px; /* Emanonの幅に合わせる */
  margin: 0 auto;
  padding: 0;
  display: flex !important; /* テーマのdisplay:blockを上書き */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* 4. 左側コンテンツ */
.custom-hero__content {
  flex: 1;
  text-align: center;
}

.custom-hero__title {
  font-size: 1.8rem;
  line-height: 1.4;
  margin-bottom: 25px;
  font-weight: 700;
  color: #fff !important;
}

/* 5. ボタン */
.custom-hero__btn {
  display: inline-block !important;
  padding: 12px 45px;
  border-radius: 50px;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* --- 個別カラー設定 --- */

/* Zumen: ピンク */
.btn-pink { background-color: #e57d83 !important; }

/* Link: 緑 */
.btn-green { background-color: #2a8b7c !important; }

/* CostPRO: 水色 */
.btn-blue { background-color: #58b9e6 !important; }

/* 6. 右側アイキャッチ画像：縦横比を維持 */
.custom-hero__eyecatch {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.custom-hero__eyecatch img {
  width: auto !important;
  max-width: 90% !important;
  height: auto !important;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); /* 影をつけて浮かす */
}

/* 7. スマホ対応：縦並びに切り替え */
@media (max-width: 767px) {
  .custom-hero {
    height: auto;
    padding: 60px 0;
  }
  .custom-hero__inner {
    flex-direction: column !important;
    text-align: center;
  }
  .custom-hero__content {
    margin-bottom: 30px;
  }
  .custom-hero__eyecatch {
    justify-content: center;
  }
  .custom-hero__title {
    font-size: 1.5rem;
  }
}