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


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

#strengths{
	width: 100%;
	margin: 0 auto;
	margin-bottom: -27px;
}

#strengths .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;
}

#strengths 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
  ------------------*/
#strengths .contents-wrapper a{
	text-decoration: none;
	color: #333;
}

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


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


#strengths h3{
	color: #2a2a2a;
    line-height: 1.6;
	font-weight: bold;
	letter-spacing: 1px;
	/*font-size: 40px;*/
	font-size: clamp(1.75rem, 1.672rem + 0.16vw, 1.875rem);
	text-align: center;
    margin-bottom: 45px;
}


#strengths h4{
	color: #2a2a2a;
    line-height: 1.6;
	font-weight: bold;
	/*font-size: 18px;*/
	font-size:clamp(1rem, 0.922rem + 0.16vw, 1.125rem);/*values(min:16px,max18px)viewport(min768px,max2000px)*/
    text-align:center;
	margin-bottom: 18px;
}

#strengths h4.ad {
    text-align: left;
	margin-top: 15px;
}

#strengths p.readtext01{
	color: #2a2a2a;
	/*font-size: 18px;*/
	line-height: 1.7;
	font-size:clamp(1rem, 0.922rem + 0.16vw, 1.125rem);/*values(min:16px,max18px)viewport(min768px,max2000px)*/
	text-align: center;
	font-weight: bold;
}

#strengths 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: center;
}

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

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

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

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

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

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

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



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

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

/*コンテンツエリア幅*/
#strengths .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%);
}

#strengths .contents-wrapper section.Shopee{
    margin-bottom: 140px;
    margin-top: 105px;
}

#strengths .contents-wrapper section img.img{
    margin-bottom: 48px;
}


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

セクション1　

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

#strengths .contents-wrapper section.point{
	margin-top: 105px;
    margin-bottom: 68px;
}

#strengths .contents-wrapper section.point div.pointbox{
	margin-top: 105px;
}


#strengths .contents-wrapper section.point div.pointbox p.number,
#strengths .contents-wrapper section.point div.pointbox h5{
	font-weight: bold;
	/*font-size: 22px;*/
	line-height: 1.7;
	font-size:clamp(1.25rem, 1.172rem + 0.16vw, 1.375rem);/*values(min:20px,max22px)viewport(min768px,max2000px)*/
	text-align: justify;
}

#strengths .contents-wrapper section.point div.pointbox p.number{
	color: #9C8754;
	text-align: justify;
}

#strengths .contents-wrapper p.readtext02{
	color: #2a2a2a;
	text-align: justify;
	/*font-size:18px;*/
	font-size:clamp(1rem, 0.911rem + 0.45vw, 1.125rem);/*values(min:16px,max18px)viewport(min320px,max767px)*/
}

#strengths .contents-wrapper p.mbAdjustment{
	margin-bottom:15px;
}

#strengths .contents-wrapper section.point div.block{
	margin-bottom: 80px;
}

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

セクション2  このような事業者様におすすめです

================================*/
#strengths .contents-wrapper section.recommendation{
	margin-top: 80px;
    margin-bottom: 8%;
}

#strengths .contents-wrapper section.recommendation h3,
#strengths .contents-wrapper section.recommendation p{
	text-align: justify;
}

#strengths .contents-wrapper section.recommendation h3{
	color: #2a2a2a;
    line-height: 1.6;
	font-weight: bold;
	letter-spacing: 1px;
	/*font-size: 20px;*/
	font-size:clamp(1.125rem, 1.047rem + 0.16vw, 1.25rem);/*values(min:18px,max20px)viewport(min768px,max2000px)*/
	margin-bottom: 15px;
}



#strengths p.check::before{
content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    font-size: 19px;
    color: #2a2a2a;
    margin-right: 6px;
    transform: translate(0px, 2px);
}




        

/*------------------
	
  各固定ページに紐づく個別cssで調整】
	
  ------------------*/	
#strengths .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はページタイトルに使用)
   ========================================================================== */
#strengths{
	width: 100%;
	margin: 0 auto;
	font-size: 13px;
    text-align: justify;
	margin-bottom: -21px;
}
	
/*タイトルバー背景画像　SP用*/
#strengths .mv{
    height: 100px;
    background-image: url(../../images/common/sp_titlebar.webp);
}	
	
#strengths 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のみ表示のときは非表示*/	
#strengths .pc{display: none;}
#strengths .sp{display: block;}
#strengths .pc-visible{visibility: hidden;}

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

/*----------------
width指定
-----------------*/
/*100%(フル幅)*/
#strengths .contents-wrapper{
/*wrapperの幅を100%に(これしてないと貫通むり)*/
	width:100%;
}
/*コンテンツエリア幅*/
#strengths .contents{
	width: 95%;
}	
	
/*------------------
  その他の全体共通設定
  ------------------*/
#strengths h3{
	font-size:clamp(1.25rem, 1.161rem + 0.45vw, 1.375rem);/*values(min:20px,max22px)viewport(min320px,max767px)*/
	margin-bottom: 12px;
	        
}
			
#strengths h4{
	font-size:clamp(1rem, 0.911rem + 0.45vw, 1.125rem);/*values(min:16px,max18px)viewport(min320px,max767px)*/
	margin-bottom: 10px;
}
	
#home p{
	font-size:clamp(0.813rem, 0.768rem + 0.22vw, 0.875rem);/*values(min:13px,max14px)viewport(min320px,max767px)*/
	text-align: justify;
}	
	
	

	


/*------------------
   コンテンツエリア
  ------------------*/	
#home .wrapper .contents{
	width: 95%;
}	
	
#strengths .contents-wrapper section.Shopee{
    margin-bottom: 58px;
	margin-top: 30px;
}

#strengths .contents-wrapper section img.img{
    margin-bottom: 23px;
}

	
	
	
	

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

セクション1　

================================*/
#strengths .contents-wrapper section.point{
	margin-bottom: 58px;
    margin-top: 30px;
}
	

#strengths .contents-wrapper section.point div.pointbox{
	margin-top: 58px;
}


#strengths .contents-wrapper section.point div.pointbox p.number,
#strengths .contents-wrapper section.point div.pointbox h5{
	font-size: clamp(1rem, 0.911rem + 0.45vw, 1.125rem);
}

#strengths .contents-wrapper p.readtext02{
	font-size: clamp(0.875rem, 0.844rem + 0.16vw, 0.938rem)
}

#strengths .contents-wrapper p.mbAdjustment{
	margin-bottom: 11px;
}

#strengths .contents-wrapper section.point div.block{
	margin-bottom: 40px;
}

#strengths .contents-wrapper section.point div.pointbox p.number {
   font-size: 19px;
}
	
/*===============================

セクション2  このような事業者様におすすめです

================================*/
#strengths .contents-wrapper section.recommendation{
	margin-top: 61px;
    margin-bottom: 20%;
}

#strengths .contents-wrapper section.recommendation h3{
	font-size:clamp(1.125rem, 1.047rem + 0.16vw, 1.25rem);/*values(min:18px,max20px)viewport(min768px,max2000px)*/
	margin-bottom: 15px;
}	
	
#strengths .contents-wrapper section.recommendation p.spflex{
	display: flex;
	line-height: 1.4;
	margin-bottom: 7px;
	align-items: center;
}
	
#strengths span.check::before{
content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    font-size: 19px;
    color: #2a2a2a;
    margin-right: 6px;
   transform: translate(0px, -2px);
}	
	
	

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

/*コンテンツ内のレイヤーより上に調整*/
#footer .container__fluid {
	z-index: 2;
}
	



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

スマホだけ

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

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

PCコーディングだけ/768px以上～
     
==================================================================================== */
@media screen and (min-width:768px){

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

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

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

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

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


	
	
	

	
/*-----【各固定ページに紐づく個別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;
}


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