@charset "UTF-8";



/* class
----------------------------------------------- */
.en{font-family: 'Poppins', sans-serif;font-weight: var(--fontt-weight-normal);}

.inView{ opacity: 0;transition: all 800ms ease-out ; transform: translate3d(0,50px,0); }
.inView.is-show{opacity: 1;transform: translate3d(0,0%,0);}

.imageEffect{ overflow: hidden;}
.imageEffect:after{ content: ''; display: block; position: absolute; z-index: 2; top: 0; left: 0;  width: 100%; height: 100%;
      mix-blend-mode: multiply;
      background: #ccc;
      opacity: .1;
}


a.hEffect{}
a.hEffect:hover{ opacity: .8;}

.illust{ border: solid 0px #c00;}
.illust.parallax{ border: solid 0px #c00;}
.post-header{ display:block; clear: both; width: 100%; overflow: hidden; height: 0; }

.tLeft{ text-align:left;}
.tCenter{ text-align:center}
.tRight{ text-align:right;}

.italic{font-style: italic;}

.ex{ font-size: 0.8em;}

.btn{ display: block; height: 80px; 
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2px #fff;
    margin: auto;
    
    }
.btn .text{}

.btnCenter{ width: 350px; margin: auto;}

.noimage{background: url(./img/common/no_image.jpg) center center no-repeat #eee !important; background-size: contain !important; }

.frontArrowRight{ padding-left: 55px;}
.frontArrowRight:before{ content: ''; display: inline-block; width: 42px; height: 24px; position: absolute; top: 50%; left: 0; transform: translate(0,-50%); background: url(./img/common/arrow_more.svg) center center no-repeat; background-size: contain; }


.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    grid-gap: 50px;
    padding: 0;
    margin: auto;
}
.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 {}

dl.grid.debugTools{ width: 600px; margin: 50px;grid-template-columns: 100px 1fr; grid-gap: 1px; font-size: 10px; display: none; position: fixed; top: 50px; left: 50px; z-index: 99999;}
dl.grid.debugTools dt{border: solid 1px #000; padding: 0.5em;}
dl.grid.debugTools dd{ border: solid 1px #000; padding: 0.5em;}

img.wFull,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: #333;text-decoration: none !important; border-radius: 5px;transition: all 250ms cubic-bezier(.50, .0, .50, 1);}
.bgBtn:hover{ background: #c00; color: #fff !important;}

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

ul.kome li:before{ content: '※';}

ol.list{ margin-bottom: 2em; list-style: decimal;padding-left: 1.3em;}
ol.list li{padding-left: 0.2em; margin-bottom: 0.5em;}

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

.entryList dl{grid-template-columns: auto 1fr; grid-gap: 20px; margin-bottom: 20px;}
.entryList dl dt{white-space: nowrap;background: #f2f2f2;}
.entryList dl dd{ background: #f2f2f2;}

.wfull{ width: 100%; height: auto;}
.hfull{ width: auto; height: 100%;}



.visualWrap{}
.visualWrap:after{ content: ''; display: block; width: 100%; height: 0; padding-top: 62%;}
.visualWrap .image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ccc;}

.data { font-size: 0.8rem;}
.data .caption{ margin: 0 0 0.5em 0;}
.data .type{margin: 0 0 0 0;}

.entryBoxList{  grid-gap:60px 20px; }
.entryBoxList .gridItem{ overflow: hidden;}
.entryBoxList .gridItem a{ display: block;width: 100%; height: 0; padding-top: 66.8%; overflow: hidden; cursor: pointer;    transition: all 800ms ease-out 100ms;}
.entryBoxList .imageWrap{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.entryBoxList .image{position: absolute; top: 0; left: 0; width: 100%; height: 0;     padding-top: 66.8%; }

.entryBoxList a:after{ content: ''; display: block; position: absolute; z-index: 2; top: 0; left: 0;  width: 100%; height: 100%;
      mix-blend-mode: multiply;
      background: #ccc;
      opacity: .1;
       }


.entryBoxList .data{position: absolute; bottom: 0; left: 0;z-index: 3; width: 100%; height: auto; padding: 0.3em; background: rgba(255,255,255,0.8);transform: translate3d(0,100%,0);  transition: all var(--transition);}
.entryBoxList .data div:not(:last-of-type){ margin: 0 0 0em 0; }
.entryBoxList .data div:last-of-type{ padding-bottom: 0.2em; margin-bottom: 0; }

.entryBoxList .data div{ opacity: 0; transition: all 50ms cubic-bezier(.50, .0, .50, 1) 0ms;}

.entryBoxList .data div.category{ font-size: 0.8em; }
.entryBoxList .data div.type{ font-size: 0.8em; line-height: 1.2;}



.entryBoxList .data .category{ display: inline-block;}
.entryBoxList .data ul{ display: inline-block; margin: 0 0 0 1em;}
.entryBoxList .data ul li{display: inline-block; margin: 0 0 0 0.5em;}

body#top .entryBoxList .gridItem:nth-of-type(3n+2) a{ transition-delay: 0ms;} 
body#top .entryBoxList .gridItem:nth-of-type(3n+3) a{  transition-delay: 200ms;} 
body#top .entryBoxList .gridItem:nth-of-type(3n+1) a{  transition-delay: 400ms;} 
body#top .entryBoxList .gridItem::nth-of-type(1)  a{ transition-delay: 0ms;}

body#archive .entryBoxList .gridItem:nth-of-type(3n+1) a{  transition-delay: 0ms;} 
body#archive .entryBoxList .gridItem:nth-of-type(3n+2) a{ transition-delay: 200ms;} 
body#archive .entryBoxList .gridItem:nth-of-type(3n+3) a{  transition-delay: 400ms;} 




.imageWrap.grid{    grid-template-columns: 1fr 1fr;   grid-gap: 0px;}
.imageWrap.grid img{ width: 100%; height: auto;}


 .imageWrap.grid{ grid-template-columns: 1fr 1fr; }
  .imageWrap.grid div.gridItem{ background-color: #ccc; }
  .imageWrap.grid div.gridItem:before{ content: ''; display: block; width: 100%; height: 0; padding-top: 62%;}

 .imageWrap.grid.layout_full{ display: block;}
 .imageWrap.grid.layout_full .gridItem:before{ display: none;}
 
 
 .imageWrap.grid.layout_1-2 .gridItem:nth-of-type(1) {    grid-column: 1 / 3; grid-row: 1 / 2;}
  .imageWrap.grid.layout_1-2 .gridItem:nth-of-type(2) {    grid-column: 1 / 2; grid-row: 2 / 3;}
  .imageWrap.grid.layout_1-2 .gridItem:nth-of-type(3) {    grid-column: 2 / 3; grid-row: 2 / 3;}
   
   
 .imageWrap.grid.layout_2-1 .gridItem:nth-of-type(1) {    grid-column: 1 / 2; grid-row: 1 / 2;}
 .imageWrap.grid.layout_2-1 .gridItem:nth-of-type(2) {    grid-column: 2 / 3; grid-row: 1 / 2;}
 .imageWrap.grid.layout_2-1 .gridItem:nth-of-type(3) {    grid-column: 1 / 3; grid-row: 2 / 2;}
 
 
 .imageWrap.grid.layout_1-2-1 .gridItem:nth-of-type(1) {    grid-column: 1 / 3; grid-row: 1 / 2;}
 .imageWrap.grid.layout_1-2-1 .gridItem:nth-of-type(2) {    grid-column: 1 / 2; grid-row: 2 / 3;}
 .imageWrap.grid.layout_1-2-1 .gridItem:nth-of-type(3) {    grid-column: 2 / 3; grid-row: 2 / 3;}
  .imageWrap.grid.layout_1-2-1 .gridItem:nth-of-type(4) {    grid-column: 1 / 3; grid-row: 3 / 3;}
  
  .imageWrap.grid.layout_2-1-2 .gridItem:nth-of-type(1) {    grid-column: 1 / 2; grid-row: 1 / 2;}
 .imageWrap.grid.layout_2-1-2 .gridItem:nth-of-type(2) {    grid-column: 2 / 3; grid-row: 1 / 2;}
 .imageWrap.grid.layout_2-1-2 .gridItem:nth-of-type(3) {    grid-column: 1 / 3; grid-row: 2 / 3;}
  .imageWrap.grid.layout_2-1-2 .gridItem:nth-of-type(4) {    grid-column: 1 / 2; grid-row: 3 / 4;}
   .imageWrap.grid.layout_2-1-2 .gridItem:nth-of-type(5) {    grid-column: 2 / 3; grid-row: 3 / 4;}
 
 
 .imageWrap.grid.layout_1-2 .gridItem:nth-of-type(1) {grid-column: 1 / 2; grid-row: 1 / 2;}

.viewMore{ padding: 160px 0 0 0; text-align: center;}
    .viewMore.submitBtn{ padding: 40px 0 80px 0;}
.viewMore .btnArea{ display: inline-block; cursor: pointer;}
	.viewMore.col_2 .btnArea{ margin: 0 1em;}

.viewMore .btnArea.back{ }

.viewMore .btnArea{ height: 80px;}
.viewMore .btnArea a{ z-index: 2; pointer-events: none;  display: inline-block; width: 350px; height: 80px; border: solid 1px var(--color-btn); color: var(--color-btn); transition: var(--transition);}
	.viewMore .btnArea.active a{pointer-events: all;  }

.viewMore .btnArea a span{display: inline-block; position: absolute; top: 50%; left: 50%;     transform: translate(-50%,-50%); }
.viewMore .btnArea:hover a{ border: solid 1px var(--color-btn-hover);color: var(--color-btn-hover);}

.viewMore .btnArea input{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1;}

.submitBtn .btnArea a{  border: solid 1px var(--color-key); color: var(--color-key);}
	.submitBtn .btnArea.back a{color: var(--color-gray-normal);border-color: var(--color-gray-normal); pointer-events: all;}
	
.submitBtn .btnArea a:before{ content: ''; display: block; position: absolute;  left: 0; bottom: 0; width: 100%; height: 0%; background: var(--color-key);    transition: all .35s cubic-bezier(.165,.84,.44,1);}
	.submitBtn .btnArea.back a:before{background-color: var(--color-gray-normal);}

.submitBtn .btnArea:hover a{ color: #fff;}
.submitBtn .btnArea:hover a:before{height: 100%; }

.wpcf7-not-valid-tip{font-size: 0.8em !important; padding: 0.5em 0 0 0 !important;}
.wpcf7-response-output{ position: absolute; bottom: 0; left: 0; margin: 0 !important; transform: translate(0,0%); width: 100%; font-size: 0.8em !important; text-align: center !important;border:0 !important;padding: 0.5em !important; color: #fff !important; background: var(--color-key) !important;}


ol.numbers{ margin-bottom: 6rem; }
ol.numbers li{ list-style: inside;list-style-type: decimal; margin-bottom: 1.5em;}

ol.numbers ol{ padding: 1em 0 0 0;}
ol.numbers ol li{
  list-style-type:none;
  list-style-position:inside;
  counter-increment: cnt;
}
ol.numbers ol li:before{
  display: marker;
  content: "(" counter(cnt) ") ";
}


.entryDetail .entryBody div.dot,
.entryDetail .entryBody div.dotGray,
.entryDetail .entryBody div.dotKeycolor,
.entryDetail .entryBody div.dotWhite{
  position: relative;
  color: var(--color-key) ;
  display: block;
  margin-bottom: 0.78em;

}


.entryDetail .entryBody div.dot::before,
.entryDetail .entryBody div.dotGray::before,
.entryDetail .entryBody div.dotKeycolor::before,
.entryDetail .entryBody div.dotWhite::before{
  content: '・・・';
  display: block;
}

.entryDetail .entryBody div.dot.gray{
  border: solid 2px #c00;
}


.entryDetail .entryBody div.dotGray{color: #ccc !important;}
.entryDetail .entryBody div.dotKeycolor{ color: var(--color-key) !important;}
.entryDetail .entryBody div.dotWhite{color: #fff !important;}

.entryDetail .entryBody .bg{
position: relative;
padding: 4rem 0;
}

.entryDetail .entryBody .bg::before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: auto;
  transform: translate(-50%,0);
  
}

.entryDetail .entryBody .bg.gray::before{
background: #f8f8f8;
}

.entryDetail .entryBody .bg.keyColor::before{
  background: var(--color-key);  
}

.entryDetail .entryBody .bg.gray div.dot{
  
}

.entryDetail .entryBody .bg.gray  hr::after{
  background: var(--color-key);  
}

.entryDetail .entryBody .bg.keyColor{

  color: #fff;
}
.entryDetail .entryBody .bg.keyColor div.dot{
  color: #fff;
}
.entryDetail .entryBody .bg.keyColor  hr::after{
  background: #fff;  
}

.entryDetail .entryBody hr{
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 2em;
}

.entryDetail .entryBody hr::after{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-key);  
}

.entryDetail .entryBody hr.gray::after{

  background: #ccc !important;  
}

.entryDetail .entryBody hr.keycolor::after{

  background: var(--color-key) !important;  
}

.entryDetail .entryBody hr.full{
  overflow: visible;
}
.entryDetail .entryBody hr.full::after{
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translate(-50%,0);

}




/* media
----------------------------------------------- */
.onlyPC{ display:inline-block !important;}
.onlyPC_Block{ display:block !important;}
.onlySP{ display:none !important;}
.onlySP_Block{ display:none !important;}

@media screen and (min-width: 750px) {    

	.entryBoxList .gridItem:hover .data {    transition: all var(--transition); transform: translate3d(0,2px,0);}
	.entryBoxList .gridItem:hover .data div{ transition: all 200ms cubic-bezier(.50, .0, .50, 1) 300ms; opacity: 1;}

}


@media screen and (max-width: 750px) {    
    
    .onlyPC{ display:none !important;}
    .onlySP{ display:inline-block !important;}

	.onlyPC_Block{ display:none !important;}
	.onlySP_Block{ display:block !important;}


	.touchDevice .entryBoxList .gridItem a{ height: auto; padding: 0; text-decoration: none !important;}
	.touchDevice .entryBoxList .imageWrap{position: relative;}
		.touchDevice .entryBoxList .imageWrap .image{position: relative;}
		.touchDevice .entryBoxList .data{ position: relative;    transform: translate3d(0,0,0); display: none;}
		.touchDevice .entryBoxList .data div{ opacity: 1;}
			
			.viewMore .btnArea { height: 15vw; }
	.viewMore .btnArea a{ width: 60vw;  height: 15vw; font-size: 0.8rem; white-space: nowrap;}
	        
	        .viewMore{    padding: 20vw 0 0 0;}
	        .viewMore.submitBtn{    padding: 10vw 0 10vw 0;}
	        .grid {
		    grid-template-columns: 1fr;
		    grid-gap: 5vw;
		}


		
		body.page.contact .entryBody article.message{ padding-bottom: 10vw; margin-bottom: 10vw !important; border-bottom: solid 1px var(--color-key);}
		

body#top .entryBoxList .gridItem:nth-of-type(2n+1) a{ transition-delay: 200ms; } 
body#top .entryBoxList .gridItem:nth-of-type(2n+2) a{  transition-delay: 0ms;} 
body#top .entryBoxList .gridItem::nth-of-type(1)  a{ transition-delay: 0ms;}

body#archive .entryBoxList .gridItem a{  transition-delay: 0ms !important;} 



}