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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* コーポレートサイト専用の背景設定 */
.page-id-10, /* TOP */
.page-id-305 { /* プライバシーポリシー */
    background-color: #ffffff !important; /* 背景色を白に */
}
.page-id-472 {
    background-color: #121212 !important;
    
}
	/*1023px以下*/
@media screen and (max-width: 1023px){
  .header-container-in.hlt-top-menu { display:none; }
	.mobile-header-menu-buttons { display: flex; bottom: auto; top: 0; }
.header_seconds, .header_second {
        top: 50px; /* モバイルナビゲーションの高さに合わせる */
    }/*必要ならばここにコードを書く*/
}
/* 見出しリセット */
/*見出しデザインリセット*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
	color:initial;
	background-color:initial;/*背景色リセット*/
	border:initial;/*上下左右の枠線リセット*/
	border-radius:initial;/*角の丸みリセット*/
	
	
	
}
/* トップページ（page-id-10）のナビ全体を透明化 */
.page-id-10 #navi,
.page-id-10 .navi,
.page-id-10 .header-container {
  background-color: transparent !important;
  box-shadow: none !important; /* 影も消す */
  border: none !important;     /* 枠線があれば消す */
}

/* ナビゲーションリンクの背景（通常・hover・active）を透明に */
.page-id-10 #navi .navi-in a,
.page-id-10 #navi .navi-in a:hover,
.page-id-10 #navi .navi-in a:active {
  background-color: transparent !important;
}

#navi .navi-in a:hover {
background-color: transparent;

}


/* スマートフォン用のスタイル */
  /* PC用は通常表示 */


#sp.bg-slider  { display:none; 

} 


/*******************************
指定した固定ページのみヘッダーロゴを変える
********************************/
.page-id-10 .logo > a img {
visibility: hidden;
}
.page-id-10 .logo > a .site-name-text {
display: inline-block;
background: url("") no-repeat;
background-size: contain;
background-position: center;
}


body.page-id-20 .article ul li,
body.page-id-20 .article ol li {
    margin: 0 !important; /* マージンを解除 */
}
body.page-id-22 .article ul li,
body.page-id-22 .article ol li {
    margin: 0 !important; /* マージンを解除 */
}
body.page-id-24 .article ul li,
body.page-id-24 .article ol li {
    margin: 0 !important; /* マージンを解除 */
	
}
body.page-id-24 .article ul { list-style-type: none!important; }
.content {
margin-top: 360px ; 
}


.header_seconds {background: url(https://sansei-japan.com/wp-content/uploads/2025/03/桐の花ヘッダー.png) no-repeat;background-size: cover;display: flex;justify-content: center;align-items: center;}
.header_seconds h1{color: #fff;font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','HiraMinProN-W3','游明朝','Yu Mincho',serif;text-align: center;}
.header_seconds, .header_second{background: url(../images/bg_header_second.jpg) no-repeat;background-size: cover;display: flex;justify-content: center;align-items: center;}
.header_seconds, .header_second h1{color: #fff;font-family: 'ヒラギノ明朝 Pro W3','Hiragino
Pro','HiraMinProN-W3','游明朝','Yu Mincho',serif;text-align: center;　
	}







/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	 .header-container-in.hlt-top-menu { display:none; }
	.mobile-header-menu-buttons { display: flex; bottom: auto; top: 0; }
.header_seconds, .header_second {
        top: 50px; /* モバイルナビゲーションの高さに合わせる */
    }
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
.fz-18px {
  font-size: initial;  /* 初期値に戻す */
}

.wp-admin-fz-18px .editor-styles-wrapper {
  font-size: initial;  /* 初期値に戻す */
}


/*******************************
*フルワイドカスタマイズ
********************************/
/*******************************
フルワイド
********************************/
/* 背景色を横幅いっぱいに */
/* フルワイドカスタマイズ---------------------------------------------- */
.section-wrap{
	margin: 0 calc(50% - 50vw); /*左右の余白調整*/
 	padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	padding-top:5em;/*セクションの上部余白（ここはお好みで調整可能）*/
	padding-bottom:5em;/*セクションの下部余白（ここはお好みで調整可能）*/
}
.section-wrap{
	padding-left: calc(50vw - 50%); /*左の内側余白調整*/
	padding-right: calc(50vw - 50%); /*右の内側余白調整*/
}
.section-wrap{
	padding-left: 36px; /*左の内側余白調整*/
	padding-right: 36px; /*右の内側余白調整*/
}
.article{
	/*padding-left: 0; /*左の内側余白調整*/
	/*/*padding-right: 0; /*右の内側余白調整*/
}
.entry-content {
    margin-top: 0;
    margin-bottom: 0;
	/*padding-left: 0px; /*左の内側余白調整*/
	/*/*padding-right: 0px; /*右の内側余白調整*/
}
.main{
	/*margin: 0 calc((100% - 100vw) / 2);*/
 	/*padding:0 calc((100% - 100vw) / 2);左右の内側余白調整*/
	/*padding-top:5em;/*セクションの上部余白（ここはお好みで調整可能）*/
	/*padding-bottom:5em;/*セクションの下部余白（ここはお好みで調整可能）*/
}
.color-section-1{
	background:#eee;/*背景色1をここで設定します*/
}

.color-section-2{
	background:#121212;/*背景色2をここで設定します*/
}

.color-section-3{
	background:#fff;/*背景色3をここで設定します*/
}


/*スクロールバーの幅分調整*/
html, body {
	overflow-x: hidden; /*要素からはみ出た部分を表示しない*/
}
/*スクロールバーの幅分調整*/
html, body {
	overflow-x: hidden; /*要素からはみ出た部分を表示しない*/
}
/*******************************
ここまでOKここまでOKここまでOKここまでOK
********************************/

.a-wrap  {
    position: relative; /* これによって、子要素の絶対位置指定の基準点になります */
    display: block; /* リンクがブロックレベル要素として振る舞うように設定 */
    width: 100%; /* 全幅 */
    height: 100%; /* 全高、コンテンツに応じて自動調整される */
	box-sizing: border-box; /* パディングを含む全体のサイズを計算 */
}

.article{
	margin-bottom:0!important;
}

.footer {
	margin-top: 0;
}

 .content-bottom {
	 margin:0;
}
.article-header{
	padding-left: 36px; /*左の内側余白調整*/
	padding-right: 36px; /*右の内側余白調整*/
}
/* フルワイドカスタマイズここまで-------------------------------------- */


/*******************************
*bgswitcher
********************************/
#sp.bg-slider { display:none; }

#pc.bg-slider {
top: 0;
width: 100vw;
margin: 0 calc(50% - 50vw);
position: absolute;
height: 100vh;
    background-size: cover;

	}
#pc.bg-slider {

	height: calc(100vw * calc(780 / 1920));
}

.parent-element {
    position: relative;
}

.header_seconds, .header_second {
    position: absolute;  /* 必要に応じて relative や fixed に変更してください */
    top: 60;
    left: 0;
    width: 100%;  /* コンテナの幅全体を使用 */
    height: 300px;  /* コンテナの高さ全体を使用 */
      /* 画像のURLは適宜書き換えてください */
    background-size: cover;  /* 画像がコンテナに常にカバーするように */
    background-position: top center;  /* 画像が常に中央に配置されるように */
    margin: 0;  /* 外側の余白を無くす */
}
.header_seconds h1, .header_second h1 {
    text-align: center; /* 中央揃え */
    font-size: 2.875rem; /* フォントサイズの調整 */
    margin: 0; /* マージンをゼロに */
    padding: 0; /* パディングをゼロに */
}
.header_seconds h1 span, .header_second h1 span {
    display: block; /* ブロックレベル要素にして次の行に */
    font-size: 1.5625rem; /* スパンのフォントサイズ */
}



.text-overlay {color: #fff;font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','HiraMinProN-W3','游明朝','Yu Mincho',serif;text-align: center;}
/*834px以下*/

.page-id-10 .content {
margin-top:calc(100vw * calc(780 / 1920)); 
}
.content-in{
     margin-bottom:0px;
}
.page-id-6 .header-container, .navi {
    background-color: transparent;
}


/*ナビゲーションメニュー背景透明化*/
.page-id-10 .mobile-header-menu-buttons {
  background-color: transparent;
	border: none;
	box-shadow: none;
	color: #ffffff;
}
/* ヘッダーモバイルボタンの文字色と背景色を変更 */
.page-id-10 .mobile-menu-buttons .menu-icon {
  background: transparent !important;
  color: #ffffff !important;
}

.page-id-10 .mobile-menu-buttons .menu-caption {
  background: transparent !important;
  color: #ffffff !important;
}

.page-id-10 .menu-caption {
  background: transparent !important;
  color: #ffffff !important;
}

.page-id-10 .mobile-menu-buttons {
  background: transparent !important;
  color: #ffffff !important;
}

.page-id-10 .menu-icon {
  background: transparent !important;
  color: #ffffff !important;
}

/* スクロール時のモバイルメニュー背景色と文字色を変更 */
.page-id-10 .mobile-header-menu-buttons.scroll {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.page-id-10 .mobile-header-menu-buttons.scroll .menu-icon,
.page-id-10 .mobile-header-menu-buttons.scroll .menu-caption {
  color: #000000 !important;
}

/* 他のCSSとの競合を避けるために追加 */
.page-id-10 .mobile-header-menu-buttons {
  background-color: transparent !important;
  color: #ffffff !important;
}

.page-id-10 .mobile-header-menu-buttons .menu-icon,
.page-id-10 .mobile-header-menu-buttons .menu-caption {
  background: transparent !important;
  color: #ffffff !important;
}
/* 影響している設定の上書き */
.page-id-10 img.site-logo-image {
  visibility: visible !important;
}

/* 通常時のロゴ */
.page-id-10 .mobile-header-menu-buttons .logo-menu-button img.site-logo-image {
  display: block; /* 画像を表示 */
  content: url('http://itachi-life.online/wp-content/uploads/2024/05/logo_header.png'); /* 通常時のロゴ画像 */
}

/* スクロール時のロゴ */
.page-id-10 .mobile-header-menu-buttons.scroll .logo-menu-button img.site-logo-image {
  content: url('http://itachi-life.online/wp-content/uploads/2024/05/logo_footer.png'); /* スクロール時のロゴ画像 */
}
/* 通常時のロゴ */
.page-id-10 img.site-logo-image {
  display: block; /* 画像を表示 */
  content: url('http://itachi-life.online/wp-content/uploads/2024/05/logo_header.png'); /* 通常時のロゴ画像 */
}








/* ナビを前面に */
.mobile-menu-buttons .menu-caption,
.mobile-menu-buttons .menu-icon {
  color: #000000 !important;
}

.header-container, .navi {
  z-index: 3;
}

.box {
  z-index: 0;
}

.logo-menu-button.menu-button {
  background: transparent !important;
}



.page-id-10 #navi ul li a {
  color: #ffffff !important; /* メインメニューにポインタを置く前の文字色 */
}
/*セクション背景色*/
.color-section-1{
	background:#f9f6f3; /*カラーコードをここで設定*/
}
@media screen and (min-width:768px) and (max-width:1299px) {
	.content {
margin-top:240px; 
}

.header_seconds, .header_second  {height: 180px;}
	.header_seconds h1, .header_second h1{font-size: 2.3rem;}
	.header_seconds h1 span, .header_second h1 span{font-size: 1.25rem;}
}
/*834px以下*/
@media screen and (max-width: 834px){
 .header-container-in.hlt-top-menu { display:none; }
	.mobile-header-menu-buttons { display: flex; bottom: auto; top: 0; }
	}/*必要ならばここにコードを書く*/
/*768px以下*/
@media screen and (max-width: 768px) {
#pc.bg-slider {
    background-image: none; /* 背景画像を非表示にする */
    display: none;
	top: 0;
width: 0vw;
margin: 0;
height: 0vh;/* 要素を非表示にする */
}  /* スマートフォンではPC用を非表示 */
#pc.bg-slider { display: none !important; }    
#sp.bg-slider {
	top: 0;
width: 100vw;
margin: 0 calc(50% - 50vw);
position: absolute;
	height: 100vh;
    background-size: cover;
height: calc(100vw * calc(900 / 750));
background-size: cover;
}  /* スマートフォンではスマートフォン用を表示 */

.page-id-10 .content {
margin-top:calc(100vw * calc(900 / 750)); 
}

.page-id-10 .logo > a img {
visibility: hidden;
}
.page-id-10 .logo > a img {
visibility: hidden;
}

.page-id-10 img.site-logo-image{
		visibility: hidden;
	}

.page-id-10 .logo-menu-button.menu-button{
		background-image: url("http://itachi-life.online/wp-content/uploads/2024/05/logo_header-1.png");
		background-size: contain;
background-position: center;
	background-repeat: no-repeat;
}
.header_seconds, .header_second  {height: 120px;}
	.header_seconds h1, .header_second h1{font-size: 22px;}
	.header_seconds h1 span, .header_second h1 span{font-size: 12px;}
.content {
margin-top:180px; 
}
.ListLinkMenu li .Box .Text{ 
	font-size: 0.875rem;
	margin-bottom: 18px;
	font-family: -apple-system, BlinkMacSystemFont, "HiraKakuProN W6", Arial, Roboto, "Droid Sans", "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;align-content
	}
	.ListLinkMenu li .Box .Cont{padding: 36px 25px 0;
	}
	.ListLinkMenu li .Btn a {
		font-family: -apple-system, BlinkMacSystemFont, "HiraKakuProN W6", Arial, Roboto, "Droid Sans", "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
        border-radius: 17.5px;
        max-width: 190px;
        line-height: 1.5px;
		        font-size: 0.875rem;
    }


/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	#pc.bg-slider {
        display: none; /* モバイルで要素を非表示にする */
    }
	.article h1 {
padding-top: 35px;
		padding-bottom: 35px;
		margin-bottom: 23px;
		font-size: 1.5rem;
}}


@media screen and (max-width: 480px) {
    .article h1 {
        padding-top: 35px;
        padding-bottom: 35px;
        margin-bottom: 23px;
        font-size: 1.5rem;
    }
}