@charset "utf-8";
/* CSS Document */


/* =============================================================================
   タイトルバー(固定ページのh2はページタイトルに使用)
   ========================================================================== */

#philosophy{
	width: 100%;
	margin: 0 auto;
}

#philosophy .mv{
	width: 100%;
    margin: 0 auto;
    display: block;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
    margin-bottom: 30px;
    height: 325px;
    background-image: url(../../images/common/pc_titlebar.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

#philosophy h2{
    font-size: 40px;
	font-size:clamp(2.188rem, 1.993rem + 0.41vw, 2.5rem);/*values(min:35px,max40px)viewport(min768px,max2000px)*/
    letter-spacing: 3px;
    font-weight: bold;
    /* font-family: 'Hind', sans-serif; */
    color: #fff;
    margin: 0 auto;
	padding-top: 148px;
	padding-top: 162px;
	margin-left: 7%;
}
    


/* =============================================================================
   全体共通　
   ========================================================================== */

.body{
	margin: 0!important;
}

/*------------------
  リンク　a
  ------------------*/
#philosophy .contents-wrapper a{
	text-decoration: none;
	color: #333;
}

/*------------------
  表示制御
  ------------------*/
/*spのみ表示のときは非表示*/
#philosophy .sp{display: none;}
/*spのみ表示のときは非表示*/
#philosophy .sp-visible{visibility: hidden;}


/*------------------
  改行制御
  ------------------*/
/*pcのみ改行のときはblock*/
#philosophy .block{display: block;}
/*spのみ改行のときはインライン*/
#philosophy .spnomi_block{display: inline;}


/*------------------
  その他の全体共通設定
  ------------------*/
/*#philosophy h3{
	color: #2a2a2a;
	margin: 0 auto;
    line-height: 1.6;
	font-weight: bold;
	letter-spacing: 1px;
	/*font-size: 35px;
	font-size:clamp(2.063rem, 1.985rem + 0.16vw, 2.188rem);/*values(min:33px,max35px)viewport(min768px,max2000px)
	margin-top: -12px;
    margin-bottom:12px;
}

#philosophy h4{
	margin: 0 auto;
    line-height: 1.6;
	font-weight: bold;
	letter-spacing: 1px;
	color: #2a2a2a;
	/*font-size: 20px;
	font-size:clamp(1.313rem, 1.235rem + 0.16vw, 1.438rem);/*values(min:21px,max23px)viewport(min768px,max2000px)
    margin-bottom: 30px;
}
*/

#philosophy h3{
	color: #2a2a2a;
    line-height: 1.6;
	font-weight: bold;
	letter-spacing: 1px;
	/*font-size: 40px;*/
	font-size:clamp(2.375rem, 2.297rem + 0.16vw, 2.5rem);/*values(min:38px,max40px)viewport(min768px,max2000px)*/
    margin-bottom:12px;
}


#philosophy h4{
	color: #9C8754;
    line-height: 1.6;
	font-weight: bold;
	letter-spacing: 1px;
	/*font-size: 40px;*/
	font-size:clamp(1.438rem, 1.36rem + 0.16vw, 1.563rem);/*values(min:23px,max25px)viewport(min768px,max2000px)*/
    margin-bottom:8px;
}


#philosophy p{
	color: #2a2a2a;
	/*font-size: 16px;*/
	line-height: 1.7;
	font-size:clamp(0.938rem, 0.899rem + 0.08vw, 1rem);/*values(min:15px,max16px)viewport(min768px,max2000px)*/
	text-align: justify;
}

/*文字　中央揃えに*/
.text_center{
	text-align: center;
}

/*文字　太く*/
#philosophy .bold{
	font-weight: bold;
}

/*マーカー*/
#philosophy span.maker{
	background: linear-gradient(transparent 50%, #54D6FF 50%);
}

/*------------------
  googlefont
------------------*/
/*ゴシック系　英字に*/
#philosophy .hind{
	font-family: 'Hind', sans-serif;
}

/*ゴシック系　英字に*/
#philosophy .lato{
	font-family: 'Lato', sans-serif;
}

/*ゴシック系　丸みあり　数字に*/
#philosophy .varelaRound{
	font-family: 'Varela Round', sans-serif;
}

/*ゴシック系　数字に*/
#philosophy .montserrat{
	font-family: 'Montserrat', sans-serif;
}



/*----------------
width指定
-----------------*/

/*100%(フル幅)*/
#philosophy .contents-wrapper{
 margin: 0 auto;
 position:relative;
}

/*コンテンツエリア幅*/
#philosophy .contents{
	margin: 0 auto;
	width: 95%;
	max-width: 1000px;
	position: relative;
}



/*===============================
	
全セクション共通

================================*/	
/*ヘッダーが表のz-indexより下になるので調整*/
header.header {
    /* padding: 40px 0; */
    background-color: transparent;
    position: fixed;
    transition: padding .5s, background-color .5s;
    width: 100%;
    z-index: 2;
}

span.maker{
	background: linear-gradient(transparent 50%, #54D6FF 50%);
}



/*===============================

セクション1

================================*/
#philosophy .contents-wrapper section.purpose{
	margin-top: 105px;
	margin-bottom: 68px;
}

#philosophy .contents-wrapper section.purpose h3{
	margin-top: -12px;
}

#philosophy .contents-wrapper section.purpose h4{
	margin-top: -12px;
}

#philosophy .contents-wrapper section.purpose ul.pchidden{
	visibility:hidden;
}

#philosophy .contents-wrapper section.purpose ul.oneThree li:first-child{
	width: 46%;
}
#philosophy .contents-wrapper section.purpose ul.oneThree li:last-child{
	width: 50%;
}

#philosophy .contents-wrapper section.purpose ul.two li:last-child{
	width: 46%;
}
#philosophy .contents-wrapper section.purpose ul.two li:first-child{
	width: 50%;
}

#philosophy .contents-wrapper section.purpose ul.one,
#philosophy .contents-wrapper section.purpose ul.two{
	margin-bottom: 80px;
}

        

/*------------------
	
  各固定ページに紐づく個別cssで調整】
	
  ------------------*/	
#philosophy .contents-wrapper a.bredcrumb_homerink-text {
    text-decoration: underline;
}

/* //全体ここまで */
/* =================================================================================

スマホ(768px以上からPCコーディング)
961 

==================================================================================== */
@media only screen and (max-width: 767px){	

/*------------------
  表示制御
  ------------------*/
.pc{display: none;}
.sp{display: block;}
.pc-visible{visibility: hidden;}
	

/* =============================================================================
   タイトルバー(固定ページのh2はページタイトルに使用)
   ========================================================================== */
#philosophy{
	width: 100%;
	margin: 0 auto;
	font-size: 13px;
    text-align: justify;
}
	
/*タイトルバー背景画像　SP用*/
#philosophy .mv{
    height: 100px;
    background-image: url(../../images/common/sp_titlebar.webp);
}	
	
#philosophy h2 {
    letter-spacing: 2px;
    padding: 30px 0;
    text-align: left;
    padding-top: 37px;
	font-size:clamp(1.125rem, 1.036rem + 0.45vw, 1.25rem);/*values(min:18px,max20px)viewport(min320px,max767px)*/
}	
	
	
	
	
/* =============================================================================
   全体共通　
   ========================================================================== */
	
/*------------------
  表示制御
  ------------------*/
/*pcのみ表示のときは非表示*/	
#philosophy .pc{display: none;}
#philosophy .sp{display: block;}
#philosophy .pc-visible{visibility: hidden;}

/*------------------
  改行制御
  ------------------*/
/*pcのみ改行のときはインライン*/
#philosophy .pcnomi_block{display: inline;}
/*spのみ改行のときはblock*/
#philosophy .spnomi_block{display:block;}
	
	

/*----------------
width指定
-----------------*/
/*100%(フル幅)*/
#philosophy .contents-wrapper{
/*wrapperの幅を100%に(これしてないと貫通むり)*/
	width:100%;
}
/*コンテンツエリア幅*/
#philosophy .contents{
	width: 95%;
}	
	
/*------------------
  その他の全体共通設定
  ------------------*/
#philosophy h3{
	font-size:clamp(1.438rem, 1.348rem + 0.45vw, 1.563rem);/*values(min:23px,max25px)viewport(min320px,max767px)*/
}
			
#philosophy h4{
	font-size:clamp(1.125rem, 1.047rem + 0.16vw, 1.25rem);/*values(min:18px,max20px)viewport(min320px,max767px)*/
}
	
#home p{
	font-size:clamp(0.813rem, 0.774rem + 0.08vw, 0.875rem);/*values(min:13px,max14px)viewport(min320px,max767px)*/
	text-align: justify;
}	
	


/*------------------
   コンテンツエリア
  ------------------*/	
#home .wrapper .contents{
	width: 95%;
}	
	
	


/*===============================

セクション1

================================*/
#philosophy .contents-wrapper section.purpose{
	margin-top: 30px;
	margin-bottom: 30px;
}
	
#philosophy .contents-wrapper section.purpose h3{
	margin-top: 17px;
}

#philosophy .contents-wrapper section.purpose h4{
    margin-top: -10px;
}

#philosophy .contents-wrapper section.purpose h4.ad {
   margin-top: 11px;
}

#philosophy .contents-wrapper section.purpose ul.oneThree{
	display: block;
}

#philosophy .contents-wrapper section.purpose ul.oneThree li:first-child{
	width: 100%;
}
#philosophy .contents-wrapper section.purpose ul.oneThree li:last-child{
	width: 100%;
}

#philosophy .contents-wrapper section.purpose ul.two li:last-child{
	width: 100%;
}
#philosophy .contents-wrapper section.purpose ul.two li:first-child{
	width: 100%;
}

#philosophy .contents-wrapper section.purpose ul.one,
#philosophy .contents-wrapper section.purpose ul.two{
	margin-bottom: 40px;
}

	
	
	
	
	


/*------------------
	
  各固定ページに紐づく個別cssで調整】
	
  ------------------*/	
/*#philosophy .bredcrumb {
   width: 95%;
}*/
	
#philosophy .mv {
   margin-top: 8.5%;
}

/*コンテンツ内のレイヤーより上に調整*/
#footer .container__fluid {
	z-index: 2;
}
	
#philosophy .contents-wrapper section.purpose ul.pchidden{
	visibility:visible;
}


}/* //スマホコーディング(ここまで) */
/* =================================================================================

スマホだけ

==================================================================================== */
@media screen and (min-width:320px)and (max-width:767px){
	

}
/* =================================================================================

PCコーディングだけ/768px以上～
     
==================================================================================== */
@media screen and (min-width:768px){
	#philosophy .contents-wrapper section.purpose ul.oneThree{
	margin: 0 auto;
	display: flex;
	column-gap: 40px;
    margin-bottom: 70px;
}

#philosophy .contents-wrapper section.purpose ul.two{
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	column-gap: 40px;
}
	
#philosophy .contents-wrapper section.purpose ul.last{
	margin-top: -247px;
}
	
}
/* =================================================================================

タブレット以上/モニター(普通)以下

==================================================================================== */
@media screen and (min-width:600px)and (max-width:1200px){

/*------------------
  pcコーディングでコンテンツエリア(1200px※コンテンツエリアのpx値)以下の幅のとき

※1200px以上の絶対値指定したものは1200px以下の数値か%の数値へ変更
※横並びでspace-betweenにしているものはこの区間では両端に寄るので、1200px以下～スマホまでの領域はcenterにした上でcolumugapで余白つけとくこと
 ------------------*/	
	

	
#philosophy .contents-wrapper section.purpose ul.two {
	margin-bottom: 70px;
}

	
	
	

	
/*-----【各固定ページに紐づく個別cssで調整】-----*/
header.header div.logo h1 {
    top: 51px;
    left: 15px;
}
header.header > ul.first {
   left: 5px;
}
header.header li.conversion {
	right: 73px;
    right: 23px;
	top: 1.5px;
}
	
header.header div.logo h1 {
	top: 47px;
	left: 15px;
}	
	
header.header div.logo h1 {
	width: 86px;
	height: 41px;
	top: 50px;
}
	
	
	
	
	
	

	

}
/* =================================================================================

モニター(wide)だけ

==================================================================================== */
@media screen and (min-width:1500px){


	
}


/* =================================================================================

デスクトップだけ  ※イレギュラー追加
     
==================================================================================== */
@media screen and (min-width:1024px){

/*トップページと下層ページとで、ヘッダーの上に余白の高さがちがうのでheader.cssに一律指定で書くと相違が出るので個別cssで記述する*/
header.header{
    margin-top: -24px;
}

/*breadcrumbs.cssに一律指定で書くと相違が出るので個別cssでそのページのコンテンツエリアに合わせて記述する*/
.bredcrumb .bredcrumb-container {
	margin: 0 auto;
    width: 1100px;
}


/* //デスクトップだけだけ(ここまで) */
}