@charset "UTF-8";

a { text-decoration: none; }


.cmn-btn { display: inline-block; position: relative; width: 100%; font-family: "Roboto Condensed", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-weight: 400; text-align: center; }

@media (min-width: 768px) { .cmn-btn { font-size: 14px; line-height: 74px; } }

@media (max-width: 767px) { .cmn-btn { font-size: 12px; line-height: 55px; } }

.cmn-btn[target="_blank"]:before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 3px; background-repeat: no-repeat; background-position: 0 0; background-size: cover; }

.cmn-btn__line:before, .cmn-btn__line:after { content: ''; display: block; position: absolute; }

.cmn-btn__line:after { z-index: 1; }

.cmn-btn__line--top:before, .cmn-btn__line--top:after { top: 0; left: 0; width: 100%; height: 1px; }

.cmn-btn__line--right:before, .cmn-btn__line--right:after { top: 0; right: 0; width: 1px; height: 100%; }

.cmn-btn__line--bottom:before, .cmn-btn__line--bottom:after { bottom: 0; left: 0; width: 100%; height: 1px; }

.cmn-btn__line--left:before, .cmn-btn__line--left:after { top: 0; left: 0; width: 1px; height: 100%; }

.cmn-btn__txt span { letter-spacing: 0.11em; }

.cmn-btn--dark { background-color: #ff9c00; margin:auto; display: block; width: 220px; height: 50px; line-height: 50px;}
.cmn-btn--dark:hover{
  text-decoration: none;
}
.cmn-btn--dark[target="_blank"]:before { background-image: url(../images/ico-blank-white.svg); }

@media (min-width: 768px) { .cmn-btn--dark:hover[target="_blank"]:before { background-image: url(../images/ico-blank-black.svg); } }

.cmn-btn--dark .cmn-btn__line:before { background-color: transparent; }

.cmn-btn--dark .cmn-btn__line:after { background-color: #22252c; }

.cmn-btn--dark .cmn-btn__txt span { color: #fff; }

.cmn-btn--border-dark[target="_blank"]:before { background-image: url(../images/ico-blank-black.svg); }

@media (min-width: 768px) { .cmn-btn--border-dark:hover[target="_blank"]:before { background-image: url(../images/ico-blank-white.svg); } }

.cmn-btn--border-dark .cmn-btn__line:before { background-color: #22252c; }

.cmn-btn--border-dark .cmn-btn__line:after { background-color: #fff; }

.cmn-btn--border-dark .cmn-btn__txt span { color: #22252c; }

.cmn-btn--border-white[target="_blank"]:before { background-image: url(../images/ico-blank-white.svg); }

@media (min-width: 768px) { .cmn-btn--border-white:hover[target="_blank"]:before { background-image: url(../images/ico-blank-black.svg); } }

.cmn-btn--border-white .cmn-btn__line:before { background-color: #fff; }

.cmn-btn--border-white .cmn-btn__line:after { background-color: #22252c; }

.cmn-btn--border-white .cmn-btn__txt span { color: #fff; }

.cmn-btn--contact .cmn-btn__txt span { letter-spacing: 0.06em; }

.cmn-btn--guide .cmn-btn__txt span { letter-spacing: 0.06em; }

/**********************************
keyframes
**********************************/
@-webkit-keyframes bg-dark-transparent { 0% { background-color: #22252c; }
  100% { background-color: transparent; } }
@keyframes bg-dark-transparent { 0% { background-color: #22252c; }
  100% { background-color: transparent; } }

@-webkit-keyframes bg-transparent-dark { 0% { background-color: transparent; }
  100% { background-color: #22252c; } }

@keyframes bg-transparent-dark { 0% { background-color: transparent; }
  100% { background-color: #22252c; } }

@-webkit-keyframes bg-transparent-white { 0% { background-color: transparent; }
  100% { background-color: #fff; } }

@keyframes bg-transparent-white { 0% { background-color: transparent; }
  100% { background-color: #fff; } }

@-webkit-keyframes dark-to-white { 0% { color: #22252c; }
  100% { color: #fff; } }

@keyframes dark-to-white { 0% { color: #22252c; }
  100% { color: #fff; } }

@-webkit-keyframes white-to-dark { 0% { color: #fff; }
  100% { color: #22252c; } }

@keyframes white-to-dark { 0% { color: #fff; }
  100% { color: #22252c; } }

@-webkit-keyframes line-horizontal { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); }
  100% { -webkit-transform: scaleX(1); transform: scaleX(1); } }

@keyframes line-horizontal { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); }
  100% { -webkit-transform: scaleX(1); transform: scaleX(1); } }

@-webkit-keyframes line-vertical { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); }
  100% { -webkit-transform: scaleY(1); transform: scaleY(1); } }

@keyframes line-vertical { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); }
  100% { -webkit-transform: scaleY(1); transform: scaleY(1); } }

/**********************************
animation settings
**********************************/
.cmn-btn__line--top:after, .cmn-btn__line--bottom:after { -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); }

.cmn-btn__line--right:after, .cmn-btn__line--left:after { -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); }

.cmn-btn__line--top:after { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; }

.cmn-btn__line--right:after { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; }

.cmn-btn__line--bottom:after { -webkit-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; }

.cmn-btn__line--left:after { -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; }

/**********************************
hover
**********************************/
@media (min-width: 768px) { .cmn-btn--dark:hover { -webkit-animation: bg-dark-transparent 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) 0s alternate forwards; animation: bg-dark-transparent 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) 0s alternate forwards; }
  .cmn-btn--dark:hover .cmn-btn__line--top:after, .cmn-btn--dark:hover .cmn-btn__line--bottom:after { -webkit-animation: line-horizontal 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s alternate both; animation: line-horizontal 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s alternate both; }
  .cmn-btn--dark:hover .cmn-btn__line--right:after, .cmn-btn--dark:hover .cmn-btn__line--left:after { -webkit-animation: line-vertical 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s alternate both; animation: line-vertical 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(1) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.23s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.23s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(2) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.26s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.26s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(3) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.29s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.29s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(4) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.32s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.32s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(5) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.35s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.35s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(6) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.38s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.38s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(7) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.41s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.41s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(8) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.44s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.44s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(9) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.47s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.47s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(10) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.50s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.50s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(11) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.53s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.53s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(12) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.56s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.56s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(13) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.59s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.59s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(14) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.62s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.62s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(15) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.65s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.65s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(16) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.68s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.68s alternate both; }
  .cmn-btn--dark:hover.cmn-btn--view .cmn-btn__txt span:nth-of-type(17) { -webkit-animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.71s alternate both; animation: white-to-dark 0s cubic-bezier(0.39, 0.575, 0.565, 1) 0.71s alternate both; }