@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 display: block;
}
body ,input,textarea{
 font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif;
}
ol, ul, li {
 list-style: none;
}
.list-idt li{
 padding-left: 1em;
 text-indent: -1em;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
img{
 vertical-align: bottom;
}


/* -------------------------------------------------------
 style base
------------------------------------------------------- */
html {
 background-color: #fff;
}
body {
 width:100%;
 color:#000;
 -webkit-overflow-scrolling: touch;
}
*,
*:before,
*:after {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
a:link,
a:visited{
 color:#000;
}
a:hover,
a:active{
 color:#ff308d;
}
.clearfix:after {
 content: "";
 display: block;
 clear: both;
}
.clearfix:before {
 content: "";
 display: block;
 clear: both;
}
.clearfix {
 display: block;
}
.sp{display: none;}
.pc{display: block;}
@media screen and (max-width: 767px) {
  .sp{display: block;}
  .pc{display: none;}
}
.mintxt {
 font-family :'Yu Mincho Regular', 'Yu Mincho','YuMincho Medium',serif;
 font-weight: bold;
}


/*container*/
#container{
 width:100%;
 position: relative;
}


/* -------------------------------------------------------
 header & footer
------------------------------------------------------- */
/*header*/
#header{
 width:100%;
 height:54px;
 position: absolute;
 top:0;
 z-index: 10;
}
#logo{
 width:80px;
 height:16px;
 line-height: 0;
 position: absolute;
 top:0;
 right:22px;
}
#logo a{
 display: block;
 width:80px;
 height:54px;
 padding-top: 19px;
}

#topTitle{
 width:100%;
 height:auto;
 padding:54px 0 35px;
}
@media all and (-ms-high-contrast: none) {
  #topTitle{
   width:100vw;
   height:auto;
   padding:54px 0 35px;
   margin-left: -6px;
  }
}
#topTitle .color{
 position: relative;
}
#topTitle .color::after{
 content: '';
 display: block;
 width: 100%;
 height: 2px;
 background:#fff;
 position: absolute;
 bottom:0;left:0;
}
#topTitle img{
 display: block;
 width:100%;
 height:auto;
}

/*footer*/
footer{
 padding:65px 0;
}
footer p{
 font-size: 13px;
 font-weight: bold;
 color:#fff;
 letter-spacing: 1px;
 text-align: center;
}
.footer-btn{
 width:360px;
 display:flex;
 flex-wrap: nowrap;
 justify-content: flex-end;
 position: absolute;
 right:0;
 opacity: 0;
}
.footer-btn.top{
 width:180px;
}
.footer-btn li{
 width:180px;
 padding:1px 0 0 1px;
}
.footer-btn li a{
 text-decoration: none;
}
.fbtn{
 display: block;
 line-height: 46px;
 vertical-align:middle;
 color:#ff308d;
 text-align: center;
 cursor: pointer;
 background: rgba(255,255,255,1);
 transition: background-color .2s linear;
}
.fbtn span{
 font-size:16px;
 font-weight:bold;
}



/* -------------------------------------------------------
 top
------------------------------------------------------- */
#search{
 width:100%;
 padding-bottom:100px;
 margin-top:-2px;
 display:flex;
 flex-wrap: nowrap;
 justify-content: space-between;
 align-items: stretch;
}
@media only screen and (max-width: 1339px) {
  #search {
   max-width: 1050px;
   margin:0 auto;
  }
}
#search-area{
  display: block;
 width:300px;
 order:1;
}
#results-area{
 flex: 1;
 width:100%;
}

/* search-area
-------------------------------------------- */
.search-inner{
 position: sticky;
 top:0;
}
.select-box{
 padding:5px 0 30px;
}
.search-title{
 padding-left:30px;
 font-size:26px;
 font-weight: bold;
 line-height: 1;
 position: relative;
}
.line-icon{
 display: block;
 width: 8px;
 height: 3px;
 position: absolute;
 top:50%;left:3px;
 margin-top:-3px;
}
.select-box ul{
 margin:20px 0 0 30px;
}
.select-box ul li{
 padding:1px;
 margin:0 5px 5px 0;
 float: left;
}
.select-box ul li.w1{
 width:120px;
}
.select-box ul li.w2{
 width:210px;
}
.select-box ul li.w3{
 width:220px;
}
/*Checkbox*/
input[type=checkbox] {
 display: none;
}
.cbox {
 padding: 10px;
 display: flex;
 align-items: center;
 cursor: pointer;
 background: rgba(255,255,255,1);
 transition: background-color .2s linear;
}
input[type=checkbox]:checked + .cbox{
 background: rgba(255,255,255,0);
 color: #fff;
}
.cbox-input-dummy {
 position: relative;
 top: 0;
 left: 0;
 display: block;
 width: 16px;
 height: 16px;
 border: solid 1px #7f7f7f;
}
.cbox-text {
 margin-left: 10px;
 padding-top:3px;
 display: inline-block;
 font-size: 15px;
 line-height: 1;
}
input[type=checkbox]:checked + .cbox .cbox-input-dummy{
 border-color: #fff;
}
input[type=checkbox]:checked + .cbox .cbox-input-dummy::before {
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 50%;
 height: 3px;
 border-radius: 2px;
 transform: translate(-5px, 2px) rotateZ(-135deg);
 transform-origin: 2px 2px;
 margin:-2px 0 0 2px;
 background: #fff;
}
input[type=checkbox]:checked + .cbox .cbox-input-dummy::after {
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 height: 3px;
 border-radius: 2px;
 transform: translate(-4px, 3px) rotateZ(-45deg);
 transform-origin: 2px 2px;
 margin:-2px 0 0 2px;
 background: #fff;
}

/*ボタン*/
input[type="submit"] {
 -webkit-appearance: none;
 margin: 0;
}
.submit-btn{
 width:250px;
 margin-left:30px;
 display: block;
 padding:1px;
}
.btn{
 display: block;
 width:100%;
 font-size:20px;
 line-height: 46px;
 vertical-align:middle;
 color:#000;
 border:none;
 outline: none;
 cursor: pointer;
 background: rgba(255,255,255,1);
 transition: background-color .2s linear;
}

/* results-area
-------------------------------------------- */
.results-inner{
 margin: 0 auto;
}
@media only screen and (min-width: 1000px) {
  .results-inner {
   max-width: 680px;
  }
}
@media only screen and (min-width: 1340px) {
  .results-inner {
   max-width: 1020px;
  }
}
@media only screen and (min-width: 1680px) {
  .results-inner {
   max-width: 1360px;
  }
}
.results-number{
  text-align: right;
  margin-right:10px;
 }
 .results-number span{
  display: inline-block;
  width:70px;
 }
.work-list{
 display:flex;
 flex-wrap: wrap;
 align-items: stretch;
 background-color: #fff;
}
.work-list a{
 text-decoration: none;
}
.work{
  position: relative;
 width:320px;
 height:310px;
 padding:1px;
 margin:10px;
 cursor: pointer;
 opacity: 0; 
 transform: translateY(50px);
 transition: all .8s cubic-bezier(0.25, 1, 0.5, 1);
}
.work.show{
  opacity: 1;
  transform: translateY(0);
}
.bginner{
 height:100%;
 background: rgba(255,255,255,1);
 /* transition: background-color .2s linear; */
 transition: background-color .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.work > .bginner{
 padding:30px 26px;
}
.work .number{
 padding-left:22px;
 font-size:19px;
 font-weight: bold;
 line-height: 1;
 position: relative;
}
.work .number .line-icon{
 display: block;
 width: 8px;
 height: 3px;
 position: absolute;
 top:50%;left:0;
 margin-top:-2px;
}
.work h2{
 height:82px;
 padding:12px 0 0;
 margin-bottom:16px;
 font-size: 25px;
 letter-spacing: -1px;
 line-height: 1.4;
 font-feature-settings: "palt" 1;
 overflow: hidden;
}
.work .client{
 height:30px;
 font-size:17px;
 line-height: 1.1;
}
.work .tag{
 margin-top:24px;
 height:76px;
 overflow: hidden;
}
.work .tag li{
 display: inline-block;
 font-size:14px;
}
.work .tag li::after{
 content:'／';
}


/* -------------------------------------------------------
 中ページ
------------------------------------------------------- */
#page{
 max-width:1040px;
 margin:0 auto;
 padding:110px 20px 0;
}
.contents1{
 display:flex;
 flex-wrap: nowrap;
 justify-content: space-between;
}
.title-area{
 flex: 1;
}

.title-area h2{
  margin-bottom:16px;
  font-size: 40px;
  letter-spacing: -1.2px;
  line-height: 1.4;
  overflow: hidden;
 }
.title-area .client{
 font-size:17px;
 line-height: 1.1;
 padding-bottom: 15px;
}
.category{
 display:flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.cate-box{
 width:500px;
 padding-top:30px;
}
.cate-title{
 padding-left:30px;
 font-size:26px;
 font-weight: bold;
 line-height: 1;
 position: relative;
}
.cate-box ul{
 margin:20px 0 0;
}
.cate-box ul li{
 padding:1px;
 margin:0 5px 5px 0;
 float: left;
}
.cate-text {
 padding: 13px 15px;
 display: inline-block;
 font-size: 16px;
 line-height: 1;
 background: rgba(255,255,255,1);
}
.image-area{
 width:480px;
}
.image-area img{
 width:100%;
}
.page-line{
 width:100%;
 height: 1px;
 margin:50px 0;
}
.contents2 .tag{
 margin-top:30px;
}
.contents2 .tag li{
 display: inline-block;
 font-size:14px;
}
.contents2 .tag li::after{
 content:'／';
}
.contents2 .detail{
 margin-top:30px;
 padding:1px;
}
.contents2 .detail .inner{
 padding:33px 30px;
 background: rgba(255,255,255,.9);
 font-size: 18px;
 line-height: 1.9;
}

.detail p{
  font-family :'Yu Mincho Regular', 'Yu Mincho','YuMincho Medium',serif;
  font-weight: bold;
}

.contents2 .working{
 margin-top:30px;
 font-size:15px;
}
ul.point li{
 padding:12px 14px;
 margin:0 10px 10px 0;
 font-size: 20px;
 font-weight: bold;
 color:#fff;
 letter-spacing: -0.5px;
}
/*images*/
ul.images{
 margin-top:50px;
 display:flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: stretch;
}
ul.images.item1 li{
 width:100%;
}
ul.images.item2 li{
 width:48%;
 max-width:480px;
}
ul.images li p{
 padding-top: 5px;
 font-size:15px;
 line-height: 1.4;
 font-weight: bold;
}
ul.images li .color{
 padding:1px;
}
ul.images li .color .bginner{
 padding:18px;
}
ul.images li .color .bginner img{
 width:100%;
 height:auto;
 display: block;
 margin:0 auto;
}
/*relation*/

.relation{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0px 0 0;
}
.relation .page-line{
  margin: 80px 0 50px;
  height:4px;
}
.relation .ttl{
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  padding-bottom:30px;
}

.relation .work-list{
 justify-content: center;
}


/*return*/
.return{
 width:100%;
 margin-top:50px;
 padding:30px 0;
 text-align: center;
}
.return a{
 display: inline-block;
 background: rgba(255,255,255,1);
 transition: background-color .2s linear;
 text-decoration: none;
}
.return a span{
 display: inline-block;
 padding:0 50px;
 font-size:20px;
 line-height: 50px;
 vertical-align:middle;
 color:#000;
 text-align: center;
 letter-spacing: 2px;
 font-weight: bold;
}
/* inquiry */
.inquiry{
 padding:65px 10px 85px;
 max-width:840px;
 margin:0 auto;
 text-align: center;
}
.inquiry-title{
 display: inline-block;
 padding:0 26px;
 font-size:26px;
 margin-bottom: 30px;
 position: relative;
}
.line-icon2{
 display: block;
 width: 8px;
 height: 3px;
 position: absolute;
 top:50%;right:3px;
 margin-top:-3px;
}
.form-item {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: start;
 margin-top:12px;
 text-align: left;
}
.form-item label{
 width:210px;
 font-size: 17px;
 font-weight: bold;
 line-height: 60px;
}
.form-item label > span{
 font-size: 12px;
 color:#ff621d;
 margin-left:5px;
}
.form-item .color {
 width:calc(100% - 210px);
 padding:1px;
}
.form-item .color + span{
 display: block;
 padding:5px 0 0 210px;
 color:#ff0000;
}
input[type="text"], input[type="email"] {
 width: 100%;
 padding: 0 10px;
 margin:0;
 font-size: 18px;
 line-height: 60px;
 height: 60px;
 color: #4d4d4d;
 background-color: #fff;
/* border:1px solid #ff308d;*/
 border:none;
 border-radius:0;
 outline: none;
}
textarea{
 display:block;
 width: 100%;
 height:180px;
 padding:10px;
 margin:0;
 font-size: 18px;
 color:#4d4d4d;
 background-color: #fff;
 border:none;
 border-radius:0;
 outline: none;
}
/*placeholder*/
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
 color: #AAA;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
 color: #AAA;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
 color: #AAA;
}
.form-item + p{
 width:250px;
 margin:30px auto 0;
 display: block;
 padding:1px;
}
.form-item + p > input[type="submit"]{
 display: block;
 width:100%;
 font-size:20px;
 line-height: 46px;
 vertical-align:middle;
 color:#000;
 border:none;
 outline: none;
 cursor: pointer;
 background: rgba(255,255,255,1);
 transition: background-color .2s linear;
 font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
 font-weight: bold;
 margin:0;
}

/*thanks*/
.thanks{
  padding:30px 0 60px;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.37, 0, 0.63, 1);
}

.thanks.show{
  opacity: 1;
}
/* -------------------------------------------------------
 404エラーページ
------------------------------------------------------- */
#container.error404{
 display: flex;
 flex-direction:column;
 height:100vh;
}
#container.error404 footer{
 margin-top:auto;
}
.err{
 max-width: 500px;
 margin:0 auto;
 padding:70px 0 ;
}
.err h1{
  font-size: 20px;
  font-weight: bold;
}
.err p{
  padding-top:20px;
}
.err p a{
  font-weight: bold;
}

/* -------------------------------------------------------
 グラデーション設定
------------------------------------------------------- */
/* ff3b79 */
@keyframes fakecolor {
  0% { background-color: #ff04f6; }
  33% { background-color: #ff3b79; }
  66% { background-color: #ff4c05; }
  100% { background-color: #ff04f6; }
}

@keyframes fakecolor0 {
  0% { background-color: #ff04f6; }
  33% { background-color: #ff3b79; }
  66% { background-color: #ff4c05; }
  100% { background-color: #ff04f6; }
}

@keyframes fakecolor1 {
  0% { background-color: #ff3b79; }
  33% { background-color: #ff4c05; }
  66% { background-color: #ff04f6; }
  100% { background-color: #ff3b79; }
}

@keyframes fakecolor2 {
  0% { background-color: #ff4c05; }
  33% { background-color: #ff04f6; }
  66% { background-color: #ff3b79; }
  100% { background-color: #ff4c05; }
}


.colorAnm0{  animation:fakecolor0 12s infinite;  }
.colorAnm1{  animation:fakecolor1 12s infinite;  }
.colorAnm2{  animation:fakecolor2 12s infinite;  }

@keyframes fakeTxtcolor {
  0% { color: #ff04f6; }
  33% { color: #ff3b79; }
  66% { color: #ff4c05; }
  100% { color: #ff04f6; }
}



/* 利用 */
.color2{
  animation:fakecolor 12s infinite;

}


.txtcolor2{
  display: inline;
  /* -webkit-background-clip: text; */
  /* color: transparent; */
  animation:fakeTxtcolor 12s infinite;
 }

 
.color{
  /* background-color: #e74c3c; */
  /* animation:fakecolor 12s infinite; */
  
 /* background: linear-gradient(to right,#ff01fc,#ff416b,#f47222,#c9be15,#6cbb56,#2594af,#623dff,#ff01fc ) 0% center / 1200% auto; */
 /* animation: gradColor 160s linear infinite; */
}

.txtcolor{
 display: inline;
 /* background: linear-gradient(to right,#ff01fc,#ff416b,#f47222,#c9be15,#6cbb56,#2594af,#623dff,#ff01fc ) 0% center / 1200% auto; */
 -webkit-background-clip: text;
 color: transparent;
 /* animation: gradColor 160s linear infinite; */
 /* background-color: #e74c3c; */
 /* animation:fakecolor 12s infinite; */
}

.anm-play{
  animation:fakecolor 12s infinite;
  /* animation: gradColor 240s linear infinite; */
}

/* 背景の横位置をズラす */
@keyframes gradColor {
  to { background-position-x: 1200%; }
}

@media all and (-ms-high-contrast: none){/*IEのとき*/
  .txtcolor {
   background: transparent;
   color: #ff00ff;
  }
}


/* -------------------------------------------------------
 hover時
------------------------------------------------------- */
/*work*/
.work:hover .bginner{ 
/* a:hover .bginner{ */
 background: rgba(255,255,255,0);
 color: #fff;
 transition: background-color .01s;
}
.bginner:hover .color{
 background: linear-gradient(90deg, #ffffff, #ffffff);
}
.bginner:hover .txtcolor{
 display: inline;
 background: linear-gradient(90deg, #ffffff, #ffffff);
 -webkit-background-clip: text;
 color: transparent;
 transition: background-color .2s cubic-bezier(0.37, 0, 0.63, 1);
}

.bginner:hover .color2{
  background: #FFF;

 }

.bginner:hover .txtcolor2{
  background: #FFF;
  -webkit-background-clip: text;
  color: transparent;
 }


@media all and (-ms-high-contrast: none){/*IEのとき*/
  .bginner:hover .txtcolor {
   background: transparent;
   color: #ffffff;
  }
}
/*cbox*/
.cbox:hover,
.btn:hover{
 background: rgba(255,255,255,0);
 color: #fff;
}
.cbox:hover .cbox-input-dummy{
 border-color: #fff;
}
.cbox:hover .cbox-input-dummy::before,
.cbox:hover .cbox-input-dummy::after {
 background: #fff;
}
/*footer*/
.fbtn:hover{
 background: rgba(255,255,255,.7);
}
/*return*/
.return a:hover{
 background: rgba(255,255,255,.6);
}
.form-item + p > input[type="submit"]:hover{
 background: rgba(255,255,255,.7);
}


/* -------------------------------------------------------
 ナビ切り替え
------------------------------------------------------- */
@media only screen and (max-width: 998px) {
  #header {
   position: fixed;
   top:0;left:0;
  }
  #logo{
   right:50%;
   margin-right:-40px;
  }
  #navibtn{
   width:54px;
   height:54px;
   position: absolute;
   top:0;right:0;
   cursor: pointer;
  }
  #navibtn span{
   color: #fff;
   position: absolute;
   top: 14px;
   left: 14px;
   width: 22px;
   height: 22px;
   background-color: rgba(255,255,255,.3);
   border: solid 4px currentColor;
   border-radius: 100%;
   -webkit-transform: rotate(-45deg);
           transform: rotate(-45deg);
  }
  #navibtn span:before{
   content: '';
   position: absolute;
   top: 16px;
   left: 5px;
   height: 12px;
   width: 4px;
   border-radius: 2px;
   background-color: currentColor;
  }
  #navibtn.active span{
   top: 25px;
   left: 12px;
   width:30px;
   height:4px;
   border-radius: 2px;
   border: none;
   background-color:currentColor;
   position: absolute;
  }
  #navibtn.active span:before{
   top:-13px;
   left: 13px;
   height:30px;
   width:4px;
   border-radius: 2px;
  }
  .submit-btn{
   width:200px;
   margin:0 auto;
   display: block;
   padding:1px;
  }
  .btn{
   display: block;
   width:100%;
   font-size:18px;
   line-height: 36px;
  }
  .results-inner {
   max-width: 680px;
  }
  #search-area {
    display: none;
   background-color: rgba(240,240,240,1);
   width:100%;
   position: fixed;
   top:54px;left:0;
   z-index: 100;
   padding:20px 10px 40px;
   border-bottom: 3px solid #ccc;
  }
  .search-inner{
    position: relative;
    width:700px;
    margin:0 auto;
  }
  .select-box{
   padding:5px 0 20px;
  }
  .select-box ul{
   margin:10px 0 0 30px;
  }
}
@media only screen and (min-width: 999px) {
  #search-area {
    display: block!important;
  }
}



/* -------------------------------------------------------
 SP版　調整
------------------------------------------------------- */
@media only screen and (max-width: 770px) {
  footer{
   padding:35px 0;
  }
/* navi
-------------------------------------------- */
  #search-area {
   padding:10px 10px 20px;
   
  }
  .search-inner{
    position: relative;
    width:100%;
    margin:0 auto;
  }
  .select-box{
   padding:5px 0 10px;
  }
  .search-title {
    font-size: 20px;
  }
  .cbox-text {
   font-size: 14px;
  }
  .submit-btn{
   width:200px;
   margin:0 auto;
   display: block;
   padding:1px;
  }
  .btn{
   display: block;
   width:100%;
   font-size:16px;
   line-height: 36px;
  }
  .footer-btn{
   width:220px;
  }
  .footer-btn.top{
   width:110px;
  }
  .footer-btn li{
   width:110px;
  }
  .fbtn{
   line-height: 40px;
  }
  .fbtn span{
   font-size:14px;
   font-weight:bold;
  }
/* top
-------------------------------------------- */
  #search{
   padding-bottom: 70px;
   min-height: calc(100vh - 225px);
  }
  .work-list{
    display:block;
    padding:0 10px;
  }
  .work{
   width:100%;
   height:auto;
   margin:10px 0 0;
  }
  .bginner{
   display: block;
   width:100%;
   height:auto;
  }
  .work > .bginner{
   padding:20px 15px;
  }
  .work .number{
   font-size:18px;
  }
  .work h2{
   height:auto;
   padding:10px 0 0;
   margin-bottom:12px;
   font-size: 22px;
  }
  .work .client{
   height:auto;
   font-size:15px;
  }
  .work .tag{
   height:auto;
   margin-top: 15px;
  }
  .work .tag li{
   font-size: 12px;
  }

/* 中ページ
-------------------------------------------- */
  #page{
   padding:80px 10px 0;
  }
  .contents1{
   flex-direction:column;
  }
  .title-area{
   width:100%;
   order: 2;
  }
  .image-area{
   padding:0 20px 20px;
   width:100%;
   order: 1;
   text-align: center;
  }
  .image-area img{
   max-width:465px;
   margin:0 auto;
  }
  .title-area .number{
   padding-left:18px;
   font-size:20px;
  }
  .title-area h2{
   padding:10px 0 0;
   margin-bottom:16px;
   font-size: 28px;
  }
  .title-area .client{
   font-size:15px;
   padding-bottom: 15px;
  }
  .category{
   flex-direction:column;
  }
  .cate-box{
   width:100%;
   padding-top:20px;
  }
  .cate-title{
   padding-left:26px;
   font-size:23px;
  }
  .cate-box ul{
   margin:14px 0 0;
  }
  .cate-text {
   padding: 9px 12px;
   font-size: 14px;
  }
  .page-line{
   margin:35px 0;
  }
  .contents2{
   padding-bottom:10px;
  }
  .contents2 .detail{
   margin-top:10px;
  }
  .contents2 .tag li{
   font-size:12px;
  }
  .contents2 .detail .inner{
   padding:15px 15px;
   font-size: 15px;
  }
  .detail p{
    font-family :'Yu Mincho Regular', 'Yu Mincho','YuMincho Medium',serif;
    font-weight: bold;
  }

  .contents2 .working{
   margin-top:20px;
   font-size:13px;
  }
  ul.point li{
   padding:6px 10px;
   margin:0 10px 10px 0;
   font-size: 16px;
  }
  ul.images{
   margin-top:20px;
   flex-direction:column;
  }
  ul.images.item2 li{
   width:100%;
   max-width:100%;
  }
  ul.images.item2 li + li{
   margin-top:20px;
  }
  .return{
   margin-top:30px;
  }
  .return a span{
   padding:0 40px;
   font-size:16px;
   line-height: 40px;
  }
  .inquiry{
   padding:40px 10px 65px;
  }
  .inquiry-title{
   font-size:23px;
   margin-bottom: 10px;
  }
  .form-item {
   flex-direction:column;
   margin-top:12px;
  }
  .form-item label{
   width:100%;
   font-size: 16px;
   line-height: 50px
  }
  .form-item label span{
   font-size: 12px;
   color:#ff621d;
   margin-left:5px;
  }
  .form-item .color {
   width:100%;
  }
  .form-item .color + span{
   padding:5px 0 0 0;
  }
  input[type="text"], input[type="email"] {
   font-size: 15px;
   line-height: 44px;
   height: 44px;
  }
  textarea{
   height:100px;
   font-size: 15px;
  }

  .relation .page-line{
    margin: 80px 0 40px;
    height:4px;
  }
  .relation .ttl{
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding-bottom:20px;
  }

}



/*
  flow
*/


.flowOverTrns{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  overflow: hidden;
  pointer-events: none;
  /*background: linear-gradient(0deg , rgba(255, 0, 0, 0) 0%, rgba(255,0,0, 1) 90%);*/
}
.flowOverTrns>div{
  position: relative;
  top: 0;
  background-color: #ffffff;
  /* border-top: solid 1px #F00;
  border-bottom: solid 1px #F00; */
  width: 100%;
  height: 100%;
  /* transform: translateY(100%);
  transition: all 500ms ease; */
}

.flowIn{
  /* transform: translateY(100%); */
  /*transform:scaleY(0);*/
}

.flowOut{
  /* transform-origin: bottom; */
  /* bottom: 0; */
  /* top: auto; */
  /* transform: translateY(0)!important; */
}

[v-cloak]{
  display: none;
}

.ajax-loader{
  display: none!important;
}

.fIn {
  opacity: 0;
  transition: transform .7s cubic-bezier(0.65, 0, 0.35, 1) ,opacity .9s;
}

.fIn.show {
  opacity: 1;
  transform:none;
}

.fIn-up {
  transform:translateY(50px);
}


.panel{
  
  /* transform: translateY(60); */
  /* opacity: 0; */
   /* will-change: transform, opacity; */
  /* transition: all .8s cubic-bezier(0.65, 0, 0.35, 1); */
}

.view{
  /* transition: transform .8s cubic-bezier(0.65, 0, 0.35, 1); */

  /* transform: translateY(0); */
  opacity: 1;
}

.wpcf7-response-output{
  border-color: #FFF!important;
  color: #F00;
}

.hdn-number{
  display: none;
}



.v-enter-active,
.v-leave-active{
  transition: opacity 1s ,transform 1s;
  opacity: 1;
}
.v-enter{
  opacity: 0;
  transform: translateY(-50px);

}
.v-leave-to{
  /* opacity: 0;
  transform: translateY(50px); */

}


video{
  width: 100%;
}


.me{
  position: absolute;
  /* background: white; */
  width: 100%;
  height: 100%;
  top: 0;
  overflow: hidden;
  margin-left: -1px;
  transition: all .6s cubic-bezier(0.76, 0, 0.24, 1);
}
.cl{
  width: 100%;
  height: 100%;
  background: #FFF;
  transform: translateX(-25%) skew(45deg) scale(0.1);
  transition: all .6s cubic-bezier(0.76, 0, 0.24, 1);
  border: 1px solid #ff00ff;
}

.me.open{

}
.me.open .cl{
  /* transform: translateY(100%); */
  /* transform: translateX(120%) skew(95deg) scale(1); */
  transform: translateX(80%) skew(90deg) scale(1);

}

/* スマホ時のメニュー背景 */
.spbg{
  position: fixed;
  display:none;
  background: rgba(0, 0, 0,0.5);
  width: 100%;
  height: 100vh;
  top: 0;
  z-index: 2;
}