@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ レイアウト ◇◆◇
  
  1.  header
      nav
      
  3.  contents
  4.  footer
  99. parts  
  
  
========================================================================================================================*/

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

  1. header
  
----------------------------------------------------------------------------------------------------*/

header {
  width:100%;
  min-width:1160px;
  position:fixed;
  top:0;
  left:0;
  z-index:500;
}

#hd__logo {
  z-index:150;
  width:220px;
  height:110px;
  position:absolute;
  left:50%;
  right:50%;
  top:0;
  margin-left:-110px;
  background:url(../image/hd-logo_pc.png?v=2020_0515) no-repeat center top;
  transition:width 0.4s ease, margin 0.4s ease;
}

#hd__logo a {
  display:block;
  width:100%;
  height:100%;
  position:relative;
}

#hd__logo a,
#hd__logo a:visited,
#hd__logo a:hover { text-decoration:none; }

#hd__logo h1 {
  height:100%;
  display:block;
  text-indent:100%;
  font-size:0;
  white-space:nowrap;
  overflow:hidden;
  background:url(../image/hd-logo_pc-f.png?v=0515) no-repeat center top;
  opacity:1;
  transition:opacity 0.4s ease;
}

.hd__logo__enR,
.hd__logo__enL {
  font-family:"Lora";
  font-weight:100;
  color:#a0325a;
  display:inline-block;
  font-size:75.0%;
  position:absolute;
  bottom:32px;
}

.hd__logo__enR { left:0; padding-left:0.5em; }
.hd__logo__enL { right:0; }

.lte-ie8 header.scroll #hd__logo h1 { display:none; }
.lte-ie8 header.scroll #hd__logo { width:190px; margin-left:-95px; }

@media print,screen and (min-width:768px) {
  header.scroll #hd__logo {
    width:190px;
    margin-left:-95px;
  }
  
  header.scroll #hd__logo h1 {
    opacity:0;
  }
}

/* IE8以下 */
.lte-ie8 header.scroll #hd__logo h1 { display:none; }
.lte-ie8 header.scroll #hd__logo { width:190px; margin-left:-95px; }

@media screen and (max-width:767px) {
  header {
    min-width:inherit;
    position:relative;
    left:inherit;
    top:inherit;
    z-index:inherit;
    background-color:#fff;
  }
  
  #hd__logo {
    width:180px;
    height:80px;
    position:relative;
    left:inherit;
    right:inherit;
    top:inherit;
    margin-left:auto;
    margin-right:auto;
    background:url(../image/hd-logo_sp.png?v=0515) no-repeat center top;
    background-size:auto 90px;
  }
  
  #hd__logo h1 { background:none; }

  .hd__logo__enR,
  .hd__logo__enL {
    bottom:15px;
    font-size:12px; /* 固定 */
  }
}

@media screen and (max-width:360px) {
  #hd__logo {
    width:160px;
    height:70px;
    background-size:auto 80px;
  }
  
  .hd__logo__enR,
  .hd__logo__enL {
    font-size:11px;
  }
}


/*-----------------------------------------------------------------------------------
  スマホ用Navボタン
-----------------------------------------------------------------------------------*/

@media print,screen and (min-width:768px) {
  .spNav-btn {
    display:none;
  }
}

@media screen and (max-width:767px) {
  .spNav-btn {
    text-align:center;
    position:absolute;
    right:20px;
    top:28px;
    box-sizing:border-box;
    z-index:230;
  }
  
  .spNav-btn_ic,
  .spNav-btn_ic span,
  .spNav-btn_ic span:before,
  .spNav-btn_ic span:after {
    display:inline-block;
    transition:all .4s;
    box-sizing:border-box;
  }
  .spNav-btn_ic {
    position:relative;
    width:32px;
    height:24px;
  }
  
  .spNav-btn_ic span,
  .spNav-btn_ic span:nth-of-type(2),
  .spNav-btn_ic span:nth-of-type(3) {
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background-color:#a0325a;
  }
  .spNav-btn_ic span:nth-of-type(1) {
    top:0;
  }
  .spNav-btn_ic span:nth-of-type(2) {
    top:11px;
  }
  .spNav-btn_ic span:nth-of-type(3) {
    bottom:0;
  }
  
  .spNav-btn.close .spNav-btn_ic span:nth-of-type(1),
  .spNav-btn.close .spNav-btn_ic span:nth-of-type(2),
  .spNav-btn.close .spNav-btn_ic span:nth-of-type(3) {
    background-color:#fff;
  }
  
  .spNav-btn.close .spNav-btn_ic span:nth-of-type(1) {
    -webkit-transform:translateY(11px) rotate(-315deg);
    transform:translateY(11px) rotate(-315deg);
  }
  .spNav-btn.close .spNav-btn_ic span:nth-of-type(2) {
    opacity:0;
  }
  .spNav-btn.close .spNav-btn_ic span:nth-of-type(3) {
    -webkit-transform:translateY(-11px) rotate(315deg);
    transform:translateY(-11px) rotate(315deg);
  }
}

@media screen and (max-width:360px) {
  .spNav-btn {
    top:25px;
  }
  
  .spNav-btn_ic {
    position:relative;
    width:28px;
    height:20px;
  }

  .spNav-btn_ic span:nth-of-type(2) {
    top:9px;
  }
  
  .spNav-btn.close .spNav-btn_ic span:nth-of-type(1) {
    -webkit-transform:translateY(9px) rotate(-315deg);
    transform:translateY(9px) rotate(-315deg);
  }
  .spNav-btn.close .spNav-btn_ic span:nth-of-type(3) {
    -webkit-transform:translateY(-9px) rotate(315deg);
    transform:translateY(-9px) rotate(315deg);
  }
}


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

  header-nav
  
----------------------------------------------------------------------------------------------------*/

#glNav-wrap {
  width:100%;
  min-width:1160px;
  height:100px;
  position:fixed;
  left:0;
  top:0;
  z-index:100;
  background-color:#fff;
}

#glNav-wrap:before {
  content:"";
  width:100%;
  height:1px;
  background-color:rgba(160,50,90,0.4);
  position:absolute;
  left:0;
  top:3px;
}
.no-rgba #glNav-wrap:before { background-color:#d9adbd; }

#glNav {
  width:1100px;
  height:100px;
  margin-left:auto;
  margin-right:auto;
}

#glNav ul {
  list-style:none;
  display:table;
  height:100%;
  transition:width 0.4s ease;
}

#glNav ul.glNav__listL { float:left; width:410px; }
#glNav ul.glNav__listR { float:right; width:400px; }

#glNav li {
  display:table-cell;
  vertical-align:middle;
  padding-left:8px;
  padding-right:8px;
  box-sizing:border-box;
  line-height:1;
  position:relative;
  border-left:2px solid transparent;
}

#glNav ul.glNav__listLli:first-child {
  border-left:0;
}

#glNav a,
#glNav a:visited,
#glNav a:hover {
  color:inherit;
  text-decoration:none;
}

#glNav li.glNav__list__item {
  cursor:pointer;
}

#glNav li.glNav__list__item small {
  font-family:"Lora";
  font-weight:100;
  color:#a0325a;
  display:block;
  font-size:137.5%;
}

#glNav li.glNav__list__item span {
  font-family:"Harenosora";
  font-size:75.0%;
  display:block;
  margin-top:0.7em;
}
  
#glNav li.glNav__list__item.active a:before {
  content:"";
  width:100%;
  height:4px;
  background-color:#a0325a;
  position:absolute;
  left:0;
  top:0;
}

#glNav li.pc-none { display:none; }
  
@media print,screen and (min-width:768px) {
  header.scroll #glNav ul.glNav__listL { float:left; width:440px; }
  header.scroll #glNav ul.glNav__listR { float:right; width:430px; }
  
  .no-csstransitions #glNav li.glNav__list__item a:hover:before,
  .csstransitions #glNav li.glNav__list__item a:before {
    content:"";
    width:100%;
    height:4px;
    background-color:#a0325a;
    position:absolute;
    left:0;
    top:0;
  }
  
  .csstransitions #glNav li.glNav__list__item a:before {
    transform:scaleX(0);
    transition:transform 0.3s ease;
  }
    
  .csstransitions #glNav li.glNav__list__item.active a:before {
    transform:scaleX(1);
  }
  
  .csstransitions #glNav li.glNav__list__item:hover a:before {
    transform:scaleX(1);
  }
}

/* IE8以下 */
.lte-ie8 header.scroll #glNav ul.glNav__listL { float:left; width:440px; }
.lte-ie8 header.scroll #glNav ul.glNav__listR { float:right; width:430px; }

@media screen and (max-width:767px) {
  #glNav-wrap {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    min-width:inherit;
    background:none;
  }

  #glNav-wrap:before { display:none; }
  #glNav-wrap.sp-active { z-index:200; }

  #glNav {
    display:none;
    width:100%;
    height:inherit;
    padding:4em 1em 1.5em 1em;
    box-sizing:border-box;
  }
  
  #glNav,
  #glNav ul {
    height:auto;
  }
  
  #glNav ul,
  #glNav li {
    display:block;
  }

  #glNav ul.glNav__listL,
  #glNav ul.glNav__listR { float:none; width:100%; }
  
  #glNav li {
    padding-left:0;
    padding-right:0;
    padding-top:1em;
    padding-bottom:1em;
    border-left:none;
  }
  
  #glNav li.glNav__list__item a:before {
    display:none;
  }
  
  #glNav li.glNav__list__item small,
  #glNav a,
  #glNav a:visited,
  #glNav a:hover {
    color:#fff;
  }
  
  #glNav li.glNav__list__item span {
    font-size:87.5%;
    margin-top:0.5em;
  }
  
  #glNav li.pc-none { display:inherit; }
}


/* facebook(PC) */
.head_fb_btn {
	width: 200px;
	height: 40px;
	display: table;
	text-align:right;
	position: fixed;
	right: 0;
	top: 25px;
	z-index: 100;
}

.head_fb_btn_wrap {
	display: table-cell;
    vertical-align: middle;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
    line-height: 1;
    position: relative;
    border-left: 2px solid transparent;
}

.fb-aniBtn,
.insta-aniBtn {
  overflow:hidden;
  display:inline-block;
  position:relative;
  margin-top:0.4em;
}

.head_fb_btn a {
  font-family:"Lora";
  font-weight:100;
  color:#145f91 !important;
  display:inline-block;
  border:1px solid rgba(20,95,145, 0.6);
  box-sizing:border-box;
  padding:0.9em 1em 0.6em 1em;
  font-size:87.5%;
  position:relative;
  transition:border 0.4s linear, color 0.3s ease;
  text-decoration: none;
	background-color: #fff;
}
.no-rgba .head_fb_btn a { border:1px solid #729fbd; }

.head_fb_btn a:before {
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:10px;
  height:20px;
  margin-top:-0.2em;
  background-image:url(../image/icon/facebook-20.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  margin-right:8px;
}
.head_fb_btn a:hover {
	background-color: rgba(20,95,145, 0.6);
}

@media screen and (max-width:1400px) {
	.head_fb_btn {
		top: auto;
		bottom: 80px;
	}
}

@media screen and (max-width:767px) {
	.head_fb_btn {
		display: none;
	}
}

@media print,screen and (min-width:768px) {  
  .csstransitions .fb-aniBtn:before,
  .csstransitions .insta-aniBtn:before {
    content:"";
    position:absolute;
    width:150%;
    height:0;
    left:50%;
    top:50%;
    background-color:#145f91;
    transform:translateX(-50%) translateY(-50%) rotate(-60deg);
    transition:all 0.4s cubic-bezier(0.4, 0.4, 0.4, 0.2);
  }
  
  .csstransitions .fb-aniBtn:hover:before,
  .csstransitions .insta-aniBtn:hover:before {
    height:600%;
  }
  
  .fb-aniBtn:hover a:before {
    background-image:url(../image/icon/facebook-20-white.png);
  }
  
  .insta-aniBtn:hover a:before {
    background-image:url(../image/icon/insta-20-white.png);
  }
  
  .fb-aniBtn:hover a,
  .insta-aniBtn:hover a {
    border-color:#145f91;
    color:#fff !important;
  }
  
  .no-csstransitions .fb-aniBtn:hover,
  .no-csstransitions .insta-aniBtn:hover {
    background-color:#145f91;
  }
}

@media screen and (max-width:767px) {  
	.glNav__list__fb {
	  padding-right:0 !important;
	  padding-left:0 !important;
	  text-align:right;
	}

	.fb-aniBtn,
	.insta-aniBtn {
	  overflow:hidden;
	  display:inline-block;
	  position:relative;
	  margin-top:0.4em;
	}

	.glNav__list__fb a {
	  font-family:"Lora";
	  font-weight:100;
	  color:#145f91 !important;
	  display:inline-block;
	  border:1px solid rgba(20,95,145, 0.6);
	  box-sizing:border-box;
	  padding:0.8em 1em 0.7em 1em;
	  font-size:87.5%;
	  position:relative;
	  transition:border 0.4s linear, color 0.2s ease;
	}
	.no-rgba .glNav__list__fb a { border:1px solid #729fbd; }

	.glNav__list__fb a:before {
	  content:"";
	  display:inline-block;
	  vertical-align:middle;
	  height:20px;
	  margin-top:-0.2em;
	  background-image:url(../image/icon/facebook-20.png);
	  background-repeat:no-repeat;
	  background-position:center center;
	  background-size:cover;
	  margin-right:8px;
	}

	.glNav__list__fb small {
		display:none;
		font-family:"Harenosora";
	}
	
  .glNav__list__fb {
    text-align:center;
  }
  
  .fb-aniBtn,
  .insta-aniBtn { margin-top:0.5em; }
  
  .glNav__list__fb a {
    border-color:rgba(255,255,255,0.8);
    color:#fff !important;
    font-size:112.5%;
  }
  
  .glNav__list__fb .fb-aniBtn a:before {
	width:10px;
    background-image:url(../image/icon/facebook-white.png);
    margin-right:10px;
  }
  .glNav__list__fb .insta-aniBtn a:before {
	width:20px;
    background-image:url(../image/icon/insta-white.png);
    margin-right:10px;
  }
  
  .glNav__list__fb small {
    display:inline-block;
    margin-right:0.5em;
  }
}


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

  2. contents
  
----------------------------------------------------------------------------------------------------*/

@media screen and (max-width:767px) {
  .ct-ov {
    display:none;
    position:fixed;
    top:0;
    left:0;
    z-index:150;
    width:100%;
    height:100%;
    background:#a0325a;
  }
}

@media print {
  .ct-ov {
    display:none !important;
  }
}


/*-----------------------------------------------------------------------------------
  headline visual
-----------------------------------------------------------------------------------*/

#hv-wrap {
  width:100%;
  background-repeat:no-repeat;
  background-position:center bottom;
  box-sizing:border-box;
  display:table;
  position:relative;
  color:#fff;
  line-height:1;
}

#hv {
  height:200px;
  margin-left:auto;
  margin-right:auto;
  display:table-cell;
  vertical-align:middle;
  box-sizing:border-box;
  font-family:"Lora";
  font-weight:100;
  font-size:250.0%;
  letter-spacing:3px;
  text-indent:3px;
}

@media screen and (max-width:767px) { 
  #hv-wrap {
    background-size:cover;
  }
}

@media screen and (max-width:640px) {
  #hv {
    height:150px;
    font-size:225.0%;
  }
}

@media screen and (max-width:500px) {
  #hv-wrap {
    height:0;
    padding-top:30%;
    display:block;
    position:relative;
  }
  
  #hv {
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:50%;
    margin-top:-0.5em;
    font-size:212.5%;
  }
}

@media screen and (max-width:360px) {
  #hv {
    letter-spacing:0;
    text-indent:0;
  }
}


/*-----------------------------------------------------------------------------------
  headline
-----------------------------------------------------------------------------------*/

.headline-wrap {
  text-align:center;
  line-height:1;
  margin-bottom:40px;
}

.headline {
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}

.headline--txt {
  font-family:"Harenosora";
  font-weight:normal;
  font-size:156.2%;
  line-height:1.5;
  padding-top:0.5em;
}

.headline:before,
.headline--txt:before,
.headline--txt:after {
  display:inline-block;
  width:6px;
  height:6px;
  background-color:#a0325a;
  border-radius:100%;
  position:relative;
}

.headline:before,
.headline--txt:before,
.headline--txt:after {
  content:"";
  position:absolute;
  top:0;
  left:50%;
}

.headline:before { margin-left:-3px; }
.headline--txt:before { margin-left:-16px; }
.headline--txt:after { margin-left:10px; }

@media screen and (max-width:767px) {
  .headline-wrap {
    margin-bottom:2em;
    font-size:95%;
  }
}

@media screen and (max-width:500px) {
  .headline-wrap {
    margin-bottom:1.5em;
    font-size:90%;
  }
}

@media screen and (max-width:420px) {
  .headline-wrap {
    font-size:85%;
  }
}

@media screen and (max-width:36px) {
  .headline-wrap {
    font-size:80%;
  }
}


/*-----------------------------------------------------------------------------------
  block
-----------------------------------------------------------------------------------*/

.ctBlock {
  padding-top:55px;
  padding-bottom:60px;
  text-align:center;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

@media screen and (max-width:767px) {
  .ctBlock {
    padding-top:3em;
    padding-bottom:3em;
    padding-left:1.5em;
    padding-right:1.5em;
  }
}

@media screen and (max-width:500px) {
  .ctBlock {
    padding-top:2.5em;
    padding-bottom:2.5em;
    padding-left:1em;
    padding-right:1em;
  }
}


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

  3. footer
  
----------------------------------------------------------------------------------------------------*/

footer {
  clear:both;
  width:100%;
  background-color:#fff;
  text-align:center;
  padding-top:40px;
  padding-bottom:40px;
}

footer a,
footer a:visited {
  color:inherit;
  text-decoration:none;
}

footer a:hover {
  color:#a0325a;
  text-decoration:none;
}

#ft__logo {
  width:300px;
  height:34px;
  margin-left:auto;
  margin-right:auto;
  background:url(../image/ft-logo.png) no-repeat center center;
  background-size:contain;
  display:block;
  text-indent:100%;
  font-size:0;
  white-space:nowrap;
  overflow:hidden;
}

#ft__nav {
  list-style:none;
  display:inline-block;
  letter-spacing:-0.5em;
  line-height:1;
  margin-top:20px;
  margin-bottom:20px;
  white-space:nowrap;
}

#ft__nav li {
  font-family:"Harenosora";
  display:inline-block;
  letter-spacing:normal;
  position:relative;
}

#ft__nav li a {
  display:block;
  padding-left:1.5em;
  padding-right:1.5em;
}

#ft__nav li a:before {
  content:"";
  display:block;
  vertical-align:middle;
  width:1px;
  height:0.8em;
  background-color:rgba(59,50,50,0.3);
  position:absolute;
  left:0;
  top:50%;
  margin-top:-0.25em;
}

#ft__nav li:first-child a:before { display:none; }
.no-rgba #ft__nav li { font-size:87.5%; }
.no-rgba #ft__nav li a:before { background-color:#c4c1c1; margin-top:-0.45em; }

.copyright {
  font-family:"Lora";
  font-weight:100;
  font-size:68.8%;
  line-height:1;
}

.page-top {
  display:none;
  font-size:0;
}

@media screen and (max-width:767px) {
  footer {
    padding-top:2em;
    padding-bottom:2em;
  }
  
  #ft__nav {
    display:none;
  }
  
  .copyright {
    margin-top:1em;
  }
}

@media screen and (max-width:500px) {
  footer {
    padding-top:1.5em;
    padding-bottom:1.5em;
  }

  #ft__logo {
    width:280px;
    height:31px;
  }
}

@media screen and (max-width:360px) {
  #ft__logo {
    width:240px;
    height:26px;
  }
}


/*-----------------------------------------------------------------------------------
  pagetop
-----------------------------------------------------------------------------------*/

.page-top {
  display:none;
}

.lte-ie8 .page-top {
  display:none !important;
}

@media screen {
  .page-top {
    z-index:90;
    position:fixed;
    right:15px;
    bottom:15px;
    display:inline-block;
    display:none;
  }
    
  .page-top a {
    text-indent:100%;
    font-size:0;
    white-space:nowrap;
    overflow:hidden;
    text-decoration:none;
    color:#fff;
    display:block;
    background-color:#4f4137;
    text-align:center;
    width:50px;
    height:50px;
    border-radius:100%;
    position:relative;
    transition:background-color 0.2s ease;
  }
  
  .page-top a:after {
    content:"";
    display:inline-block;
    width:12px;
    height:12px;
    border-top:solid 1px #fff;
    border-left:solid 1px #fff;
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-4px;
    margin-left:-6px;
  }
}

@media print,screen and (min-width:768px) {
  .page-top:hover a {
    background-color:#a0325a;
  }
}

@media screen and (max-width:500px) {
  .page-top a {
    width:40px;
    height:40px;
  }
  
  .page-top a:after {
    width:8px;
    height:8px;
    margin-top:-3px;
    margin-left:-4px;
  }
}

@media print {
  .page-top {
    display:none !important;
  }
}



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

  99. parts
  
----------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
  tel
-----------------------------------------------------------------------------------*/

.l-tel {
  display:inline-block;
  position:relative;
  line-height:1;
}

.l-tel--no {
  display:inline-block;
}

.l-tel--no:before {
  content:"TEL.";
  display:inline-block;
  font-weight:normal;
  margin-right:0.25em;
}

@media screen and (max-width:767px) {
  .l-tel {
    display:block;
    box-sizing:border-box;
    background-color:#a0325a;
    padding:1em 1em 1.15em 1em;
    font-size:106.3%;
  }

  .l-tel,
  .l-tel:visited,
  .l-tel:hover {
    color:#fff;
  }

  .l-tel--taptocall {
    display:inline-block;
    position:relative;
    padding-left:6.75em;
  }

  .l-tel--taptocall:before,
  .l-tel--taptocall:after {
    position:absolute;
    left:0;
    top:50%;
    margin-top:-0.85em;
    font-size:75.0%;
  }
  
  .l-tel--taptocall:before {
    content:"Tap to Call";
    width:7em;
    height:2em;
    background:#fff;
    color:#a0325a;
    text-align:center;
    line-height:2.15em;
    white-space:nowrap;
  }
  
  .l-tel--taptocall:after {
    content:"";
    left:7em;
    box-sizing:border-box;
    width:2em;
    height:2em;
    border:1em solid transparent;
    border-left:1em solid #fff;
  }
  
  .l-tel--no {
    font-size:150.0% !important;
    font-weight:300;
  }
  
  .l-tel--no:before {
    display:none;
  }
}

@media screen and (max-width:420px) {
  .l-tel {
    font-size:100%;
  }
  
  .l-tel--taptocall {
    padding-left:6.25em;
  }
  
  .l-tel--taptocall:before,
  .l-tel--taptocall:after {
    font-size:68.8%;
  }
}


/*-----------------------------------------------------------------------------------
  ボタン
-----------------------------------------------------------------------------------*/

.l-Btn {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  display:inline-block;
  box-sizing:border-box;
  border:none;
  margin:0;
  outline:none;
  text-align:center;
  text-decoration:none;
  font-size:inherit;
  cursor:pointer;
  
  position:relative;
  padding:0.9em 2em 1em 2em;
  line-height:1;
  transition:background-color 0.2s ease, color 0.2s ease;
}
.l-Btn,
.l-Btn:hover
.l-Btn a,
.l-Btn a:hover {
  text-decoration:none;
}

.l-Btn__next,
.l-Btn__prev {
  display:inline-block;
  position:relative;
  line-height:1;
}


/* 右矢印 */
.rgba .l-Btn__next {
  padding-right:35px;
}

.l-Btn__next:before {
  content:"";
  display:inline-block;
  width:20px;
  height:1px;
  border-top:solid 1px #fff;
  position:absolute;
  right:0;
  top:50%;
  transition:right 0.2s ease, width 0.2s ease, border-color 0.2s ease;
}

.l-Btn__next:after {
  content:"";
  display:inline-block;
  width:8px;
  height:1px;
  border-top:solid 1px #fff;
  -ms-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  position:absolute;
  right:0;
  top:50%;
  margin-top:-3px;
  margin-left:-0.5px;
  transition:right 0.2s ease, border-color 0.2s ease;
}

.lte-ie8 .l-Btn__next:before,
.lte-ie8 .l-Btn__next:after { display:none; }

/* 左矢印 */
.rgba .l-Btn__prev {
  padding-left:35px;
}

.l-Btn__prev:before {
  content:"";
  display:inline-block;
  width:20px;
  height:1px;
  border-top:solid 1px #fff;
  position:absolute;
  left:0;
  top:50%;
  transition:left 0.2s ease, width 0.2s ease, border-color 0.2s ease;
}

.l-Btn__prev:after {
  content:"";
  display:inline-block;
  width:8px;
  height:1px;
  border-top:solid 1px #fff;
  -ms-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
  position:absolute;
  left:0;
  top:50%;
  margin-top:-3px;
  transition:left 0.2s ease, border-color 0.2s ease;
}

.lte-ie8 .l-Btn__prev:before,
.lte-ie8 .l-Btn__prev:after { display:none; }

@media print,screen and (min-width:768px) {
  .csstransitions .l-Btn:hover .l-Btn__next:before,
  .csstransitions .l-Btn:hover .l-Btn__prev:before {
    width:30px;
  }
  
  .csstransitions .l-Btn:hover .l-Btn__next:before,
  .csstransitions .l-Btn:hover .l-Btn__next:after {
    right:-10px;
  }
  
  .csstransitions .l-Btn:hover .l-Btn__prev:before,
  .csstransitions .l-Btn:hover .l-Btn__prev:after {
    left:-10px;
  }
}


/* animation ----------------------------------------*/

@media print,screen and (min-width:768px) {
  .csstransitions .l-aniBtn { overflow:hidden; display:inline-block; }
  
  .csstransitions .l-aniBtn .l-Btn:before {
    content:"";
    position:absolute;
    width:150%;
    height:0;
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%) rotate(-60deg);
    transition:all 0.3s cubic-bezier(0.4, 0.4, 0.4, 0.2);
  }
  
  .csstransitions .l-aniBtn .l-Btn:hover:before {
    height:800%;
  }
}


/* 白線 ----------------------------------------*/

.l-Btn--whiteLine { border:1px solid rgba(255,255,255,0.8); }
.no-rgba .l-Btn--whiteLine { border:1px solid #ecd6de; }
@media print,screen and (min-width:768px) {
  .csstransitions .l-aniBtn .l-Btn--whiteLine:before { background-color:#fff !important; }
  .l-no-aniBtn.l-Btn--whiteLine:hover,
  .no-csstransitions .l-Btn--whiteLine:hover { background-color:#fff; }
  .l-Btn--whiteLine:hover { color:#a0325a !important; }
  
  .l-Btn--whiteLine:hover .l-Btn__prev:before,
  .l-Btn--whiteLine:hover .l-Btn__prev:after,
  .l-Btn--whiteLine:hover .l-Btn__next:before,
  .l-Btn--whiteLine:hover .l-Btn__next:after { border-color:#a0325a; }
}

.l-Btn--whiteLine,
.l-Btn--whiteLine:visited,
.l-Btn--whiteLine:hover,
.l-Btn--whiteLine a,
.l-Btn--whiteLine a:visited,
.l-Btn--whiteLine a:hover {
  color:#fff;
}


/* 茶色 ----------------------------------------*/

.l-Btn--brown { background-color:#4f4137; }
@media print,screen and (min-width:768px) {
  .csstransitions .l-aniBtn .l-Btn:before { background-color:#a0325a; }
  .l-no-aniBtn.l-Btn--brown:hover,
  .no-csstransitions .l-Btn--brown:hover { background-color:#a0325a; }
}

.l-Btn--brown,
.l-Btn--brown:visited,
.l-Btn--brown:hover,
.l-Btn--brown a,
.l-Btn--brown a:visited,
.l-Btn--brown a:hover {
  color:#fff;
}