@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);}



.imageWrap{ display: flex; flex-wrap: wrap;}
.imageWrap div{ width: 600px; margin: 0 1% 1em; }
.imageWrap div img{ width: auto; height: auto;}


.flow{}
.flow dl{}
.flow dl dl{ padding: 3em; border: solid #666; background: #ddd;}


.flex{ display: flex; flex-wrap: wrap;     justify-content: space-between; align-items: flex-start; }
.flex .flexItem{ width: 45%;}
.flex.col_3 .flexItem{ width: 30%;}

.grid{ display: grid; grid-template-columns: minmax(auto, 200px) auto; grid-gap:1em; }
.grid .gridItem{}


dl.entryList{grid-template-columns: auto 1fr; grid-gap: 1em; margin-bottom: 5em;}
dl.entryList dt,
dl.entryList dd{ }
dl.entryList dt{ white-space: nowrap; padding: 0.25rem 0 0 0; margin: 0; font-weight: normal; font-size: 0.8em;}
dl.entryList dd{ padding: 0;margin: 0; }

.wfull{ width: 100%; height: auto;}
.hfull{ width: auto; height: 100%;}
.narrowFrame{ width: 90%; max-width: 900px; margin-left: auto; margin-right: auto;  border: solid 0px #c00; }


.visualWrap{}
.visualWrap:after{ content: ''; display: block; width: 100%; height: 0; padding-top: var(--box-ratio);}
.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;}

.imageMenu{ margin: auto;}
.imageMenu ul{ display: flex; justify-content: space-between;  flex-wrap: wrap;}
.imageMenu ul li{ text-align: center; width: 31%; margin:0 1% 2%; position: relative;}

.imageMenu ul li a .image .line{position: absolute; top: 0; left: 0; right: 0; bottom:0;}
.imageMenu ul li a .image .line::after{ content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom:0;border: solid 10px #037b00; opacity: 0; transition: all 250ms ease; }
.imageMenu ul li a:hover .image .line::after{ opacity: .5;}




.imageMenu .image{ background: #ccc;}
.imageMenu .image:before{ content: ''; display: block; width: 100%; height: 0; padding-top: var(--box-ratio); }
.imageMenu span{ font-size: 1.2rem; display: inline-block; padding-top: 0.2em;}

.profileData{ display: flex;}
.profileData .flexItem{ width: 46%;}

.profileData dl{}
.profileData dl dt{ width: 100px;}
.profileData dl dd{ flex: 1; padding: 0 0 0 1em;}
.profileData .image{ width: 100%; height: 0; padding-top: 100%; background: #ccc;}
.profileData h3{ margin-bottom: 1em; font-size: 1.2rem;}
.profileData h3 small{ display: inline-block; font-size: 0.6em; transform: translate(0,-15%);}
.profileData p{ font-size: 0.8em;}


.btnWrap{ text-align: center;}
.btnWrap .btnBox{ display: inline-block;}
.btnWrap .btnBox a{ display: inline-block; }
.btnWrap .btnBox a:hover{ text-decoration: none;}
.btnWrap .btnBox .item{ display: flex; align-items: center; justify-content: center;  padding: 1em 2em; border-radius: 2rem; }
.btnWrap .btnBox .item span{}



.flowUnit{ width: 80%; max-width: 700px; margin: auto;}
.flowUnit dl{ flex-wrap: wrap; display: flex;}
.flowUnit dt{width: 50%; display: flex; align-items: center; justify-content: center;margin-bottom: 2rem; font-size: 1.5rem; font-weight: bold;}
.flowUnit dt span{ display: inline-block}
.flowUnit dd {  width: 50%;margin-bottom: 2rem; border-left: solid 2px #aaa;  display: flex; align-items: center; }
.flowUnit ul{ margin: 0; padding-left: 3rem; font-size: 1.2rem;}
.flowUnit ul li{ padding: 0.2rem}

.textLink{ transition: all 250ms ease; padding: 0.2em 0;}
.textLink:hover{ background: #f2f2f2;}

.bgBlackBtn{ transition: all 250ms ease;background: #000;color: #fff !important; }
.bgBlackBtn:hover{background: #037b00;}

.naviToCategoryTop{ text-align: center; margin-top: 50px;}
.naviToCategoryTop a{ display: inline-block;padding: 1rem 2rem; font-weight: 700; border-radius: 2rem; }

.boxList{ display: flex; justify-content: center; flex-wrap: wrap; }

.boxList .boxItem{ width: 31%; margin: 0 1% 3%;}
.boxList .boxItem dt{ position: relative; margin-bottom: 1rem;}
.boxList .boxItem dt::before{ content: ''; display: block; width: 100%; height: 0; padding-top: var(--box-ratio);}
.boxList .boxItem dd{ font-size: 0.9rem;}

.boxList .boxItem h3{ background: #fff; display: inline-block; padding: 0.5em; width: auto; margin: 0; position: absolute; bottom: 0; left: 0; z-index: 2; font-size: 1.2rem; font-weight: bold; white-space: nowrap; }
.boxList .boxItem .image{ display: block; background: #ccc; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.boxList .boxItem p.caption{position: absolute; top: 0; left: 0; transform: translate(0,-110%); z-index: 3;}






.entryBoxList{  grid-gap:30px 20px; }
.entryBoxList .gridItem{ overflow: hidden;}
.entryBoxList .gridItem a{ display: block;width: 100%; height: auto; overflow: hidden; cursor: pointer;    transition: all 800ms ease-out 100ms;}
.entryBoxList .imageWrap{position: relative; top: 0; left: 0; width: 100%; height: 0; padding-top: var(--box-ratio);overflow: hidden; min-height: 100%;}
.entryBoxList .image{position: absolute; top: 0; left: 0; width: 100%; height: 0;     padding-top: var(--box-ratio); margin: 0;}

.entryBoxList .gridItem a .image .line{position: absolute; top: 0; left: 0; width: 100%; height:100%; margin: 0 !important;}
.entryBoxList .gridItem a .image .line::after{ content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom:0;border: solid 10px #037b00; opacity:0; transition: all 250ms ease; }
.entryBoxList .gridItem:hover .image .line::after{ opacity: .5;}

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


.entryBoxList .data{position: relative;  width: 100%; height: auto; padding: 0.3em; background: rgba(255,255,255,0.8);transform: translate3d(0,0%,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: 1; transition: all 50ms cubic-bezier(.50, .0, .50, 1) 0ms;}
.entryBoxList .data div.meta{ line-height: 1rem;display: none;  }
.entryBoxList .data div.date{ font-size: 1.1rem; display: none;  }
.entryBoxList .data div.category{ font-size: 0.8em; }

.entryBoxList .data div.title{ font-size: 1.1rem;  }
.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 0em;}
.entryBoxList .data ul li{display: inline-block; margin: 0 0.5 0 0em;}

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:var(--box-ratio);}

 .imageWrap.grid.layout_full{ display: block;}
 .imageWrap.grid.layout_full .gridItem:before{ display: none;}

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


.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) ") ";
}


.newMark{ display: inline-block; line-break: 1; color: #c00; font-size: 0.6rem; margin: 0 0.3em; transform: translate(10%,-25%);}

/* 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 .data{ }
		.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;}



}