/*font-family: 'Lato', sans-serif; */
/*
@media(max-width: 920px) {} 
@media(max-width: 520px) {}
*/
html {font-size: 16px; overflow: auto;}
body {font-family: 'Noto Sans JP', sans-serif; color: #FFF; box-sizing: border-box; width: 100%; overflow-x:hidden ; background-color: #202020;}
a {text-decoration: none; color: #FFF; font-size: 1rem; line-height: 1.6;}
p {font-size: 1.3rem; line-height: 1.6;}
img{width: 100%;}
h1{background-color: #FFF; width: 144px; height: 144px;}

.txt-r, .txt-l {font-size: 2rem;}
.txt-l{-ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin-left: 40px; padding-top: 32px;}
.txt-r {text-align: right;}
.bold {font-weight: bold;}
@media(max-width:920px) {
  .txt-r, .txt-l,h2{font-size: 1.7rem; } p{font-size: 1.3rem;}
}
@media(max-width:520px) {
	.txt-r,.txt-l{font-size: 1.5rem;}	p{font-size: 1.1rem;}
}
.icon_flex {display: flex;
  gap: 0 16px;
  margin-left: 68px;}
@media(max-width:520px) {
	.icon_flex {margin-left: 0;}}

.nav_flex{display: flex; width: 100vw; height: 80px; justify-content: space-between; align-items: center; margin-right: 80px;}
@media(max-width:520px){
  .header_menu_flex{gap: 24px 0; margin-right: 20px;}
}
.header_main{display: flex;}

/* ナビゲーションメニュー */
#menu-header-menu{display: block; justify-content: space-between; gap: 0 24px; align-items: center; margin-right: 80px;}
@media(min-width:521px){
  #menu-header-menu{display: flex; gap: 0 16px;}}
@media(max-width:520px) {
  .nav_flex {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.9); color:#FFF; justify-content: center; align-items: center; visibility: hidden; opacity: 0; z-index: 10; flex-direction: column;}
  nav ul {list-style: none;}
  nav li:not(:last-child) {margin-bottom: 30px;}
  #navbtn {position: fixed; top: 35px; right: 25px; padding: 0; outline: none; border: none; background:none; width: 30px; height: 20px; cursor: pointer; visibility: visible; z-index: 100; opacity: 1;}
	#navbtn::before, #navbtn::after {content: ""; display: block; height: 1px; transform: translateY(10px); background-color: #FFF; transition: .8s;}
	#navbtn::before {transform: translateY(-10px); transition: .8s; box-shadow: 0 10px #FFF; }
  .open #navbtn {z-index: 100; }
	.open #navbtn::before {transform: rotate(-45deg); transition: .8s; box-shadow:none;}
  .open #navbtn::after {transform: rotate(45deg); transition: .8s; }
  .open nav {visibility: visible; opacity: 1; gap: 0 40px;}
}


.icon_flex img{ width:30px; height:30px;}
.flex {display: flex; justify-content: space-between;}.flex-r {flex-direction: row-reverse;}
.flex-a{display: flex; justify-content: space-between; width: 90%; margin: 0; position:relative;}
.wrap {width: 95%;}
.inner {width: 90%; max-width: 1024px; margin: 0 auto; padding: 120px 0;}
.inner p{width: 100%;text-align: left; margin: 0 16px 80px auto; }

.inner.works{text-align: center;}
.inner img{ margin: 80px;}
.about_img > img{width: 30%;}
@media(max-width:920px) {
	.inner img{margin: 40px 0;}
	.flex{flex-wrap: wrap;}
	.about-txt{text-align: center;}
}
@media(max-width:520px) {
 .flex{flex-direction: row; width: 90%; margin: 0 auto; position: relative; flex-wrap: wrap; padding: 0;}
	.inner p{margin: 0 0 40px 0;}
}
.contact{background-image: url(../img/winter.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; color: #FFF;}
.contact .flex{text-align: center; background-color: rgba(0, 0, 0, 0.5);}
.kh-color.about{background-color: #fff;}
.kh-color p{color: #000;}
.inner > .flex > .top_contact-text{color:#fff; font-size: 1rem;  padding: 24px;}
.inner > .flex > .contact-text{color:#fff; font-size: 1rem;  padding: 24px;}
.inner > .flex > .contact-text2{color: #fff; font-size: 1rem;  padding: 24px;}
.kh-color.office .inner{color: #000;}
.kh-color.office p{color: #fff;}
/* .kh-color.about .inner{color: #000;} */
.flex > .snow{color: #fff;}
header {width: 100%; height: 480px; position: relative; background-color: #202020;}
/* .inner .blk_logo{color: #000;} */
header .logo {width: 100%; height: 100%;}
@media(max-width:520px) {
  header{height: 288px;}
  header .flex {flex-direction: row; width: 80%;}
  header .flex img {padding: 5px; width: 40px; margin-bottom: 5px;}
  heaader h1{width: 80%; margin: 50px;}
}
footer {height: 100px; display: flex; justify-content: center; align-items: center; background-color: #202020; color: #FFF; width: 100%; margin-top: 20px;}
@media(max-width:920px) {
  .introduction{width: 90%; max-width: 1024px; margin: 0 auto; margin-bottom: 50px;}
}
.introduction h2, .skill h2, .office h2{margin:24px  24px 100px 24px;}
.flow-about h2 {margin-bottom: 100px;}
.contact h2{background-color: #202020; color: #FFF; margin: 100px 0 30px; border-radius: 3%; padding: 10px;}
.introduction h3{font-size: 2rem; padding-bottom: 10px;}
small {font-size: 14px;}
@media(max-width:520px) {
  small {font-size: 9px;}
}
p.scroll {display: inline-block; position: absolute; right: 5%; z-index: 2; padding: 10px 10px 110px; overflow: hidden; color: #e4e9da; font-size: 14px; font-family: "Josefin Sans", sans-serif; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; writing-mode: vertical-lr;  bottom: -48px;}
@media(max-width:920px) {
  p.scroll{right: 3%;}
}
@media(max-width:520px) {
  p.scroll{bottom: -75px;}
}
p.scroll::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 1px; height: 100px; background: #05f7f7;}
p.scroll::after {animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;}
@keyframes sdl {
  0% {transform: scale(1, 0); transform-origin: 0 0;}
  50% {transform: scale(1, 1); transform-origin: 0 0;}
  50.1% {transform: scale(1, 1); transform-origin: 0 100%;}
  100% {transform: scale(1, 0); transform-origin: 0 100%;}
}
.catch{width: 64%; text-align: left; color: #FFF; margin-left: 20%; margin-top: 40px; position: relative}
.catch p{font-size: 3rem;}
.catch p:last-of-type{padding-left: 116px;}


@media(max-width:920px) {
	.catch{right:16%; top:25%;}
	.catch p{font-size: 2.5rem; }
}
@media(max-width:520px) {
  .catch{right:15%; top:20%; margin-top: 60px ; }
  .catch p{font-size: 1.5rem; }
  .catch p:last-of-type{padding-left: 20px;}
}

.about_txt{color: #fff;}

.home .about img, .home .works img {max-width: 300px; margin: 0 auto 50px 0; border: 1px solid #FFF; border-radius: 4px;}
@media(max-width:768px) {
	.home .about img, .home .works img{margin: 0 0 20px 0; }
}
.home .about img{width: 50%;}
.home .about .txt-l, .home .works .txt-l, .home .works .txt-r {margin-top: 15px;}
.txt-n{text-align: right; margin-bottom: 88px;}
.home .about .arrow-btn, .home .works .arrow-btn { font-size: 2rem; display: block; width: 75%; margin: 40px auto;}
.home .arrow {width: 100%; max-width: 300px; height: 8px; border-bottom: 1px solid #202020; border-right: 1px solid #202020; transform: skew(45deg); margin-left: auto;}
.about .arrow-btn{padding-right: 56px;}

.home .about .arrow-btn{color: #202020; }
@media(max-width:920px) {
  .arrow-btn{font-size: 1.8rem!important;}
}

.home .arrow2 {width: 100%; max-width: 300px; height: 8px; border-bottom: 1px solid #FFF; border-right: none; border-left: 1px solid #FFF; transform: skew(135deg);}
.flex-l .arrow {width: 100%; max-width: 300px; height: 8px; border-bottom: 1px solid #FFF; border-right: 1px solid #FFF; transform: skew(45deg); margin-top: 80px; margin-left: auto;}

/*contact*/
.contact > .wpcf7{background-color: rgba(0, 0, 0, 0.5); padding-top:100px;}
.contact > .wpcf7-form-control-wrap{border: 1px solod #fff;}
.contact > .wpcf7 p {padding: 20px; text-align: center; font-size: 1rem;} 
.contact-btn {width: 100%; max-width: 400px; height: 70px; background-color: #202020; border-radius: 3px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.2);}
.has-spinner{border: 1px solid #fff; padding:10px 30px; margin-left: 80px;}

@media(max-width:920px) {
  .contact  > .wpcf7 p{margin-right: 10px; }
  .contact-btn {max-width: 280px;}
}
@media(max-width:520px) {
  .contact  > .wpcf7 p{padding: 0;}
  .contact-btn{height: 60px; margin-top: 20px; font-size:12px} 
  .inner p{width: 90%;text-align:center; padding-top: 10px; font-size: 1rem;
}

/*portfolio*/
.portfolio .flex{flex-direction: column;}
@media(max-width:520px) {
	.portfolio .flex{margin: 50px auto;}
}
	
/* flow */
.flow-about {width: 90%; max-width: 1024px; margin-right: auto; padding-left: 50px;}
.flow-inner {margin-top: 100px; margin-right: 10px;}
.flow-desc img {max-width: 235px; object-position: center; object-fit: cover; border-radius: 2px; width: 100%; border: 1px solid #fff;}
.flow-desc .hearing-img{object-fit: contain;}
.flow-desc .flex {margin-bottom: 60px;}
.flow-desc .flex div {width: 60%;}
@media(max-width:520px) {
  .flow .flex{flex-wrap: wrap;}
  .flow-about{width: 100%;}
  .flow-inner{margin-top: 0; }
  .flow-desc img{margin-bottom:20px;}
}

/*portfolio*/
.portfolio{ background-color: #fff;}
.portfolio header{background-color: #000;}

/* plan list */
.plan-list .flex{ display: block;  padding: 20px; }
/*flex-wrap:nowrap;} */
.wp-container-3.wp-container-3, .wp-container-6.wp-container-6 {background-color: #fff; color: #000; border-radius: 5px; padding: 20px; margin-top: 10px;}
.plan-list .has-inline-color{padding: 10px; font-size: 25px; margin: 30px  0px; border-radius: 5px;}
.plan-list-b{margin-left: 30px;}
@media(max-width:520px){
	.plan-list-b{margin-left: 5px;}
}


/* 投稿ページ */
.single .flex div{width: 70%; margin-top: 100px; margin-right: auto;}
.single .flex div span, .single .flex div h2, .single .flex div p{font-size: 1.8rem; margin-bottom: 50px; line-height: 1.5;}
.single .flex div{margin-right: 10px; width: 100%;}
.single header{margin-right: 15px;}


	.about_txt{width: 100%;}
	.side-margin{margin: 40px;}
	.wp-block-columns {margin: 40px;}

/* 
.is-layout-flex{margin: 40px;}
.plan-list-b{margin: 40px;}
.single > div{margin: 40px;}
.flow-about {width: 90%; max-width: 1024px; margin-right: auto; padding-left: 50px;}
.flow-inner {margin-top: 100px; margin-right: 54px;}
.flow-desc img {max-width: 235px; object-position: center; object-fit: cover; border-radius: 2px; width: 100%; border: 1px solid #fff;}
.flow-desc .hearing-img{object-fit: contain;}
.flow-desc .flex {margin-bottom: 60px;}
.flow-desc .flex div {width: 60%;}
@media(max-width:520px) {
  .flow .flex{flex-direction: column;}
  .flow-about{width: 100%;}
  .flow-inner{margin-top: 0; }
  .flow-desc img{margin-bottom:20px;}
	.flow-desc .flex div {width: 85%;}	
}
	 .todolist-js {
    min-height: 600px;
    background-color: #fff;
    margin: 0px auto;
    text-align: center;
		 padding: 100px;
}
	
	#add-text {
  border-radius: 8px;
  border: none;
  padding: 6px 16px;
		background-color: #fff;
		color: #052375;
}

#add-button, .complete-button, .delete-button, .back-button{
  border-radius: 8px;
  border: 1px solid #c6e5d0;
  padding: 6px 16px;
  margin: 0 2px;
	 color: #052375;
	background-color: #fff;
}
.complete-button, .delete-button{
	background-color: #16c1cf;
	color: #fff;
}



#add-button:hover .complete-button:hover .delete-button:hover .back-button:hover{
  background-color: #79a8a9;
  color: #fff;
  cursor: pointer;
}

.input-area{
  background-color: #16c1cf;
  width: 400px;
  height: 80px;
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 0 20px;
}

.incomplete-area{
  border: 2px solid  #2ce8f9;
  width: 400px;
  min-height: 200px;
  padding: 24px 8px;
  margin: 8px;
  border-radius: 8px;
}
.todo-title{
  text-align: center;
  margin-top: 0;
	 color:  #052375;
}

.list-row{
  display: flex;
  align-items: center;
	margin-left:16px;
}

.todo-item{
  margin: 6px;
	color: #052375;
	text-decoration-line: underline;
	text-decoration-color: #052375;
}

.complete-area{
  border: 2px solid #aacfd0;
  width: 400px;
  min-height: 200px;
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
  background-color: #94dcdc;
}	
	 */
	
/* @media(max-width:520px) {	
	 .todolist-js {
		 padding: 50px 10px;
		 width: 100%;
	}
	.input-area, 	.incomplete-area,  .complete-area{
		width: 100%;
		gap: 0 10px;
	}
	#add-text {
	width: 75%;}
} */
	
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');
  .glasscard{
	  width:100%;
    min-height: 100vh;
    background-color: #8a918d;display: flex;align-items: center;
    justify-content: center;
    margin-bottom: 50px;
	 font-family: 'Poppins', sans-serif;}  
}
@media(max-width:520px){
	.glasscard{
		width: 83%;
	}
}
@media(min-width:521px) {
	.glasscard::before{
    content: "";position: absolute;width: 50%;height: 75%;background: linear-gradient(rgba(161, 173, 173,0.9),rgba(186, 210, 251,0.9));
    clip-path: circle(60% at 15% 27%);
    z-index: -1;
  }
/*   .glasscard::after{
    content: "";position: absolute;width: 50%;height: 50%;background: linear-gradient(rgba(161, 173, 173, 0.9),rgba(186, 210, 251, 0.9));
    clip-path: circle(50% at 100% 82%);
    z-index: -1;
	}  */
}

  .card{
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.5);
    width: 380px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 15px;
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    overflow: hidden;
    z-index: 1;
  }
  .card .content{
    position: relative;
    padding: 120px 20px 20px 20px;
    transform: translateY(200px);
    opacity: 0;
    transition: 0.5s;
	  display: block;
  }
  .card:hover .content{
    transform: translateY(0);
    opacity: 1;
  }
.card .content h2{
  position: absolute;
  top: 16px;
  right: -20px;
  font-size: 8rem;
  color:rgba(255,255,255,0.1) ;
}
.card .content h3{
	text-align: left;
  color: #fff;
  font-size: 1.8rem;
  z-index: 1;
}
.card .content p{
  color: #fff;
  font-size: 1rem;
  font-weight: 300;
}
.card .content a{
  text-decoration: none;
  display: inline-block;
  padding: 8px 20px;
  background: #fff;
  margin-top: 15px;
  border-radius: 20px;
  color: #000;
  font-weight: 500;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
}	
.glasscard > .card > .content > .glassname{
	display: block;
	text-align: center;
  font-size: 1.8rem;
	z-index: 1;}

.introduction > .inner > .about_txt{
	padding-left: 16px;
	z-index: 1;
}
.about_img > img {
	position:relative;

}