@charset "UTF-8";

:root {

    --color-key: #CC9900;
    --color-key-light: #ffefef;
    
    --color-gray-normal: #cccccc;
    --color-gray-light: #f2f2f2;
    --color-gray: #424242;
    
    

    
     --color-btn: #DCDCDC;
      --color-btn-hover: #BBBBBB;
    
    
    --transition: 300ms cubic-bezier(.50, .0, .50, 1);
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 600;


}

.keyColor{ color: var(--color-key);}
.keyColorBg{ background-color: var(--color-key);}

*{ border-color: var(--color-key); }


/*
NotoSans
    @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
    .font_noto{ font-family: 'Noto Sans JP';}

Mplus 1p
    @import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
    .font_noto{ font-family: 'Mplus 1p';}

Rounded Mplus 1c
    @import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
    .font_noto{ font-family: 'Rounded Mplus 1c';}

Hannari Min
    @import url(https://fonts.googleapis.com/earlyaccess/hannari.css);
    .font_noto{ font-family: 'Hannari';}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

YakuhanJP : NotoSans Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp-noto.min.css);
    body{  font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

YakuhanJP : YuGothic Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp-narrow.min.css);
    body{ font-family: YakuHanJP_Narrow, "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;}

YakuhanJP : HiraginoGothic Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp.min.css);
    body{ font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

YakuhanJP : NotoSerif Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp-noto.min.css);
    body{  font-family: YakuHanMP_Noto, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;}

YakuhanJP : YuMin Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp.min.css);
    body{ font-family: YakuHanMP, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;}

YakuhanJP : HiraginoMin Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp.min.css);
    body{ font-family: YakuHanMP, "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", YuMincho, serif;}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

YakuhanJP : M PLUS Rounded 1c Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanrp.min.css);
    body{  font-family: YakuHanRP, "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;}

*/



/*/////////////////////////
base layout　
//////////////////////////*/
html,body {
    width: 100%;
    font-size: 16px;
    background: #fff;
}
body {
    font-family:YakuHanJP,"Poppins", 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;



    width: 100%;
    text-align: left;
    overflow-x: hidden;
    overflow-y: scroll;
    letter-spacing: 0.0em;


    -webkit-overflow-scrolling : touch;
}
body,a, a:link,a:hover, a:active ,a:visited {
        color: var(--color-key);
}

body.loadingFinish{}

body.fixed{ overflow-x:hidden; overflow-y: scroll;}
body.fixed #container{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1;}

.scrollMoveing #container{ pointer-events: none; }


html.touchDevice,
.touchDevice body{ font-size: 15px;}


#container{ position:relative; opacity: 0; }


#base{ position:relative;}


a, a:link, a:visited {
    text-decoration: underline;
    outline: 0;
}
a:hover, a:active {
    text-decoration: underline;
}
a.noline, a.noline:link {
    text-decoration: none !important;
}

::placeholder{
  color:#ccc
}



/* tags
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    padding: 0;
    font-weight: var(--font-weight-normal);
    margin: 0 auto 20px auto;
    display: block;
    line-height: 1;
     font-weight: var(--font-weight-normal);
}

h1{    font-size: 2.5rem; line-height: 1.3;}
h2{    font-size: 2rem;line-height: 1.3;}
h3{    font-size: 1.75rem;line-height: 1.3;}
h4{    font-size: 1.5rem;}
h5{    font-size: 1.25rem;}
h6{    font-size: 1.1rem;}

section{ position: relative;width: 100%; padding:0; margin:0 auto 0px auto; }


p {    margin-bottom: 1em;}
p:last-child{}
p:nth-of-type(1){}

ul{ margin-bottom: 2em;}
ul li{}
li:first-child         {/* 親の最初にあったら*/}
li:last-child         {/* 親の最後にあったら*/}
li:nth-of-type(1)     {/* n番目*/}
li:nth-child(odd)     {/* 奇数*/}
li:nth-child(even)     {/* 偶数*/}


button{ border: 0;}


/* transition
----------------------------------------------- */
*:before,
*:after,
.transition{transition: all var(--transition);}

/* header
----------------------------------------------- */
#siteHeader{ width: 100%; height: 162px; }
.pcDevice #siteHeader{ transition: all 1000ms ease 300ms;}

#siteHeader #siteLogo{ position: absolute; bottom: 0; left: 68px; margin: 0;}
#siteHeader .link{ position: absolute; bottom: 0; right: 116px; width: auto; height: auto; font-weight: var(--font-weight-bold);}

.logoImage{width: 280px; height: auto; }

#fixedHeader{ width: 100%;  height: 80px; position: fixed; top: 0; left: 0; z-index: 10; opacity: 0;background: rgba(255,255,255,0.9); transform: translate3d(0,-100%,0);  
	 transition: all 300ms cubic-bezier(.50,.0,.50,1) 0ms; }

#fixedHeader .logo{ transition: all 200ms cubic-bezier(.50,.0,.50,1) 0ms; opacity: 0;}

/*
#fixedHeader2{ width: 100%;  height: 134px; position: fixed; top: 0; left: 0; z-index: 10; background: rgba(255,255,255,0.9); transform: translate3d(0,-100%,0);
	transition: 
		transform 5000ms ease-out 300ms , 
		opacity 5000ms ease-out;
	}
*/

body.headerActive #fixedHeader{  transition: all 500ms cubic-bezier(.50,.0,.50,1) ; transform: translate3d(0,0,0); opacity: 1;  }
body.headerActive #fixedHeader .logo{  transition: all 100ms ease ; opacity: 1; }

body.headerActive #siteHeader{  }

body.headerActive #siteHeader #siteLogo,
body.headerActive #siteHeader .loginBtn,
body.headerActive #siteHeader .menuBtn{ transition: all 500ms ease 0ms;  opacity: 0;}


#fixedHeader .logo{ position: absolute; top:50%; left: 68px; margin: 0; transform: translate(0,-50%);}



.menuBtn{ width:60px;  height: 60px; position: absolute; top: 10px; right: 40px; z-index: 20;cursor: pointer; }
.menuBtn:before,
.menuBtn:after{ content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px; height: 2px; background:  var(--color-key);transition: all var(--transition);}
.menuBtn:before{ margin-top: -5px;}
.menuBtn:after{ margin-top: 5px;}

#fixedMenu .menuBtn:before{ margin: 0; transform: translate(-50%,-50%) rotate(-45deg); }
#fixedMenu .menuBtn:after{ margin: 0; transform: translate(-50%,-50%) rotate(45deg); }

.loginBtn{ width:60px;  height: 60px; position: absolute; top: 10px; right: 102px; z-index: 14;cursor: pointer;  }
.loginBtn:after{ content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 22px; height: 22px; background:url(./img/common/icon_login.svg) no-repeat;}
.loginBtn.deactive{ pointer-events: none; }






#fixedMenu{ position: fixed; top: 0; right: 0; z-index: 15; width: 100%; height: 100%; pointer-events: none;}
#fixedMenu:before{ content: ''; display: block;position:absolute; top: 0; right: 0;z-index: 16;width: 100%; height: 100%; background: rgba(66,66,66,0); transition: all 500ms cubic-bezier(.50, .0, .50, 1);}

#fixedMenu .closeArea{ position:absolute; top: 0; left: 0;width: 100%; height: 100%;z-index: 17;}


#fixedMenu .activeArea{ position:absolute; top: 0; right: 0;z-index: 20;width: 450px; height: 100%; background: #000;transform: translate3d(100%,0,0);}

#fixedMenu .activeArea{ padding: 120px 0 0 0;}

#fixedMenu .logoImage{ display: none;}

#fixedMenu .activeArea ul {}
#fixedMenu .activeArea ul li{ margin: 0; padding: 0; font-weight: var(--font-weight-bold); overflow: hidden;}
#fixedMenu .activeArea ul li a{ display: block; padding: 15px 85px; text-decoration: none !important; color: #cccccc;}

#fixedMenu .activeArea ul li a:before {
    content: '';
    display: block;
    width: 300px;
    height: 3px;
    background:  var(--color-key);
    position: absolute;
    right: 150%;
    top: 50%;
    transform: translate(-10px,-70%);
    transition: all 600ms cubic-bezier(.59,.74,0,1);
}

#fixedMenu.top .activeArea ul li:nth-of-type(1) a:before,
#fixedMenu.projects .activeArea ul li:nth-of-type(1) a:before,
#fixedMenu.about .activeArea ul li:nth-of-type(2) a:before,
#fixedMenu.news .activeArea ul li:nth-of-type(3) a:before,
#fixedMenu.contact .activeArea ul li:nth-of-type(4) a:before{width: 30px; right: 83%;}
#fixedMenu .activeArea ul li a span{ display: none;}

body.home #fixedMenu .activeArea ul li.projects  a,
body.projects #fixedMenu .activeArea ul li.projects  a,
body.about #fixedMenu .activeArea ul li.about  a,
body.news #fixedMenu .activeArea ul li.news  a,
body.contact #fixedMenu .activeArea ul li.contact  a,
body.login #fixedMenu .activeArea ul li.login  a{ color: var(--color-key);}

body.home #fixedMenu.defaultActive .activeArea ul li.projects  a:before,
body.projects #fixedMenu.defaultActive .activeArea ul li.projects  a:before,
body.about #fixedMenu.defaultActive .activeArea ul li.about  a:before,
body.news #fixedMenu.defaultActive .activeArea ul li.news  a:before,
body.login #fixedMenu.defaultActive .activeArea ul li.login  a:before{ opacity: 1;}


#fixedMenu .activeArea ul li.link{
  padding: 15px 85px;
  display: flex;
}

#fixedMenu .activeArea ul li.link a{padding: 0;
  
  width: 1.5em;
  height: 1.5em;
  position: relative;
  
}
#fixedMenu .activeArea ul li.link a::before{ display: none;}

#fixedMenu .activeArea ul li.link a.be:after{ content: ''; display: inline-block;position:relative; top: 0; left: 0;width: 100%; height: 100%; background: url(./img/common/icon_be_black.svg) no-repeat #ccc; border-radius: 3px;     transition: all 600ms cubic-bezier(.59,.74,0,1);}
        #fixedMenu .activeArea ul li.link a.be:hover:after{ background-color:var(--color-key); }
        
#fixedMenu .activeArea ul li a:hover:before{opacity: 1;}
#fixedMenu .activeArea ul li a:hover{ color: var(--color-key); }


#fixedMenu .activeArea ul li.login a:after{ content: ''; display: inline-block; width: 20px; height: 20px;  background:url(./img/common/icon_login.svg) no-repeat; background-size: contain;  margin-left: 0.5em; transform: translate(0,25%);}

#fixedMenu .activeArea ul li.deactive a{ pointer-events: none; opacity: .5;}



#fixedMenu .activeArea ul li.link a.instagram{ margin-left: 25px;}
#fixedMenu .activeArea ul li.link a.instagram:before{ content: ''; display: inline-block;position:absolute; top: 0; left: 0;width: 100%; height: 100%; background: url(./img/common/icon_instagram_gray.svg) no-repeat; border-radius: 3px;     transition: all 600ms cubic-bezier(.59,.74,0,1);
    right: auto;
transform: translate(0px, 0%);
}

#fixedMenu .activeArea ul li.link a.instagram:after{ content: ''; display: inline-block;position:relative; top: 0; left: 0;width: 100%; height: 100%; background: url(./img/common/icon_instagram_color.svg) no-repeat; border-radius: 3px;     transition: all 600ms cubic-bezier(.59,.74,0,1); opacity: 0;
    right: auto;
  transform: translate(0px, 0%);
  }


#fixedMenu .activeArea ul li.link a.instagram:hover:after{  opacity: 1; }





body.menuOpen #fixedMenu{ pointer-events: all;}
body.menuOpen #fixedMenu .activeArea{transform: translate3d(0,0,0);}
body.menuOpen #fixedMenu:before{ background: rgba(66,66,66,0.5); }

/* footer
----------------------------------------------- */

#siteFooter{font-size: 0.8rem; padding-top: 120px; color: #ccc; }
#siteFooter a{ color: #ccc;}
	
body#top.home #siteFooter,
body.page #siteFooter,
body#archive #siteFooter{padding-top: 0px;}

#siteFooter { padding: 0 70px;}
#siteFooter .global_inner{ padding-top: 50px; min-height: 250px; border-top:solid 1px #DFDCEA; max-width: none; width: 100%; }
#siteFooter .myName{margin-bottom: 20px; width: 196px; font-weight: var(--font-weight-bold); line-height: 1;}
#siteFooter .myAddress{ margin-bottom: 40px;}

#siteFooter .linkWrap{ position: absolute; top: 40px; right: 0; width: auto; height: 30px; display: flex;}

#siteFooter .link{ width: 30px; height: 30px; border-radius:10%; }
#siteFooter .link a{ display: block; position: absolute; top: 0px; right: 0; width: 100%; height:0; padding-top:100%;overflow: hidden;  transition: all 600ms cubic-bezier(.59,.74,0,1); }

#siteFooter .link a span{ display: none;}

#siteFooter .link a::before,
#siteFooter .link a::after{
  content: '';
 display: block;
  position: absolute;
   top: 0px; 
   left: 0; 
   width: 100%;
    height:100%;
    overflow: hidden; 
     transition: all 600ms cubic-bezier(.59,.74,0,1); 
     
}

#siteFooter .link a::after{
  opacity: 0;
}

#siteFooter .link.be a{  background:url(./img/common/icon_be.svg) no-repeat #ccc; }
#siteFooter .link.be a:hover{background-color: var(--color-key);}

#siteFooter .link.instagram {margin-left: 30px;}
#siteFooter .link.instagram a::before{   background:url(./img/common/icon_instagram.svg) no-repeat; }
#siteFooter .link.instagram a::after{   background:url(./img/common/icon_instagram_color.svg) no-repeat;}
#siteFooter .link.instagram a:hover::after{
  opacity: 1;
}


#siteFooter .goPageTop{ position: absolute; top: 130px; right: -10px; width: 60px; height: 60px;  color: var(--color-key); cursor: pointer }
#siteFooter .pageTop{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 30px; height: 40px; border-radius:10%;  color: var(--color-key); }
#siteFooter .pageTop:before{ content: ''; display: inline-block; width: 20px; height: 20px; border: solid 2px  var(--color-key); border-bottom: 0; border-right: 0; position: absolute; top: 0;  left: 50%; transform: translate(-50%,5%) rotate(45deg);}

#siteFooter span{ display: inline-block;  position: absolute; bottom: 0;  left: 50%; transform: translate(-50%,0);font-weight: var(--font-weight-normal); font-size: 1.2em;}



/* copy
----------------------------------------------- */
#copyright{ position: fixed; top: 50%; right:0.5rem; z-index: 20;   width: 1rem; height: 1rem; font-size: 8px;}
#copyright .inWrap{ position: absolute;top: 50%; left:50%;  transform-origin: center;   transform: translate(-50%,-50%) rotate(90deg); white-space: nowrap;}


/* section
----------------------------------------------- */
section{ width: 100%; }
section .global_inner{ margin: auto; width: 77%; max-width: 1600px; }
        
section#archiveBoxList{ margin-bottom: 200px;}
        	body#archive section#archiveBoxList{ margin-bottom: 150px;}
        
/* top
----------------------------------------------- */
.topMessage{ padding-top: 2rem;  font-weight: var(--font-weight-light); margin-bottom: 30px;}
body#top #mainVisual{ margin-bottom: 60px;}

.entryBoxList{}
.entryBoxList.listHeaderFull .gridItem:nth-of-type(1) {  grid-column: 1 / 4; }
.entryBoxList.listHeaderFull .gridItem:nth-of-type(1) .data{ padding: 1.0em 0;}

/* archive
----------------------------------------------- */
body#archive .archiveHeader{ margin-bottom: 80px; height: auto}
body#archive .archiveHeader span{ display: inline-block; position: absolute; top: 50%; left: 50%;
     transform: translate(-50%,-50%); font-size: 3em}

body#archive #archiveBoxList{padding-top: 90px;}

/* single
----------------------------------------------- */
body.single #mainVisual{ margin-bottom: 80px; padding-top: 90px;}
body.single-projects .entryDetail .entryBody{margin-bottom: 250px !important;}




.entryDetail{padding-top: 80px; font-weight: var(--font-weight-light);}

    
    
.entryDetail .entryHeaderImage{ margin-bottom: 5rem;}
.entryDetail .entryHeaderImage img{ width: 100%; height: auto;}
    
.entryDetail .entryTitle{ margin-bottom: 1.5em;}
	body.projects .entryDetail .entryTitle{ }
.entryDetail .entryTitle h2.title{  font-size: 2.5rem; margin-bottom: 0.5rem; font-weight: var(--font-weight-normal);}
.entryDetail .entryTitle p.jp{ font-size: 0.9rem; margin-bottom: 0;font-weight: var(--font-weight-normal);}

.entryDetail .entryMeta{ display: inline-block; margin-bottom:60px; font-size: 0.9rem; line-height: 1;}

.entryDetail .entryMeta .flex{ display: flex;}
.entryDetail .entryMeta .date{}
.entryDetail .entryMeta .category{margin-left: 2em; font-style: italic;font-size: 0.8rem; }
.entryDetail .entryMeta .category ul{ margin: 0;}
.entryDetail .entryMeta .category ul li{ display: inline-block; margin-right: 0.5em;}
.entryDetail .entryMeta .category ul li:after{ content: ','; display: inline-block; margin: 0  0 0 0.5em;}
.entryDetail .entryMeta .category ul li:last-of-type:after{ display: none;}
.entryDetail .entryMeta .category ul li a{ text-decoration: none; pointer-events: none;}

.entryDetail .entryBody{ margin-bottom: 280px;}


.entryDetail .entryBody .project_read,
.entryDetail .entryBody .imageWrap,
.entryDetail .entryBody .titleWrap,
.entryDetail .entryBody .bodyWrap,
.entryDetail .entryBody .project_ex{  border: dotted 0px #f30;}

.entryDetail .entryBody .textWrap{}
.entryDetail .entryBody .textWrap div:last-of-type p:last-of-type{ margin-bottom: 0;}


.entryDetail .entryBody .project_read{ margin-bottom: 80px}
.entryDetail .entryBody .imageWrap{ margin-bottom: 80px}
.entryDetail .entryBody .titleWrap{ margin-bottom: 60px}
.entryDetail .entryBody .bodyWrap{ margin-bottom: 60px}
.entryDetail .entryBody .exWrap{ margin-bottom: 80px}

	.entryDetail .entryBody .titleWrap .jp{    font-size: 0.9rem; margin-bottom: 0; line-height: 1.7;}


.entryDetail .entryBody .read{ margin-bottom: 40px !important;}
.entryDetail .entryBody .midashi{ margin-bottom: 30px !important;}

.entryDetail .entryBody h3{ font-size: 2.3em; margin-bottom: 0.5rem;}

.entryDetail .entryBody h4{ border-bottom: solid 1px var(--color-key); font-size: 1em; font-weight: var(--font-weight-bold); padding-bottom: 1em; margin-bottom: 2.5em;}

.entryDetail .entryBody .jp{ font-size: 0.8em; line-height: 2.15; font-weight: var(--font-weight-normal);}


.entryDetail .entryBody article{ margin-bottom: 1em;}
.entryDetail .entryBody article p:last-child {  margin-bottom: 0;}

.entryDetail .entryBody p,
body.page .entryDetail .entryBody .textWrap div:last-of-type p:last-of-type{ margin-bottom: 1em;}


.entryDetail .entryBody strong{}
.entryDetail .entryBody em{}
.entryDetail .entryBody small{}
.entryDetail .entryBody blockquote{ background: rgba(0,0,0,0.03); margin: 0 2em 2em 2em; padding: 1em;}
.entryDetail .entryBody blockquote  p:last-child{ margin-bottom: 0 !important;}
.entryDetail .entryBody a{}
.entryDetail .entryBody ul{ list-style: disc; padding-left: 1.5em; margin-bottom: 2em;}
.entryDetail .entryBody ul li{ line-height: 1.8;margin-bottom: 1em;}
.entryDetail .entryBody ol{ list-style: decimal; padding-left: 1.5em;margin-bottom: 2em;}
.entryDetail .entryBody ol li{ line-height: 1.8;margin-bottom: 1em;}

#single .entryDetail .entryBody dl{ list-style: decimal; padding-left: 1.5em;margin-bottom: 2em;}
#single .entryDetail .entryBody dl dt{ font-size: 1.2em;}
#single .entryDetail .entryBody dl dd{ margin-bottom: 1em; line-height: 1.5;}

.entryDetail .entryBody .spacer{ border: dashed 0px #369; color: #369; font-size: 0.8em; margin-bottom: 1rem;}
/* .entryDetail .entryBody .spacer{ border: dashed 1px #369; color: #369; font-size: 0.8em; margin-bottom: 1rem;} */
.entryDetail .entryBody .spacer_s{ height: 3rem;}
.entryDetail .entryBody .spacer_m{ height: 6rem;}

.entryDetail .entryBody .spacer:before{  display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

/* .entryDetail .entryBody .spacer_s:before{ content: '余白設定Sサイズ（プレビュー用に点線を表示。公開時は無し）'}
.entryDetail .entryBody .spacer_m:before{ content: '余白設定Mサイズ（プレビュー用に点線を表示。公開時は無し）'} */


#single .entryDetail .entryBody  h3{ font-size: 2.5rem;margin-bottom: 0.15em; margin-top: 1em; padding:0 0 0 0; line-height: 1.3;  font-weight: var(--font-weight-normal); border: 0;}
#single .entryDetail .entryBody  h4{ font-size: 2.0rem;margin-bottom: 0.35em; margin-top: 1em; padding: 0 0 0 0; line-height: 1.3; font-weight: var(--font-weight-normal); border: 0;}
#single .entryDetail .entryBody  h5{ font-size: 1.6rem;margin-bottom: 0.2em; margin-top: 1em; padding:0 0 0 0; line-height: 1.3;   font-weight: var(--font-weight-normal); border: 0;}
#single .entryDetail .entryBody  h6{ font-size: 1.2rem;margin-bottom: 0.2em;  margin-top: 1em;padding:0 0 0 0; line-height: 1.3;   font-weight: var(--font-weight-normal); border: 0;}


#single.projects .entryDetail .entryBody  h3{  font-size: 2.5rem;    margin-bottom: 0.5rem; }
#single.projects .entryDetail .entryBody  h4{ font-size: 2.0rem;margin-bottom: 0.5em; }
#single.projects .entryDetail .entryBody  h5{ font-size: 1.6rem;margin-bottom: 0.2em; }
#single.projects .entryDetail .entryBody  h6{ font-size: 1.2rem;margin-bottom: 0.2em;}



#single .entryDetail .entryBody .langWrap > h3,
#single .entryDetail .entryBody .langWrap > h4,
#single .entryDetail .entryBody .langWrap > h5,
#single .entryDetail .entryBody .langWrap > h6{ margin-top: 0 !important;}

.entryDetail .entryNavi{ padding: 25px 0; margin-bottom: 90px;border-top: solid 1px var(--color-key);border-bottom: solid 1px var(--color-key); text-align: center;}
	body.single .entryDetail .entryNavi{ display: none;}

.entryDetail .entryNavi .inWrap{ display:flex; margin: auto;justify-content: center;}
.entryDetail .entryNavi .inWrap > div{ width: 30px; height: 30px;}
.entryDetail .entryNavi .top{ margin: 0 90px;}

.entryDetail .entryNavi .prev,
.entryDetail .entryNavi .next{}

.entryDetail .entryNavi a,
.entryDetail .entryNavi .nolink{ display: block;  position: absolute; top: 0; left: 0; width: 100%; height: 0%; padding-top: 100%; overflow: hidden;}
.entryDetail .entryNavi .top a{ background: url(./img/common/navi_index.svg) center center no-repeat; background-size: contain;}



.entryDetail .entryNavi .prev a:before,
.entryDetail .entryNavi .next a:before,
.entryDetail .entryNavi .prev .nolink:before,
.entryDetail .entryNavi .next .nolink:before{content: ''; display: inline-block; width: 20px; height: 20px; border: solid 2px  var(--color-key); border-bottom: 0; border-right: 0; position: absolute; top: 50%;  left: 50%;    }

.entryDetail .entryNavi .prev a:before,
.entryDetail .entryNavi .prev .nolink:before{ transform: translate(-25%,-50%) rotate(-45deg);}
.entryDetail .entryNavi .next a:before,
.entryDetail .entryNavi .next .nolink:before{transform: translate(-75%,-50%) rotate(135deg);}

.entryDetail .entryNavi .deactive{ opacity: .2; pointer-events: none;}
.entryDetail .entryNavi .deactive a:before,
.entryDetail .entryNavi .deactive .nolink:before{ border-color: #ccc !important;}


.entryDetail .entryNavi .prev{}
.entryDetail .entryNavi .next{}

.entryDetail .entryNavi .deactive{ opacity: .5;}


.entryRelated{ margin-bottom: 125px;}
.entryRelated h4{ font-size: 1.0rem; font-weight: var(--font-weight-bold);}

.entryRelated h4 .listLink{ display: inline-block; margin-left: 1em; padding-left: 1em; width: 30px; border-left:solid 1px #ccc; }

.entryRelated h4 .listLink a{ display: block; width: 100%; height: 0; padding-top: 100%; overflow: hidden; background: url(./img/common/navi_index.svg) center center no-repeat; background-size: contain;}





/* page
----------------------------------------------- */
body.page .entryDetail .entryBody{margin-bottom: 100px;}
body.page .entryDetail .entryBody article{ margin-bottom: 160px;}
body.page .entryDetail .entryBody article:last-child{ margin-bottom: 0px;}

body.page .entryDetail .entryBody .read{ margin-bottom: 2rem;}
body.page .entryDetail .entryBody h3{font-size: 2.5rem; }    
body.page .entryDetail .entryBody .midashi h3{ font-size: 1.6em;}
    #so_we_design{ margin-bottom: 90px;}
    #aboutGallery{ margin-bottom: 160px;}
   
    
body.page.about .profile{}
body.page.about .profile .role{ margin-bottom: 0.2rem;}
body.page.about .profile .myname{  font-size: 1.6em;}
body.page.about .profile .jp .myname{  font-size: 2em;}

body.page.about .profile .grid{ grid-gap: 0.5rem 3rem;}
body.page.about .profile .grid .gridItem:nth-of-type(1) {   grid-column: 1 / 2; grid-row: 1 / 2;}
body.page.about .profile .grid .gridItem:nth-of-type(2) {   grid-column: 1 / 2; grid-row: 2 / 3;}
body.page.about .profile .grid .gridItem:nth-of-type(3) {   grid-column: 2 / 3; grid-row: 1 / 2;}
body.page.about .profile .grid .gridItem:nth-of-type(4) {   grid-column: 2 / 3; grid-row: 2 / 3;}

body.page.about article.content .area_1{ margin-bottom: 3em;}
body.page.about article.content .area_2{margin-bottom: 8em;}


/* privacy
----------------------------------------------- */
body#privacypolicy .entryBody p:first-child{ margin-bottom: 2em;}


/* contact
----------------------------------------------- */
body.page.contact .entryBody{}

body.page.contact .entryBody article.message{ margin-bottom: 6rem;}
body.page.contact .entryBody .read{ display: block; overflow: hidden; grid-template-columns: minmax(auto, 580px) auto; grid-gap:3%; margin-bottom: 4rem;}
body.page.contact .entryBody .read h3{ float:left;display: grid; align-items: center; margin: 0;   font-size: 2.8vw; height: 10vw;  padding-right: 3vw; width: 100%;}
body.page.contact .entryBody .read .photo{ float:left;display: block;  }
body.page.contact .entryBody .read .image{ width: 10vw; height: 10vw; border-radius: 5vw; overflow: hidden; position: relative; background-size: cover !important;  }
body.page.contact .entryBody .read .image:before{ content: ''; display: block;  width: 100%; height: 0; padding-top: 100%;}

article.formArea{}
article.formArea .formTable{grid-template-columns: auto auto 1fr; grid-gap: 0; border-top: solid 1px; }

article.formArea .formTable .gridItem{ border-bottom: solid 1px; padding: 0.5rem 0;}
article.formArea .formTable dt.gridItem{ padding-right: 1rem;}
article.formArea .formTable dd.gridItem{padding-right: 2rem; position: relative;}

article.formArea .formTable .gridItem.inputArea{padding: 1rem 0;}



article.formArea .formTable dt + dd { font-size: 0.8em; line-height: 2.2rem;}
article.formArea .formTable dd:nth-of-type(1) {}
article.formArea .formTable .inputText{ width: 100%; padding: 0.5em; border: solid 1px var(--color-key); border-bottom-color: var(--color-gray-light); border-right-color: var(--color-gray-light); }
article.formArea .formTable .inputTextArea{ height: 30em;}

article.formArea .formTable .inputText,
article.formArea .formTable .inputTextArea,
article.formArea  .checkMessage{ font-size: 1rem; color: #000;
	    font-family:YakuHanJP,"Poppins", 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: var(--font-weight-normal);
}

article.formArea .formTable .inputText.errors,
article.formArea .formTable .inputTextArea.errors{ border: solid 1px #c00;}

article.formArea .formTable span.msg{ display: inline-block; padding-top: 0.2em; font-size: 0.8em; color: #c00;}

article.formArea.input_step_2{ display: none;}

article.formArea.input_step_2 .formTable .inputText,
article.formArea.input_step_2 .formTable .inputTextArea{ pointer-events: none; border: 0; height: auto;}

article.formArea.input_step_2 .formTable .inputTextArea{ position: absolute; top: 0; height: 0; visibility: hidden; display: none;
}
article.formArea.input_step_2  .checkMessage{ padding: 0.5em;}

article.formArea.input_step_2 .formTable dd.gridItem{ min-height: 30px;}





span.wpcf7-list-item.deactive { display: inline-block; pointer-events: none; opacity: 0.3 !important; }
.ajax-loader{ position: absolute; top: 0; opacity: 0;}

.confirmMessage{ margin-bottom: 60px;padding-top: 0em; border-top:solid 0px var(--color-key); }
.confirmMessage h5{    font-size: 2.5rem;    margin-bottom: 0.5rem; line-height: 1.3;}
.confirmMessage p{font-size: 0.9rem;}

.formThankYou{ text-align: center; padding-top: 5rem;}
.formThankYou h5{     font-size: 2.5rem;    margin-bottom: 0.5rem; line-height: 1.3;}
.formThankYou p.jp{font-size: 0.9rem;margin-bottom: 60px;}


article.formArea.input_step_2 dd.gridItem{ }
article.formArea.input_step_2 .wpcf7-form-control-wrap{ display: block;position: absolute; top: 0%;  width: 100%; height: 100%;}
article.formArea.input_step_2 .wpcf7-not-valid-tip{ position: absolute; top: 50%; transform: translate(0,-50%); display: block; width: 100%; padding: 0; text-align: right; pointer-events: none;}
		
.card {
  -webkit-animation: cardEnter 0.75s ease-in-out 0.5s;
  animation: cardEnter 0.75s ease-in-out 0.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  max-width: 250px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  margin: 20px auto;
  opacity: 0;
}



.spanCheck .wpcf7-form-control-wrap{ position: relative !important; text-align: center; padding: 100px 0 20px 0;}
.spanCheck .wpcf7-form-control-wrap .wpcf7-form-control{text-align: center;}
.spanCheck .wpcf7-form-control-wrap .wpcf7-list-item-label{ display: none;}
.spanCheck .wpcf7-form-control-wrap .errors{ display: inline-block;vertical-align: top;}

.spanCheck .wpcf7-form-control-wrap .wpcf7-list-item input,
.spanCheck .wpcf7-form-control-wrap .errors input{ position: absolute; top: 0.4em; left: -2.4em;}
.spanCheck .wpcf7-form-control-wrap .spanCheck_t{display: inline-block; text-align: left; }
.spanCheck .wpcf7-form-control-wrap .spanCheck_t1{ }



/* Individual Controls
 ------------------------------------------------------------- */
.radio label {
  display: inline-block;
  padding-right: 20px;

  line-height: 2.5;
  cursor: pointer;
}
.radio label:hover .inner {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  opacity: .5;
}
.radio label input {
  height: 1px;
  width: 1px;
  opacity: 0;
}
.radio label input:checked + .outer .inner {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.radio label input:checked + .outer {
  border: 1px solid var(--color-key);
}
.radio label input:focus + .outer .inner {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  background-color: var(--color-key);
}
.radio label .outer {
  height: 20px;
  width: 20px;
  display: block;
  float: left;
  margin: 10px 9px 10px 5px;
  border: 1px solid var(--color-key);
  border-radius: 50%;
  background-color: #fff;
}
.radio label .inner {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  height: 14px;
  width: 14px;
  -webkit-transform: scale(0);
  transform: scale(0);
  display: block;
  margin: 2px;
  border-radius: 50%;
  background-color: var(--color-key);
  opacity: 0;
}
.wpcf7-list-item{ margin-left: 0 !important; margin-right: 1em !important;}



body.error404 {}

body.error404  .notfoundImage{ display: block !important; margin-bottom: 80px;}
body.error404  .notfoundImage.onlySP{ display: none !important;}



body.error404 .entryDetail .entryBody{}
body.error404 .entryDetail .entryBody .en{margin-bottom: 10px;}
body.error404 .entryDetail .entryBody .jp{ margin-bottom: 40px;}
body.error404 .entryDetail .entryBody .viewMore{}


@media screen and (max-width:1000px) {
        body.page.contact .entryBody .read h3{ font-size: 1.8rem;padding-right: 20px; height: 120px; width: auto:}
        body.page.contact .entryBody .read .jp{ width: 100%;}
        
        body.page.contact .entryBody .read .image{ width: 120px; height: 120px; border-radius: 60px;}
        
}



@media screen and (max-width:750px) {
    
    body{ overflow-x: hidden;}



#siteHeader{ height: 18vw;  margin-bottom: 10vw;}
body#top.home #siteHeader{ margin-bottom: 0vw;}
.touchDevice #siteHeader{ opacity: 1;}
.touchDevice #siteHeader.hide #siteLogo,
.touchDevice #siteHeader.hide .loginBtn,
.touchDevice #siteHeader.hide .menuBtn{ opacity: 0; visibility: hidden;}

#siteHeader #siteLogo{ }
#siteHeader #siteLogo a{ line-height: 0;}
.logoImage{   font-size: 0rem; width: 40vw  !important; height: auto; line-height: 0; top: 5vw  !important; left: 50% !important; bottom: auto  !important; transform: translate(-50%,0%)  !important;}

#siteHeader .link{
	position: absolute;
    bottom: 0;
    left: 5vw;
    right: auto;
    width: auto;
    height: auto;
    transform: translate(0,100%);
}
body#top.home #siteHeader .link{ display: none;}

.loginBtn{ 
	width: 15vw;
    height: 15vw;
    top: 2vw;
    right: auto;
    left: 2vw;
   }
.loginBtn:after{    width: 5vw;    height: 5vw;}

.menuBtn{
	    width: 15vw;
    height: 15vw;
    top: 2vw;
    right: 2vw;
}
.menuBtn:before, 
.menuBtn:after{
	    width: 5vw;
    height: 0.4vw;
}


.menuBtn:before{    margin-top: -1vw;}
.menuBtn:after{   margin-top: 1vw;}

#fixedHeader{ height: 18vw;}
#fixedHeader .logo{}

#fixedLoginBtn{
	    top: 0vw;
    right: auto;
    left:0vw;
    width: 16vw;
    height: 18vw;
}

#fixedMenuBtn{
	  top: 0vw;
    right: 0vw;
    width: 16vw;
    height: 18vw;
}
#fixedMenuBtn hr{ width: 5vw;}


#fixedMenu .activeArea{ width: 100%;padding: 18vw 0 0 0;}
#fixedMenu .logoImage{ position: absolute; display: block;}

#fixedMenu .activeArea ul{ width: 86%; margin: auto; border-top: solid 1px var(--color-gray);}
#fixedMenu .activeArea ul li {border-bottom: solid 1px var(--color-gray);}
#fixedMenu .activeArea ul li a{ padding: 5vw}
#fixedMenu .activeArea ul li a:before{ display: none;}

#fixedMenu .activeArea ul li.link{
  padding: 5vw;
}
#fixedMenu .activeArea ul li.link a{
  padding: 0;
}
#fixedMenu .activeArea ul li.link.be{ border: 0; padding-top: 10vw}
#fixedMenu .activeArea ul li.link.be a{ display: inline-block; line-height: 0;}
#fixedMenu .activeArea ul li.link.be a:after{}

#fixedMenu .activeArea .menuWrap hr{ display: none;}


#siteFooter{ text-align: center;font-size: 0.7rem; padding:0 5vw 0 5vw;}
#siteFooter .global_inner{padding-top: 5vw;}
#siteFooter .myName{    font-size: 1.3rem;margin:0 auto 0.5rem auto;display: block; text-align: center;}
#siteFooter .myAddress{margin-bottom: 1.5rem;}

#siteFooter .linkWrap{ position: relative; top: 0; left: auto; right:auto; margin:0 auto 1rem auto;  justify-content: center;}
#siteFooter .privacy{  font-size: 0.8rem;margin-bottom: 1rem;}
#siteFooter .copyright{ margin-bottom: 0.5rem;}


#siteFooter .goPageTop{
    top: auto;
    right: -2vw;
width: 14vw;
    height: 14vw;
    top: 11vw;
    bottom: auto;
}
#siteFooter .pageTop{

    width: 8vw;
    height: 10vw;
}
#siteFooter .pageTop:before{    width: 4vw;    height: 4vw;transform: translate(-50%,35%) rotate(45deg);}

section .global_inner{    width: 90%}

.topMessage{font-size: 1.2rem;padding-top:0rem; margin-bottom: 3vw;}



.entryBoxList.grid.col_3{grid-template-columns: 1fr 1fr;    grid-gap: 4vw 4vw;}

.entryBoxList.listHeaderFull .gridItem:nth-of-type(1){grid-column: 1 / 3;}

.entryDetail{ padding-top: 0;}
	
.entryDetail .entryBody .jp{    font-size: 0.7rem;   line-height: 1.9;}
	body#news.single .entryDetail .entryBody { border-bottom: solid 1px var(--color-key); padding-bottom: 10vw; margin-bottom: 20vw;}

.entryDetail .entryHeaderImage{    margin-bottom: 10vw;}

	body#news.single .entryDetail .entryHeaderImage{  margin-bottom: 5vw;}

.entryDetail .entryTitle{ margin-bottom: 2vw;}

.entryDetail .entryTitle h2.title{    font-size: 1.5rem; margin-bottom: 0.4em;}
.entryDetail .entryBody h3{ font-size: 1.5rem;  margin-bottom: 0.4em;}
.entryDetail .entryBody h4{  margin-bottom: 5vw}
.entryDetail .entryBody .titleWrap{margin-bottom: 8vw;}
.entryDetail .entryBody .titleWrap .jp{    font-size: 0.8rem !important;}

.entryDetail .entryBody .bodyWrap{margin-bottom: 10vw;}

.entryDetail .entryBody .project_read{ margin-bottom: 10vw;}

.entryDetail .entryTitle p.jp{  font-size: 0.8rem; }
.entryDetail .entryMeta{ margin-bottom: 8vw;}


.entryDetail .entryBody .exWrap{ font-size: 0.8rem;}

.entryDetail .entryBody .imageWrap{ margin-bottom: 10vw;}





body.page .entryDetail .entryBody{ margin-bottom: 30vw;}
	body.single-projects .entryDetail .entryBody{margin-bottom: 30vw !important;}
body.page .entryDetail .entryBody .read{ margin-bottom: 5vw !important;}
body.page .entryDetail .entryBody h3{font-size: 1.3rem;margin-bottom: 0.5rem; padding: 0; float: none;}
body.page .entryDetail .entryBody .midashi{ margin-bottom: 5vw !important;}

body.page .entryDetail .entryBody article{    margin-bottom: 20vw;}
body.page .entryDetail .entryBody article.content .columnWrap{ grid-gap: 0.8rem;}
body.page .entryDetail .entryBody article.content .imageWrap{ grid-gap: 0vw;}


body.page.about article.content .area_1{ margin-bottom: 10vw;}
body.page.about article.content .area_2{margin-bottom: 10vw;}

body.page.about .profile .grid{display: block;}
body.page.about .profile .grid .gridItem{}
body.page.about .profile .grid .gridItem:nth-of-type(1) {   }
body.page.about .profile .grid .gridItem:nth-of-type(2) {  margin-bottom: 20vw;}
body.page.about .profile .grid .gridItem:nth-of-type(3) {   }
body.page.about .profile .grid .gridItem:nth-of-type(4) {   }
body.page.about .profile .myname{ margin-bottom: 5vw; line-height: 1;}

body.home #archiveBoxList{  margin-bottom: 20vw;}
body#archive #archiveBoxList{    padding-top: 0;  margin-bottom: 20vw !important;}
body#archive .archiveHeader {    margin-bottom: 10vw; }

body.page.contact .entryBody .read h3{ font-size: 5vw;}
body.page.contact .entryBody .read .photo{ float: none; margin: auto}

		body.page.contact .entryBody .read h3{ font-size: 5vw;padding: 0px 0vw; height: auto; margin-bottom: 5vw;}
		body.page.contact .entryBody .read .image{ margin: auto; width: 20vw; height: 20vw; border-radius: 10vw;}
		
		article.formArea .formTable { display: block;border: 0;}
		article.formArea .formTable .gridItem{ padding: 0 !important; border: 0;}
		article.formArea .formTable  dt { width: auto;  display: inline-block; padding-right: 2vw !important; margin: 0;}
		article.formArea .formTable  dt + dd{width: auto;display: inline-block; padding: 0; margin: 0;}
		article.formArea .formTable  dd:nth-of-type(2n){width: 100%; margin-bottom: 5vw;  }
		
		article.formArea .formTable  input,
		article.formArea .formTable  textarea,
		article.formArea .formTable  .checkMessage{ background: #eee; border: 0 !important;}
		

	
body#archive.news	.entryBoxList{ display: block;}
body#archive.news	.entryBoxList .gridItem{ display: block; overflow: auto; margin-bottom: 10vw; border-bottom: solid 1px var(--color-key)}
body#archive.news	.entryBoxList .gridItem a{ height: auto; padding: 0; overflow: hidden; text-decoration: none;}
body#archive.news	.entryBoxList  .imageWrap{ position: relative; height: auto; overflow: auto;}
body#archive.news	.entryBoxList  .imageWrap .image{ position: relative; margin-bottom: 5vw; width: 100%; height: 0; padding-top: 62%;}


body#archive.news	.entryBoxList  .imageWrap .image: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;
}


body#archive.news	.entryBoxList .gridItem .data{ position: relative;bottom: auto; transform: translate3d(0,0%,0); display: grid;grid-template-columns: 1fr;    grid-gap: 0vw 2vw;margin-bottom: 8vw; padding-bottom: 2vw;}

body#archive.news .entryBoxList .gridItem{ display: none;}
body#archive.news .entryBoxList .gridItem:nth-of-type(1) ,
body#archive.news .entryBoxList .gridItem:nth-of-type(2) { display: block;}

body#archive.news .entryBoxList + .viewMore{ display: none;}


body#archive.news	.entryBoxList .gridItem .data div{ opacity: 1;}
body#archive.news	.entryBoxList .gridItem .data div:nth-of-type(1) { grid-row:2 / 3;;grid-column: 1 / 2; }
body#archive.news	.entryBoxList .gridItem .data div:nth-of-type(2) {grid-row:1 / 2;grid-column: 1 / 2;font-size: 1.5rem; line-height: 1.5; padding-bottom: 2vw;}
body#archive.news	.entryBoxList .gridItem .data:after{ content: ''; display: block; border-bottom: solid 1px var(--color-key); position: absolute; width: 100%; bottom: 0vw;}

body#archive.news	.entryBoxList .gridItem .more{ display: inline-block; position: absolute; right: 0; bottom: 0; height: 8vw; text-align: right; line-height: 8vw; padding-left: 8vw;}
body#archive.news	.entryBoxList .gridItem .more:before{
	    content: ' ';
    display: inline-block;
    font-size: 1.3rem;
    width: 3vw;
    height: 3vw;
    border: solid 1px var(--color-key);
    border-bottom: 0;
    border-right: 0;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%) rotate(135deg);
     }
body#archive.news	.entryBoxList .gridItem .more:after{ content: 'View More'; display: inline-block; font-size: 0.6rem; padding-right: 5vw; transform: translate(0,-5%);}
body#archive.news	.entryBoxList a:after{ display: none;}

body#archive.news .entryRelated{ margin-bottom: 10vw;}
body#archive.news .entryRelated .entryBoxList .gridItem{ border: 0;margin-bottom: 0;}
body#archive.news .entryRelated .entryBoxList .imageWrap .image{ margin-bottom: 0;}
body#archive.news .entryRelated .entryBoxList .gridItem .data{margin-bottom: 0;}
body#archive.news .entryRelated .entryBoxList .gridItem .data:after{ display: none;}
body#archive.news .entryRelated .entryBoxList .gridItem .data div:nth-of-type(1) { grid-row:1 / 2;;grid-column: 1 / 2; }
body#archive.news .entryRelated .entryBoxList .gridItem .data div:nth-of-type(2) {grid-row:2 / 3;grid-column: 1 / 2; font-size: 1.2em;}
body#archive.news .entryRelated .entryBoxList .gridItem .more{ display: none;}

.swiper-button-next, .swiper-button-prev{ display: none;}


#so_we_design{ margin-bottom: 10vw;}
#aboutGallery{ margin-bottom: 10vw;}


#single.projects .entryDetail .entryBody  h3{ font-size: 1.5rem; margin-bottom: 0.4em;}
#single.projects .entryDetail .entryBody  h4{ font-size: 1.4rem;margin-bottom: 0.4em;}
#single.projects .entryDetail .entryBody  h5{ font-size: 1.2rem;margin-bottom: 0.4em;}
#single.projects .entryDetail .entryBody  h6{ font-size: 1.0rem;margin-bottom: 0.4em;}




.confirmMessage{     margin-bottom: 8vw; }
.confirmMessage h5{     font-size: 1.5rem;    margin-bottom: 0.4em;}
.confirmMessage p{font-size: 0.9rem !important;}

.formThankYou{ text-align: center; padding-top: 5rem;}
.formThankYou h5{    font-size: 2.5rem;    margin-bottom: 0.4em;}
.formThankYou p.jp{font-size: 0.9rem !important;    margin-bottom: 8vw;}

.viewMore.col_2 .btnArea{ margin-bottom: 5vw;}


article.formArea .formTable .inputText, 
article.formArea .formTable .inputTextArea, 
article.formArea .checkMessage{ font-size: 1.1rem;}


.spanCheck .wpcf7-form-control-wrap{ padding: 10vw 0 0vw 0}
.spanCheck .wpcf7-form-control-wrap .wpcf7-form-control{}
.spanCheck .wpcf7-form-control-wrap .wpcf7-list-item-label{ }
.spanCheck .wpcf7-form-control-wrap .errors{ }
.spanCheck .wpcf7-form-control-wrap .wpcf7-list-item input,
.spanCheck .wpcf7-form-control-wrap .errors input{ position: absolute; top: 0.2em; left: 0em;}
.spanCheck .wpcf7-form-control-wrap .spanCheck_t{display: inline-block; text-align: left; }
.spanCheck .wpcf7-form-control-wrap .spanCheck_t1{ padding-left: 1.8em; display: block}
.spanCheck .wpcf7-form-control-wrap .spanCheck_t2{ padding-top: 0.5em; text-align: center;}


body.error404  .notfoundImage.onlySP{ display: block !important; margin-bottom: 10vw;}
body.error404  .notfoundImage.onlyPC{ display: none !important;}


body.error404 .entryDetail .entryBody{    margin-bottom: 0vw;}
body.error404 .entryDetail .entryBody .en{margin-bottom: 0.5em;}
body.error404 .entryDetail .entryBody .jp{ margin-bottom: 0vw;}
body.error404 .entryDetail .entryBody .viewMore{}



}
/* ▲ max-width:750px  */





@keyframes arrowdown {
    0% {  bottom: 10px;}
    10% { bottom: 0px;}
    30% {  bottom: 10px;}
    40% {  bottom: 0px;}
    50% {  bottom: 10px;}
    90% {  bottom: 10px;}
    100% {  bottom: 10px;}
}






@-webkit-keyframes cardEnter {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
  }
}
@keyframes cardEnter {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}