@charset "UTF-8" ; 
/*

WORKPORT common style sheet

*/
/*///////////////////////////////////////
  Reset
///////////////////////////////////////*/
html, body{
  margin      : 0 ;
  padding     : 0 ;
  line-height : 1.8em;
  font-family : sans-serif ;
}
.FontSize--M{
  font-size   : 10px ;
}
.FontSize--L{
  font-size   : 20px ;
}
ul, li , dl , dd , dt{
  margin      : 0 ;
  padding     : 0 ;
  list-style  : none ;
}
/*///////////////////////////////////////
  Common
///////////////////////////////////////*/
:root{
  --BG : rgba(0,0,0,.2);
  --BG : #fff ;
}
.TTL{
  position      : relative ;
  width         : 100% ;
  padding       : 30px 5px 5px ;
  box-sizing    : border-box ;
  border-radius : 6px ;
  margin        : 0 0 80px 0 ;
  font-size     : 22px ;
  text-align    : center ;
  color         : #fff ;
  background    : #624334 ;
}
.TTL::before{
  content       : "" ;
  position      : absolute ;
  top           : -35px ;
  left          : 0  ;
  right         : 0 ;
  margin        : 0 auto ;
  width         : 70px ;
  height        : 70px ;
  box-sizing    : border-box ;
  border-radius : 50% ;
  background    : #fff ;
  border        : solid 4px #624334 ;
}
.Order__Title::after{background : url(../svg/icon_oder.svg);}
.Service__Title::after{background : url(../svg/icon_service.svg);}
.Sample__Title::after{background : url(../svg/icon_sample.svg);}
.UserVoice__Title::after{background : url(../svg/icon_uservoice.svg);}
.FAQTop__Title::after{background : url(../svg/icon_faq.svg);}
.TTL::after{
  content             : "" ;
  position            : absolute ;
  top                 : -20px ;
  left                : 0 ;
  right               : 0 ;
  margin              : auto ;
  width               : 42px ;
  height              : 42px ;
  background-size     : 100% ;
  background-position : center ;
  background-repeat   : no-repeat ;
}
.TXT--L{
  margin        : 0 ;
  font-size     : 18px ;
  line-height   : 160% ;
}
.TXT{
  margin        : 0 ;
  font-size     : 16px ;
  line-height   : 160% ;
  text-align    : justify ;
}
.TXT--AL{
  font-size : 14px ;
  line-height : 120% ;
  text-align : justify ;
  color :#D01F3C ;
}
.CVBtn{
  position        : relative ;
  margin          : 0 auto ;
  display         : flex ;
  overflow        : hidden ;
  text-decoration : none ;
  width           : 300px ;
  height          : 70px ;
  border-radius   : 6px ;
  box-sizing      : border-box ;
  color           : #fff ;
  background      : linear-gradient(0deg , #006837 5% , #10B900 35% 65%, #006837 95%);
  cursor : pointer ;
}
.CVBtn::before{
  content         : "" ;
  position        : absolute ;
  top             : -30% ;
  left            : -50% ;
  right           : -50% ;
  margin          : 0 auto ;
  width           : 170% ;
  height          : 80% ;
  border-radius   : 50% ;
  background      : rgba(255,255,255,.3);
}
.Content{
  width           : 90% ;
  margin          : 0 auto ;
  padding         : 100px 0 0 ;
}
@media screen and (min-width : 960px){
  .TTL{
    padding     : 0 ;
    font-size   : 24px ;
    height      : 50px ;
    line-height : 50px;
  }
  .TTL::before{
    top         : -15px ;
    left        : -10px  ;
    right       : auto ;
    width       : 80px ;
    height      : 80px ;
    border      : solid 6px #624334 ;
  }
  .TTL::after{
    top         : 0 ;
    left        : 8px ;
    right       : auto ;
    bottom      : 0 ;
    margin      : auto 0 ;
  }
  .TXT--L{
    font-size   : 18px ;
  }
  .Content{
    width       : 100% ;
    padding     : 150px 0 0 ;
  }
}
/*///////////////////////////////////////
  Layout
///////////////////////////////////////*/
.SubColumn{
  width           : 90% ;
  margin          : 0 auto ;
  background      : var(--BG) ;
}
@media screen and (min-width : 960px){
  .Container{
    width      : 100% ;
    background : var(--BG) ;
  }
  .MainColumn{
    width      : 660px ;
    margin     : 0 30px 0 0 ;
    background : var(--BG) ;
  }
  .SubColumn{
    width      : 270px ;
    background : var(--BG) ;
  }
  .Container__Wrapper{
    display    : flex ;
    width      : 960px ;
    margin     : 0 auto ;
  }
}
/*///////////////////////////////////////
  Menu
///////////////////////////////////////*/
#Menu{
  display         : none ;
}
.Menu .Menu__HomeLogo--NonMb{
  display : none ;
}
.Menu{
  width           : 100% ;
  position        : fixed ;
  top             : 0 ;
  left            : 0 ;
  z-index         : 10 ;
  background      : rgba(0,0,100,.2);
}
.Menu .Menu__TopBar{
  display         : flex ;
  align-items     : center ;
  justify-content : space-between ;
  width           : 100% ;
  height          : 60px ;
  margin          : 0 ;
  background      : #624334 ;
  box-shadow      : 0 3px 6px rgba(0,0,0,.4);
}
.Menu .Menu__HomeLogo{
  display         : block ;
  width           : 220px;
  height          : 36px ;
  margin          : 0 0 0 10px ;
}
.Menu .Menu__HomeLogo img{
  width           : 100% ;
}
.Menu .Menu__ContactTel{
  display         : none ;
}
.Menu .Menu__Btn{
  position        : relative ;
  display         : block ;
  width           : 60px ;
  height          : 60px ;
  background      : #211700 ;
}
.Menu .Menu__Btn p{
  position        : absolute ;
  bottom          : 0 ;
  left            : 0 ;
  width           : 100% ;
  height          : 18px ;
  line-height     : 18px ;
  margin          : 0 ;
  padding         : 0 ;
  font-size       : 11px ;
  color           : #fff ;
  text-align      : center ;
}
.Menu .Menu__Btn p::before{
  content : "メニュー" ;
}
.Menu .Menu__Btn span{
  display         : block ;
  position        : absolute ;
  top             : 24px ;
  left            : 0 ;
  right           : 0 ;
  margin          : auto ;
  width           : 26px ;
  height          : 3px ;
  background      : #fff ;
  transition      : .4s ;
}
.Menu .Menu__Btn span::before,
.Menu .Menu__Btn span::after{
  content         : "" ;
  position        : absolute ;
  left            : 0 ;
  right           : 0 ;
  margin          : 0 auto ;
  width           : 26px ;
  height          : 3px ;
  background      : #fff ;
  transition      : .4s ;
}
.Menu .Menu__Btn span::before{
  top             : 10px ;
}
.Menu .Menu__Btn span::after{
  top             : -10px ;
}
#Menu:checked ~ .Menu__TopBar .Menu__Btn p::before{
  content         : "閉じる" ;
}
#Menu:checked ~ .Menu__TopBar .Menu__Btn span{
  background      : transparent ;
  transform       : rotateY(180deg);
}
#Menu:checked ~ .Menu__TopBar .Menu__Btn span::before{
  top             : 0 ;
  transform       : rotate(-45deg);
}
#Menu:checked ~ .Menu__TopBar .Menu__Btn span::after{
  top             : 0 ;
  transform       : rotate(45deg);
}
.Menu .Menu__ListFrame{
  width           : 100% ;
  max-height      : 0 ;
  margin          : 0 auto ;
  padding         : 0 ;
  box-sizing      : border-box ;
  overflow        : hidden ;
  transition      : .5s ;
  background      : #fff;
  box-shadow      : 0 3px 6px rgba(0,0,0,.4);
}
#Menu:checked ~ .Menu__ListFrame{
  padding         : 30px 0 ;
  max-height      : calc(calc(55px * 7) + 65px );
}
.Menu .Menu__Link{
  display         : block ;
  position        : relative ;
  margin          : 5px auto ;
  width           : 90% ;
  height          : 50px ;
  line-height     : 50px ;
  font-size       : 16px ;
  border-radius   : 6px ;
  text-align      : center ;
  text-decoration : none ;
  overflow        : hidden ;
  color           : #fff ;
  background      : #624334;
}
.Menu .Menu__Link::after{
    content         : "" ;
    position        : absolute ;
    top             : -25px ;
    left            : -50% ;
    right           : -50% ;
    margin          : 0 auto ;
    width           : 140% ;
    height          : 50px ;
    border-radius   : 50% ;
    background      : rgba(255,255,255,.2);
  }
@media screen and (min-width : 960px){
  .Menu{
    transition      : .4s ;
  }
  .Menu .Menu__HomeLogo--NonPC{
    display         : none ;
  }
  .Menu .Menu__HomeLogo--NonMb{
    display         : block ;
  }
  .Menu .Menu__TopBar{
    position        : relative ;
    top             : 0 ;
    left            : 0 ;
    justify-content : center ;
    height          : 70px ;
    background      : #fff ;
    box-shadow      : 0 0 0 rgba(0,0,0,0);
    transition      : .5s ;
  }
  .Menu .Menu__ContactTel{
    display         : block ;
    position        : absolute ;
    top             : 0 ;
    right           : 20px ;
    bottom          : 0 ;
    margin          : auto 0 ;
    width           : 270px ;
    height          : 58px ;
  }
  .Menu .Menu__ListFrame{
    position        : relative ;
    top             : 0 ;
    left            : 0 ;
    display         : flex ;
    flex-flow       : row nowrap ;
    justify-content : center ;
    min-height      : 50px ;
    height          : 50px ;
    background      : #624334 ;
    box-shadow      : 0 3px 6px rgba(0,0,0,.4);
    transition      : .5s ;
  }
  .Menu .Menu__Btn{
    display         : none ;
  }
  .Menu .Menu__ListItem{
    width           : calc(960px / 7);
    border-right    : solid 1px #C7B299 ;
    box-sizing      : border-box ;
  }
  .Menu .Menu__ListItem:first-child{
    border-left     : solid 1px #C7B299 ;
  }
  .Menu .Menu__Link{
    position        : relative ;
    width           : 100% ;
    margin          : 0 ;
    color           : #fff ;
    overflow        : hidden ;
    background      : #624334 ;
    transition      : .4s ;
    border-radius   : 0 ;
  }
  .Menu .Menu__Link::before{
    content         : "" ;
    position        : absolute ;
    bottom          : 10px ;
    left            : 0 ;
    right           : 0 ;
    width           : 0% ;
    height          : 2px ;
    margin          : 0 auto ;
    transition      : .2s ;
    background      : #C7B299;
  }
  .Menu .Menu__Link:hover{
    background      : #211700;
  }
  .Menu .Menu__Link:hover::before{
    width           : 70% ;
  }
  /*PC Active Menu*/
  .Menu--UP{
    top       : -70px ;
    transition : .4s ;
  }
}
/*///////////////////////////////////////
  MainVisual
///////////////////////////////////////*/
.MainVisual{
  position    : relative ;
  width       : 100% ;
  height      : 70vh ;
  max-height  : 600px ;
  margin      : 60px 0 0 0 ;
  background  : url(../img/main.jpg) center / cover no-repeat ;
}
.MainVisual::before{
  content : "" ;
  position  : absolute ;
  top : 0 ;
  left : 0 ;
  width : 100% ;
  height : 100% ;
  background : rgba(0,0,0,.3);
}
.MainVisual .MainVisual__Title{
  position    : absolute ;
  top         : 0 ;
  left        : 0 ;
  right       : 0 ;
  bottom      : 0 ;
  margin      : auto ;
  text-align  : center ;
  width       : 80% ;
  max-width   : 500px ;
  height      : 340px ;
  color       : #fff ;
}
.MainVisual .MainVisual__Logo{
  display     : block ;
  width       : 230px ;
  margin      : 0 auto ;
}
.MainVisual .MainVisual__Title span{
  display     : block ;
  font-weight : normal ;
  font-size   : 18px ;
  line-height : 150% ;
  margin      : 16px 0 0 0 ;
  text-align  : center ;
  text-shadow : 3px 3px 6px rgba(0,0,0,.6);
}
.MainVisual__TelBtn{
  display     : block ;
  width       : 90% ;
  max-width   : 300px ;
  margin      : 40px auto ;
}
.MainVisual__TelBtn img{
  width       : 100% ;
}
.MainVisual .CVBtn__Text{
  text-align  : center ;
  padding     : 0 ;
  margin      : auto 10px auto auto  ;
  width       : 220px ;
  height      : 52px ;
  font-size   : 14px ;
  line-height : 160% ;
  background  : orange ;
}
.MainVisual .CVBtn__Text--Navi{
  line-height : 20px ;
  margin      : 0 ;
}
.MainVisual .CVBtn__Text--TelNum{
  font-size   : 26px ;
  line-height : 130% ;
  font-weight : bold ;
}
@media screen and (min-width : 960px){
  .MainVisual{
    margin     : 120px 0 0 0 ;
    height     : 500px ;
    max-height : 500px ;
  }
  .MainVisual .MainVisual__Title span{
    font-size  : 22px ;
  }
  .MainVisual__TelBtn{
    display    : none ;
  }
}
/*///////////////////////////////////////
  ContentsTop
///////////////////////////////////////*/
.ContentsTop{
  width : 100% ;
  max-width : 960px ;
  margin : 60px auto 40px ;
  height : 250px ;
  background : gray ;
}
@media screen and (min-width : 960px){
  .ContentsTop{
    margin : 120px auto 40px ;
  }
}
/*///////////////////////////////////////
  Gallery
///////////////////////////////////////*/
.Gallery{
  width         : 100% ;
  height        : 100px ;
  margin        : 40px 0  ;
}
.Gallery .Gallery__ListItem{
  width         : 100px ;
  height        : 100px ;
  margin        : 0 5px ;
  border-radius : 6px ;
  overflow      : hidden ;
}
.Gallery .Gallery__ListItem a{
  display       : block ;
  width         : 100% ;
  height        : 100% ;
}
.Gallery .Gallery__ListItem img{
  width         : 100% ;
}
@media screen and (min-width : 960px){
  .Gallery{
    position   : relative ;
    height     : 140px ;
    max-width  : 960px ;
    margin     : 40px auto 40px ;
  }
  .Gallery::before,
  .Gallery::after{
    content    : "" ;
    position   : absolute ;
    z-index    : 2 ;
    top        : 0 ;
    width      : 30px ;
    height     : 100% ;
    background : rgba(0,0,0,.3);
  }
  .Gallery::before{
    left       : 0 ;
    background : linear-gradient(-90deg , rgba(255,255,255,.0), #fff );
  }
  .Gallery::after{
    right      : 0 ;
    background : linear-gradient(90deg , rgba(255,255,255,.0), #fff );
  }
  .Gallery .Gallery__ListItem{
    width      : 140px ;
    height     : 140px ;
    margin     : 0 10px ;
  }
}
/*///////////////////////////////////////
  Order
///////////////////////////////////////*/
.Order{
  padding : 0 ;
}
.Order .Order__Wrapper{
  position        : relative ;
  width           : 100% ;
  max-width       : 610px ;
  margin          : 0 auto 40px ;
  padding         : 12px 12px ;
  text-align      : center ;
  box-sizing      : border-box ;
  border-radius   : 6px ;
  background      : #C7B299 ;
}
.Order .Order__Wrapper::before{
  content         : "" ;
  position        : absolute ;
  bottom          : -25px ;
  left            : 0 ;
  right           : 0 ;
  margin          : 0 auto ;
  width           : 0 ;
  height          : 0 ;
  border-top      : solid 25px #C7B299 ;
  border-left     : solid 25px transparent ;
  border-right    : solid 25px transparent ;
  border-bottom   : solid 0 transparent ;
}
.Order .Order__Title{
  text-align      : center ;
  margin          : 0 0 20px 0 ;
}
.Order .Order__Text{
  margin          : 0 ;
  line-height     : 24px ;
}
.Order .Order__ListFrame{
  display         : flex ;
  flex-flow       : row wrap ;
  justify-content : center ;
  width           : 100% ;
  max-width       : 660px ;
  margin          : 0 auto ;
  padding         : 20px 0 ;
  border-radius   : 6px ;
  background      : #FFF2D9 ;
}
.Order .Order__ListItem{
  margin          : 10px 5px ;
  width           : 300px ;
  height          : 80px ;
}
.Order .OrderCategory{
  position        : relative ;
  display         : block ;
  width           : 100% ;
  height          : 100% ;
  border-radius   : 6px ;
  text-decoration : none ;
  overflow        : hidden ;
  background      : #624334 ;
  transition      : .4s ;
  box-shadow      : 0 0 6px rgba(0,0,0,.6);
}
.Order .OrderCategory::before{
  content         : "" ;
  position        : absolute ;
  top             : -20px ;
  left            : -50% ;
  right           : -50% ;
  margin          : 0 auto ;
  width           : 130% ;
  height          : 60px ;
  background      : rgba(255,255,255,.3);
  border-radius   : 50% ;
}
.Order .OrderCategory img{
  width           : 100% ;
  height          : 100%  ;
}
.Order .NonBgColor{
  background      : transparent ;
  box-shadow      : 0 0 6px rgba(0,0,0,0);
}
.Order .NonBgColor::before{
  background      : transparent ;
}
@media screen and (min-width : 960px){
  .Order .Order__Non--PC{
    display         : none ;
  }
  .Order .Order__Wrapper{
    max-width       : 660px ;
    padding         : 20px 40px ;
    text-align      : left ;
  }
  .Order .Order__ListFrame{
    justify-content : space-around ;
  }
  .Order .Order__ListItem{
    margin          : 10px 0 ;
    transition      : .4s ;
  }
  .Order .Order__ListItem:hover .OrderCategory{
    background      : #f09f0b ;
    box-shadow      : 0 0 6px rgba(0,0,0,0);
  }
  .Order .Order__ListItem:hover .NonBgColor{
    background      : transparent ;
  }
}
/*///////////////////////////////////////
  Service
///////////////////////////////////////*/
.Service .Service__Wrapper{
  display             : flex ;
  flex-direction      : column ;
  justify-content     : center ;
  align-items         : center ;
  width               : 100% ;
}
.Service .Service__Image{
  position            : relative ;
  width               : 100% ;
  height              : 180px ;
  max-width           : 360px ;
  border-radius       : 6px ;
  overflow            : hidden ;
}
.Service .Service__Image img{
  height              : 100% ;
  position            : absolute ;
  top                 : 0 ;
  left                : -50% ;
  right               : -50% ;
  bottom              : 0 ;
  margin              : auto ;
}
.Service .Service__SubTitle{
  position            : relative ;
  z-index             : 0 ;
  margin              : 40px 0  ;
  font-size           : 20px ;
  line-height         : 24px ;
  text-align          : center ;
}
.Service .Service__SubTitle::before{
  content             : "" ;
  position            : absolute ;
  z-index             : -1 ;
  top                 : -30px ;
  left                : 0 ;
  right               : 0 ;
  margin              : 0 auto ;
  width               : 60px ;
  height              : 100px ;
  background          : url(../svg/service_title_back.svg) ;
  background-size     : 100% ;
  background-position : center ;
  background-repeat   : no-repeat ;
}
.Service .Service__Text{
  position            : relative ;
  z-index             : 0 ;
}
@media screen and ( min-width : 690px ){
  .Service .Service__Wrapper{
    flex-direction : row ;
  }
  .Service .Service__Image{
    max-width      : 300px ;
    margin         : 0 40px 0 0 ;
  }
}
@media screen and (min-width : 960px){
  .Service__Non--PC{
    display        : none ;
  }
  .Service .Service__SubTitle{
    margin         : 20px 0 ;
    font-size      : 24px ;
    line-height    : 140% ;
  }
  .Service .Service__SubTitle::before{
    width          : 80px ;
    height         : 120px ;
  }
}
/*///////////////////////////////////////
  Details (Service)
///////////////////////////////////////*/
.Details .Details__Wrapper--First{
  margin          : 40px 0 0 0 ;
  padding         : 20px ;
  box-sizing      : border-box ;
  border-radius   : 6px ;
  background      : #C7B299 ;
}
.Details__Box{
  padding         : 20px ;
  margin          : 20px 0 ;
  box-sizing      : border-box ;
  border-radius   : 6px ;
  background      : #C7B299 ;
}
.Details .Details__Title{
  margin          : 0 0 20px 0 ;
  color           : #211700 ;
  text-align      : center ;
}
.Details .Details__Text{
  color           : #211700 ;
}
.Details .Details__Image{
  width           : 100px ;
  height          : 100px ;
  margin          : 0 auto 20px  ;
}
.Details .Details__Image img{
  width           : 100% ;
}
.Details .Details__MoreBtn{
  display         : block ;
  width           : 240px ;
  height          : 40px ;
  line-height     : 40px ;
  margin          : 40px auto 0 ;
  border-radius   : 6px ;
  font-size       : 20px ;
  box-sizing      : border-box ;
  color           : #fff ;
  background      : #10B900 ;
  text-decoration : none ;
  text-align      : center ;
  transition      : .4s ;
  box-shadow      : 0 0 6px rgba(0,0,0,.6);
}
@media screen and (min-width : 960px){
  .Details .Details__Patition{
    display         : flex ;
    flex-flow       : column wrap ;
    height          : 180px ;
  }
  .Details .Details__Wrapper--First .Details__Image{
    width           : 180px ;
    height          : 180px ;
    margin          : 0 40px 0 0 ;
  }
  .Details .Details__Wrapper--First .Details__Title{
    width           : 400px ;
    margin          : 14px 0 ;
    font-size       : 24px ;
  }
  .Details .Details__Wrapper--First .Details__Text{
    width           : 400px ;
  }
  .Details .Details__Wrapper--Second{
    display         : flex ;
    justify-content : space-between ;
  }
  .Details .Details__Box{
    width           : calc(50% - 10px ) ;
    margin          : 40px 0 0 0 ;
  }
  .Details .Details__MoreBtn{
    margin          : 20px 0 0 auto ;
  }
  .Details .Details__MoreBtn:hover{
    background      : #006837 ;
    box-shadow      : 0 0 6px rgba(0,0,0,0);
  }
}
/*///////////////////////////////////////
  Sample
///////////////////////////////////////*/
.Sample__Text{
  margin         : 0 0 40px 0 ;
}
.Sample__Text--Aleart{
  font-size : 14px ;
  color : #D01F3C ;
  line-height : 150% ;
  padding : 20px ;
  box-sizing : border-box ;
  border : solid 1px #D01F3C ;
  border-radius : 6px ;
}
/*///////////////////////////////////////
  SampleCase (Sample)
///////////////////////////////////////*/
.Sample__Wrapper{
  display        : flex ;
  flex-direction : column ;
  align-items    : center ;
}
.SampleCase{
  width          : 100% ;
  max-width      : 310px ;
  border-radius  : 6px ;
  padding        : 16px ;
  box-sizing     : border-box ;
  background     : #FFF2D9 ;
  margin         : 20px 10px  ;
}
@media screen and (min-width : 740px){
  .Sample__Wrapper{
    flex-direction  : row ;
    flex-wrap       : wrap ;
    align-items     : flex-start ;
    justify-content : center  ;
  }
}
@media screen and (min-width : 960px){
  .Sample__Wrapper{
    justify-content : space-between ;
  }
  .SampleCase{
    max-width       : 320px ;
    margin          : 20px 0 ;
  }
}
.SampleCase__Title{
  margin              : 0 ;
  font-size           : 18px ;
  line-height         : 150% ;
  margin              : 0 0 10px 0 ;
}
.SampleCase__Title span{
  font-size           : 14px ;
}
.SampleCase__Box{
  position            : relative ;
  display             : flex ;
  justify-content     : space-between ;
  width               : 100% ;
  height              : 110px ;
  margin              : 0 0 20px 0 ;
}
.SampleCase__Box::before{
  content             : "" ;
  position            : absolute ;
  top                 : 0 ;
  left                : 0 ;
  right               : 0 ;
  bottom              : 0 ;
  margin              : auto ;
  width               : 20px ;
  height              : 50px ;
  background          : url(../svg/sanolecase_arrow.svg) ;
  background-size     : 100% ;
  background-position : center ;
  background-repeat   : no-repeat ;
}
.SapmleCase__Image{
  width               : 110px ;
  height              : 110px ;
  border-radius       : 6px ;
  overflow            : hidden ;
  background          : gray ;
}
.SapmleCase__Image img{
  width : 100% ;
}
.SampleCase__Period{
  margin              : 0 ;
  width               : 100% ;
  height              : 24px ;
  border-radius       : 6px ;
  font-size           : 14px ;
  line-height         : 24px ;
  margin              : 0 0 16px 0 ;
  background          : #624334 ;
  color               : #fff ;
  text-align          : center ;
}
.SampleCase__Table{
  width               : 100% ;
  font-size           : 16px ;
  margin              : 0 0 16px 0 ;
  border-collapse     : collapse ;
}
.SampleCase__Alerat{
  font-size : 13px ;
  color : #D01F3C ;
  line-height : 120% ;
}
.SampleCase__Table span{
  font-size           : 14px ;
}
.SampleCase__Table td{
  height              : 30px ;
}
.SampleCase__Table td:first-child{
  width               : 50% ;
  padding             : 0 0 0 10px ;
}
.SampleCase__Table td:last-child{
  width               : 50% ;
  padding             : 0 10px 0 0 ;
  text-align          : right ;
}
.SampleCase__Table tr:nth-child(2) td{
  border-top          : dotted 1px #000 ;
  border-bottom       : dotted 1px #000 ;
}
.SampleCase__Comment{
  width               : 100% ;
  padding             : 8px ;
  border-radius       : 6px ;
  box-sizing          : border-box ;
  background          : #fff ;
}
.SampleCase__Text--Bold{
  color               : #D01F3C ;
  font-weight         : bold ;
  font-size           : 18px ;
}
.SampleCase__MoreBtn{
  display             : block ;
  width               : 240px ;
  height              : 40px ;
  line-height         : 40px ;
  margin              : 40px auto 0 ;
  font-size           : 18px ;
  text-align          : center ;
  transition          : .4s ;
  box-shadow          : 0 0 6px rgba(0,0,0,.6);
  background          : #10B900 ;
}
@media screen and (min-width : 960px){
  .SampleCase__MoreBtn:hover{
    background : #006837 ;
    box-shadow : 0 0 6px rgba(0,0,0,0);
  }
}
#Case .ContentsTop{
  height : 1px ;
}
#Case .Sample{
  padding : 0 0 100px ;
}
@media screen and (min-width : 960px){
  #Case .Sample{
    padding : 0 0 150px ;
  }
}
/*///////////////////////////////////////
  UserVoice
///////////////////////////////////////*/
#UserVoice .UserVoice{
  padding : 0 0 100px ;
}
@media screen and (min-width : 960px){
  #UserVoice .UserVoice{
    padding : 0 0 150px ;
  }
}
/*///////////////////////////////////////
  VoiceCard
///////////////////////////////////////*/
.VoiceCard__Wrapper{
  margin        : 40px 0 0 ;
  padding       : 20px 0 40px ;
  border-radius : 6px ;
  background    : #C7B299 ;
}
.VoiceCard__Box{
  display       : flex ;
  flex-flow     : column nowrap ;
  align-items   : center ;
}
.VoiceCard{
  position      : relative ;
  width         : 90% ;
  max-width     : 300px ;
  border-radius : 6px 6px 60px 6px ;
  margin        : 20px 10px;
  padding       : 16px 0 ;
  background    : #fff ;
}
.VoiceCard::before{
  content       : "" ;
  position      : absolute ;
  right         : 0 ;
  bottom        : 0 ;
  width         : 0 ;
  height        : 0 ;
  border-top    : solid 23px #fff ;
  border-left   : solid 10px transparent ;
  border-right  : solid 10px transparent ;
  border-bottom : solid 0px transparent ;
  transform     : rotate(-45deg );
}
.VoiceCard:nth-child(1) .VoiceCard__Icon,
.VoiceCard:nth-child(5) .VoiceCard__Icon,
.VoiceCard:nth-child(9) .VoiceCard__Icon{
  background-image : url(../svg/uservoice_01.svg);
}
.VoiceCard:nth-child(2) .VoiceCard__Icon,
.VoiceCard:nth-child(6) .VoiceCard__Icon,
.VoiceCard:nth-child(10) .VoiceCard__Icon{
  background-image : url(../svg/uservoice_02.svg);
}
.VoiceCard:nth-child(3) .VoiceCard__Icon,
.VoiceCard:nth-child(7) .VoiceCard__Icon,
.VoiceCard:nth-child(11) .VoiceCard__Icon{
  background-image : url(../svg/uservoice_03.svg);
}
.VoiceCard:nth-child(4) .VoiceCard__Icon,
.VoiceCard:nth-child(8) .VoiceCard__Icon,
.VoiceCard:nth-child(12) .VoiceCard__Icon{
  background-image : url(../svg/uservoice_04.svg);
}
.VoiceCard__Icon{
  width         : 80px ;
  height        : 80px ;
  border-radius : 50% ;
  margin        : 0 auto 10px ;
  border        : solid 4px #624334 ;
  box-sizing    : border-box ;
  background-color : #fff ;
  background-size : 70% ;
  background-position : center ;
  background-repeat : no-repeat ;
}
.VoiceCard__Text{
  width         : 90% ;
  margin        : 0 auto ;
  padding       : 10px ;
  border-radius : 6px ;
  box-sizing    : border-box ;
}
@media screen and (min-width : 740px){
  .VoiceCard__Box{
    flex-flow       : row wrap ;
    justify-content : center ;
  }
}
@media screen and (min-width : 960px){
  .VoiceCard__Box{
    justify-content : space-between ;
  }
}
#UserVoice .ContentsTop--UserVoice{
  position : relative ;
  background : url(../img/uservoice_top.jpg) top right / cover no-repeat ;
}
#UserVoice .ContentsTop__UserVoiceCopy{
  position : absolute ;
  bottom : 6px ;
  left : 0 ;
  background : linear-gradient(90deg , 
    rgba(255,255,255,0)  0%,
    #C7B299 20% ,
    #C7B299 80% ,
     rgba(255,255,255,0) 100% );
  width : 100% ;
  max-width : 400px ;
  margin : 0 auto ;
  padding : 10px 0 ;
  text-align : center ;
}
#UserVoice .ContentsTop__UserVoiceCopy img{
  width : 80% ;
}
@media screen and (min-width : 640px){
  #UserVoice .ContentsTop__UserVoiceCopy{
    top : 0 ;
    bottom : 0 ;
    left : 40px ;
    margin : auto 0 ;
    height : 70px ;
  }
}
/*///////////////////////////////////////
  FAQ
///////////////////////////////////////*/
.FAQ{
  padding-bottom :  100px ;
}
.FAQ .FAQ__Wrapper{
  margin        : 0 0 40px ;
}
.FAQ .FAQ__Title{
  width         : 100% ;
  margin        : 0 ;
  padding       : 6px 10px ;
  box-sizing    : border-box ;
  font-size     : 18px ;
  line-height   : 140% ;
  border-radius : 6px 6px 0 0 ;
  background    : #C7B299 ;
}
.FAQ .FAQ__Text{
  width         : 100% ;
  border        : solid 2px #C7B299 ;
  border-radius : 0 0 6px 6px ;
  padding       : 10px ;
  box-sizing    : border-box ;
}
/*///////////////////////////////////////
  SubColumn
///////////////////////////////////////*/
.SubColumn .SubColumn__Wrapper,
.SubColumn .SubColumn__Wrapper--PR{
  display         : flex ;
  flex-flow       : row wrap ;
  justify-content : center ;
  align-items     : center ;
}
.SubColumn .SubColumn__Wrapper{
  margin          : 0  0 40px ;
}
.SubColumn .SubColumn__banner--Mail{
  display         : block ;
  width           : 270px ;
  height          : 100px ;
  border-radius   : 6px ;
  margin          : 0 10px 20px;
  background      : #10B900 ;
  transition      : .4s ;
  box-shadow      : 0 0 6px rgba(0,0,0,.6);
}
.SubColumn .SubColumn__banner--Tel{
  display         : block ;
  width           : 270px ;
  height          : 100px ;
  margin          : 0 10px 20px;
}
.SubColumn .SubColumn__banner--PR{
  display         : block ;
  width           : 270px ;
  height          : 150px ;
  background      : gray ;
  margin          : 0 10px 20px ;
  cursor          : pointer ;
}
.SubColumn .SubColumn__banner--PR img,
.SubColumn .SubColumn__banner img{
  width           : 100% ;
}
.AccessInfo{
  margin          : 0 0 20px ;
  width           : 100% ;
  padding         : 20px 10px ;
  border          : solid 2px #624334 ;
  border-radius   : 6px ;
  box-sizing      : border-box ;
}
.AccessInfo .AccessInfo__Logo{
  width           : 250px ;
  margin          : 0 auto ;
}
.AccessInfo .AccessInfo__Address{
  font-style      : normal ;
  font-size       : 16px ;
  text-align      : center ;
}
.AccessInfo .AccessInfo__OpenTime{
  display : block ;
  width : 100% ;
  padding : 6px ;
  font-size : 16px ;
  line-height : 140% ;
  margin : 6px 0 0 0 ;
  text-align : center ;
  box-sizing : border-box ;
  background : #C7B299 ;
  border-radius : 6px ;
}
.AccessInfo .AccessInfo__OpenTime dt{
  margin : 5px 0 ;
  padding : 0 ;
}
.AccessInfo .AccessInfo__OpenTime dd{
  margin : 0 ;
  padding : 10px 10px 0 10px;
  box-sizing : border-box ;
  border-radius :4px ;
  background : #fff ;
}
.AccessInfo .AccessInfo__OpenTime span{
  display : inline-block ;
  padding : 2px 4px ;
  margin : 0 10px 0 0 ;
  font-size : 14px ;
  border-radius : 4px ;
  background : #10B900 ;
  color : #fff ;
}
.AccessInfo .AccessInfo__OpenTime p{
  text-align : center ;
  margin : 0 0 10px ;
}
.AccessInfo .AccessInfo__MoreBtn{
  display         : block ;
  width           : 240px ;
  height          : 40px ;
  line-height     : 40px ;
  margin          : 20px auto 0 ;
  font-size       : 18px ;
  text-align      : center ;
  transition      : .4s ;
  box-shadow      : 0 0 6px rgba(0,0,0,.4);
  background      : #f09f0b ;
}
.SubColumn__Cashress{
  width : 100% ;
  padding : 10px ;
  max-width : 270px ;
  box-sizing : border-box ;
  border-radius : 6px ;
  display : flex ;
  flex-direction :column ;
  justify-content : space-between ;
  align-items : center ;
  background : #FDBDCE ;
}
.SubColumn__Cashress h3{
  width : calc(60% - 10px) ;
  font-size : 15px ;
  line-height : 150% ;
  margin : 0 auto 20px ;
}
.SubColumn__Cashress h3{
  text-align : center ;
}
.SubColumn__Cashress h3 span{
  font-size: 34px ;
  display : block ;
  margin : 10px 0 0 ;
}
.SubColumn__Cashress div{
  width : 70% ;
}
.SubColumn__Cashress div img{
  width : 100% ;
}
@media screen and (min-width : 640px){
  .SubColumn__Cashress{
    flex-direction : row ;
  }
  .SubColumn__Cashress{
    max-width : 560px;
    padding : 20px ;
  }
  .SubColumn__Cashress div{
    width : 30% ;
  }
}
@media screen and (min-width : 960px){
  .SubColumn__Cashress div{
    width : 40% ;
  }
  .SubColumn__Cashress h3{
    width : 60% ;
    margin-right : 10px ;
  }
  .SubColumn__Cashress h3{
    font-size :14px ;
  }
  .SubColumn__Cashress h3 span{
    font-size : 30px ;
  }
  .SubColumn__Cashress{
    max-width : 560px;
    padding : 20px ;
  }
  .AccessInfo .AccessInfo__MoreBtn:hover{
    box-shadow : 0 0 6px rgba(0,0,0,0);
    background : #c77900 ;
  }
  .SubColumn .SubColumn__banner--Mail,
  .SubColumn .SubColumn__banner--Tel,
  .SubColumn .SubColumn__banner--PR{
    margin     : 0 0 20px 0 ;
  }
  .SubColumn .SubColumn__banner--Mail:hover{
    background : #006837 ;
    box-shadow : 0 0 6px rgba(0,0,0,0);
  }
}

/*///////////////////////////////////////
  Footer
///////////////////////////////////////*/
.Footer{
  width           : 100% ;
  color           : #fff ;
  background      : #211700 ;
  padding         : 40px 0 ;
}
.Footer .Footer__Box--First{
  width           : 90% ;
  margin          : 0 auto ;
  padding         : 0 0 10px 0 ;
}
.Footer .Footer__Box--First table{
  width           : 100% ;
  margin          : 0 auto ;
  font-size       : 13px ;
  line-height     : 140% ;
  border-spacing  : 0 10px ;
}
.Footer .Footer__Box--First table td{
  text-align      : center ;
}
.Footer .Footer__HomeLogo{
  display         : inline-block ;
  width           : 200px ;
}
.Footer .Footer__HomeLogo img{
  width           : 100% ;
}
.Footer .Footer__Box--Second{
  width           : 90% ;
  margin          : 20px auto ;
}
.Footer .Footer__ListFrame{
  font-size       : 14px ;
  display         : flex ;
  flex-flow       : row wrap ;
  justify-content : space-between ;
}
.Footer .Footer__ListItem{
  text-align      : center ;
  width           : 50% ;
  height          : 40px ;
  line-height     : 40px ;
}
.Footer .Footer__ListItem a{
  width           : 100% ;
  display         : block ;
  border          : solid 1px #fff ;
  box-sizing      : border-box ;
  color           : #fff ;
}
.Copyright{
  display         : block ;
  width           : 100% ;
  margin          : 0 ;
  padding         : 0 ;
  text-align      : center ;
  font-size       : 11px ;
  line-height     : 180% ;
}
@media screen and ( min-width : 960px ){
  .Footer .Footer__Box--First{
    width           : 300px ;
    margin          : 0 ;
    padding         : 0  ;
    border-bottom   : solid 0px #fff ;
  }
  .Footer .Footer__Box--First table td{
    text-align      : left ;
  }
  .Footer__Wrapper{
    max-width       : 960px ;
    margin          : 0 auto 40px ;
    display         : flex ;
    justify-content : space-between ;
  }
  .Footer .Footer__Box--Second{
    width           : 400px ;
    margin          : 10px 0 0 0  ;
  }
  .Footer .Footer__ListItem{
    text-align      : left ;
  }
  .Footer .Footer__ListItem a{
    position        : relative ;
    text-indent     : 20px ;
    border          : none ;
  }
  .Footer .Footer__ListItem a::before{
    content         : "" ;
    position        : absolute ;
    top             : 0 ;
    left            : 0 ;
    bottom          : 0 ;
    margin          : auto 0 ;
    width           : 0 ;
    height          : 0 ;
    border-top      : solid 7px transparent ;
    border-right    : solid 0 transparent ;
    border-left     : solid 8px #fff ;
    border-bottom   : solid 7px transparent ;
  }
}

/*///////////////////////////////////////
  Access
///////////////////////////////////////*/
#Access .ContentsTop{
  position : relative ;
  width : 95% ;
  margin : 80px auto 40px ;
  border-radius : 6px ;
  height : 80px ;
  line-height : 80px ;
  background : #624334 ;
  text-align : center ;
}
#Access .Access__MainTitle{
  color : #fff ;
  font-size : 20px ;
}
@media screen and (min-width : 960px){
  #Access .ContentsTop{
    width : 100% ;
    margin : 150px auto 40px ;
  }
}
.Access .Access__Address{
  position : relative ;
  width : 100% ;
  padding : 10px ;
  box-sizing : border-box ;
  border-radius : 6px ;
  font-size : 16px ;
  margin : 0 0 40px 0 ;
  background : #eee ;
}
.Access .Access__Address::before{
  content : "" ;
  position : absolute ;
  left : 0 ;
  right : 0 ;
  bottom : -16px ;
  margin : 0 auto ;
  width : 0 ;
  height : 0 ;
  border-top : solid 16px #eee ;
  border-left : solid 16px transparent ;
  border-right : solid 16px transparent ;
  border-bottom : solid 0 transparent ;
}
.Access .Access__ListFrame{
  margin : 0 ;
  padding : 0 ;
}
.Access .Access__ListItem{
  margin : 0 ;
  padding : 0 ;
  line-height : 140% ;
}
.Access .Access__ListItem:nth-child(3){
  margin : 16px 0 0 0 ;
}
.Access__GoogleMap,
.Access__View{
  border-radius : 6px ;
  overflow : hidden ;
  margin : 0 0 40px 0 ;
  width : 100% ;
  height : 300px ;
}
.Access__GoogleMapBtn{
  display             : block ;
  width               : 240px ;
  height              : 40px ;
  line-height         : 40px ;
  margin              : 40px auto 0 ;
  font-size           : 18px ;
  text-align          : center ;
  transition          : .4s ;
  box-shadow          : 0 0 6px rgba(0,0,0,.6);
  background          : #f09f0b ;
}
@media screen and (min-width : 960px){
  .Access__GoogleMap,
  .Access__View{
    height : 450px ;
  }
}
#Access .Access{
  padding : 0 0 100px ;
}
@media screen and (min-width : 960px){
  #Access .Access{
    padding : 0 0 150px ;
  }
}
/*///////////////////////////////////////
  Company
///////////////////////////////////////*/
#Company .ContentsTop{
  position : relative ;
  width : 95% ;
  margin : 80px auto 40px ;
  border-radius : 6px ;
  height : 80px ;
  line-height : 80px ;
  background : #624334 ;
  text-align : center ;
}
#Company .Company__MainTitle{
  color : #fff ;
  font-size : 20px ;
}
@media screen and (min-width : 960px){
  #Company .ContentsTop{
    width : 100% ;
    margin : 150px auto 40px ;
  }
}
.Company .IntroPhoto{
  width : 100% ;
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  margin : 40px 0 0 ;
}
.Company .IntroPhoto__Wrapper{
  width : 100% ;
  max-width : 300px ;
}
.Company .IntroPhoto__Wrapper:nth-child(1) .IntroPhoto__Image{
  background : url(../img/introphoto_image1.jpg) center / cover no-repeat ;
}
.Company .IntroPhoto__Wrapper:nth-child(2) .IntroPhoto__Image{
  background : url(../img/introphoto_image2.jpg) center / cover no-repeat ;
}
.Company .IntroPhoto__Wrapper:nth-child(3) .IntroPhoto__Image{
  background : url(../img/introphoto_image3.jpg) center / cover no-repeat ;
}
.Company .IntroPhoto__Image{
  width : 100% ;
  height : 50vw ;
  max-height : 168px ;
  border-radius : 6px ;
  margin : 0 0 10px 0 ;
}
.Company .IntroPhoto__Text{
  width : 100% ;
  padding : 10px 0 40px;
}
@media screen and (min-width : 734px){
  .Company .IntroPhoto{
    flex-direction : row ;
    justify-content : space-between ;
    align-items : flex-start ;
  }
  .Company .IntroPhoto__Wrapper{
    width : 210px ;
  }
  .Company .IntroPhoto__Image{
    width : 210px ;
    height : 130px ;
    margin: 0 ;
  }
  .Company .IntroPhoto__Text{
    width : 210px ;
  }
}
.Company .Company__Info{
  width : 100% ;
}
.Company .Company__Info table{
  width : 100% ;
  font-size : 14px ;
  margin: 0 ;
  border-spacing : 0 10px ;
}
.Company .Company__Info td{
  padding : 10px 0 10px 10px ;
  box-sizing : border-box ;
  line-height : 130% ;
  border-bottom : solid 1px #C7B299 ;
}
.Company .Company__Info tr td span{
  font-size : 13px ;
}
.Company .Company__Info tr td:nth-child(1){
  width : 25% ;
  border-radius : 6px 0 0 6px ;
  background : #C7B299 ;
}
.Company .Company__Info tr td:nth-child(2){
  width : 75% ;
}
.Company__MapBtn{
  position            : relative ;
  display             : block ;
  width               : 180px ;
  height              : 30px ;
  line-height         : 30px ;
  margin              : 16px 0 10px ;
  font-size           : 14px ;
  border-radius       : 6px ;
  text-decoration     : none ;
  text-align          : center ;
  overflow            : hidden ;
  transition          : .4s ;
  box-shadow          : 0 0 6px rgba(0,0,0,.3);
  color               : #fff ;
  background          : #f09f0b ;
}
.Company__MapBtn::before{
  content : "" ;
  position : absolute ;
  top : -4px ;
  left : -50% ;
  right: -50% ;
  margin : 0 auto ;
  width : 130% ;
  height : 20px ;
  border-radius : 50% ;
  background : rgba(255,255,255,.3);
}
@media screen and (min-width : 960px){
  .Company .Company__Info table{
    font-size : 16px ;
  }
  .Company .Company__Info tr td span{
    font-size : 14px ;
  }
  .Company .Company__Info tr td:nth-child(1){
    text-align : center ;
  }
}
#Company .Company{
  padding : 0 0 100px ;
}
@media screen and (min-width : 960px){
  #Company .Company{
    padding : 0 0 150px ;
  }
}
/*///////////////////////////////////////
  Jaffy
///////////////////////////////////////*/
.ContentsTop--Jaffy{
  position : relative ;
  height : 120vw ;
  max-height : 600px ;
  background : #F7F8FC ;
}
.ContentsTop--Jaffy .ContentsTop__Wrapper{
  position : relative ;
  width : 100% ;
  max-width : 520px ;
  height : 100% ;
  margin : 0 auto ;
}
.Jaffy{
  padding : 0 ;
}
.Jaffy__MainCopy{
  position : absolute ;
  top : 35% ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  width : 90% ;
  max-width : 500px ;
}
.Jaffy__Wrapepr{
  margin : 0 0 80px ;
}
.PatentEmblem{
  position : absolute ;
  top : 0 ;
  left :10px ;
  width : 25% ;
}
.Jaffy__Baloon{
  position : absolute ;
  top : 20px ;
  right : 10px ;
  width : 55%;
}
.Jaffy__MainCopy img,
.PatentEmblem img{
  width : 100% ;
}
.Jaffy__Image{
  position : absolute ;
  bottom : 20px ;
  left : 0 ;
  right : 0 ;
  width : 100% ;
  max-width : 500px ;
  margin : 0 auto ;
}
.Jaffy__Ttitle{
  width         : 100% ;
  padding       : 5px 10px ;
  box-sizing    : border-box ;
  border-radius : 6px ;
  margin        : 0 0 40px 0 ;
  font-size     : 20px ;
  line-height   : 140% ;
  color         : #211700 ;
  background    : #FFF2D9 ;
}
.Jaffy__Notice{
  font-size : 12px ;
  line-height : 14px ;
}
.Jaffy__ArticleImage--1{
  width : 100% ;
  max-width : 400px ;
  height : 150px ;
  background : url(../img/jaffy_intro.jpg) center / cover no-repeat ;
  margin : 20px auto ;
  border-radius : 6px ;
}
.Jaffy__ArticleImage--2{
  width : 100% ;
  max-width : 400px ;
  height : 50vw ;
  max-height : 225px ;
  background : url(../img/jaffy_ttt_tv.jpg) center / cover no-repeat ;
  margin: 20px auto ;
  border-radius : 6px ;
}
.Jaffy__ArticleImage--3{
  width : 100% ;
  max-width : 500px ;
  height : 40vw ;
  max-height : 225px ;
  background : url(../img/ling_image.png) center / cover no-repeat ;
  margin: 20px auto ;
  border-radius : 6px ;
}
.Jaffy__ArticleImage--4{
  width : 100% ;
  max-width : 400px ;
  height : 50vw ;
  max-height : 225px ;
  background : url(../img/jaffy_hope.jpg) center / cover no-repeat ;
  margin: 20px auto ;
  border-radius : 6px ;
}
.Jaffy .Jaffy__MoreBtn{
  display         : block ;
  width           : 240px ;
  height          : 40px ;
  line-height     : 40px ;
  margin          : 40px auto 0 ;
  border-radius   : 6px ;
  font-size       : 20px ;
  box-sizing      : border-box ;
  color           : #fff ;
  background      : #10B900 ;
  text-decoration : none ;
  text-align      : center ;
  transition      : .4s ;
  box-shadow      : 0 0 6px rgba(0,0,0,.6);
}
.Jaffy__FAQ{
  padding  : 0 ;
  margin : 0 0 150px 0 ;
}
.Jaffy__FAQ .FAQ__Text{
  margin : 0 0 20px 0 ;
}
.Jaffy__CVBtn{
  text-align : center ;
  line-height : 70px ;
  display : block ;
  width : 90% ;
  max-width : 300px ;
  background      : #10B900 ;
  margin : 40px auto 0;
}
@media screen and (min-width : 960px){
  .ContentsTop--Jaffy{
    height : 500px ;
  }
  .ContentsTop--Jaffy .ContentsTop__Wrapper{
    max-width : 960px ;
  }
  .PatentEmblem{
    left : 20px ;
    width : 120px;
  }
  .Jaffy__MainCopy{
    top : 20px ;
    left : auto ;
    right : 70px ;
    margin : 0 ;
    max-width : 700px ;
  }
  .Jaffy__Baloon{
    top  : 300px;
    right : 20px ;
    width : 280px ;
  }
  .Jaffy__Image{
    max-width : 600px ;
    left : 40px ;
    right : auto ;
    margin : 0 ;
  }
}
/*///////////////////////////////////////
  ttt_TV
///////////////////////////////////////*/
.ContentsTop--TV{
  position : relative ;
  background : url(../img/media_top.png) center / cover no-repeat ;
}
.ContentsTop__MediaImage{
  position : absolute ;
  top : 0 ;
  left : 0 ;
  right : 0 ;
  bottom : 0 ;
  margin : auto ;
  width : 80% ;
  max-width : 400px ;
  height : 30vw ;
  max-height : 150px ;
}
.ContentsTop__MediaImage img{
  width : 100% 
}
@media screen and (min-width : 960px){
  .ContentsTop__MediaImage{
    max-width : 500px ;
    max-height : 200px ;
  }
}
.ttt_TV{
  padding : 0 ;
}
.ttt_TV__Video{
  width : 100% ;
  height : 51vw ;
  max-height : 370px  ;
  border-radius : 6px ;
  overflow : hidden ;
  margin : 0 0 40px 0 ;
}
/*///////////////////////////////////////
  Information
///////////////////////////////////////*/
.TXT--S{
  margin        : 0 ;
  font-size     : 14px ;
  line-height   : 160% ;
}
.TXT--AL{
  font-size : 12px ;
  line-height : 120% ;
  text-align : justify ;
  color :#D01F3C ;
}
.Information_Container{
  width : 100% ;
  padding : 40px 0 ;
  /* margin : 0 0 40px ; */
  background : #eee ;
}
.Information{
  width : 90% ;
  max-width : 960px ;
  margin : 0 auto ;
  border : solid 1px #B8003C ;
  box-sizing : border-box ;
  border-radius : 6px ;
  background : #fff ;
}
.Information__Wrapper{
  width : calc(100% - 40px) ;
  margin : 10px auto  ;
}
.Information__Title{
  width : 100% ;
  height : 30px ;
  line-height : 30px ;
  font-size : 16px ;
  background : #B8003C ;
  color : #fff ;
  text-align : center ;
}
.Information__Subtitle{
  font-size : 16px ;
  line-height : 30px ;
  color : #B8003C ;
}
.Information__Text--Date{
  width : 100% ;
  padding : 10px ;
  box-sizing : border-box ;
  margin : 10px auto ;
  border-top : solid 1px #eee ;
  font-size : 14px ;
}
.Information__Text--Date .Info__Month {
  font-size : 16px ;
  display : inline-block ;
  margin : 0 20px 20px 0 ;
  width : 50px ;
  height : 30px ;
  text-align: center ;
  line-height : 30px ;
  border-radius : 4px ;
  font-weight : bold ;
  color : #fff ;
  background : #B8003C ;
}
.Info__SPnon{
  display : none ;
}
.Info__PCnon{
  display : block ;
}
@media screen and (min-width : 960px){
  .Information__Text--Date span {
    display : inline-block ;
  }
  .Information__Text--Date .Info__Month {
    margin : 0 20px 0 0 ;
  }
  .Info__SPnon{
    display : inline-block ;
  }
  .Info__PCnon{
    display : none ;
  }
}

/*///////////////////////////////////////
  Information
///////////////////////////////////////*/
.TXT--S{
  margin        : 0 ;
  font-size     : 14px ;
  line-height   : 160% ;
}
.TXT--AL{
  font-size : 12px ;
  line-height : 120% ;
  text-align : justify ;
  color :#D01F3C ;
}
.Information_Container{
  width : 100% ;
  padding : 40px 0 ;
  background : #eee ;
}
.Information{
  width : 90% ;
  max-width : 960px ;
  margin : 0 auto ;
  border : solid 1px #B8003C ;
  box-sizing : border-box ;
  border-radius : 6px ;
  background : #fff ;
}
.Information__Wrapper{
  width : calc(100% - 40px) ;
  margin : 10px auto  ;
}
.Information__Title{
  width : 100% ;
  height : 30px ;
  line-height : 30px ;
  font-size : 16px ;
  background : #B8003C ;
  color : #fff ;
  text-align : center ;
}
.Information__Subtitle{
  font-size : 16px ;
  line-height : 30px ;
  color : #B8003C ;
}
.Information__Text--Date{
  width : 100% ;
  padding : 10px ;
  box-sizing : border-box ;
  margin : 10px auto ;
  border-top : solid 1px #eee ;
  font-size : 14px ;
}
.Information__Text--Date .Info__Month {
  font-size : 16px ;
  display : inline-block ;
  margin : 0 20px 20px 0 ;
  width : 50px ;
  height : 30px ;
  text-align: center ;
  line-height : 30px ;
  border-radius : 4px ;
  font-weight : bold ;
  color : #fff ;
  background : #B8003C ;
}
.Info__SPnon{
  display : none ;
}
.Info__PCnon{
  display : block ;
}
@media screen and (min-width : 960px){
  .Information__Text--Date span {
    display : inline-block ;
  }
  .Information__Text--Date .Info__Month {
    margin : 0 20px 0 0 ;
  }
  .Info__SPnon{
    display : inline-block ;
  }
  .Info__PCnon{
    display : none ;
  }
}
.Information__Category{
  margin : 0 ;
  font-size : 14px ;
  line-height : 24px ;
  /*width : 240px ;*/
  /*height : 24px ;*/
  border-radius : 6px ;
  background : #888 ;
  color : #fff ;
  text-align : center ;
}
.Information__Category span{
  font-size : 10px ;
}
.Information__date{
  font-size : 14px ;
  margin : 6px 0 12px ;
}
@media screen and ( min-width : 650px ){
  .Information__Wrapper{
    display : flex ;
  }
  .Information__Wrapper dl{
    width : 50% ;
  }
  .Information__date{
     margin : 6px 0 0 ;
  }
}
/*
|
|
|
|
|
|
|---------------------------------------------------------
| colona
|---------------------------------------------------------
*/

.colona__frame{
  width : 100% ;
  max-width : 500px ;
  margin : 0 auto ;
  padding : 16px 16px 16px 32px ;
  box-sizing : border-box ;
  font-size : 14px ;
}
.colona__item{
  position : relative ;
  margin : 0 0 12px ;
}
.colona__item::before{
  content : "" ;
  position : absolute ;
  top  : 0 ;
  left : -16px ;
  bottom : 0 ;
  margin : auto ;
  width : 8px ;
  height : 8px ;
  border-radius : 50% ;
  background : #000 ;
}
.colona__image{
  width : calc( 100% - 32px ) ;
  height : 40vw ;
  max-width : 500px ;
  max-height : 280px ;
  margin : 16px auto ;
  background : url( ../img/colona.jpg) center / cover no-repeat ;
}
.post{
  display : flex ;
  align-items : center ;
  position : relative ;
  width : 90% ;
  max-width : 400px ;
  min-height : 72px ;
  margin : 0 auto ;
  padding : 8px 8px 8px 90px;
  box-sizing : border-box ;
  border-radius : 6px ;
  font-size : 16px ;
  color : #fff ;
  background : #B8003C ;
}
/*.post::before{
  content : "" ;
  position : absolute ;
  top : 0 ;
  left :8px ;
  bottom : 0 ;
  margin : auto 0 ;
  width : 56px ;
  height : 56px ;
  border-radius : 50% ;
  background : #fff ;
}*/
.post::after{
  content: "" ;
  position : absolute ;
  top : 0 ;
  left : 16px ;
  bottom : 0 ;
  margin : auto 0;
  width : 60px ;
  height : 60px ;
  background : url( ../svg/track.svg) center / 100% no-repeat ;
}
@media screen and ( min-width : 960px ){
  .colona .Information{
    display : flex ;
    flex-wrap : wrap ;
    align-items: center ;
  }
  .colona__frame,
  .colona__image{
    width : calc( 50% - 16px );
  }
}
.colonaAlert{
  display : flex ;
  flex-direction : column ;
  width : 90% ;
  max-width : 600px ;
  margin : 0 auto 40px ;
}
.colonaAlert__image{
  width : 100% ;
  height : 20vw ;
  max-height : 140px ;
  border-radius : 6px ;
  overflow : hidden ;
  margin : 0 0 24px 0 ;
}
.colonaAlert__image:first-child{
  background : #B8003C url(../svg/colona_alert_1.svg) center / 100% no-repeat ;
}
.colonaAlert__image:last-child{
  background : #B8003C url(../svg/colona_alert_2.svg) center / 100% no-repeat ;
  margin : 0 ;
}
@media screen and ( min-width : 960px ){
  .colonaAlert{
    flex-direction : row ;
    justify-content : space-between ;
    align-items : center ;
    width : 90% ;
    max-width : 960px ;
  }
  .colonaAlert__image{
    width : calc( 50% - 16px );
    margin : 0 ;
  }
}
.AccessInfo .AccessInfo__OpenTime dd{
  padding : 10px ;
}
.AccessInfo__OpenTime__notice{
  font-size : 12px ;
}
.topphoto{
  width : 90% ;
  height : 50vw ;
  border-radius : 6px ;
  margin : 0 auto 40px ;
  background : url(../img/introphoto_image2.jpg) center / 100% no-repeat ;
}
@media screen and ( min-width : 960px ){
  .topphoto{
    width : 400px ;
    height : 220px ;
  }
}
.info__innerInfo{
  width : 100% ;
  text-align : center ;
  background : #10B900 ;
  color : #fff ;
  font-size : 15px ;
  border-radius : 4px ;
  margin : 0 0 16px 0 ; 
  font-weight : normal ;
}
.info__innerInfo__text{
  font-size : 14px ;
  text-align : justify ;
  line-height : 140% ;
  margin : 0 ;
  padding: 0;
}
.infoBox{
  width : 100% ;
}
@media screen and ( min-width : 650px ){
  .Information__Wrapper{
    justify-content : space-between ;
  }
  .infoBox{
    width : calc( 50% - 16px) ;
  }
}
@media screen and ( min-width : 960px ){
  .Information__Wrapper dl{
    margin-right : 40px ;
  }
}
.tv_banner{
  display : block ;
  width : 80% ;
  max-width : 600px ;
  margin  : 32px auto ;
}