@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');


/* Base Setting
==========================================================*/

html { font-size: 62.5%; height: 100%; }
body { font-size: 1.6rem; line-height: 1.8; font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, sans-serif; font-weight: 400;
margin:0; padding: 0; color: #000; -webkit-text-size-adjust: 100%; letter-spacing: 0.1rem; background: #fff;}
@media all and (min-width: 769px) and (-ms-high-contrast: none) {
  body { letter-spacing: 0.02em; line-height: 1.75;}
}


a       { text-decoration: none; color: #000; outline:none; -webkit-transition: all .4s; transition: all .4s; cursor: pointer;}
a:hover { text-decoration: none;}
a.underline { text-decoration: underline;}
img { -ms-interpolation-mode: bicubic; max-width:100%; height: auto; vertical-align: middle;}
:focus { outline: 0; }
::-moz-selection { background: #f0ff00; color: #222;}
::selection { background: #f0ff00; color: #222;}


/* fonts */
.fn-RL { font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 300;}
.fn-RR { font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 400;}
.fn-RM { font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 500;}

.lesp-2 { letter-spacing: .2rem;}
.lesp-3 { letter-spacing: .3rem;}
.lesp-4 { letter-spacing: .4rem;}
.lesp-5 { letter-spacing: .5rem;}

/* color */
.c_white { color: #fff;}
.c_yellow { color: #f0ff00;}
.c_gray { color: #555555;}
.bg_white { background: #fff;}
.bg_yellow { background: #f0ff00;}
.bg_gray { background: #f5f5f5;}

/* 2行目字下げ */
.indent li { margin-left: 1.5rem; text-indent: -1.5rem;}

/* リンク削除 */
a.disabled { pointer-events: none;  -moz-opacity:0.5; filter: alpha(opacity=50); opacity:0.5;}

/* object fit */
.obf { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; font-family: 'object-fit: cover; object-position: center;'; height: 100%; width: 100%; }

/* slider */
/* .slide ul{ display: none; }
.slide ul.slick-initialized { display: block; } */

/* スクロールバー非表示 */
.non-scrollbar {
 -ms-overflow-style: none;  /* IE, Edge 対応 */
 scrollbar-width: none;     /* Firefox 対応 */
}
.non-scrollbar::-webkit-scrollbar {
 display:none; /* Chrome, Safari 対応 */
}



/* hack
========================================================== */

.sp-hide { display: block;}
.sp-hide-inline { display: inline;}
.sp-show { display:none;}
.sp-show-inline { display:none;}
.sp-show-350, .sp-show-420, .sp-show-520, .sp-show-850 { display:none;}
.sp-hide-350, .sp-hide-420, .sp-hide-520, .sp-hide-850 { display:inline;}



/* ------------------------------------ */

@media screen and (max-width: 850px) {
  .sp-show-850 { display:inline;}
  .sp-hide-850 { display:none;}
}


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

.sp-hide-inline, .sp-hide { display: none !important;}
.sp-show { display:block;}
.sp-show-inline { display:inline;}
.sp-br-none br, br.sp-br-none {display: none;}

.sp-no-flex { display: block;}

    @media screen and (max-width: 520px) {
      .sp-show-520 { display:inline;}
      .sp-hide-520 { display:none;}
    }

    @media screen and (max-width: 420px) {
      .sp-show-420 { display:inline;}
      .sp-hide-420 { display:none;}
    }

    @media screen and (max-width: 350px) {
      .sp-show-350 { display:inline;}
      .sp-hide-350 { display:none;}
    }

body { font-size: 1.4rem; line-height: 1.75;}
img { max-width: 100%; height: auto;}

.lesp-2 { letter-spacing: .1rem;}
.lesp-3 { letter-spacing: .15rem;}
.lesp-4 { letter-spacing: .2rem;}
.lesp-5 { letter-spacing: .25rem;}

}


/* main-layout
==========================================================*/

#wrapper { width: 100%;}
.wrap { width: 86%; margin: 0 auto; max-width: 1000px;}
.wrap1210 { width: 90%; margin: 0 auto; max-width: 1210px;}
.wrap830 { width: 86%; margin: 0 auto; max-width: 830px;}
/* .wrapInner { padding: 120px 0 0;} */

#kasou_Container { padding: 65px 0 150px;}

.col {}
  .col-l { float: left;}
  .col-r { float: right;}
.order1 { order: 1;}
@media screen and (max-width: 768px) {
  .wrap { width: 90%;}
  .wrap830 { width: 90%;}
  #kasou_Container { padding: 60px 0 100px;}
}



/* loader
==========================================================*/


/* 下層loader */
.loader { align-items: center; background: #fff; bottom: 0; display: flex; justify-content: center; left: 0; position: fixed; right: 0; top: 0; z-index: 9999999; }
/* .loader::after { content: ''; height: 60px;  width: 50%; max-width: 220px; background: url(../images/common/loading.svg) center center no-repeat; background-size: contain;} */


/* トップloader */


#Loading_wrap { position: fixed; width: 100%; z-index: 9999999; text-align:center; color: #000; height: 100vh; height: calc(var(--vh, 1vh) * 100); top: 0; left: 0;}

#Loading01 { width: 100%; height: 100%; justify-content: center; align-items: center; animation-duration: .2s; animation-timing-function: ease-in-out; animation-fill-mode:forwards; animation-name: opacityA; animation-delay: 2.6s; z-index: 1; background: #fff;}
#Loading01 p { font-size: 7rem; letter-spacing: 1rem;}

.Loading01_layer { position: absolute; width: 100%; height: 42%; background: #000; z-index: 1;}
.Loading01_layer.top { top: 0;}
.Loading01_layer.bottom { bottom: 0;}
.Loading01_layer.middle { top: 0; bottom: 0; margin: auto; height: 16%; animation-duration: 1.1s; animation-timing-function: ease-in-out; animation-fill-mode:forwards;}
.Loading01_layer.middle-A { left: 0; animation-name: load01; animation-delay: 1s; }
.Loading01_layer.middle-B { left: -100%; animation-name: load02; animation-delay: 1.7s;}
@keyframes load01 {
  0% { left: 0;}
  100% { left: 100%;}
}
@keyframes load02 {
  0% { left: -100%;}
  100% { left: 0;}
}
@keyframes opacityA {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes opacityB {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
#Loading02 { width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; animation-duration: .2s; animation-timing-function: ease-out; animation-fill-mode:forwards; animation-name: opacityB; animation-delay: 2.2s; opacity: 0;}
.Loading02_layer { position: absolute; width: 100%; height: 50%; background: #000; z-index: 1; animation-duration: 1.2s; animation-timing-function: ease-in-out; animation-fill-mode:forwards; animation-name: load03; animation-delay: 2.8s;}
.Loading02_layer.top { top: 0;}
.Loading02_layer.bottom { bottom: 0;}
@keyframes load03 {
  0% { height: 50%;}
  100% { height: 0;}
}

@media screen and (max-width: 960px) {
  #Loading01 p { font-size: 5rem; letter-spacing: .8rem;}
}
@media screen and (max-width: 768px) {
  #Loading01 p { font-size: 4rem; letter-spacing: .5rem;}
  .Loading01_layer { height: 44%;}
  .Loading01_layer.middle { height: 12%;}
}



/* header
==========================================================*/
#menu { max-width: 290px; width: 100%; background: #000; height: 100vh; position: fixed; top: 0; right: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; z-index: 999;}
#menu {  -webkit-transform: translate3d(290px, 0, 0); transform: translate3d(290px, 0, 0); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-delay: 0s; transition-delay: 0s; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; }
#menu.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}

#menu .menu_inner { width: 170px; margin: 160px 60px 120px auto;}
#menu ul li { margin-bottom: 20px;}
#menu ul li a { display: inline-block; box-sizing: border-box; padding: 8px;}
#menu ul li.menu_contact a { border: 1px solid #f0ff00; margin-top: 10px; padding-left: 12px;}
@media screen and (min-width: 769px) {
  #menu ul:hover a { opacity: .3;}
  #menu ul li a:hover { color: #fff; opacity: 1;}
  #menu ul li.menu_contact a:hover { color: #000; }
}
@media screen and (max-height: 640px) and (min-width: 769px){
  #menu .menu_inner { margin: 130px 60px 120px auto;}
  #menu ul li { margin-bottom: 14px;}
  #menu ul li a { font-size: 2.2rem;}
}

@media screen and (max-width: 768px) {
  #menu { max-width: 220px;}
  #menu .menu_inner { width: 135px; margin: 100px 40px 80px auto;}
  #menu ul li { margin-bottom: 10px;}
}
@media screen and (max-width: 520px) {
  #menu { width: 180px;}
  #menu .menu_inner { width: 117px; margin: 80px 25px 80px auto; }
  #menu ul li { width: 100%; margin-bottom: 6px;}
  #menu ul li a { font-size: 1.8rem; display: block;}
  #menu ul li.menu_contact a { margin-top: 15px;}
}



/* menu trigger */
.navInner { display: block; position: fixed; right: 55px; z-index: 9999 !important; top: 40px; height: 60px; width: 60px;}
.menu-trigger { width: 44px; height: 28px; line-height: inherit; position: relative; top: 15px; left: 7px;}
.menu-trigger,
.menu-trigger span { display: inline-block; transition:all .4s; box-sizing: border-box; }
.menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #000;}
  .menu-trigger span:nth-of-type(1){top: 0;}
  .menu-trigger span:nth-of-type(2){top: 13px;}
  .menu-trigger span:nth-of-type(3){bottom: 0;}
  /* .menu-trigger:not(.active):hover span:nth-of-type(1){ top: 2px;}
  .menu-trigger:not(.active):hover span:nth-of-type(3){ bottom: 2px;} */
  .menu-trigger.active span { background-color: #fff;}
  .menu-trigger.active span:nth-of-type(1){ -webkit-transform: translateY(13px) rotate(-45deg); transform: translateY(13px) rotate(-45deg);}
  .menu-trigger.active span:nth-of-type(2) { left: 50%; opacity: 0; -webkit-animation: active-bar02 .8s forwards; animation: active-bar02 .8s forwards; }
  @-webkit-keyframes active-bar02 {
    100% { height: 0; }
  }
  @keyframes active-bar02 {
    100% { height: 0; }
  }
  .menu-trigger.active span:nth-of-type(3){-webkit-transform: translateY(-13px) rotate(45deg); transform: translateY(-13px) rotate(45deg);}

  @media screen and (max-width: 768px) {
    .navInner { right: 10px; top: 10px;}
    .menu-trigger { width: 36px; height: 22px; top: 15px; left: 11px;}
    .menu-trigger span:nth-of-type(2){ top: 10px;}
    .menu-trigger.active span:nth-of-type(1){ -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg);}
    .menu-trigger.active span:nth-of-type(3){-webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg);}
  }


/* footer
==========================================================*/
#footerContainer { border-top: 1px solid #000; padding: 100px 0; box-sizing: border-box;}
  .footer_privacy { font-size: 1.1rem; margin-top: 20px;}
  .footer_copy { font-size: 1.1rem;}

  @media screen and (max-width: 768px) {
    #footerContainer { padding: 80px 0;}
    #footerContainer .footer_logo { width: 32%; margin: 0 auto;}
  }



/* INDEX
==========================================================*/
/* Firstview */
#Firstview { width: 100%; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); box-sizing: border-box; justify-content: center; align-items: center; margin-bottom: 80px;}
#Firstview .Firstview_logo { transform: translateY(-5%); width: 30%; margin: 0 auto; text-align: center;}
  @media screen and (max-width: 768px) {
    #Firstview .Firstview_logo { width: 40%;}
  }

/* scroll down */
.scrolldown { position: absolute; left: 0; right: 0; margin: auto; bottom: 20px; height: 60px; text-align: center;}
.scrolldown span { position: absolute; left: 0; right: 0; margin: auto; top: -20px; }
.scrolldown::after{ content: ""; position: absolute; top: 0; width: 1px; height: 40px; background: #000; animation: pathmove 1.4s ease-in-out infinite; opacity:0; }
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height: 40px;
		opacity: 1;
	}
	100%{
		height:0;
		top: 50px;
		opacity: 0;
	}
}


.ind_section { margin-bottom: 210px;}
.ind_h2ttl { padding-left: 50px; box-sizing: border-box; margin-bottom: 60px; font-size: 1.6rem;}
  @media screen and (max-width: 768px) {
    .ind_section { margin-bottom: 150px;}
    .ind_h2ttl { padding-left: 5%; margin-bottom: 50px;}
  }

/* marker */
.marker { background: -webkit-linear-gradient(left, #f0ff00 50%, transparent 50%); background: -moz-linear-gradient(left, #f0ff00 50%, transparent 50%); background: linear-gradient(left, #f0ff00 50%, transparent 50%); background-repeat: no-repeat; background-size: 200% 1.85em; background-position: 100% 0; transition: 1.2s; }
.marker.is-active{ background-position: 0% 0; }

/* hover_marker */
.hover_marker { position: relative;}
.hover_marker:after{ width: 0; height: 100%; position: absolute; left: 0; top: 0; content: ''; background-color: #f0ff00; z-index: -1; -webkit-transition: all ease .5s; transition: all ease .5s; }
.hover_marker.hover_marker_black:after {background-color: #000;}
@media screen and (min-width: 769px) {
  a:hover .hover_marker:after,
  a:hover.hover_marker:after,
  a:hover.hover_marker.hover_marker_black:after,
  .Flow_ttl.hover_marker:hover:after { width: 100%; }
}
.Flow_ttl.active:after { width: 100%; }

/* hover_expansion */
.hover_expansion { overflow: hidden;}
.hover_expansion img { will-change: transform; transition: transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
@media screen and (min-width: 769px) {
  .hover_expansion a:hover img,
  a:hover .hover_expansion img { -webkit-transform: scale(1.1); transform: scale(1.1);}
}

/* btn_more */
.btn_more { max-width: 290px; margin: 0 auto;}
.btn_more a { display: block; padding: 10px 0; box-sizing: border-box; border: 1px solid #000; width: 100%; font-size: 1.6rem;}
#ind_Contact .btn_more { max-width: 510px; position: relative;}
#ind_Contact .btn_more a { padding: 24px 0; margin-top: 30px; font-size: 2.6rem;}

#ind_Contact .btn_more:after { width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ''; background-color: #f0ff00; z-index: -2;}
  @media screen and (min-width: 769px) {
    #ind_Contact .btn_more a:hover { color: #f0ff00;}
  }
  @media screen and (max-width: 768px) {
    .btn_more a { display: block; padding: 12px 0;}
  }


/* ind_Works */
#ind_Works {}
#ind_Works.ind_section { margin-bottom: 230px;}
  @media screen and (max-width: 768px) {
    #ind_Works.ind_section { margin-bottom: 150px;}
  }


/* ind_Flow */
#ind_Flow {}
#ind_Flow.ind_section { margin-bottom: 180px;}
.ind_Flow_lead p:first-child { font-size: 1.18em;}
.Flow_List { margin: 40px auto 0; border: 1px solid #000; box-sizing: border-box; border-bottom: none; max-width: 510px;}
.Flow_List li { border-bottom: 1px solid #000; box-sizing: border-box; }


.Flow_ttl { height: 56px; line-height: 56px; cursor: pointer;}
.Flow_ttl .Flow_num { width: 56px;}
.Flow_ttl .Flow_h3ttl { font-size: 1.18em;}
.Flow_ttl .Flow_btn { width: 56px; -webkit-transition: all .3s; transition: all .3s; position: relative;}
  .Flow_ttl .Flow_btn span::before,
  .Flow_ttl .Flow_btn span::after { content: ''; display: block; width: 15px; height: 1px; background: #000; position: absolute; left: 0; right: 0; margin: auto; top: 50%;
  transform: translateY(-50%);  -webkit-transition: all .3s; transition: all .3s; }
  .Flow_ttl .Flow_btn span::after { transform: translateY(-50%) rotate(90deg); }
  .Flow_ttl .Flow_btn span.active::after { transform: rotate(180deg); }
  .Flow_ttl .Flow_btn span.active::before { opacity: 0; }

.Flow_detail { display: none; padding: 30px 45px 30px 45px; box-sizing: border-box; border-top: 1px solid #000; box-sizing: border-box; }
.Flow_detail .Flow_detail_img { width: 21.5%; max-width: 100px;}
.Flow_detail .Flow_detail_txt { width: 74%; max-width: 330px; letter-spacing: .04rem;}

  @media screen and (max-width: 768px) {
    #ind_Flow.ind_section { margin-bottom: 120px;}
    .Flow_detail { padding: 20px 6% 20px;}
  }



/* ind_News */
#ind_News {}
.ind_NewsInner { padding: 30px; box-sizing: border-box;}
.ind_News_h2ttl { font-size: 1.3em; margin-bottom: 13px; padding-left: 5px;}
.News_List { }
.News_List ul li { padding: 16px 0; box-sizing: border-box; border-top: 1px solid rgba(85, 85, 85, 0.5);}
.News_List ul li .News_List_flex { cursor: pointer;}
.News_List ul li .News_List_date { width: 140px; padding-left: 5px; box-sizing: border-box;}
.News_List ul li .News_List_ttl { width: -webkit-calc(100% - 196px); width: -moz-calc(100% - 196px); width: calc(100% - 196px); padding-top: 1px;}
.News_List ul li .News_List_btn { width: 56px; -webkit-transition: all .3s; transition: all .3s; position: relative; order: 1;}
  .News_List ul li .News_List_btn span::before,
  .News_List ul li .News_List_btn span::after { content: ''; display: block; width: 12px; height: 1px; background: #555; position: absolute; right: 12px; margin: auto; top: 12px;
  transform: translateY(-50%);  -webkit-transition: all .3s; transition: all .3s; }
  .News_List ul li .News_List_btn span::after { transform: translateY(-50%) rotate(90deg); }
  .News_List ul li .News_List_btn span.active::after { transform: rotate(180deg); }
  .News_List ul li .News_List_btn span.active::before { opacity: 0; }

.News_List ul li .News_List_content { display: none; padding: 0; box-sizing: border-box; margin: 12px 56px 12px 140px; }
  @media screen and (max-width: 768px) {
    .ind_NewsInner { padding: 25px 20px 20px;}
    .News_List ul li .News_List_date { width: 90px;}
    .News_List ul li .News_List_ttl { width: -webkit-calc(100% - 160px); width: -moz-calc(100% - 160px); width: calc(100% - 160px); padding-top: 0;}
    .News_List ul li .News_List_btn { width: 40px;}
    .News_List ul li .News_List_btn span::before,
    .News_List ul li .News_List_btn span::after  { right: 6px;}
    .News_List ul li .News_List_content { margin: 12px 40px 12px 104px; }
  }
  @media screen and (max-width: 520px) {
    .News_List ul li .News_List_flex { position: relative; display: block;}
    .News_List ul li .News_List_date { padding-left: 0;}
    .News_List ul li .News_List_ttl { width: 100%;}
    .News_List ul li .News_List_btn { position: absolute; top: 0; bottom: 0; margin: auto; right: 0;}
    .News_List ul li .News_List_btn span::before,
    .News_List ul li .News_List_btn span::after  {top: 0; bottom: 0; margin: auto;}
    .News_List ul li .News_List_content { margin: 12px 0 10px; }
  }


/* ind_About */
#ind_About {}
.ind_About_txt { padding-top: 60px;}
.ind_About_txt .ind_About_en { margin-bottom: 75px; font-size: 5.1rem;}
.ind_About_txt p:not(:last-child) { margin-bottom: 30px;}
  @media screen and (max-width: 768px) {
    .ind_About_txt { padding-top: 20px;}
    .ind_About_txt .ind_About_en { margin-bottom: 50px; font-size: 4.6rem; line-height: 1.2 !important;}
    .ind_About_txt p:not(:last-child) { margin-bottom: 25px;}
  }
  @media screen and (max-width: 520px) {
    .ind_About_txt .ind_About_en { font-size: 9.6vw;}
  }

/* ind_Company */
#ind_Company {}
#ind_Company.ind_section { margin-bottom: 300px;}
.ind_Company_list { max-width: 600px; margin: 0 auto;}
.ind_Company_list dl dt { width: 200px; margin-bottom: 15px;}
.ind_Company_list dl dd { width: -webkit-calc(100% - 200px); width: -moz-calc(100% - 200px); width: calc(100% - 200px);  margin-bottom: 15px;}

.Map { overflow: hidden; height: 290px; width: 100%; position: relative; margin: 40px 0 30px;}
.Map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition:all .3s ease; transition: all .3s ease;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);}
.Map:hover iframe {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);}
.ind_Access {}
.ind_Access dl { width: 440px; margin: 6px auto 0;}
.ind_Access dt { width: 370px;}
.ind_Access dd { width: 70px;}

  @media screen and (max-width: 768px) {
    #ind_Company.ind_section { margin-bottom: 150px;}
    .ind_Company_list dl dt { width: 120px;}
    .ind_Company_list dl dd { width: -webkit-calc(100% - 120px); width: -moz-calc(100% - 120px); width: calc(100% - 120px);}
  }
  @media screen and (max-width: 520px) {
    .ind_Company_list dl dt { width: 100px;}
    .ind_Company_list dl dd { width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: calc(100% - 100px);}
    .Map { height: 240px; margin: 30px 0;}
    .ind_Access dl { width: 100%; display: block;}
    .ind_Access dt { width: 100%;}
    .ind_Access dd { width: 100%;}
  }


/* ind_Contact */
#ind_Contact {}
#ind_Contact.ind_section { margin-bottom: 400px;}
  @media screen and (max-width: 768px) {
    #ind_Contact.ind_section { margin-bottom: 180px;}
  }


/* ind_Blog */
#ind_Blog {}
.Blog_list { margin-bottom: 50px;}
.Blog_list ul li { width: 30.5%; max-width: 253px;}
.Blog_list ul li:nth-child(4) { display: none;}
.Blog_list ul li .Blog_List_txt { margin-top: 22px;}
.Blog_list ul li .Blog_List_txt .Blog_List_ttl { margin-top: 14px; letter-spacing: .05rem;}
.note_logo { margin-top: 40px;}
  @media screen and (max-width: 768px) {
    .Blog_list { margin-bottom: 20px;}
    .Blog_list ul li { width: 48%; max-width: 100%; margin-bottom: 30px;}
    .Blog_list ul li:nth-child(4) { display: block;}
    .Blog_list ul li .Blog_List_txt { margin-top: 16px;}
    .Blog_list ul li .Blog_List_txt .Blog_List_ttl { margin-top: 10px;}
  }
  @media screen and (max-width: 520px) {
    .Blog_list ul li { width: 100%;}
    .Blog_list ul li:nth-child(4) { display: none;}
  }



/* WORKS
==========================================================*/

/* TOP・WORKSページ共通 */
.Works_List {}
.Works_List ul li { max-width: 220px; width: 29%; margin-bottom: 50px;}
.Works_List ul li .Works_List_txt { padding: 7px 0 6px; box-sizing: border-box;}
#WorksPage .Works_List ul li { max-width: 275px; width: 22.8%; margin-bottom: 33px;}
#WorksPage .Works_List ul::before, #WorksPage .Works_List ul::after { content:""; display: block; width: 22.8%; max-width: 275px; order:1;}
  @media screen and (max-width: 1200px) {
    #WorksPage .Works_List ul li { margin-bottom: 2.4vw;}
  }
  @media screen and (max-width: 960px) {
    #WorksPage .Works_List ul li { width: 30.5%; margin-bottom: 3.5vw;}
    #WorksPage .Works_List ul::before { content: none; display: none;}
    #WorksPage .Works_List ul::after { width: 30.5%;}
  }
  @media screen and (max-width: 768px) {
    .Works_List { max-width: 520px; margin: 0 auto;}
    .Works_List ul li { width: 47.5%; margin-bottom: 40px; max-width: 100%;}

    #WorksPage .Works_List { max-width: 100%;}
    #WorksPage .Works_List ul li { width: 31.5%; margin-bottom: 2.5vw;}
    #WorksPage .Works_List ul::after { width: 31.5%;}
  }
  @media screen and (max-width: 520px) {
    #WorksPage .Works_List ul li { width: 48%; margin-bottom: 3.5vw;}
    #WorksPage .Works_List ul::after { content: none; display: none;}
  }


/* PC / category */
.category { max-width: 820px; margin: 0 auto 65px; width: 88%;}
.category li a { padding: 5px 15px; box-sizing: border-box;}
  @media screen and (max-width: 1100px) {
    .category { max-width: 760px; width: 76%;}
    .category li a { padding: 5px 10px; font-size: 1.5rem;}
  }
  @media screen and (max-width: 960px) {
    .category { margin: 0 0 40px; max-width: 100%; width: 80%;}
    .category ul { display: inline-block; font-size: 0;}
    .category ul li { display: inline-block; margin-right: 20px; margin-bottom: 20px; text-align: left;}
    .category li a { font-size: 1.6rem;}
  }
/* SP / category */
.dropdown { width: 180px; display: inline-block; transition: all .5s ease;position: relative; transition-delay: 0.3s; margin-bottom: 20px;}
.dropdown .select { cursor: pointer; display: block; padding: 10px 5px 10px 15px; box-sizing: border-box; position: relative;}
.dropdown .select::before { position: absolute; content: ""; width: 2px; height: 16px; background: #000; top: 15px; left: 0;}
.dropdown .select > i { width: 8px; height: 8px; margin-top: 10px; border-top: 1px solid #000; border-right: 1px solid #000; cursor: pointer; transition: all .3s ease-in-out; float: right; transform: rotate(-225deg) translateY(-50%); transform-origin: 50% 0;}
.dropdown.active .select > i { margin-top: 14px; transform: rotate(-45deg) translateY(-50%);}
.dropdown .dropdown-menu { width: 100%; position: absolute; left: 0; background: #e8e8e8; display: none; z-index: 1;}
.dropdown .dropdown-menu li { padding: 8px 15px; transition: all .2s ease-in-out;}
.dropdown .dropdown-menu li a{ display: block;}
.dropdown .dropdown-menu li:hover { background-color: #f0ff00; cursor: pointer;}



/* Works_Detail */
.Works_Detail { max-width: 700px; margin: 0 auto; position: relative;}
.Works_Detail_txt { width: 100%; margin: 35px auto 0;}
.Works_Detail_txt .Works_Detail_h1ttl { letter-spacing: .05rem;}
.Works_Detail_txt .Works_Detail_client { margin-top: 5px;}

.pager { width: 840px; position: absolute; top: 320px; margin: 0 auto 0 -70px; height: 42px;}
.pager ul li { width: 42px; height: 42px;}
.pager ul li.pager-back { position: absolute; left: 0; bottom: 6px;}
.pager ul li.pager-next { position: absolute; right: 0; bottom: 6px;}
.pager ul li a { display: block; width: 100%; height: 100%; box-sizing: border-box; position: relative;}
.pager ul li a::after { content: ""; position: absolute; left: 0; right: 8px; top: 0; bottom: 0; margin: auto; width: 14px; height: 14px; border-top: 1px solid #000; border-right: 1px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.pager ul li.pager-back a::after {  -webkit-transform: rotate(-135deg); transform: rotate(-135deg); right: 0; left: 7px;}
  @media screen and (max-width: 960px) {
    .pager { width: 800px; margin: 0 auto 0 -50px;}
  }
  @media screen and (max-width: 820px) {
    .Works_Detail_img { width: 92%; margin: 0 auto;}
    .pager { width: 100%; margin: 0 auto; top: 40vw;}
    .pager ul li.pager-back { left: -16px;}
    .pager ul li.pager-next { right: -16px;}
  }
  @media screen and (max-width: 768px) {
    .Works_Detail_txt { width: 100%; margin: 25px auto 20px;}
    .Works_Detail_txt .Works_Detail_h1ttl { font-size: 1.8rem;}
    .Works_Detail_txt .Works_Detail_client { font-size: 1.3rem;}

    .pager { top: 37vw;}
    .pager ul li.pager-back { left: -20px;}
    .pager ul li.pager-next { right: -20px;}
  }





/* CONTACT
==========================================================*/
.Contact_lead { margin-top: -20px;}
.Contact_Container { max-width: 650px; margin: 50px auto 0;}
.Contact_note { margin-left: 210px; margin-top: -10px;}

/* bodyを引き継がせる（SP:16p以上必須） */
input, textarea, select {
  font-size: 1.6rem; line-height: 1.8; font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, sans-serif; font-weight: 400; color: #000; letter-spacing: 0.1rem;}

table.inqtable { width: 100%;}
 table.inqtable th { padding: 0 0 15px; width: 210px; vertical-align: middle; line-height: 1.4; letter-spacing: normal;}
 table.inqtable td { padding: 0 0 15px; width: -webkit-calc(100% - 210px);  width: -moz-calc(100% - 210px); width: calc(100% - 210px); box-sizing: border-box;}
 table.inqtable td input, table.inqtable td textarea { border: 1px solid #000; -webkit-appearance: none; border-radius: none; padding: 3px 10px; width: 100%; background: #fff; box-sizing: border-box;}
 table.inqtable td textarea { padding: 15px 25px;}
 table.inqtable th.va-top { vertical-align: top; padding-top: 18px;}

/* focus時 */
input, textarea { outline: none; -webkit-transition: all .3s; transition: all .3s; }
input:focus, textarea:focus { border: 1px solid #f0ff00 !important;}

/* スマホオート入力の背景色削除 */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; box-shadow: 0 0 0px 1000px #fff inset;}

/* ie用 */
@media all and (-ms-high-contrast: none){ .selectyaji { display: none; } }
input::-ms-clear, input::-ms-reveal { visibility: hidden; } /* 右に出てくるアイコン削除 */


/* エラーボックス */
.error_box { width: 100%; text-align: left; background: #FFF; border:1px solid #e21a1a; color:#e21a1a; display: none; margin: 25px auto; padding: 20px 20px; box-sizing: border-box; font-size: 1.3rem;}

/* 送信ボタン */
.submitwrap input[type=submit],
.submitwrap input[type=button]
{ font-size: 1.05em; width: 100%; max-width: 100px; height: 30px; margin: 25px 0 0 auto; background: #000; -webkit-transition:all .3s; transition:all .3s; border: 1px solid #000; border-radius: 0; box-sizing: border-box; color: #fff; cursor: pointer;
display: block; line-height: 30px; box-shadow: none;}
  @media screen and (min-width: 769px) {
    .submitwrap input[type=submit]:hover, .submitwrap input[type=button]:hover { background: #f0ff00; color: #000;}
  }

/* OK・errorページ */
.Contact_Send { margin: 150px 0 30px;}


@media screen and (max-width: 650px) {
  .Contact_Container { margin: 30px auto 0;}
  .Contact_note { margin-left: 0; margin-top: -18px;}

  input, textarea, select,table.inqtable { font-size: 16px;}
  table.inqtable th { display: block; width: 100%; padding: 0 0 8px; font-size: 1.4rem;}
  table.inqtable td { display: block; width: 100%; padding: 0 0 25px;}
  table.inqtable td input, table.inqtable td textarea { padding: 4px 10px; border-radius: 0;}
  table.inqtable th.va-top { vertical-align: middle; padding-top: 0;}

  .error_box { padding: 20px 4%;}

  .submitwrap input[type="submit"], .submitwrap input[type="button"] { -webkit-appearance: none; width: 100%; max-width: 200px; margin: 20px auto; height: 40px; line-height: 40px;}

  /* OK・errorページ */
  .Contact_Send { margin: 60px 0 0;}
}

:disabled,
:disabled:hover { cursor: default; opacity: 0.4 !important; background: #000 !important;color: #fff !important;}
@media screen and (max-width: 650px) {
.g-recaptchaInner{ display: flex; justify-content: center; }
}


/* PRIVACY POLICY
==========================================================*/
#PrivacyPage {}
.Privacy_DL { max-width: 730px; margin: 0 auto;}
.Privacy_DL dt { margin-bottom: 0.25em; opacity: 0.7; }
.Privacy_DL dd { margin-bottom: 2.5em; font-size: .88em;}
@media screen and (max-width: 520px) {
  .Privacy_DL { margin-top: -10px;}
  .Privacy_DL dd { margin-bottom: 2em;}
}





/* ドットをマウスカーソルに */
@media screen and (min-width: 769px) {
  body { position: relative; }
  .follower { border-radius: 50%; position: absolute; top: 0; left: 0; pointer-events: none; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background-color: rgba(204, 204, 204, 0.5);; z-index: 1000; transition: transform ease .3s; text-align: center; }
  .follower.is-active { transform: scale(2); }
}
@media screen and (max-width: 768px) {
  .follower { display: none;}
}

/*  */