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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
}

/* 834px以下（スマホ・タブレット用） */
@media screen and (max-width: 834px) {
  .skin-grayish.front-top-page .container .header-container .header {
    /* 作成した新しい画像のURLに差し替えてください */
    background-image:URL(https://keiri-ai-compass.aile-selection.com/wp-content/uploads/2026/06/rphGI5GvamxmpQ1Sj2YvTM_1782277930617_na1fn_L2hvbWUvdWJ1bnR1L3VwbG9hZC9oZWFkZXJfbW9iaWxlXzU0MHg5NjA.webp);
    
    /* 画像を中央配置し、全体が見えるように調整 */
    background-position: center center;
    background-size: cover;
  }
}


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


  /*トップページCSS*/
.kai-container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

.kai-hero{
padding:100px 20px;
text-align:center;
background:linear-gradient(135deg,#f5f9ff,#ffffff);
}

.kai-hero h1{
font-size:56px;
margin-bottom:20px;
}

.kai-hero .sub{
font-size:26px;
font-weight:bold;
}

.kai-hero .desc{
margin-top:20px;
font-size:18px;
line-height:1.8;
}

.kai-categories{
padding:100px 0;
background:linear-gradient(135deg,#f0f4ff,#fff);
}

.kai-categories .kai-container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
}

.cat img{
width:100%;
max-width:280px;
display:block;
margin:auto;
border-radius:25px;
box-shadow:0 8px 25px rgba(0,0,0,.15);
transition:.4s;
}

.cat img:hover{
transform:translateY(-8px);
box-shadow:0 12px 35px rgba(0,0,0,.25);
}

.kai-posts,
.kai-about,
.kai-service,
.kai-profile{
padding:100px 0;
}

.kai-posts h2,
.kai-about h2,
.kai-service h2,
.kai-profile h2{
text-align:center;
margin-bottom:50px;
font-size:36px;
font-weight:bold;
position:relative;
display:inline-block;
width:100%;
}

.kai-posts h2::after,
.kai-about h2::after,
.kai-service h2::after,
.kai-profile h2::after{
content:'';
display:block;
width:80px;
height:4px;
background:linear-gradient(90deg,#4a89dc,#67b26f);
margin:15px auto 0;
border-radius:2px;
}

.post-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.post-card{
background:#fff;
border-radius:15px;
overflow:hidden;
text-decoration:none;
color:#333;
box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.post-card img{
width:100%;
height:220px;
object-fit:cover;
}

.post-body{
padding:15px;
}

.kai-service{
background:linear-gradient(135deg,#fff5f7,#ffffff);
}

.services-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
margin-top:20px;
max-width:1000px;
margin-left:auto;
margin-right:auto;
}

.service-card{
padding:45px 35px;
background:#fff;
border-radius:20px;
text-align:center;
box-shadow:0 4px 20px rgba(0,0,0,.08);
transition:.4s;
border-left:6px solid #4a89dc;
position:relative;
}

.service-card:nth-child(2){
border-left-color:#67b26f;
}

.service-card:hover{
transform:translateY(-8px);
box-shadow:0 12px 35px rgba(0,0,0,.15);
}

.service-icon{
font-size:48px;
margin-bottom:15px;
display:block;
}

.service-card h3{
font-size:22px;
margin-bottom:15px;
color:#333;
}

.service-card p{
font-size:14px;
line-height:1.8;
color:#666;
margin-bottom:25px;
}

.service-btn{
display:inline-block;
padding:12px 28px;
background:linear-gradient(135deg,#4a89dc,#357abd);
color:#fff;
text-decoration:none;
border-radius:25px;
transition:.3s;
font-weight:600;
box-shadow:0 4px 15px rgba(74,137,220,.3);
}

.service-btn:hover{
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(74,137,220,.4);
}

.kai-about,
.kai-profile{
background:linear-gradient(135deg,#f9f9ff,#ffffff);
}

.about-content{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:20px;
}

.about-card{
background:#fff;
padding:40px 30px;
border-radius:20px;
text-align:center;
box-shadow:0 4px 20px rgba(0,0,0,.08);
transition:.4s;
border-top:5px solid #4a89dc;
}

.about-card:nth-child(2){
border-top-color:#67b26f;
}

.about-card:nth-child(3){
border-top-color:#f39c12;
}

.about-card:hover{
transform:translateY(-8px);
box-shadow:0 12px 35px rgba(0,0,0,.15);
}

.about-icon{
font-size:48px;
margin-bottom:15px;
display:block;
}

.about-card h3{
font-size:20px;
margin-bottom:15px;
color:#333;
}

.about-card p{
font-size:14px;
line-height:1.8;
color:#666;
}

.profile-content{
display:flex;
align-items:center;
justify-content:center;
gap:40px;
background:#fff;
padding:50px;
border-radius:20px;
box-shadow:0 4px 20px rgba(0,0,0,.08);
max-width:900px;
margin:30px auto 0;
}

.profile-icon{
font-size:100px;
flex-shrink:0;
line-height:1;
}

.profile-text{
text-align:left;
flex:1;
}

.profile-text p{
font-size:15px;
line-height:1.9;
color:#555;
margin-bottom:15px;
}

.profile-text p:last-child{
margin-bottom:0;
}

.profile-sub{
color:#888;
font-size:14px !important;
}

@media(max-width:768px){

.kai-hero h1{
font-size:36px;
}

.kai-hero .sub{
font-size:20px;
}

.kai-categories .kai-container{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.cat img{
max-width:200px;
}

.post-grid{
grid-template-columns:1fr;
}

.about-content{
grid-template-columns:1fr;
}

.services-grid{
grid-template-columns:1fr;
gap:20px;
}

.profile-content{
flex-direction:column;
gap:20px;
padding:30px;
}

.profile-text{
text-align:center;
}

}