*{margin: 0; padding:0; }
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {height: 100%;}

body{margin: 0;padding: 0;border: 0;outline: 0;-webkit-text-size-adjust: 100%; overflow-x: hidden; height: 100%; background: #f7f8f9; }




/*------------------------LAODING START------------------------*/

/* ブラウザのスクロールバーを常に表示させることでカクカクッとなるのを防ぐ */

 
/* ローディング関係ない部分のCSS */

img{
  max-width:100%;
}
 
/* ローディングの背景部分のCSS */
.loader{
  background: #ffffff;
  height:100%;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:11110;
}
 
/* ローディングのアニメーション部分のCSS  */
.loader-animation,
.loader-animation:before,
.loader-animation:after {
  background:#141513;
  -webkit-animation:load1 1s infinite ease-in-out;
  animation:load1 1s infinite ease-in-out;
  width:1em;
  height:4em;
}
.loader-animation {
  height:10px;
  left:50%;
  margin:-5px 0 0 -5px;
  position:absolute;
  top:50%;
  width:10px;
  color:#141513;
  text-indent:-9999em;
  font-size:10px;
  -webkit-transform:translateZ(0);
  -ms-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-animation-delay:-0.16s;
  animation-delay:-0.16s;
}
.loader-animation:before,
.loader-animation:after {
  position:absolute;
  top:0;
  content:'';
}
.loader-animation:before {
  left:-1.5em;
  -webkit-animation-delay:-0.32s;
  animation-delay:-0.32s;
}
.loader-animation:after {
  left:1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow:0 0;
    height:4em;
  }
  40% {
    box-shadow:0 -2em;
    height:5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow:0 0;
    height:4em;
  }
  40% {
    box-shadow:0 -2em;
    height:5em;
  }
}

/*-------------------------LAODING END-------------------------*/

/*-------------------------SANDAL-------------------------*/
.sp680 {display: none;}
main { width: 100%; height: 100%; background: #f7f8fa;  min-height: 500px; z-index: 0; overflow: hidden; }
.overover {z-index: 100; position: relative; background: #fff; }

header{
	width: 100%;
	padding :0px 0 0px 0;
	text-align: center;
	z-index: 11111;
	height: 40px;
	min-width: 30px;
	position: fixed;
	-moz-transition: .4s;
  -webkit-transition: .4s;
  -o-transition: .4s;
  -ms-transition: .4s;
  transition: .4s;
  display: block;
}

header a {display: block;}


.logo_ttl {padding-top: 20px; }


/*FORM START*/
#contact {padding-top: 0 !important;}
  form {margin-top: 80px;}
  input {margin-bottom: 50px;}
  input[type='text'] {background: #fff; display: block; width: 100% !important; padding: 20px; font-size: 14px; box-shadow: 1px 0px 28px rgba(0, 0, 0, 0.07); border-radius: 15px;  border: none !important; outline: 0;  }
  input[type='email'] {background: #fff; display: block; width: 100% !important; padding: 20px; font-size: 14px; box-shadow: 1px 0px 28px rgba(0, 0, 0, 0.07); border-radius: 15px;  border: none !important; outline: 0;}
  textarea {background: #fff; display: block; width: 100% !important; padding: 20px; font-size: 14px; box-shadow: 1px 0px 28px rgba(0, 0, 0, 0.07); border-radius: 15px; height: 180px; border: none !important; outline: 0; width:100%; display: block !important; resize: none; font-size: 14px;}
  
  form span {font-size: 12px; margin-bottom: 0px; height: 0 !important; position: relative; bottom: 30px; display: block;}



input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, form button {
   
    padding: 20px 40px 25px;
    font-size: 14px;
    margin-bottom: 50px;
    font-size: 14px;
    margin-bottom: 50px;
    width: 300px;
    margin: 0 auto 10px;
    border: none;
    display: block ;
    background: #1e1c1c;
    color: #fff; 
    -moz-transition: .2s;
    -webkit-transition: .2s;
    -o-transition: .2s;
    -ms-transition: .2s;
    transition: .2s;
    border-radius: 200px;
}



input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, form button:hover {
    position: relative;
    z-index: 2;
    -moz-transition: .5s;
    -webkit-transition: .s;
    -o-transition: .5s;
    -ms-transition: .5s;
    transition: .5s;
    cursor: pointer;
    background: #fdb2a1;
    background: linear-gradient(to right, #fdb2a1 0%, #fddbbe 60%, #e1f4fe 100%);
}

    #blockToCheckYourInformation,
    #windowToDisplayErrorMessasge {
      position: fixed;
      bottom: 0;
      right: 5%;
      background-color: #1e1c1c;
      z-index: 10000;
      width: 300px;
      height: 300px;
      border-radius: 10px 10px 0 0;
      border-top: 1px solid #fff;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
      padding: 30px;
    }
    
    #blockToCheckYourInformation p {color: #fff; font-size: 14px;}
    

  
/*FORM END*/

.minis {font-weight: 400; font-size: 15px; letter-spacing: 0.05em;}
.mailbtns {position: relative; right: 10px; top: 5px;}

h1 {
  text-align: left; font-size: 55px; color: #000; margin: 0px auto 20px; letter-spacing: 0.3em; 
  font-family: futura-pt, sans-serif;
  font-weight: 700;
  font-style: italic;
  position: relative; left: 0px; max-width: 800px; line-height: 1.7em;
}
.ttlline {max-width: 180px; margin: 30px auto; height: 4px; background: #000;}
h5 {text-align: left; letter-spacing: 0.1em; font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif !important; letter-spacing: 0.3em; font-size: 18px; margin-bottom: 20px; line-height: 1.8em;}


footer { padding: 50px 20px; background: #1e1c1c; position: relative; z-index: 99; text-align: center; margin-top: 0px; }

menu {width: 100px; height:calc(100% - 100px); position: fixed; z-index: 101; right: 0;}
.menuin {
  position: absolute;
  top: 50%;
  transform: translateY(-65%) ;
  -webkit- transform: translateY(-65%);
  position: relative;
  right: 10px;

}
.menuin a {display: block; margin: 5px 0;
    -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
    padding: 12px 20px 8px;
    position: relative;
    left: 12px;
}
.menuin a:hover {display: block; 
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
  position: relative;
  left: 2px;
  
}

section {padding: 50px 0px; width: auto; min-height: 600px; display: block;}
.works {padding: 20px 50px; margin-bottom: 60px;}
.works .workin {width: 33.333%; float: left; display: block; text-align: center; 
-moz-transition: .5s;
-webkit-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
transition: .5s;
overflow: visible;

}
.works .workin a {display: block;}

/*ロールオーバー */

figure {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 70%;
}
figure:hover + span {
	bottom: -36px;
	opacity: 1;
}

/* Zoom In #1 */
.hover01 figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.works .workin:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}



/*ロールオーバー END*/

/*ぼかし*/

.blur{
  -ms-filter: blur(32px);
  filter: blur(32px);
  filter:alpha(opacity=30);
  -moz-opacity: 0.3;
  opacity: 0.3;
  position: relative;
  z-index: 98;
  margin: 0 auto;
  width: 60%;
  margin-top: -100%;
  -moz-transition: .5s;
-webkit-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
transition: .5s;
  
}

.blurupper {position: relative; z-index: 99; margin: 0 auto; width: 100%;}

.works .workin:hover .blur {
-moz-transition: .5s;
-webkit-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
transition: .5s;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
  opacity: 0.5;
    -ms-filter: blur(12px);
  filter: blur(12px);
    margin-top: -100%;

}

/*ぼかしEND*/



.about_h2 {position: relative; z-index: 999; margin-top: 20px; width: 90%; margin-left: 0;}
.about_h2 h2 {color: #fff;}
.about_h2 p {color: #fff; font-weight: bold; border-left: 1px solid #fff; padding: 0 0 0 30px; margin-bottom: 0 !important;}
.about_h2 .motion-txt {padding: 0px 0 0 0 !important;}

.about_bg {width: 90%;  margin: 0 !important; padding: 0 !important; position: absolute; z-index: 98;

  right: 0;
  text-align: right;
  
}
.about_p {font-size: 20px; padding-top: 10px;}

.center {position: relative; z-index: 999; margin: 20px 80px 20px 10px; overflow: visible !important;}
.abouthree {
    float: left;
    border-radius: 50px;
    width: 30% !important;
    margin: 50px 1.66666%;
    height: 100%;
    min-height: 1px;
    text-align: center;
    background: #fff;
    box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.1);
}
.abouthree h3 {font-family: futura-pt,sans-serif; font-weight: 700; letter-spacing: 0.2em;}
.abouthree p {font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif !important; font-size: 12px; font-weight: 600; letter-spacing: 0.3em !important;}

address {font-size: 12px; color: #7b7b7b; letter-spacing: 0.05em; line-height: 1.7em;}
address a { color: #7b7b7b; text-decoration: underline; margin-left: 30px;}
address a:hover { color: #7b7b7b; text-decoration: none;}

.middle {position: relative; top: 100px;  }
.middle2 {position: relative; top: 50px;}

#works {max-width: 1300px; margin-left: auto; margin-right: auto; padding-bottom: 0 !important;}
#tips {max-width: 1300px; margin-left: auto; margin-right: auto;}
#team {max-width: 1300px; margin-left: auto; margin-right: auto; padding-top: 0 !important;}
#tips {min-height: 300px !important; height: auto;}

.name_right {float: right; display: inline-block; text-align: right;}

#fukuoka {min-height: 600px; overflow: hidden; max-width: 2500px;}

.conatct_bg {width: 90%;  margin: 0 !important; padding: 0 !important; position: absolute; z-index: 98;}


.tipslist {border-bottom: 1px solid #1e1c1c; padding: 10px 0; margin: 0 30px; }


/*DELAY ANIMATION*/

.effect-fade {
opacity : 0;
transform : translate(0, 75px);
transition : all 1000ms;
-webkit-filter: blur(60px);
  filter: blur(60px);
  
}

.effect-fade.effect-scroll {
opacity : 1;
transform : translate(0, 0);
-webkit-filter: blur(0px);
  filter: blur(0px);
}
/*DELAY ANIMATION END*/



/*LEFT TO RIGHT*/

.motion-txt {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 10px;
}

.motion-txt:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  -webkit-transform: translate3d(-101%, 0, 0);
          transform: translate3d(-101%, 0, 0);
}

.js-scroll.show .motion-txt:after {
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.js-scroll.done .motion-txt:after {
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translate3d(103%, 0, 0);
          transform: translate3d(103%, 0, 0);
}

.motion-txt .motion-inner {
  display: inline-block;
  opacity: 0;
}

.js-scroll.done .motion-txt .motion-inner {
  opacity: 1;
}

/* LEFT TO RIGHT END*/






/*RIGHT TO LEFT*/

.motion-txt2 {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 10px;
}

.motion-txt2:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  -webkit-transform: translate3d(101%, 0, 0);
          transform: translate3d(101%, 0, 0);
}

.js-scroll2.show2 .motion-txt2:after {
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.js-scroll2.done2 .motion-txt2:after {
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translate3d(-103%, 0, 0);
          transform: translate3d(-103%, 0, 0);
}

.motion-txt2 .motion-inner2 {
  display: inline-block;
  opacity: 0;
}

.js-scroll2.done2 .motion-txt2 .motion-inner2 {
  opacity: 1;
}

/*RIGHT TO LEFT*/






/* BUTTON 5 */
.btn5, .btn5:link, .btn5:visited {
  border: none;
  outline: none;
}
.btn5:hover, .btn5:focus, .btn5:link:hover, .btn5:link:focus, .btn5:visited:hover, .btn5:visited:focus {
  transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  -webkit-animation: gelatine 0.5s 1;
          animation: gelatine 0.5s 1;
}

@-webkit-keyframes gelatine {
  from,to {
    -webkit-transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
  }
  from,to {
    -webkit-transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
  }
}
@keyframes gelatine {
  from,to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
    transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
    transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
    transform: scale(0.95, 1.05);
  }
  from,to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
    transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
    transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
    transform: scale(0.95, 1.05);
  }
}
/* General styling for the links */
.sns a {
  text-decoration: none;
  font-size: 18px;
  display: inline-block;
  margin: 20px auto;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
  width: 50px;
  
}
/* BUTTON 5 */


/*MAIN SLIDER*/

.mainslider {position: fixed;  width:calc(100% - 560px); height: 100%; top: 0; z-index: 1 !important; overflow: hidden;}
.active {z-index: 97 !important; position: relative;}


#slide_wrapp {
  position: relative;
  overflow: hidden;
  height: 100%;
}
#slide_wrapp .slide_item {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 2s linear, transform 7.5s linear;
  position: relative;
  height: 100%;
  overflow: hidden;
}
#slide_wrapp .slide_item:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}
#slide_wrapp .slide_item.show_ {
  opacity: 1;
}
#slide_wrapp .slide_item.zoom_ {
  transform: scale(1.2);
}
#slide_wrapp .slide_item img {
  display: block;
  min-width: auto;
width: 100%;
min-height:100%;
height: auto;
object-fit: cover;
  
}

/*MAIN SLIDER END*/

/*SVG Animation*/


svg {
  z-index: 11111;
  position: relative;
}

 path {
    fill: none;
    stroke: #000; /*線の色を指定する*/
    stroke-dasharray: 2000;/*線の間隔を指定する*/
    stroke-dashoffset: 0;/*線の位置を指定する(IEは効かない属性)*/
    stroke-width: 1;/*線の太さを指定する*/
    -webkit-animation: hello 3s ease-in forwards;
    animation: hello 3s ease-in forwards;
    z-index: 100;
    position: relative;
}
 @-webkit-keyframes hello {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent; /*透過*/
}
 50% {
 fill:transparent; /*透過*/
}
 100% {
 stroke-dashoffset: 0;
 fill:#0085de;
 z-index: 100;
    position: relative;
}
}
@keyframes hello {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent; /*透過*/
}
 50% {
 fill:transparent; /*透過*/
}
 100% {
 stroke-dashoffset: 0;
 fill:#000;
 z-index: 100;
    position: relative;
}
}




/*SVG Animation END*/

/*カーソル*/





/*カーソルEND*/

/*マウスアイコン*/

.mtmper {margin: 100px;}
#count{
  color: #111;
  font-size: 500%;
}

#mouse{
  font-size: 200%;/*change size here*/
  width: 1em;
  height: 1.7em;
  position: relative;
  display: block;
  border: 0.1em solid #111;
  border-radius: 1.5em;
  /*positioning for demo*/
  top: 50%;
  margin-top: 0em;
  left: 50%;
  margin-left: -0.75em;
}
#mouse::after{
  content: "";
  width: 0.15em;
  height: 0.15em;
  display: block;
  background: #111;
  position: absolute;
  left: 50%;
  margin-left: -0.075em;
  top: 0.25em;
  opacity: 0;
  border-radius: 0.15em;
  transition: all 0.25s ease;
}
#mouse.unhide::after{
  opacity: 1;
}
#mouse.still::after{
  height: 0.5em;
  top: 0.25em;
  opacity: 1;
  transition: all 1s ease;
}
#mouse.scroll::after{
  height: 0.15em;
  top: 0.6em;
  opacity: 0;
  transition: all 1s ease;
}

/*マウスアイコンEND*/


/*MAINTEXT*/

.effect-fade {
opacity : 0;
transform : translate(0, 75px);
transition : all 1000ms;
-webkit-filter: blur(60px);
  filter: blur(60px);
  
}

.effect-fade.effect-scroll {
opacity : 1;
transform : translate(0, 0);
-webkit-filter: blur(0px);
  filter: blur(0px);
}
/*MAINTEXT END*/


/*CARD*/

.card_body {
  padding: 1rem 1.75rem;
}
.active {position: absolute; bottom:64px; right: 88px; text-align: left;}
.floating {
  font-family: Inconsolata; 
  margin: auto; 
  width: 453px;
  height: 280px;
  box-shadow: -10px 14px 54px rgba(0, 0, 0, 0.2) !important;
  font-size: 18px;
  border-radius: 30px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  background: linear-gradient(145deg, #fff, #eee);
  transform: rotateX(17deg) rotateY(18deg);
}

.logo {
  height: 60px;
  transform: translateZ(30px);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3) !important;
  margin: 0;
  font-weight: normal;
  filter: drop-shadow(-3px 3px 4px rgba(0, 0, 0, 0.3));
  z-index: 20;
    font-family: futura-pt,sans-serif;
  font-weight: 700;
  font-style: normal;
    letter-spacing: 0.1em;
  font-size: 24px;
  }


.paypal_center {
  height: 200px;
  width: 300px;
  position: absolute;
  top: 40px;
  left: 47%;
  transform: translateZ(5px);
  margin-left: -75px;
  z-index: 1;
  filter: drop-shadow(-6.4px 6.2px 8px rgba(0, 0, 0, 0.1));
  font-family: futura-pt,sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.1em;
  font-size: 20px;
  
}

.holder {
  position: absolute;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3) !important;
  margin: 0;
  font-weight: normal;
  filter: drop-shadow(-3px 3px 4px rgba(0, 0, 0, 0.3));
  z-index: 20;
    font-family: futura-pt,sans-serif;
  font-weight: 700;
  font-style: normal;
    letter-spacing: 0.1em;
  font-size: 24px;
  bottom: 20px;
  left: 30px;
  z-index: 20;
  letter-spacing: 2px;
  transform: translateZ(50px);
}

.fontmini {font-size: 12px; margin-right: 90px; text-align: left !important; 
  font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif !important; font-weight: 400; 
  }
.futura {
  font-family: futura-pt,sans-serif;
  font-weight: 700;
  font-style: normal;
}
.thickness {
  width: 453px;
  height: 280px;
  border-radius: 30px;
  position: absolute;
  background: linear-gradient(145deg, #ebebeb, #e2e2e2);
  transform: translateZ(-4px);
}
.thickness:nth-child(2) {
  transform: translateZ(-8px);
}
.thickness:nth-child(3) {
  transform: translateZ(-11px);
}


/*CARD END*/

/*GO TOP*/
#page_top{
  width: 25px;
  height: 50px;
  position: fixed;
  right: 30px;
  bottom: -50px;
  border-radius: 50%;
  z-index: 1002;
}
#page_top a{
  position: relative;
  display: block;
  width: 25px;
  height: 50px;
  text-decoration: none;
}

/*Go TOP END*/





/*-------------------------SANDAL END-------------------------*/









/*テンプレート*/
.font11 {font-size: 11px !important;}
.lhshort {line-height: 1.1em !important;}
.p0 {padding: 0 !important;}

h3 {font-size: 30px; letter-spacing: 0.05em; line-height: 1.5em;}
h3 span {display: block; font-size: 20px; letter-spacing: 0.05em; line-height: 1.5em; 
  font-family: futura-pt,sans-serif;
  font-weight: 700;
  font-style: normal;
}
.tex_l {text-align: left !important;}

.w48per {width: 48%;}
.w50per {width: 50%;}

.w50perpc {width: 50%;}

.left {float: left;}
.right {float: right;}

.m0 {margin: 0 !important;}
.mt0 {margin-top: 0px !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 30px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mt80 {margin-top: 80px !important;}
.mt90 {margin-top: 90px !important;}
.mt100 {margin-top: 100px !important;}



.mr20 {margin-right: 20px !important;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px;}
.mb100 {margin-bottom: 100px !important;}
.mb60 {margin-bottom: 60px !important;}
.pt100 {padding-top: 100px !important;}
.pt120 {padding-top: 120px;}
.p20{padding: 20px;}
.p30{padding: 30px;}
.p50{padding: 50px;}
.p0p30p20 {padding: 0px 30px 20px;}

.p0 {padding: 0 !important;}
.pb0 {padding-bottom: 0 !important;}
.pt30 {padding-top: 30px;}

.pb30 {padding-bottom: 30px;}
.pt50 {padding-top: 50px !important;}
.pt60 {padding-top: 60px !important;}
.bgw {background: #fff;}
.pt130 {padding-top: 130px;}
.pt180 {padding-top: 180px;}
.ptpb180 {padding-top: 180px; padding-bottom: 180px;}
.pb60 {padding-bottom: 60px;}
.font12 {font-size: 12px !important;}
.font14 {font-size: 14px;}
.font15 {font-size: 15px;}
.font16 {font-size: 16px;}

.pt50pb20 {
    padding: 50px 0px 20px;
}

.pt300 {padding-top: 300px !important;}

.w150 {width: 150px;}
.w350 {width: 350px;}

.w30per {width: 30%;}
.w65per {width: 65%;}

.w20per {width: 20%;}
.w75per {width: 75%;}

.w15per {width: 15%;}
.w40per {width: 40%;}

.mw600 {max-width: 600px;}
.w600 {width: 600px; margin: 0 auto;}
.w660 {width: 640px;}
.w540 {width: 540px;}
.w400 {width: 400px; margin: 0 auto;}
.w200 {width: 200px; display: inline-block;}
.posib10 {position: relative; bottom: 12px;}

.p5030 {padding: 50px 30px;}

.ma {margin: auto !important;}

.bordert1 {border-top: 1px solid #333;}
.borderb1 {border-bottom: 1px solid #333;}

.p20_1160{padding: auto;}  

.dib {display: inline-block;}

.height0 {height: 0; overflow: visible;}

.decounder {text-decoration: underline;}
.decounder:hover {text-align: none;}

.bold1 {font-weight: 400;}

.pt60_2 {padding-top: 60px;}

h2 {font-size: 36px; letter-spacing: 0.18em; font-family: futura-pt,sans-serif;  line-height: 1.8em; font-weight: 700; color: #121212; padding: 10px 0; margin: 0 30px;}
h6 {font-size: 24px; padding: 0px 0; font-family: futura-pt,sans-serif; font-style: italic; 
  color: #44eb7a; /* 非対応のブラウザでの文字色を設定 */
  background: -webkit-linear-gradient(0deg, #44eb7a, #37fad6); /*背景色にグラデーションを指定*/
  -webkit-background-clip: text; /*テキストでくり抜く*/
  -webkit-text-fill-color: transparent; /*くり抜いた部分は背景を表示*/
}

h4 {
  font-size: 30px;
  font-family: futura-pt,sans-serif;
  font-weight: 700;
  font-style: normal;
}





p {font-size: 16px; letter-spacing: 0.07em; line-height: 1.7em; margin-bottom: 20px; font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif !important; font-weight: 300;  }

.fontw {color: #fff;}
.fontm {color: #58638c;}

.w480 {max-width: 480px !important; width: auto; margin: 0 auto;}
.w1000 {max-width: 1000px !important; width: auto; margin: 0 auto;}
.w1300 {max-width: 1240px !important; width: auto; margin: 0 auto;}
.z9999 {z-index: 9999; position: relative;}

/*テンプレート END*/

.w800 {max-width: 800px; margin: 10px auto;}
.team {
  background: #fff;
  -moz-transition: .4s;
-webkit-transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
transition: .4s;
color: #121212;
height: 280px;
}
.team h3 {font-family: futura-pt,sans-serif; font-size: 18px; padding: 20px 0 5px; 
-moz-transition: .4s;
-webkit-transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
transition: .4s;
}
.team p {font-size: 14px;
  -moz-transition: .4s;
-webkit-transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
transition: .4s;
}
.team img {max-width: 100px;
  -moz-transition: .4s;
-webkit-transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
transition: .4s;
border-radius: 500px;
overflow: hidden;
}

.team:hover {
  background: #3026f2;
    background: -moz-linear-gradient(-45deg, #26f268 0%, #1bf6ce 100%);
    background: -webkit-linear-gradient(-45deg, #26f268 0%,#1bf6ce 100%);
    background: linear-gradient(135deg, #26f268 0%,#1bf6ce 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26f268', endColorstr='#1bf6ce',GradientType=1 );
  -moz-transition: .4s;
-webkit-transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
transition: .4s;


}
.team:hover h3 {font-family: futura-pt,sans-serif; font-size: 18px; padding: 20px 0 5px; 
-moz-transition: .4s;
-webkit-transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
transition: .4s;
color: #fff;
}
.team:hover p {font-size: 14px;
  -moz-transition: .4s;
-webkit-transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
transition: .4s;
color: #fff;
}
.team:hover img {max-width: 110px;
  -moz-transition: .4s;
-webkit-transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
transition: .4s;
}


.contacts {
  background: #e5c8e5;
    background: -moz-linear-gradient(-45deg, #e4c9e6 0%, #d8dafb 100%);
    background: -webkit-linear-gradient(-45deg, #e4c9e6 0%,#d8dafb 100%);
    background: linear-gradient(135deg, #e4c9e6 0%,#d8dafb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4c9e6', endColorstr='#d8dafb',GradientType=1 );
    padding: 50px 20px;
    margin-top: 100px;
}

/*ボタン*/

/* Mixins */
/* bg shortcodes */
.bg-gradient1 span,
.bg-gradient1:before {
  background: #52A0FD;
  background: linear-gradient(to right, #52A0FD 0%, #00e2fa 80%, #00e2fa 100%);
}

.bg-gradient2 span,
.bg-gradient2:before {
  background: #44ea76;
  background: linear-gradient(to right, #44ea76 0%, #39fad7 80%, #39fad7 100%);
}

.bg-gradient3 span,
.bg-gradient3:before {
  background: #fa6c9f;
  background: linear-gradient(to right, #fa6c9f 0%, #ffe140 80%, #ffe140 100%);
}


a {
  text-decoration: none;
}
a:hover, a:focus, a:active {
  text-decoration: none;
}

.fontfutura {
  font-family: futura-pt,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 38px;

}

.minw200 {min-width: 200px;}


.three p {font-size: 13px; letter-spacing: 0.03em !important; text-align: center;}

.li100 {width: 100% !important;}






.contactbtn {border: 5px solid #333; padding: 20px 40px; color: #333; text-align: center; font-size: 18px; font-weight: bold; letter-spacing: 0.05em; line-height: 1.7em; margin: 30px auto; display: inline-block;  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
  display: block;
  max-width: 300px;
}

.contactbtn:hover {border: 5px solid #fff; padding: 20px 40px; color: #fff; text-align: center; font-size: 18px; font-weight: bold; letter-spacing: 0.05em; line-height: 1.7em; margin: 30px auto; display: inline-block;  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
  display: block;
  max-width: 300px;
}



.bl1 {border-right: 1px solid #fff;}


.w1160 {width: 1200px; margin: 0 auto;}
.ttl2 {display: inline-block; padding: 38px 0; float: left;}
.ttl2in {width: 200px; display: inline-block;}



.topnews {background: rgba(4, 4, 4, 0.7) ; padding: 20px; position: absolute; width: 400px; top: 580px; right: 50px;}
.topnews_l {width: 98px; height: 98px; overflow: hidden; float: left; }
.topnews_r {width: 280px; height: 98px; overflow: hidden; float: left; margin-left: 20px; background: url(../img/ya.png) no-repeat bottom 0px right 0px; background-size: 10px;}
.topnews_r span {font-size: 12px; color: #fff; display: block; margin-bottom: 10px;}
.topnews_r p {font-size: 13px; color: #fff;}
.topnews_r p a {font-size: 13px; color: #fff;}
.topnews_r p a:hover {font-size: 13px; color: #fff; text-decoration: underline;}


@-webkit-keyframes bgroop {
    from {
        background-position: 0  0;
    }
    to {
        background-position: -1956px 0;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1956px 0;
    }
}




.bann {text-align: right; overflow: visible; position: relative; bottom: 50px;}
.bann img { width: 370px; float: right;}



img{border: none;}
html{height:100%; min-height:500px;}
body{height:100%; min-height:500px; }
a{margin:0; padding:0;text-decoration: none;}
a img:hover{}
#wrapper{min-width: 640px;  min-height:100px;}


::selection {
    background: #000;
    color: #fff;
}

//Firefox
::-moz-selection {
    background: #000;
    color: #fff;
}




.tex_c {text-align: center !important;}

img {max-width: 100%;}

.sp {display: none;}

.overimg:hover {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}

.supportbox {position: relative; bottom: 50px;}

.three {text-align: center; width: 33.333%; float: left;} 
.three img {width: 40%; max-width: 130px;}

.kakumaru {border-radius: 20px; overflow: hidden;}
.kakumaru50 {border-radius: 50px;}








.news {background: rgba(255, 255, 255, 0.13); padding: 10px 20px; z-index: 9; position: relative; bottom: 130px; 
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
.news:hover {background: rgba(255, 255, 255, 0.83); padding: 10px 20px; z-index: 9; position: relative; bottom: 130px; 
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
.news {font-size: 13px; letter-spacing: 0.05em; line-height: 1.6em; font-weight: 400; height: 24px; }
.news span {font-size: 14px; letter-spacing: 0.05em; line-height: 1.6em; padding: 0 20px 0 0; margin: 0 20px 0 0; font-weight: 400; border-right: 1px solid #333;   }

body {background: #fff;}

.wid {background: url(../img/top_b2.png) no-repeat left top; background-size: cover; padding: 0px 0 50px; }
.four {width: 25%;}
.four img {padding: 0 4%; width: 92%;}

.fourabout {width:calc(25% - 80px); margin: 10px 10px; background: #fff; border-radius: 50px; padding: 30px; text-align: center; min-height: 400px;}

.fourabout img {margin: 10px auto; width: 60%; min-width: 120px;}
.fourabout h4 {font-size: 18px; text-align: left; margin-bottom: 20px;}
.fourabout p {font-size: 14px; text-align: left;}
.fourabout span {display: block; width: 55px; height: 0; overflow: visible; position: relative; bottom: 50px; right: 50px; }
.fourabout span img {width: 55px !important; min-width: 55px !important;}


.work_list {margin: 0 auto; max-width: 1800px;}

.left {float: left;}


/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}



.pc {display: block;}



@media screen and (max-width: 860px){
  
h5 {
  text-align: center;
}

main {
    width: 100%;
    height: 100%;
    background: none;
    min-height: 500px;
    z-index: 0;
    overflow: hidden;
}
.mainslider {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1 !important;
    overflow: hidden;
}

.logo_ttl {
    padding-top: 20px;
    width: 150px;
}
h1 {
    text-align: center;
    font-size: 40px;
    color: #000;
    margin: 0px auto 20px;
    letter-spacing: 0.3em;
    position: relative;
    left: 13px;
    max-width: 800px;
    line-height: 1.5em;
}  
h5 {
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.8em;
}  
.works .workin {
    width: 33.333%;
    float: left;
    display: block;
    text-align: center;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
    -ms-transition: .5s;
    transition: .5s;
    overflow: visible;
} 
.middle {
    position: relative;
    top: 100px;
}
.middle2 {
    position: relative;
    top: 50px;
}
figure {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 90%;
}


/*CARD*/

.card_body {
  padding: 1rem 1.75rem;
}
.active {position: relative; top: 30%;}
.floating {
  font-family: Inconsolata; 
  margin: auto; 
  width: 360px;
  height: 220px;
  box-shadow: -10px 14px 54px rgba(0, 0, 0, 0.2) !important;
  font-size: 18px;
  border-radius: 30px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  background: linear-gradient(145deg, #fff, #eee);
  transform: rotateX(17deg) rotateY(18deg);
}

.logo {
  height: 60px;
  transform: translateZ(30px);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3) !important;
  margin: 0;
  font-weight: normal;
  filter: drop-shadow(-3px 3px 4px rgba(0, 0, 0, 0.3));
  z-index: 20;
    font-family: futura-pt,sans-serif;
  font-weight: 700;
  font-style: normal;
    letter-spacing: 0.1em;
  font-size: 18px;
  }


.paypal_center {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 40px;
  left: 55%;
  transform: translateZ(5px);
  margin-left: -75px;
  z-index: 1;
  filter: drop-shadow(-6.4px 6.2px 8px rgba(0, 0, 0, 0.1));
  font-family: futura-pt,sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.1em;
  font-size: 20px;
  
}
.paypal_center img {width: 100px;}

.holder {
  position: absolute;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3) !important;
  margin: 0;
  font-weight: normal;
  filter: drop-shadow(-3px 3px 4px rgba(0, 0, 0, 0.3));
  z-index: 20;
    font-family: futura-pt,sans-serif;
  font-weight: 700;
  font-style: normal;
    letter-spacing: 0.1em;
  font-size: 16px;
  bottom: 20px;
  left: 30px;
  z-index: 20;
  letter-spacing: 2px;
  transform: translateZ(50px);
}

.fontmini {font-size: 10px; margin-right: 80px; text-align: left !important; 
  font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif !important; font-weight: 400; 
  }
.futura {
  font-family: futura-pt,sans-serif;
  font-weight: 700;
  font-style: normal;
}
.thickness {
  width: 360px;
  height: 220px;
  border-radius: 30px;
  position: absolute;
  background: linear-gradient(145deg, #ebebeb, #e2e2e2);
  transform: translateZ(-4px);
}
.thickness:nth-child(2) {
  transform: translateZ(-8px);
}
.thickness:nth-child(3) {
  transform: translateZ(-11px);
}
#team {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 30px 0 0 !important;
}

/*CARD END*/
.about_bg img {height: 380px;}
.sppl30 {padding-left: 30px;}

}

@media screen and (max-width: 640px){
  
.logo_ttl {
    padding-top: 20px;
    width: 120px;
}

menu {
    width: 50px;
    height: calc(100% - 100px);
    position: fixed;
    z-index: 101;
    right: 0;
}

.menuin {
    position: absolute;
    top: 50%;
    transform: translateY(-65%);
    -webkit- transform: translateY(-65%);
    position: relative;
    right: 10px;
}
.menuin a {
    display: block;
    margin: 2px 0;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -ms-transition: .3s;
    transition: .3s;
    padding: 4px 2px 4px;
    position: relative;
    left: 4px;
}
.menuin a img {width: 50px;}

  p {
    font-size: 14px;
    letter-spacing: 0.07em;
    line-height: 1.7em;
    margin-bottom: 20px;
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif !important;
    font-weight: 300;
}
h2 {
    font-size: 28px;
    letter-spacing: 0.18em;
    font-family: futura-pt,sans-serif;
    line-height: 1.8em;
    font-weight: 700;
    color: #121212;
    padding: 10px 0;
    margin: 0 30px;
}
h1 {
    text-align: center;
    font-size: 36px;
    color: #000;
    margin: 0px auto 20px;
    letter-spacing: 0.3em;
    position: relative;
    left: 13px;
    max-width: 800px;
    line-height: 1.5em;
}
h5 {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.8em;
    padding: 0 30px;
    letter-spacing: 0em;
}

.works .workin {
    width: 100%;
    float: none;
    display: block;
    text-align: center;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
    -ms-transition: .5s;
    transition: .5s;
    overflow: visible;
    max-width: 300px;
    margin: 0 auto;
}
.middle {
    position: relative;
    top: 0px;
}
.middle2 {
    position: relative;
    top: 0px;
}
figure {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 90%;
}

#slide_wrapp .slide_item img {
    display: block;
    min-width: auto;
    width: auto;
    max-width: 900px !important;
    min-height: 100%;
    height: auto;
}
.sppl30 {
    padding-left: 0px;
}
.left {float: none;}
.right {float: none;}
form {
    margin-top: 80px;
    padding: 0 30px;
}
footer img {
    width: 120px;
}
#contact {
    padding-top: 60px !important;
}
.sp680 {display: block;}
input[type='text'] {
    background: #fff;
    display: block;
    width: 100% !important;
    padding: 15px;
    font-size: 14px;
    box-shadow: 1px 0px 28px rgba(0, 0, 0, 0.07);
    border-radius: 15px;
    border: none !important;
    outline: 0;
}
input {
    margin-bottom: 20px;
}
.active {
    position: relative;
    bottom: 64px;
    right: 0;
    text-align: left;
}

}