@charset "utf-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;}
img{vertical-align:bottom;}
ol,ul {list-style:none;}

.grecaptcha-badge{
  display: none;
}

/*----------------------------
  Fonts
font-family: 'Kosugi Maru', sans-serif;
  font-family: 'Solway', serif;
----------------------------*/
/*
font-family: 'Noto Sans Japanese', sans-serif;
「Thin 100」、「Light 300」、「DemiLight 350」、「Regular 400」、「Medium 500」、「Bold 700」、「Black 900」
*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
/*
font-family: 'Lato', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
*/
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: normal;
  src: local("Noto Sans CJK JP Regular"),
  url('../font/NotoSans_Regular.woff2') format('woff2'),
  url('../font/NotoSans_regular.woff') format('woff'),
  url('../font/NotoSans_regular.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: bold;
  src: local("Noto Sans CJK JP Bold"),
  url('../font/NotoSans_Bold.woff2') format('woff2'),
  url('../font/NotoSans_bold.woff') format('woff'),
  url('../font/NotoSans_bold.otf') format('opentype');
}

@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: normal;
  src: url("./fonts/YakuHanJP-Regular.woff2") format("woff2"),
  url("./fonts/YakuHanJP-Regular.woff") format("woff");
}
@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: bold;
  src: url("./fonts/YakuHanJP-Bold.woff2") format("woff2"),
  url("./fonts/YakuHanJP-Bold.woff") format("woff");
}

html,body{
  font-family: 'YakuHanJP','Noto Sans JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
  font-weight: normal;
  font-size: 20px;
  letter-spacing: 0.05em;
  line-height: 2;
	font-weight: normal;
	font-style: normal;
  color: #FFF;
  background: #000;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  word-break: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
h1,h2,h3,h4{
  font-weight: normal;
}
.pc_only{
  display: block;
}
.sp_only{
  display: none;
}
@media only screen and (max-width: 768px) {
  .pc_only{
    display: none;
  }
  .sp_only{
    display: block;
  }
  body.page{
    padding-top: 0vw;
  }
}
img{
  width: 100%;
  height: auto;
}
/*----------------------------------------------------
 link
--------------------------------------------------- */
a:link,
a:visited,
a:active{
    color: #364EA2;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
a:hover{
    text-decoration: none;
}

/*----------------------------------------------------
 slick
--------------------------------------------------- */
:focus {
  outline: none;
}
.slick-slider{position: relative;display: block;box-sizing: border-box;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;touch-action: pan-y;-webkit-tap-highlight-color: transparent;}
.slick-list{position: relative;display: block;overflow: hidden;margin: 0;padding: 0;}
.slick-list:focus{outline: none;}
.slick-list.dragging{cursor: pointer;cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.slick-track{position: relative;top: 0;left: 0;display: block;}
.slick-track:before,
.slick-track:after{display: table;content: '';}
.slick-track:after{clear: both;}
.slick-loading .slick-track{visibility: hidden;}
.slick-slide{display: none;float: left;height: 100%;min-height: 1px;}
[dir='rtl'] .slick-slide{float: right;}
.slick-slide img{display: block;}
.slick-slide.slick-loading img{display: none;}
.slick-slide.dragging img{pointer-events: none;}
.slick-initialized .slick-slide{display: block;}
.slick-loading .slick-slide{visibility: hidden;}
.slick-vertical .slick-slide{display: block;height: auto;border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}

.slick-prev{
  display: block;
  position: absolute;
  top: 50%;
  z-index: 10;
  border:none;
  text-indent: -9999px;
  cursor: pointer;
    -webkit-transition: all 0.5s 0s ease;
       -moz-transition: all 0.5s 0s ease;
            transition: all 0.5s 0s ease;
    border-radius: 40px;
    -webkit-border-radius: 40px;  
    -moz-border-radius: 40px;
    width: 40px;
    height: 40px;
    left: 50%;
    margin-top: -20px;
    margin-left:-500px;
    background: url(../img/tutorial/arrow.svg) no-repeat center center;
    background-size: contain;
}
.slick-prev:hover{
  opacity: 0.5;
  -webkit-transform: scale3d(1,1,1) translate(-10px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate(-10px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate(-10px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate(-10px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate(-10px,0px) rotate(0deg);
}
.slick-next{
  display: block;
  position: absolute;
  top: 50%;
  z-index: 10;
  border:none;
  text-indent: -9999px;
  cursor: pointer;
    -webkit-transition: all 0.5s 0s ease;
       -moz-transition: all 0.5s 0s ease;
        -ms-transition: all 0.5s 0s ease;
         -o-transition: all 0.5s 0s ease;
            transition: all 0.5s 0s ease;
  border-radius: 40px;
  -webkit-border-radius: 40px;  
  -moz-border-radius: 40px;
  width: 40px;
  height: 40px;
  left: 50%;
  margin-top: -20px;
  margin-left:440px;
  background: url(../img/tutorial/arrow.svg) no-repeat center center;
  background-size: contain;
  -webkit-transform: scale3d(1,1,1) translate(0px,0px) rotate(180deg);
     -moz-transform: scale3d(1,1,1) translate(0px,0px) rotate(180deg);
          transform: scale3d(1,1,1) translate(0px,0px) rotate(180deg);
}
.slick-next:hover{
  opacity: 0.5;
  -webkit-transform: scale3d(1,1,1) translate(10px,0px) rotate(180deg);
     -moz-transform: scale3d(1,1,1) translate(10px,0px) rotate(180deg);
          transform: scale3d(1,1,1) translate(10px,0px) rotate(180deg);
}
.slide .slick-disabled{
  opacity: 0;
  cursor: default;
}
@media only screen and (max-width: 768px) {
  .slide .slick-prev:hover{
    opacity: 1;
  }
  .slide .slick-next:hover{
    opacity: 1;
  }
  .slick-prev{

    top: 50%;
    left: 15px;
    margin-top: -15px;
    background-size: 30px auto;
    width: 30px;
    height: 30px;
    z-index: 10;
  }
  .slick-next{
    top: 50%;
    right: 15px;
    margin-top: -15px;
    background-size: 30px auto;
    width: 30px;
    height: 30px;
    z-index: 10;
  }
  .slick-prev:hover,
  .slick-next:hover {
    -webkit-transform: scale3d(1,1,1) translate(0px,0px) rotate(0deg);
    -moz-transform: scale3d(1,1,1) translate(0px,0px) rotate(0deg);
    -ms-transform: scale3d(1,1,1) translate(0px,0px) rotate(0deg);
    -o-transform: scale3d(1,1,1) translate(0px,0px) rotate(0deg);
    transform: scale3d(1,1,1) translate(0px,0px) rotate(0deg);
  }
}

/*----------------------------------------------------
  .scrollview
--------------------------------------------------- */
.scrollview{
  -webkit-transition: all 0.8s 0s ease;
     -moz-transition: all 0.8s 0s ease;
      -ms-transition: all 0.8s 0s ease;
       -o-transition: all 0.8s 0s ease;
          transition: all 0.8s 0s ease;
          opacity: 0;
  -webkit-transform: scale(1,1) translate(-0%,20px);
     -moz-transform: scale(1,1) translate(-0%,20px);
      -ms-transform: scale(1,1) translate(-0%,20px);
       -o-transform: scale(1,1) translate(-0%,20px);
          transform: scale(1,1) translate(-0%,20px);
}
.scrollview.view{
  opacity: 1;
  -webkit-transform: scale(1,1) translate(-0%,0%);
     -moz-transform: scale(1,1) translate(-0%,0%);
      -ms-transform: scale(1,1) translate(-0%,0%);
       -o-transform: scale(1,1) translate(-0%,0%);
          transform: scale(1,1) translate(-0%,0%);

}
.scrollview_fix{
  -webkit-transition: all 1.2s 0s ease;
     -moz-transition: all 1.2s 0s ease;
      -ms-transition: all 1.2s 0s ease;
       -o-transition: all 1.2s 0s ease;
          transition: all 1.2s 0s ease;
          opacity: 0;
}
.scrollview_fix.view{
  opacity: 1;

}
/*----------------------------------------------------
 loading
--------------------------------------------------- */
#loading{
  position: fixed;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background:#000;
}
#loading.out{
  opacity: 0;
    -webkit-transition: all 0.6s 0.2s linear;
       -moz-transition: all 0.6s 0.2s linear;
        -ms-transition: all 0.6s 0.2s linear;
         -o-transition: all 0.6s 0.2s linear;
            transition: all 0.6s 0.2s linear;
}
#loading .inner{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  -webkit-transform: scale(1,1) translate(-50%,-50%);
     -moz-transform: scale(1,1) translate(-50%,-50%);
          transform: scale(1,1) translate(-50%,-50%);
          opacity: 1;
}
body.loadStart #loading .inner{
  opacity: 1;
  -webkit-transition: all 0.4s 0.0s ease;
     -moz-transition: all 0.4s 0.0s ease;
          transition: all 0.4s 0.0s ease;
}
body.pageLoad #loading .inner{
  -webkit-transition: all 0.4s 0.0s ease;
     -moz-transition: all 0.4s 0.0s ease;
          transition: all 0.4s 0.0s ease;
          /* -webkit-transform: scale(0,0) translate(-0%,0%);
             -moz-transform: scale(0,0) translate(-0%,0%);
                  transform: scale(0,0) translate(-0%,0%); */
}
#loading .FormatLoader {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  z-index: 12;
  margin: 0 auto;
  margin-top: -25px;
  position: relative;
  text-indent: -9999em;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-left: 1px solid #002C57;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@media only screen and (max-width: 768px) {
  #loading .inner{
    width: 60%;
  }
}
/*----------------------------------------------------
  .wrapper
--------------------------------------------------- */
.wrapper{
  overflow: hidden;
  position: relative;
}
@media only screen and (max-width: 768px) {
  /* .wrapper{
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
} */
}
/*----------------------------------------------------
  .block_header
--------------------------------------------------- */
.block_header{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  /* height: 180px; */
  z-index: 30;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  -webkit-transition: all 0.4s 0s ease;
          transition: all 0.4s 0s ease;
}

@media only screen and (max-width: 768px) {
  .block_header{
    z-index: 30;
    border-bottom:1px #364EA2 solid;
  }
}

#header_buy{
  display: block;
  position: fixed;
  z-index: 10;
  top: 20px;
  right: 30px;
  -webkit-transition: all 0.6s 0s ease;
  transition: all 0.6s 0s ease;
  font-size: 12px;
  line-height: 26px;
  padding: 0 10px;
  color: #00FF00;
  border:2px #00FF00 solid;
  border-radius: 42px;
  -webkit-border-radius: 42px;
  -moz-border-radius: 42px;
}
#header_buy.move{
  top: 20px;
  right: 65px;
}
#header_buy:hover{
  background: #00FF00;
  color: #000;
}
@media only screen and (max-width: 768px) {
  #header_buy{
    top: 15px;
    right: 15px;
  }
  #header_buy.move{
    top: 15px;
    right: 65px;
  }
}
#sp_menu a.toggle{
  display: block;
  position: fixed;
  z-index: 1010;
  top: 15px;
  right: 20px;
  width: 42px;
  height: 42px;
  -webkit-transition: all 0.6s 0s ease;
  transition: all 0.6s 0s ease;
  opacity: 0;
  visibility: hidden;
}
#sp_menu.view a.toggle{
  opacity: 1;
  visibility: visible;
}

#sp_menu a.toggle span.l1{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
  margin-top: -10px;
  margin-left: -15px;
  background: #FF0000;
          transform-origin: center center;
  -webkit-transform-origin: center center;
-webkit-transition: all 0.6s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        transition: all 0.6s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
#sp_menu a.toggle span.l2{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
  margin-top: -1px;
  margin-left: -15px;
  background: #00FF00;
          transform-origin: center center;
  -webkit-transform-origin: center center;
-webkit-transition: all 0.6s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        transition: all 0.6s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
#sp_menu a.toggle span.l3{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
  margin-top: 9px;
  margin-left: -15px;
  background: #006DFF;
          transform-origin: center center;
  -webkit-transform-origin: center center;
-webkit-transition: all 0.6s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        transition: all 0.6s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
body.menu_open #sp_menu a.toggle span.l1{
  margin-top: 0px;
  -webkit-transform: scale3d(1,1,1) translate(0px,0px) rotate(45deg);
     -moz-transform: scale3d(1,1,1) translate(0px,0px) rotate(45deg);
          transform: scale3d(1,1,1) translate(0px,0px) rotate(45deg);
}
body.menu_open #sp_menu a.toggle span.l2{
  -webkit-transform: scale3d(0,1,1) translate(0px,0px) rotate(0deg);
     -moz-transform: scale3d(0,1,1) translate(0px,0px) rotate(0deg);
          transform: scale3d(0,1,1) translate(0px,0px) rotate(0deg);
}
body.menu_open #sp_menu a.toggle span.l3{
  margin-top: 0px;
  -webkit-transform: scale3d(1,1,1) translate(0px,0px) rotate(-45deg);
     -moz-transform: scale3d(1,1,1) translate(0px,0px) rotate(-45deg);
          transform: scale3d(1,1,1) translate(0px,0px) rotate(-45deg);
}
@media only screen and (max-width: 768px) {
  #sp_menu a.toggle{
    z-index: 1010;
    top: 8px;
    right: 15px;
    width: 42px;
    height: 42px;
    border-radius: 42px;
    -webkit-border-radius: 42px;
    -moz-border-radius: 42px;
  }
  
  body.onScroll #sp_menu a.toggle,
  body.page #sp_menu a.toggle,
  body.menu_open #sp_menu a.toggle{
    top: 8px;
  }
  #sp_menu a.toggle span.l1{
  }
  #sp_menu a.toggle span.l2{
  }
  #sp_menu a.toggle span.l3{
  }
  body.menu_open #sp_menu a.toggle span.l1{
  }
  body.menu_open #sp_menu a.toggle span.l2{
  }
  body.menu_open #sp_menu a.toggle span.l3{
  }

}

/*----------------------------------------------------
  .navigation
--------------------------------------------------- */

.block_navigation{
  display: block;
  position: fixed;
  top: 55px;
  right: -2px;
  z-index: 100;
  padding-left: 15px;
  width: 320px;
  -webkit-transition: all 0.5s 0s ease;
     -moz-transition: all 0.5s 0s ease;
          transition: all 0.5s 0s ease;
}

body.menu_open .block_navigation{
  background: #000;
  min-height: 220px;
}

.block_navigation.out{
  visibility: hidden;
  opacity: 0;
}
.block_navigation ul.menu{

}
.block_navigation ul.menu > li{
  float: left;
  position: relative;
}
.block_navigation ul.menu > li > a{
  font-size: 22px;
  color: #FFF;
  letter-spacing: 0.06em;
  font-family: 'Lato', sans-serif;
  padding-right: 12px;
  line-height: 1;
  position: relative;
  padding-bottom: 4px;
  -webkit-transition: all 0.5s 0s ease;
     -moz-transition: all 0.5s 0s ease;
          transition: all 0.5s 0s ease;
}
.block_navigation ul.menu > li:nth-child(1) > a:hover{
  color: #FF0000;
}
.block_navigation ul.menu > li:nth-child(2) > a:hover{
  color: #00FF00;
}
.block_navigation ul.menu > li:nth-child(3) > a:hover{
  color: #006DFF;
}
.block_navigation ul.menu > li > a > .line{
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  z-index: 1;
}
.block_navigation ul.menu > li:nth-child(1) > a > .line{
  background:#FF0000;
}
.block_navigation ul.menu > li:nth-child(2) > a > .line{
  background:#00FF00;
}
.block_navigation ul.menu > li:nth-child(3) > a > .line{
  background:#006DFF;
  width : -webkit-calc(100% - 15px) ;
  width : calc(100% - 15px) ;
}
.block_navigation ul.menu > li .sub_menu{
  position: absolute;
  top: 36px;
  left: 0;
  visibility: hidden;
  background: #000;
  opacity: 0;
  -webkit-transition: all 0.5s 0s ease;
     -moz-transition: all 0.5s 0s ease;
          transition: all 0.5s 0s ease;
}
.block_navigation ul.menu > li:hover .sub_menu,
body.menu_open .block_navigation ul.menu > li .sub_menu{
  visibility: visible;
  opacity: 1;
}
.block_navigation ul.menu > li .sub_menu > .line{
  position: absolute;
  top: 0px;
  left: 0;
  width: 1px;
  height: 100%;
  height : -webkit-calc(100% - 5px) ;
  height : calc(100% - 5px) ;
  background:#FF0000;
  display: block;
}
.block_navigation ul.menu > li:nth-child(3) .sub_menu > .line{
  background:#006DFF;
}
.block_navigation ul.menu > li .sub_menu ul li{
  line-height: 1;
  width: 130px;
  padding-top: 8px;
}
.block_navigation ul.menu > li .sub_menu ul li a{
  font-size: 12px;
  color: #FFF;
  letter-spacing: 0.06em;
  font-family: 'Lato', sans-serif;
  line-height: 1;
  position: relative;
  -webkit-transition: all 0.5s 0s ease;
     -moz-transition: all 0.5s 0s ease;
          transition: all 0.5s 0s ease;
}
.block_navigation ul.menu > li:nth-child(1) .sub_menu ul li a:hover{
  color: #FF0000;
}
.block_navigation ul.menu > li:nth-child(3) .sub_menu ul li a:hover{
  color: #006DFF;
}
.block_navigation ul.menu > li .sub_menu ul li a .line{
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 1px;
  margin-right: 6px;
  background:#FF0000;
  position: relative;
}
.block_navigation ul.menu > li:nth-child(3)  .sub_menu ul li a .line{
  background:#006DFF;
}
.block_navigation ul.menu > li .sub_menu ul li a .line:after{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -2px;
  right: -2px;
  width: 4px;
  height: 4px;
  background:#FF0000;
  border-radius: 50%;
  -webkit-border-radius: 50%;  
  -moz-border-radius: 50%;
}
.block_navigation ul.menu > li:nth-child(3) .sub_menu ul li a .line:after{
  background:#006DFF;
}

@media only screen and (max-width: 768px) {
  .block_navigation{
    display: block;
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 100;
    min-height: 160px;
    padding-left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    -webkit-transition: all 0.5s 0s ease;
       -moz-transition: all 0.5s 0s ease;
            transition: all 0.5s 0s ease;
            visibility: hidden;
            opacity: 0;
  }
  .block_navigation:hover,
  body.menu_open .block_navigation{
    background: #000;
  }
  
  .block_navigation.out{
    visibility: hidden;
    opacity: 0;
  }
  body.menu_open .block_navigation{
    visibility: visible;
    opacity: 1;
  }
  .block_navigation ul.menu{
    padding-left: 20px;
    padding-top: 60px;
  }
  .block_navigation ul.menu > li{
  }
  .block_navigation ul.menu > li > a{
    font-size: 6.2vw;
    padding-right: 12px;
    padding-bottom: 4px;
  }
  .block_navigation ul.menu > li:nth-child(1) > a:hover{
    color: #FFF;
  }
  .block_navigation ul.menu > li:nth-child(2) > a:hover{
    color: #FFF;
  }
  .block_navigation ul.menu > li:nth-child(3) > a:hover{
    color: #FFF;
  }
  .block_navigation ul.menu > li > a > .line{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    z-index: 1;
  }
  .block_navigation ul.menu > li:nth-child(1) > a > .line{
    background:#FF0000;
  }
  .block_navigation ul.menu > li:nth-child(2) > a > .line{
    background:#00FF00;
  }
  .block_navigation ul.menu > li:nth-child(3) > a > .line{
    background:#006DFF;
    width : -webkit-calc(100% - 12px) ;
    width : calc(100% - 12px) ;
  }
  .block_navigation ul.menu > li .sub_menu{
    position: absolute;
    top: 36px;
    left: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s 0s ease;
       -moz-transition: all 0.5s 0s ease;
            transition: all 0.5s 0s ease;
  }
  .block_navigation ul.menu > li:hover .sub_menu,
  body.menu_open .block_navigation ul.menu > li .sub_menu{
    visibility: visible;
    opacity: 1;
  }
  .block_navigation ul.menu > li .sub_menu > .line{
    position: absolute;
    top: 0px;
    left: 0;
    width: 1px;
    height: 100%;
    height : -webkit-calc(100% - 5px) ;
    height : calc(100% - 5px) ;
    background:#FF0000;
    display: block;
  }
  .block_navigation ul.menu > li:nth-child(3) .sub_menu > .line{
    background:#006DFF;
  }
  .block_navigation ul.menu > li .sub_menu ul li{
    line-height: 1;
    width: 130px;
    padding-top: 8px;
  }
  .block_navigation ul.menu > li .sub_menu ul li a{
    font-size: 12px;
    color: #FFF;
    letter-spacing: 0.06em;
    font-family: 'Lato', sans-serif;
    line-height: 1;
    position: relative;
    -webkit-transition: all 0.5s 0s ease;
       -moz-transition: all 0.5s 0s ease;
            transition: all 0.5s 0s ease;
  }
  .block_navigation ul.menu > li:nth-child(1) .sub_menu ul li a:hover{
    color: #FF0000;
  }
  .block_navigation ul.menu > li:nth-child(3) .sub_menu ul li a:hover{
    color: #006DFF;
  }
  .block_navigation ul.menu > li .sub_menu ul li a .line{
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 1px;
    margin-right: 6px;
    background:#FF0000;
    position: relative;
  }
  .block_navigation ul.menu > li:nth-child(3)  .sub_menu ul li a .line{
    background:#006DFF;
  }
  .block_navigation ul.menu > li .sub_menu ul li a .line:after{
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -2px;
    right: -2px;
    width: 4px;
    height: 4px;
    background:#FF0000;
    border-radius: 50%;
    -webkit-border-radius: 50%;  
    -moz-border-radius: 50%;
  }
  .block_navigation ul.menu > li:nth-child(3) .sub_menu ul li a .line:after{
    background:#006DFF;
  }
}

.block_sp_navigation{
  display: none;
}
@media only screen and (max-width: 768px) {
  .block_sp_navigation{
    display: block;
    position: fixed;
    top: 45px;
    right: 10px;
    z-index: 100;
    padding-left: 15px;
    -webkit-transition: all 0.5s 0s ease;
      -moz-transition: all 0.5s 0s ease;
            transition: all 0.5s 0s ease;
  }
  .block_sp_navigation.out{
    visibility: hidden;
    opacity: 0;
  }
  .block_sp_navigation ul.menu{

  }
  .block_sp_navigation ul.menu > li{
    float: left;
    position: relative;
  }
  .block_sp_navigation ul.menu > li > a{
    font-size: 3vw;
    color: #FFF;
    letter-spacing: 0.06em;
    font-family: 'Lato', sans-serif;
    padding:0 5px;
    line-height: 1;
    position: relative;
    padding-bottom: 4px;
    -webkit-transition: all 0.5s 0s ease;
      -moz-transition: all 0.5s 0s ease;
            transition: all 0.5s 0s ease;
  }
  .block_sp_navigation ul.menu > li > a > .line{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    z-index: 1;
  }
  .block_sp_navigation ul.menu > li:nth-child(1) > a > .line{
    background:#FF0000;
  }
  .block_sp_navigation ul.menu > li:nth-child(2) > a > .line{
    background:#00FF00;
  }
  .block_sp_navigation ul.menu > li:nth-child(3) > a > .line{
    background:#006DFF;
    width : -webkit-calc(100% - 6px) ;
    width : calc(100% - 6px) ;
  }
}
/*----------------------------------------------------
  #page_title
--------------------------------------------------- */
#page_title{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 30;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s 0s ease;
          transition: all 0.4s 0s ease;
}
#page_title.view{
  opacity: 1;
  visibility: visible;
}
#page_title .title li{
  position: absolute;
  top: 25px;
  left: 15px;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -.002em;
  font-family: 'Lato', sans-serif;
  -webkit-transition: all 0.4s 0s ease;
          transition: all 0.4s 0s ease;
          opacity: 0;
}
#page_title .title li.view{
  opacity: 1;
}
#page_title ul.icon{
  position: absolute;
  top: 32px;
  left: 260px;
  width: 280px;
}
#page_title ul.icon li{
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
#page_title ul.icon li svg{
  fill:#FFF;
  -webkit-transition: all 0.4s 0s ease;
          transition: all 0.4s 0s ease;
}
#page_title ul.icon li.active svg{
  fill:#00FF00;
}

@media only screen and (max-width: 768px) {
  #page_title{
  }
  #page_title.view{
  }
  #page_title .title li{
    position: absolute;
    top: 25px;
    left: 15px;
    font-size: 20px;
  }
  #page_title .title li.view{
  }
  #page_title ul.icon{
    top: 22px;
    left: 140px;
    width: 280px;
    transform-origin: left 50%;
  -webkit-transform-origin: left 50%;
    -webkit-transform: scale(0.5,0.5) translate(0px,0px) rotate(0deg);
       -moz-transform: scale(0.5,0.5) translate(0px,0px) rotate(0deg);
            transform: scale(0.5,0.5) translate(0px,0px) rotate(0deg);
  }
  #page_title ul.icon li{
    margin-right: 10px;
  }
  #page_title ul.icon li svg{
  }
  #page_title ul.icon li a.active svg{
  }
}
.sp_slide_navi{
  display: none;
}
@media only screen and (max-width: 768px) {
  .sp_slide_navi{
    display: block;
    text-align: center;
    padding-top: 40px;
  }
  .sp_slide_navi ul.icon li{
    display: inline-block;
    vertical-align: middle;
    margin:0 5px;
  }
  .sp_slide_navi ul.icon li svg{
    fill:#FFF;
    -webkit-transition: all 0.4s 0s ease;
            transition: all 0.4s 0s ease;
  }
  .sp_slide_navi ul.icon li.active svg{
    fill:#00FF00;
  }
  .sp_slide_content{
    position: relative;
  }
  .sp_slide_content a.prev{
    position: absolute;
    top: 35vw;
    left:0px;
    width: 40px;
    height: 40px;
    display: block;
    background: url(../img/top/arrow.svg) no-repeat center center;
    background-size: 15px;
    z-index: 10;
  }
  .sp_slide_content a.next{
    position: absolute;
    top: 35vw;
    right: 0px;
    width: 40px;
    height: 40px;
    display: block;
    background: url(../img/top/arrow.svg) no-repeat center center;
    background-size: 15px;
    z-index: 10;
    -webkit-transform: scale3d(1,1,1) translate(0px,0px) rotate(180deg);
       -moz-transform: scale3d(1,1,1) translate(0px,0px) rotate(180deg);
            transform: scale3d(1,1,1) translate(0px,0px) rotate(180deg);
  }
  .slick-slide img.pc_only{
    display: none;
  }

}

/*----------------------------------------------------
  top
--------------------------------------------------- */

.logo{
  position: fixed;
  z-index: 2;
  top: 50px;
  left: 46px;
  /* width: 34vh; */
  width: 270px;
  -webkit-transition: all 0.5s 0s ease;
     -moz-transition: all 0.5s 0s ease;
          transition: all 0.5s 0s ease;
}
.logo.out{
  visibility: hidden;
  opacity: 0;
}
.mainvisual{
  position: fixed;
  z-index: 0;
  top: 0px;
  left: 0%;
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
-webkit-transform-origin: center bottom;
}
.mainvisual .img{
  display: block;
  position: absolute;
  bottom: 0px;
  right: 0%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../img/top/mainvisual.jpg) no-repeat center center;
  background-size: 142vh auto;
          transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
  opacity: 0;
}
body.pageLoad .mainvisual .img{
  opacity: 1;
  -webkit-transition: all 4.5s 0s ease;
     -moz-transition: all 4.5s 0s ease;
          transition: all 4.5s 0s ease;
}
.mainvisual .line_area{
  position: absolute;
  bottom: 25%;
  right: 50%;
  /* margin-top: -10vh; */ 
    margin-right: 25vh;
  width: 204px;
  height: 348px;
  overflow: hidden;
}
.mainvisual .line_area .line{
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 0%;
  overflow: hidden;
}
body.pageLoad .mainvisual .line_area .line{
  height: 100%;
  -webkit-transition: all 1.0s 1.0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
     -moz-transition: all 1.0s 1.0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
          transition: all 1.0s 1.0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
.mainvisual .line.out{
  display: none;
}
.mainvisual .line span.l{
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0%;
  width: 204px;
  height: 308px;
  overflow: hidden;
  background: url(../img/top/line02_s.svg) no-repeat center center;
  background-size: contain;
}
.mainvisual .line span.t{
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0%;
  width: 100%;
  height: 340px;
  overflow: hidden;
  opacity: 0;
  text-align: left;
  font-size: 16px;
  font-family: 'Lato', sans-serif;
}
body.pageLoad .mainvisual .line span.t{
  opacity: 1;
  -webkit-transition: all 0.5s 1.7s ease;
     -moz-transition: all 0.5s 1.7s ease;
          transition: all 0.5s 1.7s ease;
}
.ufo{
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 50%;
  margin-left: -90px;
  width: 180px;
  height:180px;
}
.ufo .img{
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: url(../img/top/ufo.png) no-repeat center bottom;
  background-size: contain;
  transform-origin: center top;
-webkit-transform-origin: center top;
  -webkit-transform: scale3d(0.1,0.1,0.1) translate3d(0px,-200px,0px);
     -moz-transform: scale3d(0.1,0.1,0.1) translate3d(0px,-200px,0px);
          transform: scale3d(0.1,0.1,0.1) translate3d(0px,-200px,0px);
}
body.pageLoad .ufo .img{
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px);
  -webkit-transition: all 1.0s 0.5s cubic-bezier(0.875, 0.005, 0.090, 0.990);
     -moz-transition: all 1.0s 0.5s cubic-bezier(0.875, 0.005, 0.090, 0.990);
          transition: all 1.0s 0.5s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
.ufo .bar{
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
-webkit-transform-origin: center top;
  -webkit-transform: scale3d(0.1,0.1,0.1) translate3d(0px,-200px,0px);
     -moz-transform: scale3d(0.1,0.1,0.1) translate3d(0px,-200px,0px);
          transform: scale3d(0.1,0.1,0.1) translate3d(0px,-200px,0px);
}
.ufo .bar .bar_img{
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: url(../img/top/ufo_bar.png) no-repeat center bottom;
  background-size: contain;
  -webkit-transition: all 0.5s 0s ease;
     -moz-transition: all 0.5s 0s ease;
          transition: all 0.5s 0s ease;
}
.ufo .bar.out .bar_img{
  opacity: 0;
}
body.pageLoad .ufo .bar{
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px);
  -webkit-transition: all 1.0s 0.5s cubic-bezier(0.875, 0.005, 0.090, 0.990);
     -moz-transition: all 1.0s 0.5s cubic-bezier(0.875, 0.005, 0.090, 0.990);
          transition: all 1.0s 0.5s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
.ufo .line{
  position: absolute;
  top: 70%;
  left: 70%;
  width: 0px;
  height: 45px;
  overflow: hidden;
}
body.pageLoad .ufo .line{
  width: 167px;
  -webkit-transition: all 1.0s 1.0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
     -moz-transition: all 1.0s 1.0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
          transition: all 1.0s 1.0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
.ufo .line span.l{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 167px;
  height: 45px;
  background: url(../img/top/line01.svg) no-repeat;
}
.ufo .line span.t{
  display: block;
  position: absolute;
  top: 12px;
  left: 0;
  width: 160px;
  height: 45px;
  text-align: right;
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  /* background: url(../img/top/line01_text.svg) no-repeat; */
  opacity: 0;
}
body.pageLoad .ufo .line span.t{
  opacity: 1;
  -webkit-transition: all 0.5s 1.7s ease;
     -moz-transition: all 0.5s 1.7s ease;
          transition: all 0.5s 1.7s ease;
}
.ufo .line.out span{
  display: none;
}
.credit{
  position: fixed;
  z-index: 1;
  top: 120px;
  right: 30px;
  text-align: right;
  font-size: 10px;
  line-height: 18px;
  letter-spacing: 0.08em;
  font-family: 'Lato', sans-serif;
  -webkit-transition: all 0.5s 0s ease;
     -moz-transition: all 0.5s 0s ease;
          transition: all 0.5s 0s ease;
}
.credit a{
  font-weight: bold;
  color: #FFF;
}
.credit a:hover{
  text-decoration: underline;
}
.credit.out{
  visibility: hidden;
  opacity: 0;
}
@media only screen and (max-width: 768px) {
  .sp_contents{
    position: relative;
  }
  .logo{
    top: 30px;
    left: 30px;
    width: 35vw;
  }
  .mainvisual{
    position: fixed;
    width: 180%;
    left: -40%;
    height: 160vw;
  }
  .mainvisual .img{
    background: url(../img/top/mainvisual.jpg) no-repeat center bottom;
    background-size: 650px auto;
  }
  body.pageLoad .mainvisual .img{
  }
  .mainvisual .line_area{
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 100%;
    margin-bottom: 0px;
    margin-left: -140px;
    overflow: hidden;
  }
  .mainvisual .line_area .line{
  }
  body.pageLoad .mainvisual .line{
  }
  .mainvisual .line span.l{
    width: 154px;
    height: 238px;
    overflow: hidden;
    background: url(../img/top/line02_s.svg) no-repeat center center;
    background-size: contain;
  }
  .mainvisual .line span.t{
    height: 263px;
    font-size: 12px;
  }
  .ufo{
    position: fixed;
    z-index: 1;
    top: 0px;
    left: 50%;
    margin-left: -80px;
    width: 160px;
    height:200px;
  }
  .ufo .img{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url(../img/top/ufo_sp.png) no-repeat center bottom;
    background-size: 100% auto;
    transform-origin: center top;
  -webkit-transform-origin: center top;
      -webkit-transform: scale(0.1,0.1) translate3d(0px,-200px,0px);
         -moz-transform: scale(0.1,0.1) translate3d(0px,-200px,0px);
              transform: scale(0.1,0.1) translate3d(0px,-200px,0px);
  }
  .ufo .bar{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    transform-origin: center top;
  -webkit-transform-origin: center top;

  }
  .ufo .bar .bar_img{
    top: 20px;
    background: url(../img/top/ufo_sp_bar.png) no-repeat center bottom;
    background-size: cover;
  }
  body.pageLoad .ufo .bar_img{
    -webkit-transition: all 0s ease;
       -moz-transition: all 0s ease;
            transition: all 0s ease;
  }
  .ufo .line{
    position: absolute;
    top: auto;
    bottom: -4px;
    left: 45%;
    width: 0px;
    height: 45px;
    overflow: hidden;
  }
  body.pageLoad .ufo .line{
    width: 167px;
  }
  .ufo .line span.l{
    width: 167px;
    height: 45px;
    background: url(../img/top/line01.svg) no-repeat;
  }
  .ufo .line span.t{
    top: 18px;
    left: 0;
    width: 160px;
    height: 45px;
    font-size: 12px;
  }
  body.pageLoad .ufo .line span.t{
  }
  .ufo .line.out span{
    display: none;
  }
  .credit{
    position: fixed;
    top: 90px;
    /* bottom: 20px; */
    right: 15px;
    font-size: 8px;
    line-height: 18px;
  }
  .credit.out{
  }
}

@media only screen and (max-width: 320px) {
  .ufo{
    position: fixed;
    z-index: 1;
    top: -20px;
    left: 50%;
    margin-left: -80px;
    width: 160px;
    height:200px;
  }
}

/*----------------------------------------------------
  concept
--------------------------------------------------- */
.concept{
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  background: url(../img/top/product_bottom.jpg) no-repeat center bottom;
  background-size: 1440px auto;
  height: 1000px;
  /*height: 130vh;*/
}
.concept .lead{
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 0px;
}
.concept .en{
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 40px;
  font-family: 'Lato', sans-serif;
}
.concept p{
  width: 720px;
  margin:0 auto;
  text-align: left;
  font-size: 17px;
  line-height: 28px;
}
@media only screen and (max-width: 768px) {
  .concept{
    margin-top: 160vw;
    position: relative;
    background: url(../img/top/product_bottom.jpg) no-repeat 20% bottom;
    background-size: 200% auto;
    height: 650px;
    padding-top: 480px;
  }
  .concept .lead{
    font-size: 25px;
    margin-bottom: 0px;
  }
  .concept .en{
    font-size: 16px;
    margin-bottom: 40px;
  }
  .concept p{
    width: 300px;
    margin:0 auto;
    font-size: 14px;
    line-height: 28px;
  }
}

/*----------------------------------------------------
  product
--------------------------------------------------- */
.product{
  position: fixed;
  z-index: 1;
  pointer-events:none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.product .ob{
  position: absolute;
  top: 10%;
  left: 0%;
  width: 60%;
  height: 80%;
  background: #000 url(../img/product/product.jpg) no-repeat center center;
  background-size: 100% auto;
}
.product .meter{
  position: absolute;
  z-index: 1;
  top: 15vw;
  left: 5vw;
  width: 2.6vw;
}
.product ul li.line01 span{
  display: block;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 60vw;
  height: 100%;
  background: url(../img/product/line01.png) no-repeat center center;
  background-size: 100% auto;
}
.product ul li.line02 span{
  display: block;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 60vw;
  height: 100%;
  background: url(../img/product/line02.png) no-repeat center center;
  background-size: 100% auto;
}
.product ul li.line03 span{
  display: block;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 60vw;
  height: 100%;
  background: url(../img/product/line03.png) no-repeat center center;
  background-size: 100% auto;
}
.product ul li{
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 0%;
  width: 40%;
  height: 80%;
  overflow: hidden;
  -webkit-transition: all 1s 0s ease;
     -moz-transition: all 1s 0s ease;
          transition: all 1s 0s ease;
}
.product.view ul li:nth-child(1){
  width: 60%;
  -webkit-transition: all 2.6s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
     -moz-transition: all 2.6s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
          transition: all 2.6s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
.product.view ul li:nth-child(2){
  width: 60%;
  -webkit-transition: all 2.6s 0.2s cubic-bezier(0.875, 0.005, 0.090, 0.990);
     -moz-transition: all 2.6s 0.2s cubic-bezier(0.875, 0.005, 0.090, 0.990);
          transition: all 2.6s 0.2s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
.product.view ul li:nth-child(3){
  width: 60%;
  -webkit-transition: all 2.6s 0.4s cubic-bezier(0.875, 0.005, 0.090, 0.990);
     -moz-transition: all 2.6s 0.4s cubic-bezier(0.875, 0.005, 0.090, 0.990);
          transition: all 2.6s 0.4s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}

.product .spec{
  position: absolute;
  top: 50%;
  left: 60%;
  width: 35%;
  /* height: 80%; */
  opacity: 0;
  -webkit-transform: translate3d(0px,-50%,0px);
     -moz-transform: translate3d(0px,-50%,0px);
          transform: translate3d(0px,-50%,0px);
}
.product.view .spec{
  opacity: 1;
  -webkit-transition: all 1.0s 1s ease;
     -moz-transition: all 1.0s 1s ease;
          transition: all 1.0s 1s ease;
}
.product .spec .spec_t{
  color: #FFF;
  font-size: 13px;
  margin-bottom: 10px;
}
.product .spec .t_inner{
  display: inline-block;
  border:1px #FFF solid;
  padding: 20px;
}
.product .spec .t_inner p{
  font-size: 12px;
  font-size: .83vw;
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .product{
    position: relative;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    background:none;
    margin-top: 0px;
  }
  .product .ob{
    display: none;
  }
  .product .meter{
    display: none;
  }
  .product ul{
    display: none;
  }
  .product .spec{
    position: relative;
    top: 0%;
    left: 0%;
    width: 90%;
    margin: 0 auto;
    height: auto;
    opacity: 1;
    padding-bottom: 40px;
    -webkit-transform: translate3d(0px,0%,0px);
       -moz-transform: translate3d(0px,0%,0px);
            transform: translate3d(0px,0%,0px);
  }
  .product .spec .spec_t{
    color: #FFF;
    font-size: 13px;
    margin-bottom: 10px;
  }
  .product .spec .t_inner{
    display: block;
    border:1px #FFF solid;
    padding: 20px;
  }
  .product .spec .t_inner p{
    font-size: 12px;
    line-height: 1.8;
  }
}
/*----------------------------------------------------
  bluetooth
--------------------------------------------------- */
.bluetooth{
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.bluetooth .image{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  margin-left: -500px;
  -webkit-transform: scale(1,1) translate(-0%,-50%);
     -moz-transform: scale(1,1) translate(-0%,-50%);
          transform: scale(1,1) translate(-0%,-50%);
}
.bluetooth .textarea{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  margin-left: 100px;
  -webkit-transform: scale(1,1) translate(-0%,-50%);
     -moz-transform: scale(1,1) translate(-0%,-50%);
          transform: scale(1,1) translate(-0%,-50%);
}
.bluetooth .textarea .lead{
  font-size: 25px;
  line-height: 40px;
  margin-bottom: 40px;
}
.bluetooth .textarea p{
  font-size: 14px;
  line-height: 26px;
}

@media only screen and (max-width: 768px) {
  .bluetooth{
    position: relative;
    height: auto;
    background: #000;
    padding: 20px 0;
  }
  .bluetooth .image{
    position: relative;
    top: 0%;
    left: 0%;
    width: 75%;
    margin:0 auto;
    -webkit-transform: scale(1,1) translate(-0%,0%);
       -moz-transform: scale(1,1) translate(-0%,0%);
            transform: scale(1,1) translate(-0%,0%);
            margin-bottom: 10px;;
  }
  .bluetooth .textarea{
    position: relative;
    top: 0%;
    left: 0%;
    width: 90%;
    margin:0 auto;
    -webkit-transform: scale(1,1) translate(-0%,0%);
       -moz-transform: scale(1,1) translate(-0%,0%);
            transform: scale(1,1) translate(-0%,0%);
  }
  .bluetooth .textarea .lead{
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .bluetooth .textarea p{
    font-size: 12px;
    line-height: 2;
  }
}

/*----------------------------------------------------
  many
--------------------------------------------------- */
.many{
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.many .image{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  margin-left: -500px;
  -webkit-transform: scale(1,1) translate(-0%,-50%);
     -moz-transform: scale(1,1) translate(-0%,-50%);
          transform: scale(1,1) translate(-0%,-50%);
}
.many .textarea{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  margin-left: 100px;
  -webkit-transform: scale(1,1) translate(-0%,-50%);
     -moz-transform: scale(1,1) translate(-0%,-50%);
          transform: scale(1,1) translate(-0%,-50%);
}
.many .textarea .lead{
  font-size: 25px;
  line-height: 40px;
  margin-bottom: 40px;
}
.many .textarea p{
  font-size: 14px;
  line-height: 26px;
}

@media only screen and (max-width: 768px) {
  .many{
    position: relative;
    height: auto;
    background: #000;
    padding: 20px 0;
  }
  .many .image{
    position: relative;
    top: 0%;
    left: 0%;
    width: 75%;
    margin:0 auto;
    -webkit-transform: scale(1,1) translate(-0%,0%);
       -moz-transform: scale(1,1) translate(-0%,0%);
            transform: scale(1,1) translate(-0%,0%);
            margin-bottom: 10px;;
  }
  .many .textarea{
    position: relative;
    top: 0%;
    left: 0%;
    width: 90%;
    margin:0 auto;
    -webkit-transform: scale(1,1) translate(-0%,0%);
       -moz-transform: scale(1,1) translate(-0%,0%);
            transform: scale(1,1) translate(-0%,0%);
  }
  .many .textarea .lead{
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .many .textarea p{
    font-size: 12px;
    line-height: 2;
  }
}
/*----------------------------------------------------
  color
--------------------------------------------------- */
.color{
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.color .image{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  margin-left: -500px;
  -webkit-transform: scale(1,1) translate(-0%,-50%);
     -moz-transform: scale(1,1) translate(-0%,-50%);
          transform: scale(1,1) translate(-0%,-50%);
}
.color .image video{
  width: 100%;
  height: auto;
}
.color .textarea{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  margin-left: 100px;
  -webkit-transform: scale(1,1) translate(-0%,-50%);
     -moz-transform: scale(1,1) translate(-0%,-50%);
          transform: scale(1,1) translate(-0%,-50%);
}
.color .textarea .lead{
  font-size: 25px;
  line-height: 40px;
  margin-bottom: 40px;
}
.color .textarea p{
  font-size: 14px;
  line-height: 26px;
}
@media only screen and (max-width: 768px) {
  .color{
    position: relative;
    height: auto;
    background: #000;
    padding: 20px 0;
  }
  .color .image{
    position: relative;
    top: 0%;
    left: 0%;
    width: 75%;
    margin:0 auto;
    -webkit-transform: scale(1,1) translate(-0%,0%);
       -moz-transform: scale(1,1) translate(-0%,0%);
            transform: scale(1,1) translate(-0%,0%);
            margin-bottom: 10px;;
  }
  .color .textarea{
    position: relative;
    top: 0%;
    left: 0%;
    width: 90%;
    margin:0 auto;
    -webkit-transform: scale(1,1) translate(-0%,0%);
       -moz-transform: scale(1,1) translate(-0%,0%);
            transform: scale(1,1) translate(-0%,0%);
  }
  .color .textarea .lead{
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .color .textarea p{
    font-size: 12px;
    line-height: 2;
  }
}

/*----------------------------------------------------
  light
--------------------------------------------------- */
.light{
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.light .image{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  margin-left: -500px;
  -webkit-transform: scale(1,1) translate(-0%,-50%);
     -moz-transform: scale(1,1) translate(-0%,-50%);
          transform: scale(1,1) translate(-0%,-50%);
}
.light .textarea{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  margin-left: 100px;
  -webkit-transform: scale(1,1) translate(-0%,-50%);
     -moz-transform: scale(1,1) translate(-0%,-50%);
          transform: scale(1,1) translate(-0%,-50%);
}
.light .textarea .lead{
  font-size: 25px;
  line-height: 40px;
  margin-bottom: 40px;
}
.light .textarea p{
  font-size: 14px;
  line-height: 26px;
}
@media only screen and (max-width: 768px) {
  .light{
    position: relative;
    height: auto;
    background: #000;
    padding: 20px 0;
  }
  .light .image{
    position: relative;
    top: 0%;
    left: 0%;
    width: 75%;
    margin:0 auto;
    -webkit-transform: scale(1,1) translate(-0%,0%);
       -moz-transform: scale(1,1) translate(-0%,0%);
            transform: scale(1,1) translate(-0%,0%);
            margin-bottom: 10px;;
  }
  .light .textarea{
    position: relative;
    top: 0%;
    left: 0%;
    width: 90%;
    margin:0 auto;
    -webkit-transform: scale(1,1) translate(-0%,0%);
       -moz-transform: scale(1,1) translate(-0%,0%);
            transform: scale(1,1) translate(-0%,0%);
  }
  .light .textarea .lead{
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .light .textarea p{
    font-size: 12px;
    line-height: 2;
  }
}
/*----------------------------------------------------
  rotation
--------------------------------------------------- */
.rotation{
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.rotation .image{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  margin-left: -500px;
  -webkit-transform: scale(1,1) translate(-0%,-50%);
     -moz-transform: scale(1,1) translate(-0%,-50%);
          transform: scale(1,1) translate(-0%,-50%);
}
.rotation .image video{
  width: 100%;
  height: auto;
}
.rotation .textarea{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  margin-left: 100px;
  -webkit-transform: scale(1,1) translate(-0%,-50%);
     -moz-transform: scale(1,1) translate(-0%,-50%);
          transform: scale(1,1) translate(-0%,-50%);
}
.rotation .textarea .lead{
  font-size: 25px;
  line-height: 40px;
  margin-bottom: 40px;
}
.rotation .textarea p{
  font-size: 14px;
  line-height: 26px;
}
@media only screen and (max-width: 768px) {
  .rotation{
    position: relative;
    height: auto;
    background: #000;
    padding: 20px 0;
  }
  .rotation .image{
    position: relative;
    top: 0%;
    left: 0%;
    width: 75%;
    margin:0 auto;
    -webkit-transform: scale(1,1) translate(-0%,0%);
       -moz-transform: scale(1,1) translate(-0%,0%);
            transform: scale(1,1) translate(-0%,0%);
            margin-bottom: 10px;;
  }
  .rotation .textarea{
    position: relative;
    top: 0%;
    left: 0%;
    width: 90%;
    margin:0 auto;
    -webkit-transform: scale(1,1) translate(-0%,0%);
       -moz-transform: scale(1,1) translate(-0%,0%);
            transform: scale(1,1) translate(-0%,0%);
  }
  .rotation .textarea .lead{
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .rotation .textarea p{
    font-size: 12px;
    line-height: 2;
  }
}
/*----------------------------------------------------
  gallery
--------------------------------------------------- */
.gallery{
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 1400px;
  background: #000;
}
.gallery .title{
  background: #000;
  padding-top: 75px;
  padding-left: 15px;
  line-height: 1;
  margin-bottom: 40px;
  color: #FFF;
}
.gallery .title .t{
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -.002em;
  position: relative;
  top: 5px;
  font-family: 'Lato', sans-serif;
}
.gallery ul.for{
  text-align: center;
  width: 900px;
  margin:0 auto;
  letter-spacing: -0.4em;
  padding-top: 100px;
}
.gallery ul.for > li{
  letter-spacing: normal;
  display: inline-block;
  vertical-align: top;
  width: 46%;
  margin: 0 2%;
  margin-bottom: 3%;
  position: relative;
}
.gallery ul.for > li ul.wipe li{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.gallery ul.for > li ul.wipe li span{
  display: block;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
}
.gallery ul.for > li ul.wipe li span img{
  width: 414px;
  height: auto;
}
.gallery ul.for > li ul.wipe li:first-child{
  position: relative;
}

.gallery li video{
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .gallery{
    position: relative;
    width: 100%;
    height: auto;
    background: #000;
    padding-bottom: 10px;
  }
  .gallery .title{
    padding-top: 0px;
    padding-left: 15px;
    margin-bottom: 40px;
  }
  .gallery .title .t{
    font-size: 30px;
  }
  .gallery ul.for{
    width: 90%;
    margin:0 auto;
    padding-top: 20px;
  }
  .gallery ul.for > li{
    width: 100%;
    height: 90vw;
    margin: 0%;
    margin-bottom: 20px;
    vertical-align: top;
  }
  .gallery ul.for > li ul.wipe li span img{
    width: 90vw;
    height: auto;
  }
  .gallery li video{
    width: 100%;
    height: auto;
  }
  .gallery ul.para{
    width: 90%;
    margin:0 auto;
    padding-top: 20px;
  }
  .gallery ul.para li{
    margin-bottom: 20px;
  }
}
/*----------------------------------------------------
  text_block
--------------------------------------------------- */
.bottom_contents{
  position: fixed;
  z-index: 1;
  top: 100%;
  left: 0px;
  width: 100%;
}
.text_block{
  position: relative;
  z-index: 1;
  top: 100%;
  left: 0px;
  width: 100%;
  min-height: 300px;
  background: #FFF;
  color: #000;
  padding-bottom: 40px;
}
#store.text_block{
  background: url(../img/store/bg.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
#spec.text_block{
  background: url(../img/store/bg.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
#support.text_block{
  color: #FFF;
  background:#000 url(../img/support/bg.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
.text_block .title{
  background: #000;
  padding-top: 75px;
  padding-left: 15px;
  line-height: 1;
  margin-bottom: 40px;
  color: #FFF;
}
.text_block .title .t{
  color: #FFF;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -.002em;
  position: relative;
  top: 5px;
  font-family: 'Lato', sans-serif;
}
.text_block .title.ja .t{
  top: 1px;
}
.text_block .title .t .ja{
  font-size: 16px;
  margin-left: 20px;
  font-weight: normal;
  position: relative;
  top: -4px;
  font-family: 'YakuHanJP','Noto Sans JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.store_area{
  padding-bottom: 30px;
}
.text_block .border_block{
  border:2px #000 solid;
  width: 600px;
  margin:0 auto;
  margin-bottom: 20px;
  position: relative;
}
.text_block .store_t{
  text-align: center;
  font-size: 26px;
  padding-top: 20px;
  margin-bottom: 0px;
}
.text_block .price{
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.text_block .btn{
  text-align: center;
  padding-bottom: 20px;
}
.text_block .package{
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 120px;
}
.text_block .btn a{
  display: block;
  width: 290px;
  margin:0 auto;
  line-height: 60px;
  background: #000;
  color: #FFF;
  font-size: 29px;
  font-family: 'Lato', sans-serif;
  border:1px #FFF solid;
  border-radius: 60px;
  -webkit-border-radius: 60px;  
  -moz-border-radius: 60px;
  -webkit-transition: all 0.5s 0s ease;
     -moz-transition: all 0.5s 0s ease;
          transition: all 0.5s 0s ease;
}
.text_block .btn a:hover{
  background: #FFF;
  color: #000;
}
.text_block .link_t{
  text-align: center;
  font-size: 12px;
  margin-bottom: 10px;
}
.text_block ul.link{
  overflow: hidden;
  text-align: center;
  padding-bottom: 20px;
}
.text_block ul.link li{
  display: inline-block;
  vertical-align: top;
  margin:0 5px;
}
.text_block ul.link li img{
  width: auto;
  height: 60px;
}
.text_block ul.link li a{
  -webkit-transition: all 0.5s 0s ease;
     -moz-transition: all 0.5s 0s ease;
          transition: all 0.5s 0s ease;
}
.text_block ul.link li a:hover{
  opacity: 0.5;
}
.text_block .spec_block{
  width: 80%;
  margin:0 auto;
  overflow: hidden;
  text-align: center;
  letter-spacing: -0.4em;
  padding-bottom: 40px;
  position: relative;
}
.text_block .spec_block .spec_title{
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  letter-spacing: normal;
}
.text_block .spec_block figure{
  width: 60%;
  display: inline-block;
  vertical-align: middle;
  letter-spacing: normal;
  position: relative;
}
.text_block .spec_block figure img{
  display: block;
  width: 60%;
  margin:0 auto;
}
.text_block .spec_block .textarea{
  border:2px #000 solid;
  width: 38%;
  display: inline-block;
  vertical-align: middle;
  letter-spacing: normal;
  text-align: left;
  font-size: 12px;
  line-height: 21px;
}
.text_block .spec_block .textarea .t_inner{
  padding: 20px;
}

/*support*/

.text_block .support_btn{
  text-align: center;
  padding-bottom: 40px;
  position: relative;
}
.text_block .support_btn .s_column{
  margin-bottom: 20px;
}
.text_block .support_btn .s_column p{
  font-size: 12px;
  margin-bottom: 10px;
}
.text_block .support_btn .s_column .btn{

}
.text_block .support_btn .s_column .btn a{
}
.text_block .support{
  border:2px #FFF solid;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 20px;
  padding-top: 40px;
  margin-bottom: 40px;
}
.text_block .support dl{
  width: 800px;
  margin:0 auto;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}
.text_block .support dl dt{
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
}
.text_block .support dl dt img{
  vertical-align: -4px;
}
.text_block .support dl dd{
  padding-left: 65px;
  font-size: 19px;
  line-height: 29px;
}
.text_block .support dl dd a.form{
  background: #FFF;
  color: #000;
  width: 290px;
  text-align: center;
  font-size: 19px;
  line-height: 35px;
  display: block;
  -webkit-transition: all 0.5s 0s ease;
     -moz-transition: all 0.5s 0s ease;
          transition: all 0.5s 0s ease;
}
.text_block .support dl dd a.form:hover{
  background: #000;
  color: #FFF;
}
/*list*/
.text_block .list{
  width: 800px;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 60px;
  padding-top: 20px;
}
.text_block .list .column{
  overflow: hidden;
  margin-bottom: 10px;
}
.text_block .list .column time{
  float: left;
  width: 100px;
  font-size: 15px;
  line-height: 26px;
  font-family: 'Lato', sans-serif;
}
.text_block .list .column .entry{
  float: left;
  width : -webkit-calc(100% - 100px) ;
  width : calc(100% - 100px) ;
  font-size: 15px;
  line-height: 26px;
}
.text_block .list .column a time,
.text_block .list .column a .entry{
  color: #000;
}
.text_block .list .column a .entry{
  text-decoration: underline;
}
.text_block .list .column a:hover .entry{
  text-decoration: none;
}
@media only screen and (max-width: 768px) {
  .bottom_contents{
    position: relative;
    z-index: 1;
    top: auto;
    left: 0px;
    width: 100%;
  }
  .text_block{
    position: relative;
    z-index: 1;
    top: 100%;
    left: 0px;
    width: 100%;
    min-height: 10px;
    padding-bottom: 20px;
  }
  #store.text_block{
    background: url(../img/store/bg.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: scroll;
  }
  #spec.text_block{
    background: url(../img/store/bg.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: scroll;
  }
  #support.text_block{
    color: #FFF;
    background:#000 url(../img/support/bg.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: scroll;
  }
  .text_block .title{
    padding-top: 20px;
    padding-left: 15px;
    margin-bottom: 20px;
    color: #FFF;
  }
  .text_block .title .t{
    font-size: 30px;
    top: 5px;
  }
  .text_block .title .t .ja{
    font-size: 10px;
    margin-left: 10px;
    top: -4px;
  }
  .store_area {
    padding-bottom:0px;
  }
  .text_block .border_block{
    width: 90%;
    margin:0 auto;
    margin-bottom: 20px;
  }
  .text_block .store_t{
    font-size: 16px;
    padding-top: 20px;
    margin-bottom: 0px;
  }
  .text_block .price{
    font-size: 24px;
    margin-bottom: 20px;
  }
  .text_block .btn{
    padding-bottom: 20px;
  }
  .text_block .btn a{
    width: 90%;
    line-height: 50px;
    font-size: 20px;
    border-radius: 50px;
    -webkit-border-radius: 50px;  
    -moz-border-radius: 50px;
  }
  .text_block .btn a:hover{
    opacity: 0.5;
  }
  .text_block .package{
    position: relative;
    bottom: auto;
    left: auto;
    width: 120px;
    margin:0 auto;
    margin-bottom: 20px;
  }
  .text_block .spec_block{
    width: 90%;
    padding-bottom: 40px;
    padding-top: 20px;
  }
  .text_block .spec_block figure{
    width: 100%;
    display: block;
    margin:0 auto;
    margin-bottom: 20px;
  }
  .text_block .spec_block figure img{
    display: block;
    width: 90%;
    margin:0 auto;
  }
  .text_block .spec_block figure span{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
  }
  .text_block .spec_block .textarea{
    width: 95%;
    margin:0 auto;
    display: block;
    text-align: left;
    font-size: 12px;
    line-height: 21px;
  }
  
  /*support*/
  .text_block .support{
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 0px;
    padding-top: 20px;
  }
  .text_block .support_btn {
    padding-bottom: 20px;
  }
  .text_block .support_btn .s_column {
    margin-bottom: 10px;
  }
  .text_block .support_btn .s_column p {
    font-size: 10px;
    margin-bottom: 10px;
  }
  .text_block .support dl{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .text_block .support dl dt{
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
  }
  .text_block .support dl dt img{
    vertical-align: 4px;
  }
  .text_block .support dl dd{
    padding-left: 45px;
    font-size: 14px;
    line-height: 29px;
  }
  .text_block .support dl dd a.form{
    width: 70vw;
    font-size: 13px;
    line-height: 35px;
  }
  .text_block .support dl dd a.form:hover{
  }
  /*list*/
  .text_block .list{
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 40px;
    padding-top: 20px;
  }
  .text_block .list .column{
    margin-bottom: 10px;
  }
  .text_block .list .column time{
    width: 80px;
    font-size: 12px;
    line-height: 26px;
  }
  .text_block .list .column .entry{
    width : -webkit-calc(100% - 80px) ;
    width : calc(100% - 80px) ;
    font-size: 12px;
    line-height: 2;
  }
  .text_block .list .column a time,
  .text_block .list .column a .entry{
  }
  .text_block .list .column a .entry{
  }
  .text_block .list .column a:hover .entry{
  }
}
/*----------------------------------------------------
  footer
--------------------------------------------------- */
.footer{
  position: relative;
  z-index: 1;
  padding: 40px;
  background: #000;
  color: #FFF;
}
.footer ul.menu{
  margin-bottom: 20px;
}
.footer ul.menu li{
  line-height: 1.5;
}
.footer ul.menu li a{
  color: #FFF;
  font-size: 14px;
}
.footer ul.menu li a:hover{
  opacity: 0.5;
}
.footer .f_credit{
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  margin-bottom: 20px;
}
.footer .f_credit a{
  color: #FFF;
  font-weight: bold;
}
.footer .w{
  position: absolute;
  bottom: 100px;
  right: 40px;
  width: 160px;
}
.footer ul.link{
  position: absolute;
  bottom: 40px;
  right: 40px;
  overflow: hidden;
}
.footer ul.link li{
  float: left;
  margin-left: 30px;
}
.footer ul.link li a{
}
.footer ul.link li a img{
  height: 25px;
  width: auto;
}
.footer ul.link li:nth-child(1) a img{
  height: 15px;
}
.footer ul.link li:nth-child(2) a img{
  height: 25px;
}
.footer .copyright{
  font-family: 'Lato', sans-serif;
  font-size: 10px;
}
@media only screen and (max-width: 768px) {
  .footer{
    position: relative;
    z-index: 1;
    padding: 40px 0;
    background: #000;
    text-align: center;
  }
  .footer ul.menu{
    float: none;
  }
  .footer ul.menu li{
    float: none;
    display: inline-block;
    margin:0 10px
  }
  .footer ul.menu li a{
    font-size: 14px;
  }

  .footer .f_credit{
    font-size: 10px;
    margin-bottom: 20px;
  }
  .footer .f_credit a{
    color: #FFF;
  }
  .footer ul.link{
    position: relative;
    bottom: auto;
    right: auto;
    overflow: hidden;
  }
  .footer ul.link{
    float: none;
    margin-bottom: 20px;
  }
  .footer ul.link li{
    float: none;
    display: inline-block;
    margin:0 8px;
    margin-bottom: 10px;
  }
  .footer ul.link li a{
  }
  .footer ul.link li a img{
    height: 30px;
    width: auto;
  }
  .footer ul.link li:nth-child(1) a img{
    height: 20px;
  }
  .footer ul.link li:nth-child(2) a img{
    height: 20px;
  }
  .footer .copyright{
    font-size: 10px;
  }
  
  .footer .w{
    position: relative;
    bottom: auto;
    right: auto;
    width: 120px;
    margin:0 auto;
    margin-bottom: 20px;
    padding-top: 20px;
  }
}


/*----------------------------------------------------
 block_pager
--------------------------------------------------- */
.block_pager{
  position: relative;
  text-align: center;
  padding-bottom: 80px;
}
.block_pager .inner{
  position: relative;
  overflow: hidden;
}
.block_pager .inner .prev{
  display: inline-block;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  border:1px #ccc solid;
  background:#ccc url(../img/common/arrow_right04.svg) no-repeat center center;
  background-size: 7px auto;
  -webkit-transform: scale3d(1,1,1) translate(0px,0px) rotate(180deg);
     -moz-transform: scale3d(1,1,1) translate(0px,0px) rotate(180deg);
          transform: scale3d(1,1,1) translate(0px,0px) rotate(180deg);
  z-index: 1;
  position: relative;
}
.block_pager .inner .next{
  display: inline-block;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  border:1px #ccc solid;
  background:#ccc url(../img/common/arrow_right04.svg) no-repeat center center;
  background-size: 7px auto;
  z-index: 1;
  position: relative;
}
.block_pager .inner ul.num{
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.block_pager .inner ul.num li{
  display: inline-block;
  margin:0 2px;
  width: 25px;
  height: 25px;
  font-size: 14px;
  line-height: 25px;
  vertical-align: top;
}
.block_pager .inner ul.num li a{
  display: block;
  font-size: 14px;
  line-height: 25px;
  border:1px #ccc solid;
  -webkit-transition: all 0.5s 0s ease;
     -moz-transition: all 0.5s 0s ease;
          transition: all 0.5s 0s ease;
          border:1px #ccc solid;
          color: #FFF;
          background:#ccc;
}
.block_pager .inner ul.num li a:hover{
  color: #ccc;
  background:#fffceb;
}
.block_pager .inner ul.num li a.active{
  color: #FFF;
  border:1px #000 solid;
  background:#000;
}
.block_pager .inner .page-numbers.current{
  color: #FFF;
  border:1px #000 solid;
  background:#000;
}
.block_pager .inner .page-numbers{
  display: inline-block;
  margin:0 2px;
  width: 25px;
  height: 25px;
  font-size: 14px;
  line-height: 25px;
  vertical-align: middle;
}
.block_pager .inner .page-numbers.next{
  display: inline-block;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  border:1px #ccc solid;
  background:#ccc url(../img/common/arrow_right04.svg) no-repeat center center;
  background-size: 7px auto;
  z-index: 1;
  position: relative;
}
.block_pager .inner .page-numbers.prev{
  display: inline-block;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  border:1px #ccc solid;
  background:#ccc url(../img/common/arrow_right04.svg) no-repeat center center;
  background-size: 7px auto;
  -webkit-transform: scale3d(1,1,1) translate(0px,0px) rotate(180deg);
     -moz-transform: scale3d(1,1,1) translate(0px,0px) rotate(180deg);
          transform: scale3d(1,1,1) translate(0px,0px) rotate(180deg);
  z-index: 1;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .block_pager{
    padding-bottom: 40px;
  }
  .block_pager .inner{
    width: auto;
    max-width: auto;
    margin: 0 5.3333vw;
  }
  .block_pager .inner .prev{
  }
  .block_pager .inner .next{
  }
  .block_pager .inner ul.num{
  }
  .block_pager .inner ul.num li{
  }
  .block_pager .inner ul.num li a{
  }
  .block_pager .inner ul.num li a:hover,
  .block_pager .inner ul.num li a.active{
  }
  .block_pager .inner .page-numbers{
  }
  .block_pager .inner .page-numbers.current{
  }
}


/*----------------------------------------------------
 NEWS
--------------------------------------------------- */
/*list*/
.text_block .detail{
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 60px;
  padding-top: 20px;
}
.text_block .detail .wrap{
  overflow: hidden;
}
.text_block .detail .wrap .menu{
  float: left;
  width: 150px;
  padding-top: 10px;
}
.text_block .detail .wrap .menu li a{
  color: #000;
  text-decoration: underline;
  font-size: 14px;
}
.text_block .detail .wrap .list{
  float: right;
  width: 800px;
}
#page.text_block .detail .wrap .list{
  float: none;
  width: 800px;
  margin:0 auto;
}
.text_block .detail .column{
  overflow: hidden;
  margin-bottom: 10px;
}
.text_block .detail .column time{
  float: left;
  width: 100px;
  font-size: 15px;
  line-height: 26px;
  font-family: 'Lato', sans-serif;
}
.text_block .detail .column .entry{
  float: left;
  width : -webkit-calc(100% - 100px) ;
  width : calc(100% - 100px) ;
  font-size: 15px;
  line-height: 26px;
}
#manual.text_block .detail .column .entry{
  float: left;
  width : -webkit-calc(100% - 0px) ;
  width : calc(100% - 0px) ;
}
.text_block .detail .column a time,
.text_block .detail .column a .entry{
  color: #000;
}
.text_block .detail .column a .entry{
  text-decoration: underline;
}
.text_block .detail .column a:hover .entry{
  text-decoration: none;
}
.text_block .detail .column .column_title{
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 40px;
}
.text_block .detail .column .entry_area{
  font-size: 15px;
  line-height: 26px;
  margin-bottom: 40px;
}
.text_block .detail .column .entry_area p{
  font-size: 14px;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.text_block .detail .column .entry_area p a{
  text-decoration: underline;
  color: #1b76f4;
}
.text_block .detail .column .entry_area p a:hover{
  text-decoration: none;
}
.text_block .detail .column .entry_area img{
  width: auto;
  max-width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.text_block .detail .column .entry_area figure{
  width: 50%;
  margin-bottom: 30px;
}
.text_block .detail .column .entry_area figure img{
  display: block;
  max-width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.text_block .detail .column .entry_area iframe,
.text_block .detail .column .entry_area .embed-container{
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 20px;
}
.text_block .detail .column .entry_area figure figcaption{
  padding: 0 70px;
  font-size: 14px;
}
/* .text_block .detail .column .entry_area .sub_title{
  font-size: 20px;
  letter-spacing: 0.1em;
  padding-bottom: 4px;
  border-bottom: 2px #364EA2 solid;
  margin-bottom: 20px;
  margin-top: 40px;
  font-weight: bold;
} */
.text_block .detail .column .entry_area .sub_title{
  margin-bottom: 20px;
  margin-top: 20px;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: #000;
}
.text_block .detail .column .entry_area hr{
  border-top: 1px #000 solid;
  margin-top: 40px;
  margin-left: -40px;
  width : -webkit-calc(100% + 80px) ;
  width : calc(100% + 80px) ;
  margin-bottom: 40px;
}
.text_block .detail .column .entry_area .sub_title02{
  font-size: 20px;
  letter-spacing: 0.1em;
  padding-bottom: 4px;
  margin-bottom: 20px;
  margin-top: 40px;
  font-weight: bold;
}
.text_block .detail .column .entry_area .sub_title03{
  margin-top: 20px;
  font-size: 16px;
  border-bottom: 1px #000 solid;
  letter-spacing: 0.1em;
  padding-bottom: 5px;
  margin-bottom: 5px;
  font-weight: bold;
}
.text_block .detail .column .entry_area .sub_title04{
  margin-bottom: 20px;
  margin-top: 40px;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  background: #364EA2;
  color: #FFF;
  padding: 10px 15px;
  position: relative;
}
.text_block .detail .column .entry_area .sub_title04:after{
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}
.text_block .detail .column .entry_area blockquote{
  margin-bottom: 40px;
  position: relative;
  padding: 50px 30px 30px 30px;
  box-sizing: border-box;
  font-style: italic;
  background: #eee;
  color: #555;
}
.text_block .detail .column .entry_area blockquote:before{
  display: inline-block;
  position: absolute;
  top: 13px;
  left: 15px;
  content: "\f10d";
  font-family: FontAwesome;
  color: #cfcfcf;
  font-size: 28px;
  line-height: 1;
}
.text_block .detail .column .entry_area .movie_area{
  position: relative;
  padding-top: 56.25%;
  margin-bottom: 20px;
  margin-top: 40px;
}
.text_block .detail .column .entry_area .movie_area iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
}
.text_block .detail .column .entry_area .box{
  position: relative;
  border:1px #555 solid;
  padding:20px 40px;
  margin-bottom: 20px;
  margin-top: 40px;
}
.text_block .detail .column .entry_area .table_block{
  display: flex;
  margin-bottom: 30px;
  display: flex;
  /*direction 子要素の並ぶ向き
  row（初期値）… 子要素を左から右に配置
  row-reverse … 子要素を右から左に配置
  column … 子要素を上から下に配置
  column-reverse … 子要素を下から上に配置
  */
      flex-direction: row;
  /*justify-content 水平方向の揃え
  flex-start（初期値）… 行の開始位置から配置。左揃え。
  flex-end … 行末から配置。右揃え。
  center … 中央揃え
  space-between … 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
  space-around … 両端の子要素も含め、均等に間隔をあけて配置
  */
      justify-content: space-between;
      
  /*align-items 垂直方向の揃え
  stretch（初期値）… 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
  flex-start … 親要素の開始位置から配置。上揃え。
  flex-end … 親要素の終点から配置。下揃え。
  center … 中央揃え
  baseline … ベースラインで揃える
  */
      align-items: flex-start ;
}
.text_block .detail .column .entry_area .table_block figure{
  flex: 1 1 28%;
  align-self: auto;
  margin-bottom: 0px;
}
.text_block .detail .column .entry_area .table_block figure img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  margin-top: 0px;
  margin-bottom: 0px;
}
.text_block .detail .column .entry_area .table_block .pd{
  flex: 1 1 4%;
}
.text_block .detail .column .entry_area .table_block .textarea{
  flex: 1 1 68%;
  align-self: auto;
}
.text_block .detail .column .entry_area .table_block .textarea p{
  font-size: 14px;
  margin-bottom: 14px;
}

.text_block .detail .column .entry_area ul.e_list{
  padding:0 20px;
  margin-bottom: 14px;
}
.text_block .detail .column .entry_area ul.e_list li{
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  padding-left: 20px;
  position: relative;
}
.text_block .detail .column .entry_area ul.e_list li:before{
  content: "●";
  position: absolute;
  top: 0;
  left: 0;
  color: #364EA2;
}

.text_block .detail .column .entry_area .btn{
  margin-bottom: 20px;
  margin-top: 40px;
  text-align: center;
}
.text_block .detail .column .entry_area .btn a{
  display: inline-block;
  border: 1px #f0b924 solid;
  background: #f0b924;
  color: #FFF;
  line-height: 60px;
  padding: 0 40px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 60px;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-transition: all 0.4s 0.0s ease;
  -moz-transition: all 0.4s 0.0s ease;
  transition: all 0.4s 0.0s ease;
}
.text_block .detail .column .entry_area .btn a:hover{
  border: 1px #f0b924 solid;
  background: #FFF;
  color: #f0b924;
}
.text_block .detail .column .entry_area .btn a:after {
  content: '\f054';
  font-family: fontAwesome;
  display: inline-block;
  vertical-align: -1px;
  margin-left:8px;
  font-weight: normal;
}
/*定義リスト*/
.text_block .detail .column .entry_area dl.table_list{
  display:flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  border-top: none;
  margin-bottom: 20px;
  margin-top: 20px;
}
.text_block .detail .column .entry_area dl.table_list dt{
  background: #f8f8f8;
  width: 30%;
  padding: 10px;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  font-size: 14px;
  letter-spacing: 0.05em;
  font-weight: bold;
}
.text_block .detail .column .entry_area dl.table_list dd{
  padding: 10px;
  margin: 0;
  border-top: 1px solid #ccc; 
  width: 70%;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  letter-spacing: 0.05em;
}

/*gallery*/
.text_block .detail .column .entry_area ul.gallery{
  margin-bottom: 20px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
}
.text_block .detail .column .entry_area ul.gallery li{
  width: 33%;
  list-style: none;
  background: #FFF;
  border: 5px solid white;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text_block .detail .column .entry_area ul.gallery li img{
  width: 100%;
  margin: 0;
  -webkit-transition: all 0.4s 0.0s ease;
     -moz-transition: all 0.4s 0.0s ease;
          transition: all 0.4s 0.0s ease;
}
.text_block .detail .column .entry_area ul.gallery li a:hover img{
  opacity: 0.5;
}


.text_block .detail .share{
  margin-top: 45px;
  margin-bottom: 30px;
}
.text_block .detail .share .share_title{
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
  font-size: 16px;
  letter-spacing: 0.1em;
  font-weight: bold;
}
.text_block .detail .share ul{
  display: inline-block;
  vertical-align: middle;
}
.text_block .detail .share ul li{
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
}
.text_block .detail .share ul li a{
  -webkit-transition: all 0.4s 0.0s ease;
     -moz-transition: all 0.4s 0.0s ease;
          transition: all 0.4s 0.0s ease;
}
.text_block .detail .share ul li a:hover{
  opacity: 0.5;
}
.text_block .detail .share ul li:nth-child(1) a{
  color: #1da1f2;
  font-size: 25px;
}
.text_block .detail .share ul li:nth-child(2) a{
  color: #1877f2;
  font-size: 25px;
}
.text_block .detail .share ul li:nth-child(3){
  vertical-align: -7px;
}
.text_block .detail .share ul li a.line{
  background: url(../img/common/line.svg) no-repeat center center;
  background-size:cover;
  width: 25px;
  height: 25px;
  display: block;
}

#page_header{

}
#page_header .logo_p{
  padding: 40px 0 0 40px;
  width: 200px;
}
body.page .text_block .title{
  padding-top: 20px;
  padding-left: 40px;
}

.page_navigation{
  padding-top: 20px;
  overflow: hidden;
}
.page_navigation .prev{
  float: left;
}
.page_navigation .next{
  float: right;
}
.page_navigation a{
  color: #000;
  font-size: 14px;
  text-decoration: underline;
}


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

  /*list*/
  .text_block .detail{
    width: auto;
    margin:0 20px;
    padding-bottom: 40px;
    padding-top: 0px;
  }
  .text_block .detail .wrap{
  }
  .text_block .detail .wrap .menu{
    border-top: 1px #000 solid;
    float: none;
    width: 100%;
    padding-top: 10px;
  }
  .text_block .detail .wrap .menu li a{
    color: #000;
    text-decoration: underline;
    font-size: 14px;
  }
  .text_block .detail .wrap .list{
    float: none;
    width: 100%;
  }
  #page.text_block .detail .wrap .list{
    float: none;
    width: 100%;
  }
  .text_block .detail .column{
    overflow: hidden;
    margin-bottom: 10px;
  }
  .text_block .detail .column .entry{
    float: left;
    width : -webkit-calc(100% - 100px) ;
    width : calc(100% - 100px) ;
    font-size: 15px;
    line-height: 26px;
  }
  #manual.text_block .detail .column .entry{
    float: left;
    width : -webkit-calc(100% - 0px) ;
    width : calc(100% - 0px) ;
  }
  #page.text_block .detail .column .entry {
    float: left;
    width : -webkit-calc(100% - 0px) ;
    width : calc(100% - 0px) ;
  }
  .text_block .detail .column a time,
  .text_block .detail .column a .entry{
    color: #000;
  }
  .text_block .detail .column a .entry{
    text-decoration: underline;
  }
  .text_block .detail .column a:hover .entry{
    text-decoration: none;
  }
  .text_block .detail .column .column_title{
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .text_block .detail .column .entry_area{
    font-size: 15px;
    line-height: 26px;
    margin-bottom: 20px;
  }
  .text_block .detail .column .entry_area p{
    font-size: 14px;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
  }
  .text_block .detail .column .entry_area p a{
    text-decoration: underline;
    color: #1b76f4;
  }
  .text_block .detail .column .entry_area p a:hover{
    text-decoration: none;
  }
  .text_block .detail .column .entry_area img{
    width: auto;
    max-width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .text_block .detail .column .entry_area figure{
    width: 80%;
    margin-bottom: 30px;
  }
  .text_block .detail .column .entry_area figure img{
    display: block;
    max-width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .text_block .detail .column .entry_area iframe,
  .text_block .detail .column .entry_area .embed-container{
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .text_block .detail .column .entry_area figure figcaption{
    padding: 0 70px;
    font-size: 14px;
  }
  /* .text_block .detail .column .entry_area .sub_title{
    font-size: 20px;
    letter-spacing: 0.1em;
    padding-bottom: 4px;
    border-bottom: 2px #364EA2 solid;
    margin-bottom: 20px;
    margin-top: 40px;
    font-weight: bold;
  } */
  .text_block .detail .column .entry_area .sub_title{
    margin-bottom: 20px;
    margin-top: 20px;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.1em;
    color: #000;
  }
  .text_block .detail .column .entry_area hr{
    border-top: 1px #000 solid;
    margin-top: 40px;
    margin-left: -40px;
    width : -webkit-calc(100% + 80px) ;
    width : calc(100% + 80px) ;
    margin-bottom: 40px;
  }
  .text_block .detail .column .entry_area .sub_title02{
    font-size: 20px;
    letter-spacing: 0.1em;
    padding-bottom: 4px;
    margin-bottom: 20px;
    margin-top: 40px;
    font-weight: bold;
  }
  .text_block .detail .column .entry_area .sub_title03{
    margin-top: 20px;
    font-size: 16px;
    border-bottom: 1px #000 solid;
    letter-spacing: 0.1em;
    padding-bottom: 5px;
    margin-bottom: 5px;
    font-weight: bold;
  }
  .text_block .detail .column .entry_area .sub_title04{
    margin-bottom: 20px;
    margin-top: 40px;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    background: #364EA2;
    color: #FFF;
    padding: 10px 15px;
    position: relative;
  }
  .text_block .detail .column .entry_area .sub_title04:after{
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px rgb(149, 158, 155);
  }
  .text_block .detail .column .entry_area blockquote{
    margin-bottom: 40px;
    position: relative;
    padding: 50px 30px 30px 30px;
    box-sizing: border-box;
    font-style: italic;
    background: #eee;
    color: #555;
  }
  .text_block .detail .column .entry_area blockquote:before{
    display: inline-block;
    position: absolute;
    top: 13px;
    left: 15px;
    content: "\f10d";
    font-family: FontAwesome;
    color: #cfcfcf;
    font-size: 28px;
    line-height: 1;
  }
  .text_block .detail .column .entry_area .movie_area{
    position: relative;
    padding-top: 56.25%;
    margin-bottom: 20px;
    margin-top: 40px;
  }
  .text_block .detail .column .entry_area .movie_area iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .text_block .detail .column .entry_area .box{
    position: relative;
    border:1px #555 solid;
    padding:20px 40px;
    margin-bottom: 20px;
    margin-top: 40px;
  }
  .text_block .detail .column .entry_area .table_block{
    display: flex;
    margin-bottom: 30px;
    display: flex;
    /*direction 子要素の並ぶ向き
    row（初期値）… 子要素を左から右に配置
    row-reverse … 子要素を右から左に配置
    column … 子要素を上から下に配置
    column-reverse … 子要素を下から上に配置
    */
        flex-direction: row;
    /*justify-content 水平方向の揃え
    flex-start（初期値）… 行の開始位置から配置。左揃え。
    flex-end … 行末から配置。右揃え。
    center … 中央揃え
    space-between … 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
    space-around … 両端の子要素も含め、均等に間隔をあけて配置
    */
        justify-content: space-between;
        
    /*align-items 垂直方向の揃え
    stretch（初期値）… 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
    flex-start … 親要素の開始位置から配置。上揃え。
    flex-end … 親要素の終点から配置。下揃え。
    center … 中央揃え
    baseline … ベースラインで揃える
    */
        align-items: flex-start ;
  }
  .text_block .detail .column .entry_area .table_block figure{
    flex: 1 1 28%;
    align-self: auto;
    margin-bottom: 0px;
  }
  .text_block .detail .column .entry_area .table_block figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .text_block .detail .column .entry_area .table_block .pd{
    flex: 1 1 4%;
  }
  .text_block .detail .column .entry_area .table_block .textarea{
    flex: 1 1 68%;
    align-self: auto;
  }
  .text_block .detail .column .entry_area .table_block .textarea p{
    font-size: 14px;
    margin-bottom: 14px;
  }

  .text_block .detail .column .entry_area ul.e_list{
    padding:0 20px;
    margin-bottom: 14px;
  }
  .text_block .detail .column .entry_area ul.e_list li{
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    padding-left: 20px;
    position: relative;
  }
  .text_block .detail .column .entry_area ul.e_list li:before{
    content: "●";
    position: absolute;
    top: 0;
    left: 0;
    color: #364EA2;
  }

  .text_block .detail .column .entry_area .btn{
    margin-bottom: 20px;
    margin-top: 40px;
    text-align: center;
  }
  .text_block .detail .column .entry_area .btn a{
    display: inline-block;
    border: 1px #f0b924 solid;
    background: #f0b924;
    color: #FFF;
    line-height: 60px;
    padding: 0 40px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -webkit-transition: all 0.4s 0.0s ease;
    -moz-transition: all 0.4s 0.0s ease;
    transition: all 0.4s 0.0s ease;
  }
  .text_block .detail .column .entry_area .btn a:hover{
    border: 1px #f0b924 solid;
    background: #FFF;
    color: #f0b924;
  }
  .text_block .detail .column .entry_area .btn a:after {
    content: '\f054';
    font-family: fontAwesome;
    display: inline-block;
    vertical-align: -1px;
    margin-left:8px;
    font-weight: normal;
  }
  /*定義リスト*/
  .text_block .detail .column .entry_area dl.table_list{
    display:flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
    border-top: none;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .text_block .detail .column .entry_area dl.table_list dt{
    background: #f8f8f8;
    width: 30%;
    padding: 10px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    font-size: 14px;
    letter-spacing: 0.05em;
    font-weight: bold;
  }
  .text_block .detail .column .entry_area dl.table_list dd{
    padding: 10px;
    margin: 0;
    border-top: 1px solid #ccc; 
    width: 70%;
    background: #fff;
    box-sizing: border-box;
    font-size: 14px;
    letter-spacing: 0.05em;
  }

  /*gallery*/
  .text_block .detail .column .entry_area ul.gallery{
    margin-bottom: 20px;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
  }
  .text_block .detail .column .entry_area ul.gallery li{
    width: 33%;
    list-style: none;
    background: #FFF;
    border: 5px solid white;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .text_block .detail .column .entry_area ul.gallery li img{
    width: 100%;
    margin: 0;
    -webkit-transition: all 0.4s 0.0s ease;
      -moz-transition: all 0.4s 0.0s ease;
            transition: all 0.4s 0.0s ease;
  }
  .text_block .detail .column .entry_area ul.gallery li a:hover img{
    opacity: 0.5;
  }


  .text_block .detail .share{
    margin-top: 45px;
    margin-bottom: 30px;
  }
  .text_block .detail .share .share_title{
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
    font-size: 16px;
    letter-spacing: 0.1em;
    font-weight: bold;
  }
  .text_block .detail .share ul{
    display: inline-block;
    vertical-align: middle;
  }
  .text_block .detail .share ul li{
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;
  }
  .text_block .detail .share ul li a{
    -webkit-transition: all 0.4s 0.0s ease;
      -moz-transition: all 0.4s 0.0s ease;
            transition: all 0.4s 0.0s ease;
  }
  .text_block .detail .share ul li a:hover{
    opacity: 0.5;
  }
  .text_block .detail .share ul li:nth-child(1) a{
    color: #1da1f2;
    font-size: 25px;
  }
  .text_block .detail .share ul li:nth-child(2) a{
    color: #1877f2;
    font-size: 25px;
  }
  .text_block .detail .share ul li:nth-child(3){
    vertical-align: -7px;
  }
  .text_block .detail .share ul li a.line{
    background: url(../img/common/line.svg) no-repeat center center;
    background-size:cover;
    width: 25px;
    height: 25px;
    display: block;
  }

  #page_header{
    overflow: hidden;
  }
  #page_header .logo_p{
    padding: 20px 0 0 20px;
    width: 100px;
  }
  body.page .text_block .title{
    padding-top: 10px;
    padding-left: 20px;
  }
  .page_navigation{
    padding-top: 20px;
    overflow: hidden;
  }
  .page_navigation .prev{
    float: left;
  }
  .page_navigation .next{
    float: right;
  }
  .page_navigation a{
    color: #000;
    text-decoration: underline;
  }

}


/*----------------------------------------------------
  .block_contact
--------------------------------------------------- */

.block_contact{
  position: relative;
  z-index: 1;
  top: 100%;
  left: 0px;
  width: 100%;
  background: #FFF;
  color: #000;
  padding-bottom: 40px;
}
.block_contact .title{
  background: #000;
  padding-top: 20px;
  padding-left: 40px;
  line-height: 1;
  margin-bottom: 40px;
  color: #FFF;
}
.block_contact .title .t{
  color: #FFF;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -.002em;
  position: relative;
  top: 5px;
  font-family: 'Lato', sans-serif;
}
.block_contact .title.ja .t{
  top: -1px;
  font-family: 'YakuHanJP','Noto Sans JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.block_contact .title .t .ja{
  font-size: 16px;
  margin-left: 20px;
  font-weight: normal;
  position: relative;
  top: -4px;
  font-family: 'YakuHanJP','Noto Sans JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.block_contact .detail {
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 60px;
  padding-top: 20px;
}
.block_contact .exp{
  font-size: 14px;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.custom-wpcf7c-confirmed .exp{
display: none;
}

.block_contact .column{
  margin-bottom: 30px;
}
.block_contact .column:last-child{
  margin-bottom: 0;
}
.block_contact .column .form_title{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  letter-spacing: 0.1em;
}
.block_contact .column .form_title span.must{
  color: #ea5516;
}
.block_contact .column .column_form{
}

.block_contact .column .column_form  input[type="text"],
.block_contact .column .column_form input[type="email"],
.block_contact .column .column_form input[type="tel"],
.block_contact .column .column_form textarea{
  border: none;
  background: #eee;
  font-size: 16px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding: 10px 15px;
  width : -webkit-calc(60% - 32px) ;
  width : calc(60% - 32px) ;
  font-size: 12px;
}
.block_contact .column .column_form input[type="text"].wpcf7c-conf,
.block_contact .column .column_form input[type="email"].wpcf7c-conf,
.block_contact .column .column_form input[type="tel"].wpcf7c-conf,
.block_contact .column .column_form textarea.wpcf7c-conf,
.block_contact .column .column_form select.wpcf7c-conf{
  border: 1px #eee solid;
  background: #eee !important;

}
.block_contact .column .column_form input:-internal-autofill-selected{
  background: #FFF !important;
}

.block_contact .column .column_form select{
  background: #eee;
  -webkit-border-radius: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding: 10px 60px 10px 20px;
  border: none;
  font-size: 14px;
  position: relative;
}
.block_contact .column .column_form .select_box{
  position: relative;
  display: inline-block;
}
.block_contact .column .column_form .h_t{
  display: inline-block;
  font-size: 14px;
  margin-left: 5px;
}
.block_contact .column .column_form .red{
  padding-top: 10px;
  color: #3272ae;
  font-weight: bold;
  font-size: 12px;
  line-height: 24px;
}
.custom-wpcf7c-confirmed .check_area_space{
  display: none;
}
.conf_message{
  display: none;
  font-size: 16px;
  line-height: 28px;
  margin-bottom: 20px;
}
.custom-wpcf7c-confirmed .conf_message{
  display: block;
}

.block_contact .column input[type="button"],
.block_contact .column input[type="submit"]{
  font-family: fot-tsukuardgothic-std, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
display: inline-block;
margin: 0 10px;
margin-top: 10px;
width: 320px;
height: 50px;
background:#000;
border:1px #000 solid;
color: #FFF;
text-align: center;
line-height: 45px;
letter-spacing: 0.1em;
font-size: 16px;
cursor: pointer;
-webkit-transition: all 0.5s 0s ease;
   -moz-transition: all 0.5s 0s ease;
        transition: all 0.5s 0s ease;
        -webkit-border-radius: 0;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        border-radius: 50px;
        -webkit-border-radius: 50px;  
        -moz-border-radius: 50px;
}
.block_contact .column input[type="button"]:hover,
.block_contact .column input[type="submit"]:hover{
background:#FFF;
color: #000;
}

.wpcf7-response-output{
display: none !important;
}
.sent{
  visibility: hidden;
  opacity: 0;
}
span.wpcf7-not-valid-tip{
  color: #ea5516;
  font-size: 12px !important;
  font-weight: bold;
  margin-top: 10px;
}
.block_contact .attention{
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.1em;
  border-top: 2px #fbf8f2 solid;
  padding-top: 30px;
  margin-top: 30px;
}
.block_contact .attention.s{
  font-size: 12px;
  line-height: 22px;
}

.block_contact .comp{
  text-align: center;
  font-size:20px;
  margin-bottom: 26px;
}
.block_contact  .comp_t{
  text-align: center;
  font-size: 14px;
  line-height: 30px;
  margin-bottom: 40px;
}
.block_contact .btn a{
  margin:0 auto;
  display: block;
  width: 400px;
  height: 50px;
  background: #000;
  text-align: center;
  font-weight: bold;
  border:1px #000 solid;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
-webkit-transition: all 0.4s 0.0s ease;
  -moz-transition: all 0.4s 0.0s ease;
      transition: all 0.4s 0.0s ease;
}
.block_contact .btn a:hover{
  background: #FFF;
  border:1px #000 solid;
}
.block_contact .btn a span{
  display: inline-block;
  line-height: 50px;
  color: #FFF;
  font-size: 16px;
  letter-spacing: 0.1em;
  -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
     -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
          transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
          position: relative;

}
.block_contact .btn a:hover span{
  color: #000;
  -webkit-transform: translate(12px,-0%);
     -moz-transform: translate(12px,-0%);
          transform: translate(12px,-0%);
}
.block_contact .btn a span:after{
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url(../img/common/arrow_right04.svg) no-repeat center center;
  background-size: contain;
  margin-left: 15px;
  -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
     -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
          transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
.block_contact .btn a:hover span:after{
  opacity: 0;
}
div.wpcf7 .screen-reader-response {
  position: relative;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  height: auto;
  width: auto;
  margin: 0;
  padding: 0;
  color: #ea5516;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
div.wpcf7 .screen-reader-response ul{
  display: none;
}

input::placeholder {
  color: #b3b3b3;
}
/* IE */
input:-ms-input-placeholder {
  color: #b3b3b3;
}
/* Edge */
input::-ms-input-placeholder {
  color: #b3b3b3;
}


@media only screen and (max-width: 768px) {
  .block_contact .title {
    padding-top: 10px;
    padding-left: 20px;
  }
  .block_contact .title .t {
    font-size: 30px;
    top: 5px;
  }
  .block_contact .detail {
    width: auto;
    margin: 0 20px;
    padding-bottom: 40px;
    padding-top: 0px;
  }
  .block_contact .column .column_form input[type="text"], .block_contact .column .column_form input[type="email"], .block_contact .column .column_form input[type="tel"], .block_contact .column .column_form textarea {
    width: -webkit-calc(100% - 32px);
    width: calc(100% - 32px);
    font-size: 14px;
  }
}