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

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

/* SNSアイコンのスタイル */

/* ヘッダーコンテナのマージンとパディングをリセット */
#header-container {
    position: relative;
    z-index: 10; /* 高めの値で設定されている */
    height: 25vh; /* ヘッダーを全体の25%に */
    min-height: 100px; /* 最小高さを指定 */
	margin-bottom: 0 !important;
 　 padding-bottom: 0 !important;
}

#header-container-in {
    display: flex;
    justify-content: space-between; /* 左にロゴ、右にSNSアイコン */
    align-items: center;
    width: 100%; /* ヘッダー全体の幅を確保 */
}

.header-sns-icons {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto; /* 右端に寄せる */
	margin-top: 0; /* SNSアイコンの余白を縮める */
    position: relative;
    z-index: 10; /* SNSアイコンを前面に */
	/* ヘッダーのアイコンが前面に表示されるよう調整 */
}

.header-sns-icons a {
    text-decoration: none !important; /* 下線を削除 */
}

.header-sns-icons img {
    width: 22px !important; /* アイコンサイズ */
    height: 22px !important;
}
.rounded-image_c {
    border-radius: 40px; /* 角丸を40pxに設定 */
}

#custom_html-3 {
    display: none !important; /* 非表示にする */
}


/* ヘッダー左下の楕円背景 */
/* デフォルトの楕円 */
/* .slider-with-ellipse::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 200px; /* デフォルト幅 */
    /*height: 100px; /* デフォルト高さ */
   /* background-color: #FBF8E9;
    border-bottom-right-radius: 100%;
    z-index: 5; /* スライダーの画像の下、背景の上に表示 */
   /* pointer-events: none;
}*/

/* 楕円が隠れないように親要素のoverflowを調整 */
.slider-with-ellipse {
    position: relative;
    overflow: visible !important; /* 隠れないようにする */
}

.flexslider ul.slides {
    position: relative; /* 基準位置を設定 */
    z-index: 1; /* スライダー画像のz-indexを低く設定 */
}



.metaslider {
    /*height: 400px;  スライダーの高さを固定 */
	height: 75vh; /* スライダーを全体の75%に */
}
/* スライダーの高さを調整 */
#metaslider_container_1891 {
	max-height: 75vh; /* スライダーの最大高さを調整 */
    /*max-height: 400px;  スライダーの最大高さを調整 */
    overflow: hidden; /* はみ出した部分を隠す */
    margin-bottom: 20px; /* 最新投稿との余白をなくす */
	
}

/* スライダーの画像サイズも調整 */
#metaslider_1891 .slides img {
    width: 100%;
	height: 75vh;
    /*height: auto;
	max-height: 320px; */
    object-fit: cover; /* 画像を枠内に収める */
	border-radius: 40px; /* 画像の角を丸くする */
}




/* 通常画面用 */
html, body {
    margin: 10px;
    padding: 10px;
}
.content, .content-area, .site, .sidebar, #sidebar {
    margin: 10;
    padding: 0;
    width: 100%;
}

#container {
    position: relative; /* 必須 */
    z-index: 0; /* 他の要素より下 */
	min-height: 150vh; /* 最低限の高さを設定 */
}


/* デフォルトで非表示 */
.image.daen {
    display: none;
}
.image.daen img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0; /* 余白をリセット */
}



/* 投稿スライダー */


#latest-posts {
    background-color: #ffffff; /* 背景色 #FBF8E9*/
	/*background-image: url('https://mstudio.chips.jp/wp/wp-content/uploads/2025/01/logo_new.png');
	background-repeat: no-repeat;
	background-position: center;*/
    padding: 20px; /* 内側の余白 */
    border-radius: 10px; /* 角丸 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影 */
    margin: 0 auto; /* 中央寄せ */
    max-width: 1200px; /* コンテナ幅 */
    padding-top: 0px; /* 上部余白なし */
	position: relative; /* 位置調整 */
    z-index:-1; /* 楕円背景より前面に表示 */
    margin-top: 0; /* 背景とスライダーの重なりを解消 */
	margin-bottom: 0; /* 下部余白をリセット */
    padding-bottom: 0px; /* 楕円との重なりを防ぐ */
}

.latest-posts-container {
    position: relative; /* 親要素としての基準 */
    z-index: -1; /* mainよりも前面に表示 */
    margin-top: 0px; /* スライダーとの隙間を詰める */
}

/* タイトルと投稿枠列の余白を縮小 */
#latest-posts h2 {
    margin-bottom: 10px; /* タイトル下の余白を調整 */
    font-size: 1.5rem; /* タイトルサイズ */
    text-align: left; /* 左揃え */
    padding-left: 20px; /* 左余白 */
}
/* 楕円背景を#latest-postsの下に表示 */


/* 最新投稿エリアをページ全体に合わせる */
body.home #latest-posts {
    position: relative;
    z-index: -1; /* 楕円背景より前面 */
    width: 100%; /* ページ幅いっぱいに広げる */
    max-width: 1200px; /* 最大幅 */
    margin: 0 auto; /* 左右中央揃え */
    background-color: #ffffff; /* 背景色 #FBF8E9*/
    border-radius: 10px; /* 角丸 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影 */
    padding: 20px; /* 内側の余白 */
	margin-bottom: 20px; /* 楕円の上に余白を確保 */
}


/* トップページ専用の背景楕円を #latest-posts の下に配置 */
/* body.home #latest-posts::after {
    content: "";
    position: absolute;
    top: 100%; /* 最新投稿の下に配置 */
/*     left: 0;
    width: 100%;
    height: 200px; /* 楕円の高さ */
/*     background-image: url('https://mstudio.chips.jp/wp/wp-content/uploads/2025/01/ma-ma_top_back_FFFFCC.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* 楕円背景を画面幅に合わせる */
/*     z-index: -1; /* 背景として後ろに表示 */
/* }*/

#content {
    margin-top: 0; /* 最小限の余白 */
    padding-top: 0; 

}

/* ページコンテンツの位置を微調整 */
#content-in {
    margin: 0 auto; /* 中央寄せ */
    padding: 0;
    z-index: 0;
	background: url('https://mstudio.chips.jp/wp/wp-content/uploads/2025/01/ma-ma_top_back_FFFFCC.png') no-repeat center top;
	background-size: 100% auto;
	background-color: #ffffcc;
}

/* content-top-inの余白もリセット */
#content-top-in {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1; /* 楕円やヘッダーとの重なりを防ぐ */
}


/* トップページ専用の楕円背景位置調整 */

/* 親要素と白枠の余白をリセット */
/*body.home #content{
    background: url('https://mstudio.chips.jp/wp/wp-content/uploads/2025/01/ma-ma_top_back_FFFFCC.png') no-repeat center top;
	background-color: #ffffcc;
}*/


/*body.home #content,
body.home #main {
    margin-top: 0px;/* 余白を削除 */
/*    padding-top: 0px; /* 内側余白も削除 */
	/*background-color: #ffffcc;*/
/*}*/

/* 白枠がある要素を非表示にする */
body.home .wp-block-columns.is-layout-flex::before {
    display: none; /* 不要な装飾を非表示に */
}

#main {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: calc(100% - 20px);
    max-width: 1200px;
    /*background: url('https://mstudio.chips.jp/wp/wp-content/uploads/2024/12/ma-ma_top_back_FBFE9_trimmed-e1733897772287.png') no-repeat center top;*/
    background-size: contain; /* 画像全体を収める */
    background-color: transparent;
    min-height: 400px;
    z-index: -1; /* 楕円画像より前面に配置 */
	/*padding-bottom: 250px;*/
	margin-top: 100px; /* 上部の余白を微調整 */
	padding-top: 100px;
}




/* 楕円背景の位置調整 */

body.home #main::before {
    content: none !important; /* 擬似要素を削除 */
	margin-top: 0px;/* 余白を削除 */
    padding-top: 0px; /* 内側余白も削除 */
}
body.home #main {
	position: relative;
    /*margin: 0 auto;*/
    /*padding: 0;*/
    width: calc(100% - 20px);
    max-width: 1200px;
	/* background: url('https://mstudio.chips.jp/wp/wp-content/uploads/2025/01/ma-ma_top_back_FFFFCC.png') no-repeat center top;*/
    background-size: contain; /* 画像全体を収める */
    background-color: #ffffcc !important;
    min-height: 400px;
	/*padding-top: 0px;*/
    background-position: center top; /* 楕円を適切な位置に */
    /*margin-top: 0px; /* 不要な余白をリセット */
    z-index: 0; /* 楕円背景を後ろに */
	
}




body.home .image.daen {
    display: block;
    position: relative;
    margin-top: 0px;
    z-index: 0;
    width: calc(100% - 20px);
    max-width: 1200px;
    height: auto;
}



body:not(.home) #main {
    background-position: center top; /* デフォルト位置 */
    margin-top: 0px;
}


.wp-block-column.is-layout-flow.wp-block-column-is-layout-flow {
    position: relative; /* 必要に応じて親要素の位置を指定 */
    z-index: 8; /* 楕円（z-index: 1 または 2）よりも前に表示 */
	margin-top: 0px; /* 50px分下げる */
}


/* 親要素の調整 */
.wp-block-columns.is-layout-flex {
    justify-content: center; /* 子要素を中央寄せ */
    gap: 0; /* 不要なスペースを削除 */
	background-color: transparent !important; /* 背景を透明化 */
	margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box; /* ボックスサイズを調整 */
}
/* 不要な左右のカラムを非表示にする */
.wp-block-column[style="flex-basis:0%"] {
    display: none; /* 不要なスペースを削除 */
}

/* About us セクションの親要素のスタイル */
.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-1 {
    position: relative; /* 親要素を基準位置にする */
    z-index: 10; /* 白楕円背景より前面に出す */
}

/* About us のh2タイトルと画像カラム */
.wp-block-column.is-layout-flow.wp-block-column-is-layout-flow,
.wp-block-column.is-vertically-aligned-center {
    position: relative; /* 親要素に対する位置指定 */
    z-index: 11; /* 親要素よりもさらに前面に出す */
}

/* About us 内の画像のスタイル */
.wp-block-image img {
    position: relative; /* 画像も前面に表示 */
    z-index: 12; /* さらに最前面 */
}


.section-wrapper {
    background-color: #FFF8F4; /* 背景色 */
    padding: 20px 20px; /* 左右の余白を増やす */
    border-radius: 20px; /* 角丸 */
    text-align: center;
    max-width: 1200px; /* 幅を広げる */
    margin: 0 auto;
    margin-bottom: 30px;
}

/** {
    outline: 1px dashed red; /* デバッグ用 */
/* 　}デバッグ用 */


.fixed-buttons {
    margin-top: 50px; /* 必要に応じて調整 */
    right: 20px;
    top: 40%; /* ボタン全体の配置を調整 */
	z-index: 999;
}


.custom-header {
    width: 100%; /* 横幅を全体に広げる */
    text-align: center; /* 中央寄せ */
    position: relative; /* 親要素として相対位置を設定 */
    z-index: 10; /* 高い値で前面に表示 */
    margin-top: 0px; /* 必要に応じて調整 */
    margin-bottom: -40px; /* 背景と本文の間隔を調整 */
}

.custom-header-image {
    width: 100%; /* 横幅を全体に広げる */
    max-height: 150px; /* 高さを制限 */
    object-fit: cover; /* アスペクト比を維持しながらフィット */
    display: block;
    margin: 0 auto;
    z-index: 20; /* 画像をさらに前面に表示 */
    position: relative; /* 画像の位置を制御 */
}



/* スライダーとの干渉を防止 */

.slider-container {
    position: relative;
    z-index: 9; /* 楕円よりもさらに前に配置 */
    margin-bottom: 50px; /* 下部余白を確保 */
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	.slider-with-ellipse::before {
    z-index: 0; /* スライダーの画像の下、背景の上に表示 */
    }
	 .image.daen {
        top: -20px; /* 小さい画面用に位置を調整 */
        width: 100%; /* 幅を全体に広げる */
    }
    #main {
        background-size: contain; /* 画像サイズを調整 */
        background-position: center top; /* 中央寄せ */
		margin-top: -20px; /* mainの上部余白を詰める */
    }
    .slider-with-ellipse::before {
        top: -10px; /* 楕円の位置を調整 */
        width: 30%; /* 幅を縮小 */
        height: 10%; /* 高さを縮小 */
    }
	/* #metaslider_container_1891 {
    max-height: 350px; /* 画面幅1024px以下で高さを縮小 */
    /*} */
	/* #metaslider_1891 .slides img {
    max-height: 300px; /* 画面幅1024px以下で高さを縮小 */
    /*} */
	#header-container {
        height: 20vh; /* 画面幅が狭いときはヘッダーを小さく */
    }

    .metaslider, #metaslider_container_1891 {
        height: 80vh; /* スライダーを調整 */
    }

    #metaslider_1891 .slides img {
        height: 80vh;
    }

}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  #main {
    padding: 0px 10px; /* 内側の余白 */
    width: 100%; /* 横幅を95%に調整 */
    margin: 0px auto 0px auto; /* 上部20px、左右中央寄せ */
    max-width: none; /* 最大幅制限を解除 */
    
  }
.specific-blue-background {
    position: relative; /* 必須 */
    z-index: 3; /* 楕円画像より高い値を設定 */
}
.image.daen {
    position: absolute;
    z-index: 6; /* スライダーや青枠より後ろに配置 */
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
}
    .slider-with-ellipse::before {
        width: 30%; /* 幅をさらに縮小 */
        height: 15%;
        top: 0;
        left: -10px;
    }
}	

    /* スライダー下の余白を減らす */
@media (max-width: 768px) {
	/* スライダーコンテナの高さを固定 */
    #metaslider-id-1891 {
        max-height: 300px !important;
        overflow: hidden;
		margin-top: 0 !important;
  		padding-top: 0 !important;
        margin-bottom: 0px;
        margin-left: 40px;
        margin-right: 40px;
        overflow: hidden; /* 角丸の外側にある画像の部分を隠す */
		border-radius: 40px; /* 画像の角を丸くする */
    }
    #metaslider_container_1891 {
        margin-bottom: 10px; /* 余白を縮める */
    }
    #latest-posts {
        margin-top: 10px;
    }

    #metaslider_1891 .ms-image {
        border-radius: 40px; /* 画像の角を丸くする */
    }
}
/* スマホ専用（480px以下） */
/* 480px以下の余白を調整 */
@media (max-width: 480px) {
    /* スライダー全体の余白をリセット */
    .slider-container,
    .slider-item,
    .slider-nav {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* スライダーコンテナの高さを固定 */
	#metaslider_container_1891, #metaslider_1891 .slides img {
    max-height: 250px !important; 
    }
    #metaslider-id-1891 {
        overflow: hidden;
    }

    /* ナビゲーションの影響を削除 */
    .slider-nav {
        margin-bottom: 0;
    }

    /* 投稿アイテムの影響を削除 */
    .slider-item {
        box-shadow: none;
    }
	.section-wrapper {
    padding: 0; /* 左右の余白を増やす */
    }
}