/*
Theme name:COSY
Author:NAKAGAKI
Description:original theme
Version:1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');


body{
	font-family:'Noto Sans JP', Helvetica, "Helvetica Neue",'游ゴシック', 'Yu Gothic', YuGothic, HiraKakuProN-W3, 'メイリオ', Meiryo, sans-serif!important;
	overflow-x: hidden;
}

.grecaptcha-badge{
	bottom:0!important;
}

#stalker {
    pointer-events: none;
    position: fixed;
    top: -12px; 
    left: -12px; 
    width: 24px;  
    height: 24px; 
    background: #fef6ee;
    border-radius: 50%;
    transition: transform 0.1s, top, 0.3s, left 0.3s, width .3s, height .3s, background-color .3s;
    transition-timing-function: ease-out;
    z-index: 999;
}    

#stalker.color2{
	background-color: #28292B;
}


    #stalker.hov_{
    	top: -50px;
    	left: -50px;
      width: 100px;
      height: 100px;
      background: #fef6ee;
      opacity: 0.6;
    }

    #stalker.color2.hov_{
	background-color: #28292B;
}


     #stalker.hov_.hov_2:after{
     	content: 'view';
     	position: absolute;
     	left: 50%;
     	top: 50%;
     	color: #555;
     	font-size: 24px;
	    transform: translate(-50%, -50%);
	    -webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%); 
			font-family: 'Righteous',cursive!important;	        	
     }


.move1{
  opacity: 0;
  transform: translate(0, 0);
  transition: 0.8s;
  transition-delay: 0.2s;
}

.move1.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.move2{
  opacity: 0;
	transform: translate(0, 0);
  transition: 0.8s;
	transition-delay: 0.2s;
}

.move2.is-show2 {
  transform: translate(0, 0);
  opacity: 1;
}

.move3{
  opacity: 0;
  transform: translate(0, 0);
  transition: 0.8s;
	transition-delay: 0.4s;
}

.move3.is-show3 {
  transform: translate(0, 0);
  opacity: 1;
}

.inview6{
  opacity: 0;
  transform: translateY(20px);
  transition: 0.6s;
  transition-delay: 0.1s;
}

.inview6.show6{
  opacity: 1;
  transform: translateY(0px);
}

.inview7{
  opacity: 0;
  transform: translateY(20px);
  transition: 0.6s;
  transition-delay: 0.3s;
}

.inview7.show7{
  opacity: 1;
  transform: translateY(0px);
}

p{
	letter-spacing: 0.12em;
}

.checkbox-598 span{
	margin-right:10px;
}

.checkbox-598 .wpcf7-list-item{
	margin-left:0!important;
}


.navbox{
	display: flex;
	width: 100%;
	padding-bottom: 80px;
}

.pre , .next{
	width: 25%;
		padding-top: 8px;
}

.all{
	width: 50%;
	text-align: center;
}

.all a{
	text-align: center;
	width: 240px;
	display: block;
	background:#28292b;
	color:#fef6ee ;
	margin: 0 auto;
	max-width: 90%;
	font-weight: bold;
	padding: 8px 0;
	transition: 0.5s;
	box-sizing: border-box;
	border: 2px solid #28292b;
	border-radius: 4px;
}

.pre a i , .next a i{
	transition: 0.3s;
}

.pre a:hover i{
	transform: translateX(-7px);
}

.next a:hover i{
	transform: translateX(7px);
}

.all a:hover{
	text-decoration: none;
	background:#fef6ee;
	color:#28292b ;
}

.pre a:hover , .next a: hover{
	text-decoration: none;
}

.pre a , .next a{
	font-family: 'Righteous', cursive!important;
	color:#28292b;
}

.next{
	text-align: right;
}

#logo_loader {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    background-color:#fef6ee;
    opacity: 1;
    animation-name: load;
    animation-fill-mode: forwards;
    animation-duration: 2.5s;
    animation-delay: 0.5s;    
}



#typewriter::after {
    content: "|";
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes blink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


#logo_loader #typewriter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    margin:0 auto;
    width: 620px;
    max-width: 100%;
    color:#28292B;
    font-size: 30px;
    overflow:hidden!important;

}
#logo_loader .f_logo img {
    width: ;
    height: auto;
}

#logo_loader .f_logo:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color:#fef6ee;
    position: absolute;
    top: 0;
    bottom:100%;
    left:100%;
    animation-name: loadLogo;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    animation-delay: 0.5s;
    overflow-x:hidden!important; 
    opacity: 1;
}

@keyframes loadLogo{
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
   opacity: 0;
   display: none;
  }
}

#logo_loader.openlogo {
    animation-name: slideOut;
    animation-fill-mode: forwards;
    animation-duration: 1s;

}

@keyframes slideOut {
  0% {
    opacity: 1;
    z-index: 9999;
  }
  50% {
    opacity: 0;
    z-index: 1;
  }
  100% {
   	opacity: 0;
   	z-index: -1;
  }
}

.hidden{
	visibility: hidden;
	width:200px;
	height: auto;
}

.inherit{
	visibility: inherit;
}


.contentbox img{
	margin:30px 0;
}


.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	max-width:100%;
	z-index: 9999;
}
.start p {
	position: fixed;
	height:auto;
	left: 0;
	top: 0;
	margin:0;
	display: none;
	z-index: 9999;
}

.stop{
	position: static;
	z-index: 91;
}


.js-fadein {
  opacity: 0; 
  visibility: hidden;
  transform: translateX(120px);
  transition: all 0.8s;
}
.js-fadein.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
}

.js-fadein2 {
  opacity: 0; 
  visibility: hidden;
  transform: translateX(-120px);
  transition: all 0.8s;
}
.js-fadein2.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
}

.enfont{
	font-family: 'Righteous', cursive!important;
}

header{
	min-height:20vh;
	padding-top:30px; 
	box-sizing: border-box;
}

.head-flex{
	display: flex;
	max-width:1380px;
	margin:0 auto;
}

.hf1{
	width:50%;
}

.header-logo{

}

.hf2{
	width:50%;
}


.section-1{
	background-color: #28292B;
	min-height:100vh;
	box-sizing: border-box;
}

.headercol3{
	background-color: #1a1b1c;
	width:72px;
	height:72px;
	z-index: 999999;
	margin:0 auto;
	text-align: center;
	transition: 0.7s;
	border-radius:50%;
}

.menu_button{
 width:72px;
 height:72px;
 outline: none;
 border: none;
 font-size: 20px;
 text-align: center;
margin-left:auto;
 margin-top:45px;
 display:block;
 border-radius:50%;
 	z-index: 99999999999999;
}

.menu_button:hover{
	cursor:pointer;
}

.menu_button .menu_icon01 {
  display: block;
  float:left;
  cursor: pointer;
  transition: .7s;
  position: relative;
  top:30px;
  left:20px;

}
.menu_button .menu_icon01 span {
  display: block;
  width: 30px;
  height: 2px;
  background: #fefbee;
  margin-bottom: 4px;
  transition: .7s;
}

.menu_button.open .menu_icon01 span{
	background:white; 

}


.menu_button.open .menu_icon01{
  transform: rotate(-45deg);

}
.menu_button.open .menu_icon01 .bar1 {
  transform: rotate(0deg) translateY(7px);
}
.menu_button.open .menu_icon01 .bar2 {
  opacity: 0;
}
.menu_button.open .menu_icon01 .bar3 {
 transform: rotate(-90deg) translateX(5px);

}

.menu_button .menu_icon02 {
  display: block;
  float: left;
  cursor: pointer;
  transition: all 0.2s ease-in;
}
.menu_button .menu_icon02 span {
  display: block;
  width: 30px;
  height: 2px;
  background: #707070;
  margin-bottom: 4px;
  transition: all 0.4s ease-out;
}
.menu_button.open .menu_icon02 .bar1 {
  transform: translateY(10px) rotate(135deg);
}
.menu_button.open .menu_icon02 .bar2 {
 opacity: 0;
 transform:translateX(-100px);
}
.menu_button.open .menu_icon02 .bar3 {
 transform:  translateY(-6px)
 rotate(45deg);
}

.menu_button .menu_icon03 {
  display: block;
  float: left;
  cursor: pointer;
  transition: all 0.2s ease-in;
}
.menu_button .menu_icon03 span {
  display: block;
  width: 30px;
  height: 2px;
  background: #707070;
  margin-bottom: 4px;
  transition: all 0.4s ease-out;
}
.menu_button.open .menu_icon03 .bar1 {
  transform: translateY(10px) rotate(45deg);
}
.menu_button.open .menu_icon03 .bar2 {
 opacity: 0;
 width:150px;
 transform: translateX(-60px)
}
.menu_button.open .menu_icon03 .bar3 {
 transform: translateY(-6px)
 rotate(135deg);
 }

.first-flex{
	height:80vh;
	display: flex;
	max-width:1300px;
	box-sizing: border-box;
	margin:0 auto;
	position: relative;
	color:#fefbee;
}


.textbox{
	position: absolute;
	width:650px;
	z-index: 1;
	padding-right: 20px;
	box-sizing: border-box;
}

.imgbox{
	display: block;
	width:100%;
	height:83%;
	margin:0 auto;
}

.imgposition{
	margin-left:auto;
	max-width:630px;
	height:100%;
	background-size:cover; 
}

.titlemain{
	font-weight:400;
	font-size:55px;
	padding-top:120px;
}

.titlesub{
	display: block;
	margin-top:10px;
	font-size:25px;
}

.first-small{
	margin-top:75px;
}

.first-small p{
	font-size:18px;
	font-weight:400;
}


.scmark {
	position: absolute;
	bottom: 11%;
  left: 50%;
  color: white;
}

.sctext{
	position: absolute;
	bottom: 2%;
 	display: block;
 	width:100%;
 	text-align: center;
  color: white;
  letter-spacing: 0.12em;
}

.sctext:hover{
	color:white;
	text-decoration: none;
} 

.scmark span {
  position: absolute;
/*   bottom: %; */
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
.scmark span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  box-sizing: border-box;
    -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


.section-2{
	width:100%;
	min-height:100vh;
	background:#fef6ee;
	color:#28292B;
}

.service-flex{
	display: flex;
	margin:0 auto;
	max-width:1300px;
	min-height:100vh;
	padding:100px 0;
	box-sizing: border-box;
}

.service-left{
	width:50%;
	padding-right:45px;
	box-sizing: border-box;
}

.sectop{
	font-size:75px;
	letter-spacing: 0.15em;
	display: inline-block;
	position: relative;
	float: right;
	clear: both;
}

.sectop:after{
	content:'';
	position: absolute;
	width:100%;
	height:15%;
	background-color:#28292B; 
	bottom:3px;
	left:0;
}

.subinfo{
	clear: both;
	padding-top:30px;
}

.subinfo p{
	font-size: 17px;
	font-weight:400;
	text-align: right;
	margin-bottom: 10px;
}

.ser3{
	clear: both;
	padding-top:30px;
}

.serflex{
	display: flex;
	margin-bottom:15px;
}

.serflex i{
	font-size:40px;
}

.serflex p{
	margin-left:30px;
	margin-bottom:0;
	padding-top:1px;
	font-size:26px;
	font-weight:500;
}

.sercontent{
	font-size:17px;
	font-weight:500;
	margin-bottom: 25px;
}


.lf1img{
	display: block;
	width:65%;
	height:40%;
	object-fit: cover;
	margin-left: auto;
	position: relative;
	top:65px;
	z-index: 2;
}

.lf2img{
	width:85%;
	height:55%;
	position: relative;
	bottom:10px;
	z-index: 1;
}


.edit{
	object-fit: cover;
}

.service-right{
	width:50%;
	padding-left: 45px;
	box-sizing: border-box;
}


.section-3{
	width: 100%;
    min-height: 100vh;
    background:#28292B;
    color: #fef6ee;
    padding:100px 0;
    box-sizing: border-box;
    z-index: 999;
}

.wowrap{
	max-width:1300px;
	margin:0 auto;
}

.sectop2{
	font-size:75px;
	display: inline-block;
	clear: both;
	position: relative;
	letter-spacing: 0.15em;
}

.sectop2:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 15%;
    background-color: #fef6ee;
    bottom: 3px;
    left: 0;
}

.topflex{
	display: flex;
	clear: both;
}

.topright{
	width:100%;
	position: relative;
}

.topright a{
	color: #fef6ee;
	font-weight:500;
	display: inline-block;
	position: absolute;
	bottom:15%;
	right:0;
	transition: 0.5s;
}

.topright a i{
	transition: 0.5s;
	position: relative;
	top:1px;
}

.topright a:hover{
	text-decoration:none;
	color:#fef6ee;
}

/*.topright a:hover i{
	transform:translateX(-105px) rotate(180deg);
}
*/


.worksbg{
	width:100%;
	padding-top:60px;
}

.workflex{
	display: flex;
	flex-wrap: wrap;
}

.workflex .wospace{
	width:33.33%;
	box-sizing: border-box;
	position: relative;
	z-index:1;
	margin-bottom: 30px;
}

.wospace img{
	width:100%;
	height:300px;
	object-fit: cover;
	display: block;
	margin:10px auto;
	position: relative;
}

.wospace a{
	display: block;
	position: relative;
	padding:0 50px;
}

.wospace a div{
	position: relative;
}

.titleab{
	position: absolute;
	top:45%;
	width:100%;
	text-align: center;
	z-index: 999;
	opacity:0;
	transition: 0.5s;
}

.titleab p{
	margin:0;
	color:#28292B;
	font-size:20px;
	font-weight:bold;
}

.wospace a div::before{
	opacity: 0;
	content:'';
	position: absolute;
	background:rgba(255,255,255,0.5);
	width:100%;
	height:100%;
	z-index:10;	
	transition: 0.5s;
}

.wospace:hover a div::before{
	opacity:1;
}


.wospace:hover .titleab{
	opacity:1;
}






.section-4{
	width: 100%;
    min-height: 100vh;
    background: #fef6ee;
    color:#28292B;	
}

.about-flex{
	display: flex;
	margin:0 auto;
	max-width:1300px;
	height:100vh;
	padding:7vh 0 3vh;
	box-sizing: border-box;
}

.about-left{
	width:50%;
	padding-right:45px;
	box-sizing: border-box;	
}

.about-right{
	width:50%;
	padding-left: 45px;
	box-sizing: border-box;	
}

.abtop{
	font-size:75px;
	letter-spacing: 0.15em;
	display: inline-block;
	position: relative;
}

.abtop:after{
	content:'';
	position: absolute;
	width:100%;
	height:15%;
	background-color:#28292B; 
	bottom:3px;
	left:0;	
}


.ri1img{
	display: block;
	width:65%;
	height:40%;
	object-fit: cover;
	position: relative;
	top:65px;
	z-index: 2;
}

.ri2img{
	width:85%;
	height:55%;
	position: relative;
	bottom:25px;
	z-index: 1;
	object-fit: cover;
	display: block;
	margin-left: auto;
}

.aboutinfo{
	clear: both;
	padding-top:30px;
}

.aboutinfo p{
	font-size: 17px;
	font-weight:400;
	margin-bottom: 12px;
}


.section-5{
    width: 100%;
    min-height: 100vh;
    background: #28292B;
    color: #fef6ee;
    padding: 100px 0;
    box-sizing: border-box;	
}

.topright2{
	width:100%;
	position: relative;
}

.topright2 a{
	color: #fef6ee;
	font-weight:500;
	display: inline-block;
	position: absolute;
	bottom:15%;
	right:0;
	transition: 0.5s;
}

.topright2 a i{
	transition: 0.5s;
	position: relative;
	top:1px;
}

.topright2 a:hover{
	text-decoration:none;
	color:#fef6ee;
}

/*.topright2 a:hover i{
	transform:translateX(-85px) rotate(180deg);
}*/

.blogflex{
	display: flex;
	margin-top:60px;
}

.blogbox{
	width:25%;
	box-sizing: border-box;
	padding:0 25px;
}

.blogbox a img{
	width:100%;
	height:55vh;
	object-fit: cover;
}

.img-area{
	position: relative;
}

.img-area:after{
	position: absolute;
	bottom:-15px;
	right:-15px;
	width:50px;
	height:50px;
	text-align: center;
	line-height: 50px;
	font-size:25px;
	border-radius: 50%;
	background-color: #fef6ee;
	color:#28292B;
  font-family: "Font Awesome 5 Free";
  content: '\f061';
  font-weight: 900;
  z-index: 99;
  transition: 0.3s;
}

/*.blogbox a:hover .img-area:after{
	transform: translateX(15px);
}*/

.blogbox a:hover{
	text-decoration: none;
}

.blog-title{
	color:#fef6ee;
	font-size:16px;
	margin-top:25px;
	font-weight:500;
}

.blog-title:hover{
	text-decoration: none;
}


.section-6{
	width: 100%;
	padding:100px 0;
    min-height: 100vh;
    background: #fef6ee;
    color: #28292B;
    box-sizing: border-box;
}

.co-info{
	clear:both;
	padding-top:60px;
	margin:0 0 20px;
}


.co-info p{
	margin:0;
	text-align:center;
}

.contact-block{
	padding:0 100px;
	margin:60px 0 0;
}

.cfq{
	display: flex;
}

.cf1{
	width:40%;
	box-sizing: border-box;
	padding-right:30px;
}

.must{
	background-color: #FF4F50;
	color:white;
	padding:2px 5px;
	float:right;
	position: relative;
	top:1px;
}

.cf2 , .cf3{
	width:60%;
}

.cf2 input[type="text"] , .cf2 input[type="email"] , .cf2 input[type="tel"]{
	width:100%;
	padding:1px 10px;
}

.cf3 textarea{
	width:100%;
	font-size:17px;
	padding:4px 10px;
}

.cf2 .checkbox-598{
	width:auto;
}

.accept{
	text-align:center;
}

.contact7{
	margin-bottom:12px;
}

.btn_contact7{
	text-align:center;
	margin-top:15px;
	font-family:'游ゴシック', 'Yu Gothic', YuGothic, HiraKakuProN-W3, 'メイリオ', Meiryo, sans-serif!important;
}

.btn_contact7 input{
	background:#28292B;
	border:none;
	color:white;
	font-weight:bold;
	border-radius:5px;
	box-sizing: border-box;
	padding:10px 60px;
	display:block;
	margin:0 auto;
	font-size:18px;
	font-family:'游ゴシック', 'Yu Gothic', YuGothic, HiraKakuProN-W3, 'メイリオ', Meiryo, sans-serif!important;
	transition: 0.5s;
}

.btn_contact7 input:hover{
	border:1px solid #28292B;
	color:#28292B;
	background:#fef6ee;
}

.section7{
	background: #28292B;
    color: #fef6ee;
     width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
}

.footer-flex{
	display: flex;
	padding-top: 140px;
}

.fleft{
	width:50%;
	box-sizing: border-box;
	padding-right:20px;
}

.fright{
	width:50%;
	box-sizing: border-box;
	padding-left:20px;	
	position: relative;
}

.swimg{
	width:630px;
	object-fit:cover;
	height:630px;
}

.snsab{
	position: absolute;
	bottom:0;
	right:0;
}

.snstext p{
	font-weight:bold;
	font-size:15px;
	position: relative;
}

.snstext p:before{
	content:'';
	height:13px;
	position: absolute;
	top:3px;
	left:-10px;
	-webkit-transform: skewX(30deg);
-moz-transform: skewX(30deg);
transform: skewX(30deg);
border-left: 2px solid #fef6ee;

}

.snstext p:after{
	content:'';
	height:13px;
	position: absolute;
	top:3px;
	right:-10px;
	-webkit-transform: skewX(-30deg);
	-moz-transform: skewX(-30deg);
	transform: skewX(-30deg);
	border-right: 2px solid #fef6ee;

}

.snsflex{
	display:flex;
	justify-content: center;
}

.snsflex a{
	display: block;
	color:#fef6ee;
	transition: 0.5s;
}

/* .snsflex .s1:hover{
	color:#FF77FF;
}

.snsflex .s2:hover{
	color:#44FFFF;
}
 */
.snsflex a i{
	font-size:25px;
	margin:0 10px;
}

.copy{
	font-size:12px;
	margin-top:95px;
	margin-bottom:0;
	padding-bottom:30px;
	text-align:center;
}

.menu_button{
	position: relative;
	z-index:9999;
}

#nav{
  position: fixed;
  overflow-x: hidden;
  min-height: 100vh;
  width: 100%;
  right: -100%;
  top: 0;
  background: #28292B;
  transition: .8s;
  padding-top:150px;
  z-index:998;
  color:white;
}

.in{
  transform: translateX(-100%); 
  
}

.nav-wrap{
	max-width:500px;
	display: block;
	margin:0 auto;
}

.bgplus{
	background:#28292B;
}

.nav-wrap a{
	display: block;
	text-align:center;
	color:#fefbee;
	font-size:42px;
	margin-bottom:8px;
	transition: 0.7s;
}

.nav-wrap a:hover{
	color:#fefbee;
	text-decoration: none;
	opacity: 0.5;
}

.navsns{
	display: flex;
	justify-content: center;
}

.navsns a{
	margin:0 12px;
	transition: 0.5s;
}


.navsns .sns1:hover{
	color:#FF77FF;
	opacity: 1;
}

.navsns .sns2:hover{
	color:#44FFFF;
	opacity: 1;
}

.tbblock{
	display: none;
}

.section-8{
	background:#fef6ee;
	min-height:100vh;
	color:#28292B;
}

.pagelogo{
	width:180px;
	height:auto;
}


.pagewrap{
	margin-top:50px;
}

.sectop3{
	font-size:75px;
	display: inline-block;
	clear: both;
	position: relative;
	letter-spacing: 0.15em;
}

.sectop3:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 15%;
    background-color:#28292B;
    bottom: 3px;
    left: 0;
}

.infoflex{
	display: flex;
	margin-top:55px;
}

.titlebox{
	width:80%;
}

.titlebox h2{
	font-size:1.75rem;
}

.datebox{
	width:20%;
}

.datebox p{
	font-size:12px;
	text-align: right;
}


.text-block{
	width:100%;
	padding:55px 0 80px;
}

.text-block img{
	max-width:100%;
	width:100%;
	height:auto;
	margin:25px 0;
}

.text-block h2 , .text-block h3{
	margin-bottom:1.5rem;
}

.pfwrap{
	flex-wrap: wrap;
}

.pfwrap .blogbox{
	width:25%;
}

.pfwrap .blogbox:first-child {
    padding-left: 0;
    padding-right:0;
}


.pfwrap .blogbox{
	padding:0 25px!important;
}

.pfwrap .img-area:after{
	background-color:#28292B;
	color:#fef6ee;
}

.pfwrap .blogbox .blog-title{
	color:#28292B;
}

.blogwrap{
	padding-bottom:80px;
}

.wfc{
	margin-top:55px;
	padding-bottom:80px;
}

.titleab a:hover{
	text-decoration: none;
}


.ser3.type2{
	padding-top: 60px;
}

.sercontent{
	line-height: 1.7;
}

.sercontent.type2{
	margin-bottom: 50px;
}


.first__view{
	width: 100%;
	height: 100%;
	position:fixed;
	left: 0;
	top: 0;
	background:#FCF8EF;
	transition: 0.5s;
	z-index: 99999;
	display:block;
}

.first__view.hidden{
	opacity:0;
	pointer-events: none;
}

.abo{
	position:absolute;
	left: 50%;
	top: 50%;
	width: 340px;
	height: 280px;
	overflow: hidden;
	text-align: center;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);	
}

.abo img{
	width: 340px;
}

.gauge{
	width: 160px;
	height: 10px;
	border-radius: 10px;
	background: white;
	position:relative;
	display:block;
	margin:-5px auto 0;
	overflow: hidden;
	top: -70px;
}

.gauge:before{
	content: '';
	position:absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	background:#1a1b1c;
	transition: 1.6s ease-in-out;
	transition-delay: 0.1s;
	z-index: 2;
}

.gauge.show5:before{
	width: 100%;
}

.nav-wrap{
	text-align: center;
}

.nav-wrap p{
	margin: 0;
	text-align: center;
}

.nav-wrap a{
	display:inline-block;
}

.nav-wrap a.long{
	font-size: 24px;
	margin-top: 80px;
}

@media screen and (max-width: 1370px) {

	.workflex .wospace{
		padding:0 25px;
	}

	.titleab{
		padding:0 25px;
		box-sizing: border-box;
		left:0;
	}

	.wospace a{
		padding:0;
	}


	.head-flex{
		padding:0 50px;
	}

	.first-flex{
		padding:0 50px;
	}

	.textbox{
		width:47%;
	}

	.imgposition{
		max-width:47%;
		width:47%;
	}

	.service-flex{
		padding:0 50px;
	}

	.section-2{
		padding: 10vh 0 6vh;
	}
	

	.section-4{
		padding-top: 10vh;
	}

	.wowrap{
		padding:0 50px;
	}

	.blogflex .blogbox:first-child{
		padding-right:20px;
	}

	.blogbox {
	    width: 25%;
	    box-sizing: border-box;
	    padding: 0 12px;
	}


	.blogflex .blogbox:last-child{
		padding-left: 20px;
	}

	.contact-block{
		padding:0;
	}

	.fleft{
		width:70%;
	}

	.fright{
		width:30%;
	}

	.swimg{
		width:100%;
	}

	.wospace img{
		width:100%;
	}

	.service-left{
		padding-right:20px;
	}

	.service-right{
		padding-left: 20px;
	}

	.subinfo p{
		font-size:15px;
	}

	.serflex{
		margin-bottom: 8px;
	}

	.serflex i{
		font-size:32px;
	}

	.serflex p{
		font-size:22px;
	}

	.sercontent{
		font-size:15px;
	}

	.lf1img{
		width:75%;
		height:40%;
	}


	
}


@media screen and (max-width: 900px) {

	header{
		padding-top:20px;
	}

	.menu_button{
		margin-top:35px;
	}

	.head-flex{
		padding:0 25px;
	}

	.first-flex{
		padding:0 25px;
		display: block;
	}

	.section-1{
		min-height:100vh;
	}

	.textbox{
		position: relative;
		padding-right:0;
		width:100%;
	}

	.first-flex{
		height:800px;
	}

	.imgbox{
		height:450px;
	}

	.imgposition{
		max-width:100%;
		width:100%;
	}

	.titlemain{
		padding-top:45px;
		font-size:40px;
	}

	.scmark , .sctext{
		visibility: hidden;
		height:0;
		width:0;
	}

	.titlesub{
		font-size:18px;
	}

	.first-small{
		margin-top:35px;
	}

	.first-small p{
		font-size:15px;
		margin-bottom:7px;
	}

	.service-flex{
		display: block;
	}

	.tbnone{
		display: none;
	}

	.service-right{
		padding:0;
		width:100%;
	}

	.sectop{
		float:none;
	}

	.subinfo p{
		text-align: left;
	}

	.tbblock{
		display: block;
		position: relative;
	}

	.section-2{
		min-height:100vh;
		height:auto;
	}

	.sm-lf1img{
		width:70%;
		position: absolute;
		left:0;
		z-index: 10;
	}

	.sm-lf2img{
		display: block;
		width:60%;
		margin-left:auto;
		padding-top:150px;
		position: relative;
		z-index:99;
	}

	.service-flex{
		height:auto;
	}

	.sf1{
		padding-bottom:50px;
	}

	.workflex .wospace{
		width:50%;
		padding:0 10px;
	}

	.service-flex{
		padding:0 25px;
	}

	.wowrap{
		padding:0 25px;
	}

	.sectop{
		font-size:55px;
	}

	.sectop2{
		font-size:55px;
	}


	.section-3 , .section-2 , .section-4 , .section-5 , .section-6{
		padding:50px 0;
	}

	.blogflex{
		display: flex;
		flex-wrap: wrap;
		margin-top:30px;
	}

	.blogbox{
		width:50%;
	}

	.blogbox a img{
		height:350px;
	}

	.blogflex .blogbox:nth-child(odd){
		padding-right:15px;
		padding-left:0;
	}

	.blogflex .blogbox:nth-child(even){
		padding-left:15px;
		padding-right:0;
	}	

	.blog-title{
		margin-top:20px;
		margin-bottom: 30px;
		font-size:14px;
	}

	.img-area:after{
		bottom:-8px;
		width:40px;
		height:40px;
		font-size:21px;
		line-height:40px;
	}


	.blogbox a:hover .img-area:after{
		transform: translateX(8px);
	}	

	.co-info{
		padding-top:30px;
		font-size: 15px;
	}

	.co-info p{
		text-align: left;
	}

	.cfq{
		display: block;
		margin-top:15px;
	}

	.cf1{
		padding:0;
		width:40%;
		margin-bottom:5px;
		font-size:17px;
	}

	.cf2 , .cf3{
		padding:0;
		width:100%;
	}

	.must{
		font-size:14px;
		top:0;
		padding:1px 5px;
		float: none;
		margin-left: 15px;
	}

	.wpcf7-list-item{
		margin-left:0!important;
	}

	.wpcf7-list-item-label{
		margin-right:13px;
	}

	.contact-block{
		margin-top:45px;
	}

	.footer-flex{
		padding:75px 0 0;
		display: block;
	}

	.snsab{
		position: absolute;
		bottom:-120px;
		right:20px;
	}

	.fleft{
		width:100%;
		padding-right:0;
	}

	.fright{
		width:100%;
	}

	.snstext p{
		display: inline-block;
	}

	.copy{
		margin-top:150px;
	}

	.sectop3{
		font-size:55px;
	}

	.titlebox h2{
		font-size:1.4rem;
	}

	.datebox p{
		font-size:11px;
	}

	.text-block p{
		font-size:0.85rem;
	}

	.text-block h2{
		font-size:1.75rem;
		margin-bottom:1.3rem;
	}

	.text-block h3{
		font-size:1.6rem;
		margin-bottom:1.3rem;		
	}

	.pagewrap{
		margin-top:35px;
	}

	.text-block{
		padding-top:40px;
	}

	.pfwrap .blogbox{
		width:50%;
	}

	.pfwrap .blogbox:nth-child(odd) {
	    padding-right: 15px!important;
	    padding-left: 0!important;
	}

	.pfwrap .blogbox:nth-child(even) {
	    padding-left: 15px!important;
	    padding-right: 0!important;
	}

	#logo_loader #typewriter{
		box-sizing: border-box;
		padding:0 20px;
		font-size: 24px;
		width: 518px;
	}

	.imgbox{
		margin-top: 60px;
	}






	
}

@media screen and (max-width: 600px) {

	.cf1{
		padding:0;
		width:60%;
		margin-bottom:5px;
		font-size:17px;
	}

	#logo_loader #typewriter{
		width: 100%;
		font-size: 20px;
		font-weight: 500;
	}


}


@media screen and (max-width: 440px){

	.ser3.type2{
		padding-top: 50px;
	}

	#logo_loader #typewriter{
		width: 100%;
		font-size: 24px;
		font-weight: 500;
	}	

	.hidden{
		width: 180px;
	}

	.gauge{
		width: 80px;
		height: 7px;
		top: -42px;
	}

	.abo{
		width: 200px;
		height: 165px;
	}

	.abo img{
		width: 100%;
	}

	.first__view.hidden{
		width: 100%;
	}
	
	header{
		min-height:auto!important;
		padding-bottom:40px;
	}

	.header-logo{
		width:135px;
	}

	.headercol3{
		width:62px;
		height:62px;
	}

	.menu_button{
		margin-top:10px;
	}

	.menu_button .menu_icon01{
		top:25px;
		left:16px;
	}

	.head-flex , .first-flex , .service-flex , .wowrap{
		padding:0 15px;
	}

	.first-flex{
		height:auto;
		padding-bottom:40px;
	}

	.titlemain{
		padding-top: 5px;
		font-size:28px;
	}

	.titlesub{
		font-size:15px;
		margin-top:7px;
	}

	.first-small p{
		font-size:14px;
		margin-bottom:5px;
	}

	.imgbox{
		height:400px;
		margin-top:30px;
	}

	.sectop , .sectop2{
		font-size:41px;
		letter-spacing: 0.1em;
	}

	.subinfo{
		padding-top:20px;
	}

	.subinfo p{
		font-size:14px;
		margin-bottom:7px;
	}

	.serflex i{
		font-size:28px;
	}

	.serflex p{
		font-size: 19px;
		margin-left:20px;
	}

	.sercontent{
		font-size:14px;
		margin-bottom: 20px;
	}

	.sm-lf1img{
		width:80%;
	}

	.sm-lf2img{
		width:70%;
	}

	.wospace img{
		height:240px;
	}

	.section-3, .section-2, .section-4, .section-5, .section-6{
		padding:75px 0;
	}

	.blogbox a img{
		height:280px;
	}

	.co-info{
		padding-top:20px;
		font-size:14px;
	}

	.cf1{
		font-size:15px;
	}

	.must{
		font-size:12px;
		top:2px;
	}

	.cfq{
		margin-top:10px;
	}

	.accept{
		font-size:13px;
	}

	.btn_contact7 input{
		max-width:100%;
		font-size:16px;
		font-weight:bold;
	}


	#nav{
		padding-top:95px;
	}

	.nav-wrap a{
		font-size:28px;
	}

	.navsns a{
		font-size:35px;
	}

	.mb3{
		margin-top:35px;
	}

	.pagewrap{
		margin-top:5px;
	}

	.infoflex{
		margin-top: 40px;
		display: block;
	}

	.titlebox{
		width:100%;
	}

	.datebox{
		width:100%;
	}

	.datebox p{
		text-align: left;
	}

	.text-block{
		padding-top:25px;
	}

	.titleab p{
		font-size:14px;
	}

	header{
		height:auto;
	}

	.sectop3{
		margin-top:15px;
		font-size:50px;
	}

	.copy{
		padding-bottom:15px;
	}

	.titlebox h2{
		font-size:1.3rem;
	}
	
	.footer-flex , .fleft{
		max-width:100%;
		box-sizing:border-box;
	}
	
	.snsab{
		right:30px;
	}
		
		.swimg{
			height:480px;
			max-width:100%;
	}

	.all a{
		font-size: 13px;
	}

	.pre a , .next a{
		font-size: 14px;
	}

	#stalker{
		display: none!important;
	}

	.workflex .wospace a div{
		height: 200px;
	}

	.nav-wrap a.long{
		font-size: 16px;
		margin-top: 50px;
	}




}