@charset "UTF-8";



/* class
----------------------------------------------- */
.onlySP{}
.onlyPC{}

.onlyPC{ display: block;}
.onlySP{ display: none;}

.red{color: var(--color-default);}

.bgRed{ background-color: var(--color-default); color: #000;}
.bgRed a{  color: #000;}

.bgBlack{ background-color: #000; color: #fff;}
.bgRed a{  }

.path_square{ stroke-linecap:square !important;}

.tLeft{ text-align:left;}
.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	grid-gap: 20px;
	padding: 0;
	margin: 0;
}
.grid.col_3{grid-template-columns: 1fr 1fr 1fr;}
.grid.col_2{grid-template-columns: 1fr 1fr;}
.grid.col_1{grid-template-columns: 1fr;}
.grid.sp_col_2{	grid-template-columns: 1fr 1fr;}

.grid .center {	display: grid;	align-items: center;}
.gridItem {}

.grid.rightContent{grid-template-columns: 280px 1fr;}


img.full{width:100%; height: auto;}



.bgBtn{ display: inline-block; height: 3em; line-height: 3em; text-align: center; margin: 2em 0; padding: 0 2em; color: #fff !important; background: #fff; color:#000 !important;text-decoration: none !important; border-radius: 3px;transition: all 250ms cubic-bezier(.50, .0, .50, 1);}
.bgBtn:hover{ background: #999; color: #000 !important;}

ul.list{ margin-bottom: 1em; padding-left: 0.3em;}
ul.list li{ padding-left: 1.2em; margin-bottom: 0.5em;}
ul.list li:before{ content: '・'; display: inline-block; position: absolute; top: 0em; left: 0;}

ul.kome{ padding-left: 0.1em;}
ul.kome li{ padding-left: 1.2em;margin-bottom: 0.5em;}
ul.kome li:before{ content: '※' !important; display: inline-block; position: absolute; top: 0em; left: 0;}



.anim{transition: all 250ms cubic-bezier(.50, .0, .50, 1);}

.textLongEffect{ transition: all 500ms ease-out; opacity: 0; transform: translate3d(0,2rem,0);}
.textLongEffect.inView{ opacity: 1; transform: translate3d(0,0,0);}


.entryBoxList {
	display: -ms-grid;
	display: grid;

		  -ms-grid-columns: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	-ms-grid-rows: auto;
	grid-auto-rows: auto;
	grid-gap: 80px;
	padding: 0;
	margin: 0 0 80px 0;
	
	
}

dl.dateList{	display: grid;grid-template-columns: auto 1fr; margin-bottom: 3em;    font-size: 0.8em;}
dl.dateList dt{ padding: 0em 2em 0.2em 0em}
dl.dateList dd{ border-left:solid 1px #000; padding:0em 0 0.2em 2em; line-height: 1.5;}
dl.dateList dd a{ text-decoration: underline;  display: inline-block;}


.moreArea{ text-align: right; font-size: 1.0em; padding-bottom: 2px;}
.moreArea .moreWrap{ display: inline-block;line-height: 1; text-align: center;}
.moreArea .moreWrap:before,
.moreArea .moreWrap:after{ content: ''; display: block; position: absolute; width: 20px; height:calc(100% - 2px); border: solid 1px #000;outline-offset: 1px;}
	.moreArea .moreWrap:before{ top: 0; left: 0; border-right: 0; }
	.moreArea .moreWrap:after{ top: 0; right: 0; border-left:0; }
	
.moreArea .moreWrap .moreBtn{ display: inline-block;padding: 0 20px;  position: relative; z-index: 5; cursor: pointer;}
	.moreArea .moreWrap .moreBtn:before,
	.moreArea .moreWrap .moreBtn:after{ content: ''; display: block; position: absolute;z-index: 1; width: 0%;height:calc(100% - 2px); pointer-events: none;transition: all 700ms cubic-bezier(0,1,.5,1); transform: translate3d(0,0,0);}
	.moreArea .moreWrap .moreBtn:before{ top: 0; left: 0;  border-top: solid 1px #000;}
	.moreArea .moreWrap .moreBtn:after{ bottom: 0; right: 0;  border-bottom: solid 1px #000;  }
	
.moreArea .moreWrap .moreBtn span{ display: inline-block;  padding: 10px; box-sizing: border-box;}

.moreArea .moreWrap .moreBtn span.arrowR{}
.moreArea .moreWrap .moreBtn span p{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.moreArea .moreWrap .moreBtn:hover:before,
.moreArea .moreWrap .moreBtn:hover:after{ width: 100%;}
.moreArea .moreWrap .moreBtn:hover span:after{transform: translate(10px,0);}

.moreArea .moreWrap.white{ color: #fff;}
.moreArea .moreWrap.white:before,
.moreArea .moreWrap.white:after,
	.moreArea .moreWrap.white .moreBtn:before,
	.moreArea .moreWrap.white .moreBtn:after{ border-color: #fff; }
	.moreArea .moreWrap.white .moreBtn span:after{background: url(./img/common/arrow_r_white.svg) right center no-repeat; background-size:contain;  }
	
.moreArea .moreWrap.largeBtn{}	
.moreArea .moreWrap.largeBtn .moreBtn{ padding: 0 60px;}
.moreArea .moreWrap.largeBtn .moreBtn span{ padding: 20px 0;}
.moreArea .moreWrap.largeBtn:before, .moreArea .moreWrap.largeBtn:after{ width: 30px;}
.moreArea .moreWrap.largeBtn .moreBtn span:after{margin-left: 1.5rem;  }

.moreArea .moreWrap.largeBtn .moreBtn .wpcf7-submit{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: solid 1px #f30; opacity: 0; cursor: pointer;}


.moreArea.mini{font-size: 0.8em;}
.moreArea.mini .moreWrap .moreBtn span:after{ display: none;}

	.arrowPath{
		display: inline-block;
    margin-left: 1.5rem;
    width: 2.5rem;
    height: auto;
    transform: translate(0,-20%);
    transition: all 250ms ease;
	}
	
	.moreArea .moreWrap .moreBtn:hover .arrowPath{transform: translate(50%,-20%);}
	
	.moreArea.mini .arrowPath{
		    margin-left: 0.5rem;
			width: 1.2rem;
	}


	.arrowPath .line{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:0.5}
	.white .arrowPath .line{stroke:#fff;}
	
	
dl.historyList{	display: grid;grid-template-columns: 120px 1fr; margin-bottom: 3em;}
dl.historyList dt{ padding: 0em 2em 0em 0em}
dl.historyList dd{ border-left:solid 1px #000; padding:0em 0 0em 2em; line-height: 1.2;}
dl.historyList dd .en{ margin-bottom: 1rem;}

dl.companyList{	display: grid;grid-template-columns: 160px 1fr; margin-bottom: 3em;font-size: 0.8em;}
dl.companyList dt{ padding: 0.2em 0.5em 0.2em 0em; }
dl.companyList dd{ border-left:solid 1px #000; padding:0.2em 0 0.2em 2em; line-height: 1.2;}
dl.companyList .en{ margin-bottom: 1rem; line-height: 1.4;}
dl.companyList .jp{ line-height: 1.6; }

dl.formList{	display: grid;grid-template-columns: 160px 1fr; margin-bottom: 4em;font-size: 0.8em;}
dl.formList dt{ padding: 0em 2em 0em 0em;  line-height: 1;}
dl.formList dd{ border-bottom:solid 1px #fff; padding:0em 0 0em 2em; line-height: 1.2; display: grid; align-items: flex-end;}
dl.formList dd.fullInput{ padding: 0; border: 0;}
dl.formList dd:before{ content: '→'; display: inline-block; position: absolute; bottom: 1em; left: 0;}
dl.formList dt .en{ margin-bottom: 0.1rem; font-size: 1.2em;}
dl.formList dt .jp{ font-size: 0.8em;}
 dl.formList dt .kome{ display: inline-block; padding: 0 0.4em; font-size: 0.8em; transform: translate(0,-20%);}
 
 
.selectWrap {
overflow: hidden;
width: 100%;
margin:0;
text-align: center;
}
.selectWrap select {
width: 100%;
padding: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.selectWrap select::-ms-expand {
display: none;
}
.selectWrap.selectBlack {
position: relative;
background: #000;
}
.selectWrap.selectBlack::before {
position: absolute;
top: 50%;
right: 0.8em;
transform: translate(0,-50%);
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff;
pointer-events: none;
}
.selectWrap.selectBlack select {
padding: 0.7rem;
color: #fff;
    min-height: 2.7rem;
    border: solid 1px #fff;
}

dl.formList input,
dl.formList textarea{ padding: 10px; width: 100%;  background: #000;color: #fff;font-size: 0.8rem;font-weight:700; }

dl.formList input{ margin-bottom: 0.2em; width: 100%; border: 0;}
dl.formList textarea{ border: solid 1px #fff; height: 200px; }

ul.sns li{ }
ul.sns li a{ display: block; width: 100%; height: 0; padding-top: 100%; overflow: hidden;}
ul.sns li.facebook a{ background: url(./img/icon/icon_facebook.svg) center center no-repeat; background-size:contain; }
ul.sns li.instagram a{ background: url(./img/icon/icon_instagram.svg) center center no-repeat; background-size:contain; }

.vimeoArea{ position: relative;}
.vimeoArea:before{ content: ''; display: block; width: 100%; height: 0; padding-top: 56.8%; overflow: hidden;}
.vimeoArea iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


.lineEffect{overflow: hidden;}

	.lineEffect .inWrap{ transform: translate(-101%,0); position: relative;transition: all 500ms ease 250ms;}
	.lineEffect .inWrap:before{ content: ''; display: block; position: absolute; width: 100%; height: 100%; background-color:rgba(235,0,140,1) }

.lineEffect.inView  .inWrap	{ transform: translate(0%,0); }
.lineEffect.inView  .inWrap:before{ transition: all 500ms ease 850ms; transform: translate(101%,0); }	
	
	.lineEffect.black .inWrap:before{ background-color:rgba(0,0,0,1) }
	
	
.linkBannerArea{ display: flex;flex-direction:row-reverse;}
.linkBannerArea a{ display: inline-block;  transition: transform 200ms ease;}
.linkBannerArea a.deactive{ pointer-events: none;}
.linkBannerArea a:not(.deactive):hover{ transform: scale(1.02);}
	
.hideShow{ opacity: 0;transition: all 500ms ease 250ms; transform: translateY(25%);}
	.hideShow.inView{ opacity: 1; transform: translateY(0%);}
	
	
			.spView .moreArea .moreWrap .moreBtn{ font-size: 1.3rem;    padding: 0 2rem;}
			.spView .moreArea .moreWrap .moreBtn span:after{}
	
			.spView dl.formList{	grid-template-columns:1fr; margin-bottom:2rem;font-size: 0.8em;}
			.spView dl.formList dt{ padding: 0em 0em 0.3em 0em;  line-height: 1;border-bottom:solid 1px #fff; margin-bottom:0rem;}
			
			.spView dl.formList dd{ border-bottom:solid 1px #fff; padding:0.2em 0 0.1em 2em; line-height: 1.2;}
			.spView dl.formList dd.fullInput{ padding: 0; border: 0;}
			.spView dl.formList dd:before{ bottom: 50%;transform: translate(0,40%);}
			
			.spView dl.formList .en{ margin-bottom: 0rem;  display: inline-block;}
			.spView dl.formList .jp{ margin-bottom: 0rem; display: inline-block;}
			
			.spView dl.formList dt .en:after{ content: '/'; display: inline-block;  padding: 0 0.4rem 0 1rem;}
			
			.spView dl.formList.first dt,
			.spView dl.formList.last dt,
			.spView dl.formList:first-child dt,
			.spView dl.formList:last-child dt{ border-bottom: 0;}
			
			.spView #contact .contentWrap dl.formList:last-of-type{ margin-bottom: 4rem; }
			
			.spView dl.formList input, .spView dl.formList textarea{    padding: 0.5rem;   font-size: 1rem;}
			
		.wpcf7-not-valid-tip{ position: absolute;top: -1.5em; left: -2.5em; color: var(--color-default) !important; font-size: 0.7em !important; pointer-events: none;}	
				dl.textarea .wpcf7-not-valid-tip{top: -1.7em; left: 0em; }	
			
			.selectWrap.selectBlack .wpcf7-not-valid-tip{ top: 50%; left: 15em; transform: translate(0,-50%);}
			.screen-reader-response{color: var(--color-default) !important; }
			div.wpcf7 .ajax-loader{ opacity: 0; visibility: hidden; position: absolute; top: 0;left: 0;}
			
@media screen and (max-width:1000px) {
	

.onlySP{ display: block;}
.onlyPC{ display: none;}
			
			dl.dateList{	display: grid;grid-template-columns:1fr; margin-bottom: 2em;}
			dl.dateList dt{ padding: 0.2em 2em 0.2em 0em; border-bottom:solid 1px #000; }
			dl.dateList dd{ border-left:0; padding:0.5em 0 0.5em 0em;}
			dl.dateList dd a{ }
			
		
			
			
			dl.historyList{	grid-template-columns:  1fr; margin-bottom: 3em;}
			dl.historyList dt{ padding: 0em 0em 0.3em 0em;border-bottom:solid 1px #000; }
			dl.historyList dd{ border-left:0; padding:0.5em 0 0.5em 0em; line-height: 1.2;}
			dl.historyList dd .en{ margin-bottom: 1rem;}
			
			dl.companyList{grid-template-columns:  1fr; margin-bottom: 3em; font-size: 1em;}
			dl.companyList dt{ padding: 0em 0em 0.3em 0em;border-bottom:solid 1px #000; vertical-align: bottom; display: flex; }
			dl.companyList dd{ border-left:0; padding:0.5em 0 0.5em 0em; line-height: 1.2;}
			dl.companyList .en{ margin-bottom: 0rem;  display: inline-block;}
			dl.companyList .jp{ margin-bottom: 0rem; display: inline-block; line-height: 1.3rem; font-size: 0.9em;}
			dl.companyList dt .en:after{ content: '/'; display: inline-block;   padding: 0 0.4rem 0 0.2rem;}
			
			dl.companyList dd .en{ margin-bottom: 1rem;}
			dl.companyList dd .jp{ display: block;}
			
			
			
			.linkBannerArea{justify-content: center;}
			.linkBannerArea a{ margin: 0 2vw; }
			section#services .linkBannerArea a.regeria{ width: 60vw !important;margin: 0 2vw; }
			section#services .linkBannerArea a.biteki_bar{ width: 25vw !important;margin: 0 2vw; }
			section#services .linkBannerArea a.lemon_bar{ width: 25vw !important;margin: 0 2vw; }



			.spView dl.formList{ font-size: 1rem;margin-bottom: 6rem;}
			
			
			.spView dl.formList input, dl.formList textarea{
				padding: 0.5rem;

			}
			
			.spView .selectWrap.selectBlack select{}
			.spView dl.formList textarea{ height: 100vw;}

			.spView .moreArea .moreWrap .moreBtn{font-size: 1rem;    padding: 0 2rem;}

			.spView .selectWrap{ overflow: visible;}
			.spView .selectWrap.selectBlack .wpcf7-not-valid-tip{ left: 0em;    text-align: left;    transform: translate(0,0); top: auto; bottom: -2.5em;}
			.spView .wpcf7-not-valid-tip{
				    position: absolute;
				    top: auto;
				    bottom: -2em;
				    left:-3em;
			}

			.spView dl.textarea .wpcf7-not-valid-tip{    
				top: auto;
				    bottom: -2em;
				left: 0em;
    		}
			
			.spView #spMenu ul.menu{margin-bottom: 4em;}
			.spView #spMenu ul.menu li{ margin-bottom: 2rem;}

			.spView  select,
			.spView  input,
			.spView  textarea{font-size: 1rem !important;}

				
}