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

/* 動く要素には.anicontのクラスをつける */



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

           hover animation

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

.hoverani-lrclose1{
	/* hover 左右から閉じて色が変わる：黒 */
}
.hoverani-lrclose1{
	overflow: hidden;
	position: relative;
}
.hoverani-lrclose1 .anicont{
	display: block;
	background: transparent;
}
.hoverani-lrclose1 .anicont::before,
.hoverani-lrclose1 .anicont::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.30);
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hoverani-lrclose1 .anicont::before {
	left: 0;
}
.hoverani-lrclose1 .anicont::after {
	right: 0;
}
.hoverani-lrclose1:not(:hover) .anicont::before,
.hoverani-lrclose1:not(:hover) .anicont::after {
	opacity: 0;
	transition-duration: .6s;
}
.hoverani-lrclose1:not(:hover) .anicont::before {
	transform: translateX(-50%);
}
.hoverani-lrclose1:not(:hover) .anicont::after {
	transform: translateX(50%);
}


a.hoverani-lropen1 div {
	/* hover 左右へ開いて色が変わる：黒 */
}
a.hoverani-lropen1 div{
	overflow: hidden;
	position: relative;
}
a.hoverani-lropen1 .anicont{
	display: block;
	background: transparent;
}
a.hoverani-lropen1 .anicont::before,
a.hoverani-lropen1 .anicont::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.50);
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
a.hoverani-lropen1 .anicont::before {
	left: 50%;
}
a.hoverani-lropen1 .anicont::after {
	right: 50%;
}
a.hoverani-lropen1:hover .anicont::before,
a.hoverani-lropen1:hover .anicont::after {
	opacity: 0;
	transition-duration: .6s;
}
a.hoverani-lropen1:hover .anicont::before {
	transform: translateX(50%);
}
a.hoverani-lropen1:hover .anicont::after {
	transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
	a.hoverani-lropen1 .anicont::before,
	a.hoverani-lropen1 .anicont::after {
		opacity: 0;
	}
}





.hoverani-lrclose1w{
	/* hover 左右から閉じて色が変わる：白 */
}
.hoverani-lrclose1w{
	overflow: hidden;
	position: relative;
}
.hoverani-lrclose1w .anicont{
	display: block;
	background: transparent;
}
.hoverani-lrclose1w .anicont::before,
.hoverani-lrclose1w .anicont::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.30);
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hoverani-lrclose1w .anicont::before {
	left: 0;
}
.hoverani-lrclose1w .anicont::after {
	right: 0;
}
.hoverani-lrclose1w:not(:hover) .anicont::before,
.hoverani-lrclose1w:not(:hover) .anicont::after {
	opacity: 0;
	transition-duration: .6s;
}
.hoverani-lrclose1w:not(:hover) .anicont::before {
	transform: translateX(-50%);
}
.hoverani-lrclose1w:not(:hover) .anicont::after {
	transform: translateX(50%);
}



.hoverani-lrclose2{
	/* hover 左から閉じて色が変わる：黒 */
}
.hoverani-lrclose2{
	overflow: hidden;
	position: relative;
}
.hoverani-lrclose2 .anicont{
	display: block;
	background: transparent;
}
.hoverani-lrclose2 .anicont::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.60);
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hoverani-lrclose2 .anicont::before {
	left: 0;
}
.hoverani-lrclose2:not(:hover) .anicont::before {
	opacity: 0;
	transition-duration: .6s;
}
.hoverani-lrclose2:not(:hover) .anicont::before {
	transform: translateX(-130%)/* skew(-30deg)*/;
}
@media screen and (max-width: 767px) {
	.hoverani-lrclose2:not(:hover) .anicont::before,
	.hoverani-lrclose2:not(:hover) .anicont::after {
		opacity: 1.0;
		transition-duration: .6s;
	}
	.hoverani-lrclose2:not(:hover) .anicont::before {
	transform: translateX(0px) skew(0deg);
}
.hoverani-lrclose2:not(:hover) .anicont::after {
	transform: translateX(0px) skew(0deg);
}
}


.hoverani-lrclose2w{
	/* hover 左から閉じて色が変わる：白*/
}
.hoverani-lrclose2w{
	overflow: hidden;
	position: relative;
}
.hoverani-lrclose2w .anicont{
	display: block;
	background: transparent;
}
.hoverani-lrclose2w .anicont::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.20);
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	z-index: 3;
}
.hoverani-lrclose2w .anicont::before {
	left: 0;
}
.hoverani-lrclose2w:not(:hover) .anicont::before {
	opacity: 0;
	transition-duration: .6s;
}
.hoverani-lrclose2w:not(:hover) .anicont::before {
	transform: translateX(-130%) /*skew(-30deg)*/;
}


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

           scroll animation

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

/* 親要素には、必ず.aniwrapを入れる */

.aniwrap{
	position: relative;
	overflow: hidden;
}

.fadein100up {
  opacity : 0;
  transform : translate(0, 100px);
	transition-property: all;
  transition-duration: .5s;
  transition-timing-function: ease;
}
.fadein100up.active{
  opacity : 1;
  transform : translate(0, 0);
}

.fadein100down {
  opacity : 0;
  transform : translate(0, -100px);
	transition-property: all;
  transition-duration: .5s;
  transition-timing-function: ease;
}
.fadein100down.active{
  opacity : 1;
  transform : translate(0, 0);
}

.fadein100LtoR {
  opacity : 0;
  transform : translate(-100%, 0);
  transition : all 1s;
}
.fadein100LtoR.active{
  opacity : 1;
  transform : translate(0, 0);
}

.fadein100RtoL {
  opacity : 0;
  transform : translate(100%, 0);
  transition : all 1s;
}
.fadein100RtoL.active{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeindelay00{ transition-delay: 0s; }
.fadeindelay01{ transition-delay: 0.1s; }
.fadeindelay02{ transition-delay: 0.2s; }
.fadeindelay03{ transition-delay: 0.3s; }
.fadeindelay04{ transition-delay: 0.4s; }
.fadeindelay05{ transition-delay: 0.5s; }
.fadeindelay06{ transition-delay: 0.6s; }
.fadeindelay07{ transition-delay: 0.7s; }
.fadeindelay08{ transition-delay: 0.8s; }
.fadeindelay09{ transition-delay: 0.9s; }
.fadeindelay10{ transition-delay: 1.0s; }


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

           続き表示 特長

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


.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box label {
	position: absolute;
	z-index: 1;
	/*bottom: -15px;*/
	width: 100%;
	/*height: 30px;*/ /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	/*background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);*/
 
}
.cp_box label.b-15{ bottom: 20px;/*bottom: -15px;*/height: auto;}
.cp_box label.b10{ bottom: 20px; /*background-color: #fff;*/ height: auto;}
/*.cp_box label.b10{ bottom: 0px; background-color: #fff; height: 30px;}*/
.cp_box label.t0{ bottom: 0px;  height: 100px;}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
	line-height: 2.5rem;
  font-size: 1.4rem;
	position: absolute;
	z-index: 3;
	bottom: 0px;
	left: 50%;
	/*width: 16rem;*/ width: 80%; max-width: 200px;
	font-family: "Font Awesome 5 Free"; font-weight: 900;
	content: '\f13a'' 続きをよむ';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #FFF;
	border-radius: 4px;
  border: 5px solid #FFF;
	background-color: #931611;
  padding: 5px 0;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 120px;/*height: 68px;*/ /* 開く前に見えている部分の高さ */
 	transition: all 0.5s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
	font-family: "Font Awesome 5 Free"; font-weight: 900;
	content: '\f139'' 閉じる';
}
.cp_box input:checked + label.b-15:after{ bottom: -40px;}
.cp_box input:checked + label.b10:after{ bottom: -40px;}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 30px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}



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

           続き表示 お客様の声

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


.cp_box3 *, .cp_box3 *:before, .cp_box3 *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box3 {
	position: relative;
}
.cp_box3 label {
	position: absolute;
	z-index: 1;
	/*bottom: -15px;*/
	width: 100%;
	/*height: 30px;*/ /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	/*background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);*/
 
}
.cp_box3 label.b10{ bottom: 30px; height: auto;}
.cp_box3 input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box3 label:after {
	line-height: 2.5rem;
  font-size: 1.4rem;
	position: absolute;
	z-index: 3;
	bottom: 0px;
	left: 50%;
	/*width: 16rem;*/ width: 80%; max-width: 200px;
	font-family: "Font Awesome 5 Free"; font-weight: 900;
	content: '\f13a'' 続きをよむ';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #FFF;
	border-radius: 4px;
  border: 5px solid #FFF;
	background-color: #931611;
  padding: 5px 0;
}
.cp_box3 input {
	display: none;
}
.cp_box3 .cp_container {
	overflow: hidden;
	height: 280px;/*height: 68px;*/ /* 開く前に見えている部分の高さ */
 	transition: all 0.5s;
}
.cp_box3 input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box3 input:checked + label:after {
	font-family: "Font Awesome 5 Free"; font-weight: 900;
	content: '\f139'' 閉じる';
}
.cp_box3 input:checked + label.b10:after{ bottom: -40px;}
.cp_box3 input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 50px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}




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

          アコーディオン
　　　　工場：代表からの挨拶

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

/*.acd-check{ display: none;}
.acd-label{ position: relative; display: block; width: 18em; max-width: 85%; height: 1em; margin: 20px auto 0 auto; padding: 5px;}
.acd-label::after{ position: absolute; content: "ミッション・ビジョン・バリューを見る"; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255,237,0,0.5); color: rgba(255,237,0,1.00); text-align: center; font-size: 1.4rem; line-height: 1.0;}
.acd-content{ height: 0; opacity: 0; padding: 0 10px; transition: .5s; visibility: hidden;}
.acd-check:checked + .acd-label + .acd-content{ height: auto; opacity: 1; visibility: visible;}
.acd-check:checked + .acd-label::after{ content: "ミッション・ビジョン・バリューを閉じる";}*/

.cp_box2 *, .cp_box2 *:before, .cp_box2 *:after {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
.cp_box2 { position: relative; padding: 50px 0;}
.cp_box2 label {
	position: absolute;
	z-index: 1;
	width: 100%;
	cursor: pointer;
	text-align: center;
 
}
.cp_box2 label.b-215{ bottom: 30px; height: 30px;}
.cp_box2 input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box2 label:after {
	line-height: 2.5rem; font-size: 1.4rem;
  position: absolute;	z-index: 2; bottom: 0px; left: 50%;
	width: 100%; max-width: 500px;
	font-family: "Font Awesome 5 Free"; font-weight: 900;
	content: '\f13a'' ミッション・ビジョン・バリューを見る';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #FFB900;
	border-radius: 4px;
  border: 2px solid #FFB900;
	background-color: rgba(255,185,0,0.10);
  padding: 5px 0;
}
.cp_box2 input {
	display: none;
}
.cp_box2 .cp_container {
	overflow: hidden;
  padding: 0;
	height: 0px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_box2 input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box2 input:checked + label:after {  bottom: 0px;
	font-family: "Font Awesome 5 Free"; font-weight: 900;
	content: '\f139'' ミッション・ビジョン・バリューを閉じる';
}
.cp_box2 input:checked + label.b-215:after{ bottom: 0px;}
.cp_box2 input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 20px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}
@media screen and (max-width: 460px){
  .cp_box2 { position: relative; padding: 30px 0;}
  .cp_box2 label.b-215{ bottom: 15px; height: 30px;}
  .cp_box2 label:after {
	  font-size: 1.2rem;
    border: 1px solid #FFB900;
  }
}


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

存在感バツグン！一瞬キラッと光るボタン

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



._shiny::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #b5e7ff;
    transition: 300ms;
    animation: shinyshiny 3.5s ease-in-out infinite;/*animation: shinyshiny 2.5s ease-in-out infinite;*/
}
/*@-webkit-keyframes shinyshiny {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}*/
@-webkit-keyframes shinyshiny {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    86% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    88% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}