@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){
  /*必要ならばここにコードを書く*/
}

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

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

.header {
    /* システムカラーの #7a00df をメインに、少し暗めの紺色へ流れるグラデーション */
    background:linear-gradient(135deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%) !important;
    color: #ffffff !important;
}

/* サイトタイトルの色を調整 */
.site-name-text a {
    color: #fff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* 文字を少し浮かせて高級感を出す */
}

/* メニュー部分（グローバルナビ）の背景を透明にする */
.navi, .navi-in {
    background-color: transparent !important;
}


/* メインタイトル（サイト名など） */
h1 {
    font-size: 3.5rem !important; /* 40px相当 */
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-bottom: 2rem !important;
    letter-spacing: 0.05em !important;
}

/* 各セクションの大きな見出し（Our Servicesなど） */
h2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    /* 背景を透明（または白）にして、左線や余分な装飾をリセット */
    background: none !important; 
    background-color: transparent !important;
    border-left: none !important; /* Cocoon特有の左線を消す */
    border-top: none !important;
    border-right: none !important;
    /* 下線だけを指定の紫にする */
    border-bottom: 2px solid #7a00df !important; 
    padding: 0 0 0.5rem 0 !important; /* 上下左右の余白を整理（左余白もリセット） */
    margin-top: 3.5rem !important;
    margin-bottom: 1.5rem !important;
    color: #333 !important; /* 文字色を整える */
}



/* 小見出し */
h4 {
    font-size: 1.25rem !important; /* 20px相当 */
    font-weight: 700 !important;
    color: #444 !important;
}

/* 補足見出し */
h5 {
    font-size: 1.1rem !important; /* 17.6px相当 */
    font-weight: 700 !important;
    color: #666 !important;
    text-transform: uppercase; /* 英字なら大文字に */
}

/* 本文（比較用） */
.entry-content p {
    font-size: 1rem !important; /* 16px基準 */
    line-height: 1.8 !important; /* 行間を広げて読みやすく */
    margin-bottom: 1.5rem !important;
}


body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: #333; }


/* 会社概要テーブルの全体設定 */
.article table {
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-collapse: collapse !important; /* 線を一本に繋げる */
    background-color: #ffffff !important; /* 中を白にする */
    border: 1px solid #dddddd !important; /* 外枠の線 */
    table-layout: fixed;
}

/* テーブル内のセル（th, td）に線を引く */
.article table th, 
.article table td {
    border: 1px solid #dddddd !important; /* 格子状の線 */
    padding: 15px !important; /* 文字の周りに余裕を作る（ダサさ解消） */
    color: #333333 !important; /* 文字色を濃いグレーにして読みやすく */
    text-align: left;
}

/* 項目名（左側）だけ少し色をつけて高級感を出す場合（不要なら削除OK） */
.article table th, 
.article table td:first-child {
    background-color: #fcfcfc !important; /* ほぼ白に近いグレー */
    font-weight: bold;
    width: 30%; /* 左カラムの幅を固定 */
}

/* スマホでは横幅いっぱいに広げる（見やすさ重視） */
@media screen and (max-width: 480px) {
    .article table {
        width: 100% !important;
    }
}

.article table tr {
    background-color: #ffffff !important;
}

.service {
    text-align: center !important;
    /* 3カラムそれぞれの内側に少し余白を作る */
    padding: 10px !important;
}

/* 説明文は読みやすさ重視で左寄せ（中央エリア内） */
.service p {
    text-align: left !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-top: 0.5rem !important;
}


/* 文字サイズに合わせて伸び縮みするh3ボタン（マージン微調整版） */
.service h3 {
    display: inline-block !important; 
    width: auto !important; 
    
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    padding: 0.7rem 2.5rem !important; 
    border-radius: 50px !important;
    
    /* 上のマージンを最小限(5px)にし、下も少し詰めました */
    margin-top: 0px !important;
    margin-bottom: 1.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;

    box-shadow: 0 4px 12px rgba(122, 0, 223, 0.2);
    border: none !important;
    white-space: nowrap !important;
}

/* 文字サイズに合わせて伸び縮みするh3ボタン（マージン微調整版） */
h3 {
    display: inline-block !important; 
    width: auto !important; 
    
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    background:linear-gradient(135deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%) !important;
    color: #ffffff !important;
    padding: 0.7rem 2.5rem !important; 
    border-radius: 50px !important;
    
    /* 上のマージンを最小限(5px)にし、下も少し詰めました */
    margin-top: 0px !important;
    margin-bottom: 1.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;

    box-shadow: 0 4px 12px rgba(122, 0, 223, 0.2);
    border: none !important;
    white-space: nowrap !important;
}


h1 {
	margin-top:30px;
}


@media (min-width: 1024px) {
    .wp-block-spectra-container.wp-block-spectra-container[data-spectra-id='spectra-f268e52a-b944-4b3f-aa16-6267b5619e8d'] {
        padding-top: 30px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
}