/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/



/*Add your own styles here:*/



/* CASESTUDY-4 CARD */ 


.case-container { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; max-width: 1400px; margin: 0 auto; padding: 20px 20px 60px;}
.case-card { display: flex; flex-direction: row; width: calc(50% - 20px); background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); overflow: hidden; transition: transform 0.3s ease; animation: fadeInUp 0.8s ease forwards;}
.case-text h5 { word-break:keep-all;}
.case-text { width: 50%; padding: 30px 20px; box-sizing: border-box; font-size: 14px; line-height: 1.7; display: flex; flex-direction: column; justify-content: space-between;}

.case-text a { display: inline-block; margin-top: 20px; font-weight: bold; color: #2f6bb8; text-decoration: none;}
.case-image { width: 50%; display: flex; align-items: stretch; justify-content: center; overflow: hidden;}
.case-image img { width: 100%; height: 100%; object-fit: cover; display: block;}


@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

  /* === Responsive === */
@media screen and (max-width: 1024px) and (min-width: 991px) {
	.case-image img { object-position: right center;}
}

@media screen and (max-width: 990px) {
	.case-card { flex-direction: column;  width: 100%;}
	.case-text, .case-image { width: 100%;}
	.case-text { padding: 20px;}
}

@media screen and (max-width: 768px) {
	.case-image { height: 60vw; overflow: hidden;}
	.case-image img { height: 100%; width: 100%; object-fit: cover; object-position: top center;}
}

/* CASESTUDY-詳細 3 card gradient */

.casestudy-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; max-width: 1200px; margin: 60px auto; padding: 0 20px; box-sizing: border-box;}
.casestudy-gradient { background: linear-gradient(135deg, #d0e7ff, #b7ecff); border-radius: 20px; padding: 40px 30px; text-align: left; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); flex: 1 1 calc(33.333% - 16px); display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box;}
.casestudy-gradient h5 { margin-bottom: 10px; color: #333!important;}
.casestudy-gradient h6 { margin-bottom: 12px; color: #01589b!important;}
.casestudy-gradient p { line-height: 1.6; margin: 0;}

  /* === Responsive === */
@media screen and (max-width: 768px) {
	.casestudy-container { flex-direction: column;}
	.casestudy-gradient { flex: 1 1 100%; width: 100%; }
}


/* CASESTUDY-詳細 */

#aifactory-casestudy .value-wrapper { background-color: rgba(255, 255, 255, 0.92); padding: 40px 24px; border-radius: 12px; max-width: 100%; margin: 0 auto; box-shadow: 0 0 20px rgba(0,0,0,0.05); overflow: hidden; box-sizing: border-box;}
#aifactory-casestudy .value-title { text-align: center; margin-bottom: 20px;}
#aifactory-casestudy .value-desc { word-break: break-word;}
#aifactory-casestudy .icon-box-group { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap;}
#aifactory-casestudy .icon-box {flex: 1 1 30%; text-align: center; box-sizing: border-box; padding: 0 10px; margin-bottom: 30px;}
#aifactory-casestudy .icon-box img { height: 70px; max-width: 100px; object-fit: contain; display: block; margin: 10px auto 25px;}

.fade-in-section { animation: fadeInUp 0.8s ease-out forwards; opacity: 0;}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

  /* === Responsive === */
@media screen and (max-width: 768px) {
	#aifactory-casestudy .value-wrapper { padding: 30px 16px;}
	#aifactory-casestudy .icon-box { flex: 1 1 100%; }
	#aifactory-casestudy .icon-box img { height: 50px; margin: 8px auto 16px; }
}

@media screen and (max-width: 480px) {
	#aifactory-casestudy .value-wrapper { padding: 24px 16px;}
	#aifactory-casestudy .value-title { font-size: 18px!important;}
	#aifactory-casestudy .icon-box img { height: 40px; margin: 4px auto 12px;}
	#aifactory-casestudy .icon-box { padding: 0 4px; }	
	#aifactory-casestudy .value-desc { word-break: break-word; font-size: 12px !important;}
}




/* MAIN スライド */

#aifactory-hero-section { max-height: 650px; height: 650px; overflow: hidden; display: flex; align-items: center;}
.hero-txt-col {padding-left: 50px !important;}

  /* === Responsive === */
@media screen and (max-width: 1024px) and (min-width: 769px) {
	.hero-txt-col { padding-left: 0 !important; position:absolute; top: 0px; left: 50px;}
	.hero-txt-col h1 {font-size: 28px!important;}
}

@media screen and (max-width: 989px) {
	.hero-image-col {padding-top: 0 !important;}
}

@media screen and (max-width: 768px) {
	#aifactory-hero-section { background-position: 50% center !important;}
	#aifactory-hero-section { height: auto; max-height: none; flex-direction: column; align-items: stretch; padding: 10px 16px; }
	.hero-txt-col { top: 60px; padding-left: 0 !important;}
}

@media screen and (max-width: 480px) {
	.hero-txt-col { top: 30px;}
	.hero-txt-col h1 { font-size: 22px!important;}	
}



/* MAIN AIファクトリーとは */

#aifactory-intro-wrapper { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center;  align-items: flex-start; gap: 40px; padding: 40px 20px; flex-wrap: wrap;}
.aifactory-intro-text { width: 650px; flex-shrink: 0;}
.aifactory-intro-image { flex-shrink: 1;}
.aifactory-intro-image img { width: 100%; max-width: 360px; height: auto; display: block;}

  /* === Responsive === */
@media screen and (max-width: 989px) {
	#aifactory-intro-wrapper {flex-direction: column;align-items: center; gap: 24px; padding: 20px 16px;}
	.aifactory-intro-text, .aifactory-intro-image { width: 100% !important;}
	.aifactory-intro-text h4, .aifactory-intro-text p { text-align: left; }
	.aifactory-intro-image img { max-width: 100%; }
}

/* MAIN AIファクトリーの特長 */
#aifactory-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; padding: 20px; text-align: center;}
#aifactory-feature-grid .feature-item { display: flex; flex-direction: column; align-items: center; font-size: 14px; line-height: 1.6; color: #333;}
#aifactory-feature-grid .feature-item img { max-width: 100px; margin-bottom: 16px;}
#aifactory-feature-grid .feature-title { margin-bottom: 4px;}

  /* === Responsive === */
@media screen and (max-width: 989px) {
  #aifactory-feature-grid { grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 480px) {
	#aifactory-feature-grid { grid-template-columns: 1fr;}
}


/* MAIN 業界別 AI孔明 on IDX */'

#top #wrap_all #ai-industry-section { position: relative; background-color: #dff8f8 !important; overflow: hidden; padding: 20px 30px;}
#top #wrap_all #ai-industry-section::before { content: ""; position: absolute; top: 50%; left: 50%; width: 1400px; height: 68%; transform: translate(-50%, -50%); background-image: url('/aifactory/wp-content/uploads/AI-factory_home-021.png'); background-repeat: no-repeat; background-size: contain; background-position: center; z-index: 0; pointer-events: none; opacity: 1;}

#ai-industry-section .container { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 10px; justify-items: center;}
.ai-industry-card { background: rgba(255, 255, 255, 0.9); border-radius: 8px; padding: 16px 20px; display: flex; flex-direction: row; align-items: center; color: #333; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); gap: 14px; width: 100%; max-width: 400px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; opacity: 0; transform: translateY(20px);}
.ai-industry-card.fade-in { opacity: 1; transform: translateY(0);}
.ai-industry-card:hover { transform: translateY(4px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);}

.ai-industry-card img { width: auto; height: 44px; flex-shrink: 0; margin-right: 10px;}

.card-text { display: flex; flex-direction: column; gap: 4px;}
#top #wrap_all .ai-industry-card h4, #top #wrap_all .ai-industry-card h5 { all: unset; display: block; margin: 0;}
.card-text h4 { font-size: 18px!important; font-weight: 600!important;}
.card-text h5 { font-size: 16px!important; font-weight: 600!important;}
.card-text p {white-space: pre-line;}
.card-text a { color: #2aa3a6; font-weight: 600; text-decoration: none; font-size: 14px;margin-top: 4px;}

/* カード別ボダー */
.card-cosme   { border: 2px solid #7dc5c5 !important; }
.card-auto    { border: 2px solid #105e9f !important; }
.card-food    { border: 2px solid #0a83e2 !important; }
.card-textile { border: 2px solid #47a7c1 !important; }
.card-paper   { border: 2px solid #207e7f !important; }
.card-cutlery { border: 2px solid #389a9a !important; }


  /* === Responsive === */
@media screen and (max-width: 1024px) {
	#ai-industry-section .container { grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 32px 28px; padding: 0 20px; }
	#top #wrap_all #ai-industry-section::before {width: 95vw;}
	.ai-industry-card { flex-direction: row; align-items: center; max-width: 100%; padding: 20px; }
	.ai-industry-card img { margin-right: 14px; margin-bottom: 0; }
	.card-text { align-items: flex-start; }
}

@media screen and (max-width: 989px) {
	#ai-industry-section .container { grid-template-columns: 1fr;}
}

/* MAIN STEP CIRCLE */

#step-flow { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 20px; padding: 40px 10px;}
.step-circle { background-color: #eff7fb; width: 240px; height: 240px; border-radius: 50%; text-align: center; padding: 30px 10px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 10px;}
.step-title { color: #1c7c94; font-size: 20px; font-weight: bold;}
.step-text { color: #333; font-size: 16px;line-height: 1.6;}
.arrow-img img { width: 40px; height: 40px;}
.fade-in-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease;}
.fade-in-up.visible {opacity: 1; transform: translateY(0);}

  /* === Responsive === */

@media screen and (max-width: 768px) {
	#step-flow { flex-direction: column; gap: 24px;}
	.arrow-img img { transform: rotate(90deg); }
.step-circle { width: 300px; height: 300px; margin: 0 auto; padding: 30px 16px;}
  .step-text {font-size: 15px;}
}

@media screen and (max-width: 480px) {
	.step-circle { width: 240px;  height: 240px; margin: 0 auto; padding: 30px 16px;}
}



/* 製品の特徴 NUM5 */
#aifactory-feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 60px; max-width: 1200px; margin: 0 auto; padding: 60px 20px;}
.aifactory-feature-item { display: flex;align-items: flex-start; }

.feature-number { font-size: 48px; font-weight: bold; color: #005ca9; margin-right: 20px; min-width: 40px; line-height: 1;  padding-top: 6px; }
.feature-content { display: flex; flex-direction: column; justify-content: flex-start;}

#top #wrap_all #aifactory-feature-list .feature-content h3 { color: #005ca9; font-size: 20px; line-height: 1.3;}
.feature-content h3 { margin: 0 0 6px 0; }
.feature-content p { margin: 0; font-size: 16px; line-height: 1.6; color: #333;}

  /* === Responsive === */
@media screen and (max-width: 768px) {
	#aifactory-feature-list { grid-template-columns: 1fr; gap: 30px; padding: 40px 20px; }
	.feature-number { font-size: 40px;  margin-right: 16px; }
	.feature-content h3 { font-size: 18px;}
	.feature-content p { font-size: 15px; }
}

#top #wrap_all .all_colors h4, #top #wrap_all .all_colors h3 { word-break: auto-phrase; }

#list-platform-row .container { max-width: 1000px; margin: 0 auto; padding: 0;}

/* LIST PAGE TEXT DISC */

.aifactory-container { display: flex; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; width: 100%;  padding: 0 16px;  gap: 40px; box-sizing: border-box;}
.aifactory-column { flex: 1 1 45%; min-width: 0;  box-sizing: border-box; word-break: break-word;  overflow-wrap: break-word;}

#top #wrap_all .all_colors .aifactory-column h4 { color: #005ca9!important; font-size: 20px; margin-bottom: 16px;}

.aifactory-column ul { list-style-type: disc; padding-left: 10px;}
.aifactory-column .numbered-list { list-style: none; padding-left: 0;}

  /* === Responsive === */
@media (max-width: 1024px) {
	.aifactory-container { flex-direction: column; }
}

/* LIST BOTTOM SETTING */

.list-bottom h1 { color: #fff !important; font-weight: normal; line-height: 1.4em; font-size: 50px !important;}

#list-bottom-back { background-position: 5% 5% !important; background-size: cover !important; background-repeat: no-repeat !important; background-attachment: scroll !important;}

  /* === Responsive === */

@media screen and (max-width: 1430px) and (min-width: 1025px) {
	#list-bottom-back {background-position: 80% 50% !important;}
}

@media screen and (max-width: 1024px) {
	#list-bottom-back { background-position: 86% 65% !important; }
}

@media screen and (max-width: 768px) {
	#list-bottom-back { background-position: 86% 50% !important;}
	.list-bottom h1 { font-size: 36px !important;}

@media screen and (max-width: 480px) {
	#list-bottom-back { background-position: 70% 50% !important;}
	.list-bottom h1 {font-size: 29px !important;}
}