@charset "utf-8";

:root {
  --cs-textcolor: #000000;
  --cs-textcolor-a: #000064;
  --cs-textcolor-hover: #000064;
  --cs-bordercolor: #999; /* ボーダーのデフォルト色 */
  --cs-blue: #104097;
  --cs-blue-light: #4682B4;
  --cs-blue-dark: #233B6C;
  --cs-navy: #000033;
  --cs-purple: #7e67a2;
  --cs-pink: #FF6699;
  --cs-pink-light: #e6c2bf;	
  --cs-red: #b92125;
  --cs-red-light: #ffe3e5;
  --cs-red-dark: #440000;
  --cs-orange: #F7931E;
  --cs-yellow: #f4d668;
  --cs-green: #668863;
  --cs-green-light: #b6c0a8;	
  --cs-brown: #534741;
  --cs-brown-light: #d8d2c2;	
  --cs-brown-dark: #403134;
  --cs-black: #000;
  --cs-white: #fff;
  --cs-gray: rgba(153, 153, 153, 1);
  --cs-gray-light: rgba(230, 230, 230, 1);
  --cs-gray-dark: #888; /* pagetopの色 */
  --cs-color01: #3c5da1; /* メインカラー（footerの青） 60, 93, 161, 1 */
  --cs-color02: #657598;
  --cs-color03: #F6F2E9;
  --cs-color04: #d29f4b; /* タイトルのオレンジのポイント */
  --cs-color05: #D8DFEC; /* 背景に使う紫 */
  --cs-color06: #fff;
  --cs-color07: #fff;
  --cs-color08: #fff;
  --cs-color09: #fff;
  --cs-color10: #fff;
  --cs-shadowcolor01: 149,157,112,; /* shadowに使用するRGB */
  --cs-shadowcolor02: 0,0,0,; /* shadowに使用するRGB */
  --cs-shadowcolor03: 255,255,255,; /* shadowに使用するRGB */
  --cs-basefont: "Zen Kaku Gothic Antique","游ゴシック Medium",YuGothic-M, YuGothic,メイリオ,Meiryo,sans-serif;
  --cs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --header-bgcolor:  rgba(255,255,255,0.7); /* ヘッダー背景色 */
  --header-textcolor: #000;                 /* ヘッダーテキスト色 */
  --headermenu-bgcolor: rgba(255,255,255,1); /* ヘッダーメニュー背景色 */
  --headermenu-bgcolor-shadow: rgba(0,0,0,0); /* PCグランドメニューboxshadow色 */
  --headermenu-bgcolor-shadow-sp: rgba(0,0,0,0.3); /* スマホグランドメニューboxshadow色 */
  --headermenu-bgcolor-drop: #f2f2f2; /* ヘッダーメニュー背景色（ドロップダウン） */
  --headermenu-bgcolor-drop-hover: rgba(0,0,0,0.2); /* ヘッダーメニュー背景色（ドロップダウンhover） */
  --headermenu-textcolor: rgba(0,0,0,1);             /* ヘッダーメニューテキスト色 */
  --headermenu-textcolor-hover: #F7931E;    /* ヘッダーメニューテキスト色（hover） */
  --header-hbgcolor: #3c5da1;                  /* ハンバーガー棒の色 */
  --header-hbgcolor-close: #fff;            /* ハンバーガー棒の色（close） */
  --hbgmenu-bgcolor: rgba(60, 93, 161,0.9);       /* ハンバーガーメニュー背景色 */
  --hbgmenu-textcolor: #fff;                /* ハンバーガーメニューテキスト色 */
  --hbgmenu-bordercolor: #ccc;              /* ハンバーガーメニューボーダー色 */
  --pagetitle-bgcolor: #3c5da1;             /* ページタイトル背景 */
  --pagetitle-bgcolor-s: #f2f2f2;             /* ページタイトル背景（ストライプにした時の色） */
  --pagetitle-textcolor: #FFF;              /* ページタイトルテキスト色 */
  --pagetitle-bgtextcolor: rgba(255,255,255,0.0); /* ページタイトルテキストの背景色 */
  --footer-bgcolor: #3c5da1;               /* フッター背景色 */
  --footer-textcolor: #fff;              /* フッターテキスト色 */
  --copyright-bgcolor: #3c5da1;             /* コピーライト背景色 */
  --copyright-textcolor: #fff;              /* フッターテキスト色 */
  --slick-dots: #ccc;                /* スリックスライダードットの色 */
  --slick-active: #3c5da1;                 /* スリックスライダードットのアクティブ色 */
  --sns-bgcolor: #fff;               /* SNS丸ボタンの背景色 */
  --sns-iconcolor: #333;             /* SNS丸ボタンのアイコン色（ロールオーバも同じ色） */
  --sns-bordercolor: #fff;           /* SNS丸ボタンのボーダー色 */
  --sns-bordercolor-hover: #333;     /* SNS丸ボタンのロールオーバ時のボーダー色 */
  --fnav-iconcolor-pc: rgba(185,33,37,1);         /* PCの時のページトップアイコンの色 */
  --fnav-iconcolor-pc-hover: rgba(185,33,37,0.7);   /* PCの時のページトップアイコンロールオーバ時の色 */
  --fnav-iconcolor-pc-shadow: rgba(255,255,255,0.7);  /* PCの時のページトップアイコンシャドウの色 */
  --fnav-bgcolor-sp: #333;           /* スマホの時のフッターアイコンの背景色 */
  --fnav-iconcolor-sp: #888;         /* スマホの時のフッターアイコンの色 */
  --sec-bgimg-maskcolor: rgba(0,0,0,0.6);     /*コンテンツの背景に画像を配置した時の背景マスクの色*/
  --img-maru-s--size: 260px;         /* 画像を円形にトリミング（画像サイズが480px以下）画像の縦幅サイズを指定 */
}

/* /////////////////////////////////////////////////////////////////////////////////////////

★★ ヘッダ固定の時のアンカー位置調整したい場合 ★★
common.jsを修正します。
PCの場合：150行目の　 headerHeight = headerHeight + 50; //ヘッダの高さ
　　　　　　　　　　　　　　　　　　　　　　　　　　↑ この数値を50から変更してください。

///////////////////////////////////////////////////////////////////////////////////////// */

 
/* *********************************
　
  共通

********************************** */


/*	utility.css
===================================================== */
body {
  overflow-x: hidden;
}


.font-yuji {
	font-family: "Yuji Syuku", "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , Times New Roman , "游明朝", YuMincho, "MSP明朝","MS PMincho","MS 明朝",serif;
  font-weight: 400;
  font-style: normal;
	}


  /* --- order --- */
	@media (max-width: 1000px) {
		.order-1-1000 {	order: 1;	}
		.order-2-1000 {	order: 2;	}
	}

/*	header-b-01.css
===================================================== */
	@media print, screen and (min-width: 768px) {
	 	/* l-header */
    .l-header {
      max-width: none;
      margin: 0 auto;
			padding-left: 1%; 
			padding-right: 3%; 
      }
	}

	@media screen and (min-width:768px) and (max-width:1140px){
    .l-gnav-over {
      margin-bottom: 0px;
      }
  }


/*	footer.css
===================================================== */

/* --- footer --- */
.l-footer address {
	font-style: normal;
	}

		@media print, screen and (min-width: 768px) {
      .l-footer {
				margin-top: 80px;
        }
    }
    @media (max-width: 767px) {
      .l-footer {
				margin-top: 60px;
        }
    }

/* --- fnav --- */
    @media print, screen and (min-width: 768px) {
			.l-fnav-pc {
				position: fixed;
        left: 50%;
        margin-left: -22px;
				bottom: 10%;
				z-index: 9500;
			}
			.l-fnav-pc a.l-pagetop {
				text-align: center;
        }
      .l-fnav-sp {
				display: none!important;
        }
    }
    @media (max-width: 767px) {
			.l-fnav-sp {
				position: fixed;
				margin: 0;
				padding: 0;
				width: 100%;
				bottom: 0;
				left: 0px;
				z-index: 9500;
				background-color: #fff;
				display: -webkit-grid;
				display: grid;
				-webkit-justify-content: center;
				justify-content: center;
	      grid-template-columns: 1fr 1fr 1fr;
			}
      .l-fnav-sp a {
				text-align: center;
				padding: 10px 3px;
				font-size: 2.0rem;
				color: var(--cs-gray-dark);
        }
      .l-fnav-sp a.l-pagetop img {
				width: 30px;
        }
      .l-fnav-pc {
				display: none!important;
        }
    }




/*	contens.css
===================================================== */
	.c-photos__s4-l1 {
		grid-template-columns: 1fr 1fr 2fr;
		grid-template-rows: 1fr 1fr;
		}
		.c-photos__s4-l1 > *:nth-child(1) {
			grid-column: 1 / 2;
			grid-row: 1 / 2;
			}
		.c-photos__s4-l1 > *:nth-child(1) {
			grid-column: 1 / 2;
			grid-row: 2 / 3;
			}
		.c-photos__s4-l1 > *:nth-child(3) {
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			}
		.c-photos__s4-l1 > *:nth-child(4) {
			grid-column: 2 / 3;
			grid-row: 2 / 3;
			}
		.c-photos__s4-l1 > *:nth-child(5) {
			grid-column: 3 / 4;
			grid-row: 1 / 3;
			}

	/* 沼津工場に使用 */
	@media print, screen and (min-width: 768px) {
		.col-86 {
			width: 86%;
			margin: 0 0 0 auto;
			}
	}

/*	grid.css
===================================================== */

  .container-l,
  .container-xxl {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    }
  .container-l:after,
  .container-xxl:after {
		clear: both;
    display: block;
    content: "";
		}
	@media print, screen and (min-width: 768px) {
    .container-xxl {
			max-width: 1760px;
			padding-left: 30px;
			padding-right: 30px;
			box-sizing: border-box;
			}
    .container-l {
			max-width: 1210px;
			padding-left: 30px;
			padding-right: 30px;
			box-sizing: border-box;
			}
	}
	@media (max-width: 767px) {
  .container-l,
  	.container-xxl {
			width: 92%;
			}
	}



	@media print, screen and (min-width: 768px) {
		.gr-5__310_48p {
			grid-template-columns: repeat(auto-fit, 310px);
			column-gap: 15px;
			}
	}
	@media (max-width: 767px) {
		.gr-5__310_48p {
			grid-template-columns: repeat(auto-fit, 48%);
			column-gap: 4%;
			}
	}


	@media print, screen and (min-width: 1001px) {
		.col-between__3-2 > *:first-child {
			width: 57%;
			}
		.col-between__3-2 > *:last-child {
			width: 38%;
			}
		.col-between__2-1 > *:last-child,
		.col-between__1-2 > *:first-child {
			width: 32%;
			}
		.col-between__2-1 > *:first-child,
		.col-between__1-2 > *:last-child {
			width: 64%;
			}
	}
	@media (max-width: 1000px) {
		.col-between__3-2 > *,
		.col-between__2-1 > *,
		.col-between__1-2 > * {
			width: 100%;
			}
	}



/* pagetitle
====================================== */

  .p-pagetitle {
    clear: both;
    padding: 0 10px;
    display: -webkit-box!important;
    display: -webkit-flex!important;
    display: flex!important;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    }
    @media print, screen and (min-width: 768px) {
      .p-pagetitle {
				background-color: var(--cs-white);
        height: 386px;
				background-repeat: no-repeat;
				background-position: center center;
        }
      .p-pagetitle h1 {
        height: 100px;
				width: 50%;
				margin: 0 auto 0 0;
				text-align: right;
        font-size: 4.0rem;
				padding-right: 300px;
				padding-top: 10px;
        }
      .p-pagetitlesub {
        font-size: 2.8rem;
				display: block;
        }
    }
		@media screen and (min-width:1001px) and (max-width:1720px){
      .p-pagetitle.p-pagetitle__long h1 {
        font-size: 3.4rem;
				padding-right: 250px;
        }
      .p-pagetitle.p-pagetitle__long .p-pagetitlesub {
        font-size: 2.0rem;
        }
		}
		@media screen and (min-width:768px) and (max-width:1499px){
      .p-pagetitle.p-pagetitle__long h1 {
        font-size: 3.2rem;
				padding-right: 200px;
        }
      .p-pagetitle.p-pagetitle__long .p-pagetitlesub {
        font-size: 1.8rem;        }
		}
		@media screen and (min-width:768px) and (max-width:1300px){
			.p-pagetitle .p-pagetitle__block {
				display: block;
				}
      .p-pagetitle.p-pagetitle__long h1 {
        font-size: 3.0rem;
				padding-right: 200px;
        }
      .p-pagetitle.p-pagetitle__long .p-pagetitlesub {
        font-size: 1.8rem;
        }
		}
		@media screen and (min-width:1001px) and (max-width:1100px){
      .p-pagetitle h1 {
        font-size: 3.4rem;
				padding-right: 250px;
        }
      .p-pagetitlesub {
        font-size: 2.0rem;
        }
			.p-pagetitle .p-pagetitle__block2 {
				display: block;
				}
		}
		@media screen and (min-width:768px) and (max-width:1070px){
			.p-pagetitle .p-pagetitle__block3 {
				display: block;
				}
		}
		@media screen and (min-width:768px) and (max-width:1000px){
      .p-pagetitle h1 {
        font-size: 3.0rem;
				padding-right: 200px;
        }
      .p-pagetitlesub {
        font-size: 1.8rem;
        }
		}
		@media screen and (min-width:768px) and (max-width:850px){
      .p-pagetitle.p-pagetitle__long h1 {
        font-size: 2.6rem;
				padding-right: 190px;
        }
      .p-pagetitle.p-pagetitle__long .p-pagetitlesub {
        font-size: 1.8rem;
        }
		}

    @media (max-width: 767px) {
      .p-pagetitle {
				background-image: none!important;
		    background-color: var(--pagetitle-bgcolor);
        height: 80px;
        }
      .p-pagetitle h1 {
        height: 50px;
        width: 90%;
        max-width: 300px;
        font-size: 2.0rem;
				margin: 0px auto;
				padding: 0 10px;
				display: -webkit-box!important;
				display: -webkit-flex!important;
				display: flex!important;
				-webkit-flex-direction: column;
				flex-direction: column;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-align-items: center;
				align-items: center;
				text-align: center;
				line-height: 1.3;
        }
      .p-pagetitlesub {
        font-size: 1.2rem;
        }
    }



/* title
====================================== */
/* --- 斜めのアクセント（デフォルトは青） --- */
 .p-title01 {
    position: relative;
    }
  .p-title01::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 18px;
    transform: skewX(-28deg);
    background-color: var(--cs-color01);
    }
		.p-title01.p-title01_white::before {
			background-color: var(--cs-white);
			}
	@media print, screen and (min-width: 768px) {
    .p-title01 {
			padding-left: 40px;
			margin-left: -40px;
      }
			/* トップのリクルートなどで使用 */
			.p-title01.p-title01_10 {
				padding-left: 15px;
				}
    .p-title01::before{
	    width: 12px;
			height: 35px;
      }
	}
	@media (min-width:1601px) and (max-width:1800px){
    .p-title01 {
			margin-left: -20px;
      }
	}
	@media (min-width:768px) and (max-width:1600px){
    .p-title01 {
			margin-left: -10px;
      }
	}
	@media (max-width: 767px) {
    .p-title01{
			padding-left: 20px;
			margin-left: 0px;
			font-size: 2.0rem;
      }
			/* トップのリクルートなどで使用 */
			.p-title01.p-title01_10 {
				padding-left: 10px;
				}
    .p-title01::before{
 	 	  top: 8px;
	    width: 8px;
			height: 20px;
      }
	}


/* --- 横棒のアクセント　デフォルトは青（p-title02　左側）（p-title03　PCの時右側） --- */
 .p-title03,
 .p-title02 {
    position: relative;
    }
  .p-title03::before,
  .p-title02::before {
    content: '';
    position: absolute;
    top: 50%;
		left: 0;
    background-color: var(--cs-color01);
    }
		.p-title03.p-title03_white::before,
		.p-title02.p-title02_white::before {
			background-color: var(--cs-white);
			}
	.p-title03_sub,
	.p-title02_sub {
		display: inline-block;
		position: relative;
		line-height: 1;
		}
	@media print, screen and (min-width: 768px) {
		.p-title02 {
			padding-left: 120px;
			margin-left: -100px;
			}
		.p-title03 {
			padding-right: 120px;
			margin-right: -100px;
			text-align: right;
			}
		.p-title03::before {
			left: auto;
			right: 0;
			}
    .p-title03::before,
    .p-title02::before {
			margin-top: -3px;
	    width: 90px;
			height: 10px;
      }
		.p-title03_sub,
		.p-title02_sub {
			padding: 5px 10px;
			font-size: 1.4rem;
			top: -6px;
			}
		.p-title02_sub {
			margin-left: 15px;
			}
		.p-title03_sub {
			margin-right: 15px;
			}
	}
	@media (min-width:768px) and (max-width:1800px){
    .p-title02 {
			margin-left: -40px;
      }
    .p-title03 {
			margin-right: -40px;
      }
	}
	@media (max-width: 767px) {
    .p-title03,
    .p-title02 {
			padding-left: 30px;
			margin-left: -10px;
			font-size: 2.0rem;
      }
    .p-title03::before,
    .p-title02::before {
			margin-top: -2px;
	    width: 20px;
			height: 6px;
      }
		.p-title03_sub,
		.p-title02_sub {
			padding: 2px 5px;
			font-size: 1.1rem;
			margin-left: 10px;
			top: -2px;
			}
	}




/* background
====================================== */
/* --- left(white) right(blue) --- */
.p-bg_whiteblue {
  background: -moz-linear-gradient(left, var(--cs-white) 0%, var(--cs-white) 50%, var(--cs-color01) 50%, var(--cs-color01) 100%);
  background: -webkit-linear-gradient(left, var(--cs-white) 0%, var(--cs-white) 50%, var(--cs-color01) 50%, var(--cs-color01) 100%);
  background: linear-gradient(to right, var(--cs-white) 0%, var(--cs-white) 50%, var(--cs-color01) 50%, var(--cs-color01) 100%);
	}


/* --- 右斜め下（p-bg_right　デフォルトは白）・左斜め下（p-bg_left　デフォルトは白） --- */
.p-bg_left,
.p-bg_right {
	position: relative;
	}
.p-bg_left::before,
.p-bg_right::before {
	content: '';
	position: absolute;
  inset: 0;
	transform-origin: center center;
	width: 100%;
	background-color: var(--cs-white);
	}
.p-bg_right::before {
	transform: skewY(3.5deg);
	}
.p-bg_left::before {
	transform: skewY(-3.5deg);
	}
	.p-bg_left-color01::before,
	.p-bg_right-color01::before {
		background-color: var(--cs-color01);
		}
	.p-bg_left-color05::before,
	.p-bg_right-color05::before {
		background-color: var(--cs-color05);
		}
@media print, screen and (min-width: 768px) {
	.p-bg_left,
	.p-bg_right {
	  padding: 100px 0px;
		}
	.p-bg_h01 {
		height: 300px;
		}
}
@media (max-width: 767px) {
	.p-bg_left,
	.p-bg_right {
	  padding: 50px 0px;
		}
}


/* --- 斜め共通（斜めの背景のためのpaddingとmargin） --- */
@media print, screen and (min-width: 768px) {
	/* ななめにする要素の上の要素にいれる */
	.p-bg_spacebottom {
		padding-bottom: 150px;
		}
	/* ななめにする要素にいれる */
	.p-bg_spacetop__start {
		margin-top: 30px;
		padding-top: 50px;
		}
	.p-bg_spacetop {
		margin-top: -150px;
		}
}
@media (max-width: 767px) {
	/* ななめにする要素の上の要素にいれる */
	.p-bg_spacebottom {
		padding-bottom: 80px;
		}
	/* ななめにする要素にいれる */
	.p-bg_spacetop__start {
		margin-top: 10px;
		padding-top: 30px;
		}
	.p-bg_spacetop {
		margin-top: -60px;
		}
}



/* --- bg-01:白ドット bg-02：白線 bg-03:水色ドット bg-04:水色線（デフォルトはtop20 left80） --- */
[class*="p-bg-01__"]::before,
[class*="p-bg-02__"]::before,
[class*="p-bg-03__"]::before,
[class*="p-bg-04__"]::before  {
	position: absolute;
	content: "";
	display: block;
	top: 20%;
	left: 80%;
	background-size: contain;
	background-repeat: no-repeat;
	}
[class*="p-bg-01__"]::before  {
	background-image: url("../img/common/bg-01.webp");
	width: 370px;
	height: 345px;
	}
[class*="p-bg-02__"]::before  {
	background-image: url("../img/common/bg-02.webp");
	width: 652px;
	height: 652px;
	}
[class*="p-bg-03__"]::before  {
	background-image: url("../img/common/bg-03.webp");
	width: 500px;
	height: 500px;
	}
[class*="p-bg-04__"]::before  {
	background-image: url("../img/common/bg-04.webp");
	width: 474px;
	height: 474px;
	}
.p-bg-01__b20-r80::before,
.p-bg-02__b20-r80::before,
.p-bg-03__b20-r80::before,
.p-bg-04__b20-r80::before {
	top: auto;
	bottom: 20%;
	left: auto;
	right: 80%;
	}
.p-bg-04__t40-l95::before {
	top: 40%;
	left: 95%;
	}
.p-bg-03__tn50-r85::before {
	top: -200px;
	left: auto;
	right: 85%;
	z-index: 10;
	}
.p-bg-03__bn-r85::before {
	top: auto;
	bottom: -250px;
	left: auto;
	right: 85%;
	z-index: 10;
	}
.p-bg-04__oueinnovation::before {
	top: auto;
	bottom: 5%;
	left: auto;
	right: -200px;
	z-index: 10;
	}
.p-bg-02__numazu01::before {
	top: auto;
	bottom: 0;
	left: -150px;
	right: auto;
	width: 500px;
	height: 500px;
	}
.p-bg-02__numazu02::before {
	top: auto;
	bottom: -180px;
	left: auto;
	right: -150px;
	width: 500px;
	height: 500px;
	}
@media (min-width:768px) and (max-width:1400px){
	.p-bg-04__oueinnovation::before {
		left: 90%;
		}
}
@media (max-width: 767px) {
	[class*="p-bg-01__"]::before  {
		width: 150px;
		height: 138px;
		}
	[class*="p-bg-02__"]::before  {
		width: 163px;
		height: 163px;
		}
	[class*="p-bg-03__"]::before  {
		width: 150px;
		height: 150px;
		}
	[class*="p-bg-04__"]::before  {
		width: 140px;
		height: 140px;
		}
	.p-bg-03__tn50-r85::before {
		top: -70px;
		}
	.p-bg-03__bn-r85::before {
		bottom: -80px;
	}
}



/* *********************************
　
  page

********************************** */

/* 各工場のページ
====================================== */
/* -- 工場紹介メイン画像 -- */
.p-factory-main {
	display: -webkit-flex;
	display: flex;
	}

.p-factory-main__center {
  width: 1000px;
	line-height: 0;
	}
.p-factory-main__left {
	flex: 1;
	background-repeat: no-repeat;
	background-position: right 50px center;
	}
.p-factory-main__right {
	flex: 1;
	background: url("../img/common/bg-01.webp") no-repeat left 100px center;
	}

@media (max-width: 1000px) {
  .p-factory-main__left,
  .p-factory-main__right {
    width: 0;
    flex: 0;
    overflow: hidden;
	  }
  .p-factory-main__center {
    width: 100%;
  	}
}

/* -- シャッター左のタイトル -- */
.p-titleright-left {
	margin-left: auto;
	}
@media (max-width: 1000px) {
  .p-titleright-left {
		margin-left: 30px;
	  }
}

/* 会社概要
====================================== */
/* -- 機械設備のテーブル -- */
.p-tbl-setusbi td {
	width: 100px;
	}
@media (max-width: 767px) {
	.p-tbl-setusbi {
		gap: 0;
		}
	.p-tbl-setusbi td {
		width: 60px;
		border-left: hidden!important;
		}
	.p-tbl-setusbi > *:last-child {
		border-top: hidden;
		}
}




/* フジックス・トーカイの強み
====================================== */
.p-bgpink {
	display: inline-block;
	padding-top: 10px;
	background: url("../img/our-strengths/bg_pink.webp") no-repeat top -5px right -10px;
	background-size: auto 100%;
	}
.p-bggreen {
	display: inline-block;
	padding-top: 10px;
	background: url("../img/our-strengths/bg_green.webp") no-repeat top -5px left;
	background-size: auto 100%;
	}
.p-bgyellow {
	display: inline-block;
	padding-top: 10px;
	background: url("../img/our-strengths/bg_yellow.webp") no-repeat top right;
	background-size: auto 100%;
	}


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

	Fadein
	
======================================================================== */

	/* ページ読み込み時にフェードイン */
		body {
			animation: fadeIn 1s ease 0s 1 normal;
			-webkit-animation: fadeIn 1s ease 0s 1 normal;
			}
		@keyframes fadeIn {
			0% {opacity: 0}
			100% {opacity: 1}
			}
		@-webkit-keyframes fadeIn {
			0% {opacity: 0}
			100% {opacity: 1}
			}

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05{ animation-delay: 0.5s; }
.delay-time10{ animation-delay: 1s; }
.delay-time15{ animation-delay: 1.5s; }
.delay-time20{ animation-delay: 2s; }
.delay-time25{ animation-delay: 2.5s; }
.delay-time30{ animation-delay: 3s; }
.delay-time35{ animation-delay: 3.5s; }



/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
.fadeLeft01{
animation-name:fadeLeftAnime01;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}
.fadeLeft02{
animation-name:fadeLeftAnime01;
animation-duration:5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}
@keyframes fadeLeftAnime01{
  from {
    opacity: 0;
  transform: translateX(-200px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}
@keyframes fadeLeftAnime02{
  from {
    opacity: 0;
  transform: translateX(-300px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
.fadeRight01{
animation-name:fadeRightAnime01;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}
@keyframes fadeRightAnime01{
  from {
    opacity: 0;
  transform: translateX(200px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger02,
.fadeLeftTrigger01,
.fadeLeftTrigger,
.fadeRightTrigger01,
.fadeRightTrigger{
    opacity: 0;
}


/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.2);
  opacity: 0;
  }

  to {
    transform:scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.blurTrigger{
    opacity: 0;
}



/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
  opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}