/*! ========================================================================
===========================================================================

	pamphlet.css
	---------------------------

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

.convBtn {
    display: inline-block;
}
.comingsoon {
  cursor: inherit;
  position: relative;
  pointer-events: none;
}
.comingsoon::before {
  content: "";
  position: absolute;
  background-color:rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
}
.comingsoon::after {
  position: absolute;
  left: 0;
  top: calc(50% - 15px);
  content: "coming soon";
  color: #fff;
  z-index: 1;
  font-size: 14px;
  width: 100%;
  text-align: center;
}

.tab-view li {
    display: none;
}
.tab-view li.active {
    display: block;
}
.btn-tab-view {
    display: flex;
}
.btn-tab-view li {
    width: calc(25% - 10px);
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.btn-tab-view li:last-child {
    margin-right: 0;
}
.btn-tab-view li.active {
    cursor: inherit;
    pointer-events: none;
}
.btn-tab-view li.active::before {
    content: "";
    background-color: rgba(255, 255, 255, 0.5);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
}
.anchor-secret {
    display: flex;
}
.anchor-secret li {
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.anchor-secret li:last-child {
    margin-right: 0;
}
.anchor-secret li a::before {
    content: "";
    background-color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.anchor-secret li a:hover::before {
    opacity: .3;
    cursor: pointer;
}
#secret {
    margin-bottom: -85px;
}
.page--pamphlet {
  background: #222;
  color: #fff
}
.page--pamphlet .pageContents {
  padding-bottom: 40px;
  font-size: 16px
}
.page--pamphlet .pageHeader {
  padding: 80px 0 0;
  text-align: center
}
.page--pamphlet .pageHeader .pageTitle {
  margin-bottom: 20px
}
.page--pamphlet .pageHeader .pageTitle .en {
  display: block;
  margin-bottom: 0;
  font-size: 42px;
  letter-spacing: .1em;
  text-transform: uppercase
}
.page--pamphlet .pageHeader .pageTitle .ja {
  display: block;
  font-size: 15px;
  letter-spacing: .2em
}
.page--pamphlet .pageHeader .pageTitle .ja strong {
  font-size: 24px;
  font-weight: normal
}
.page--pamphlet .pageHeader .p-heading {
  margin: 1em 0;
  padding-bottom: 1em;
  font-size: 20px;
}
.page--pamphlet .pageHeader .p-lead {
  font-size: 18px;
  line-height: 1.8
}
@media(max-width: 700px) {
  .page--pamphlet .pageHeader .p-lead {
    font-size: 16px
  }
}
.l-innerBox {
  max-width: 880px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border: 1px solid #c79f62;
  text-align: center
}
@media(max-width: 700px) {
  .l-innerBox {
    padding: 0 30px 5%
  }
}
.l-innerBox > .p-heading {
  color: #c79f62;
  border-bottom: 1px solid #c79f62;
}
.formBlock form {
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
.formBlock form:after {
  content: "";
  display: block;
  clear: both
}

.formBlock form input[type=password] {
width: 100%;
height: 90px;
border-radius: 4px;
}

.formBlock form input[type=button] {
  background-image: url("../img/pamphlet/btn-form.svg");
  background-repeat: no-repeat;
  background-color: transparent;
  width: 42px;
  height: 42px;
  box-shadow: none;
  outline: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 24px;
  right: 12px;
  text-indent: -9999px;
}
.formBlock form input[type=button]:hover {
  opacity: .5;
}
@media(min-width: 701px) {
  .formBlock form input[type=button] {
    float: right;
    border-radius: 0 4px 4px 0
  }
}
.formBlock form .error {
  clear: both
}
.formBlock .notes {
  display: block;
  margin-top: 1em;
  text-align: center
}
.flow {
  margin-bottom: 30px
}
.flow:after {
  content: "";
  display: block;
  clear: both
}
.flow .flow__step {
  position: relative;
  text-align: center
}
.flow .flow__step:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  display: block;
  width: 0;
  height: 0;
  margin-left: 15px;
  border: 10px solid transparent
}
@media(min-width: 701px) {
  .flow .flow__step {
    float: left;
    width: 30%;
    margin-right: 5%
  }
  .flow .flow__step:after {
    border-left-color: #ccc
  }
  .flow .flow__step:nth-of-type(3n) {
    margin-right: 0
  }
  .flow .flow__step:nth-of-type(3n):after {
    display: none
  }
}
@media(max-width: 700px) {
  .flow .flow__step {
    margin-bottom: 0
  }
  .flow .flow__step:after {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    border-top-color: #ccc
  }
  .flow .flow__step:last-child {
    margin-bottom: 0
  }
  .flow .flow__step:last-child:after {
    display: none
  }
}
.convBtns {
  text-align: center
}
.convBtns .convBtn {
  display: inline-block;
  width: 320px;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px;
  border-radius: 4px;
  background: #c1272d;
  background: #c14b4c;
  background: linear-gradient(to right, #c14b4c 0%, #622627 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c14b4c", endColorstr="#622627", GradientType=1);
  font-size: 20px;
  text-decoration: none;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 2
}
.convBtns .convBtn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 200%;
  height: 200%;
  background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
  transform: translate3d(-100%, 0, 0);
  -webkit-animation: shinyBtn 3s linear 1s infinite;
  animation: shinyBtn 3s linear 1s infinite
}
@-webkit-keyframes shinyBtn {
  0% {
    transform: translate3d(-100%, 0, 0)
  }
  30% {
    transform: translate3d(100%, 0, 0)
  }
  100% {
    transform: translate3d(100%, 0, 0)
  }
}
@keyframes shinyBtn {
  0% {
    transform: translate3d(-100%, 0, 0)
  }
  30% {
    transform: translate3d(100%, 0, 0)
  }
  100% {
    transform: translate3d(100%, 0, 0)
  }
}
@media(max-width: 700px) {
  .convBtns .convBtn {
    width: 100%;
    font-size: 17px
  }
}


[type=text], [type=password], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=week], [type=email], [type=number], [type=search], [type=tel], [type=time], [type=url], [type=color], textarea {
    display: block;
    width: 100%;
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid #cacaca;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(10, 10, 10, .1) inset;
    font-size: 16px;
    font-size: 1.6rem;
    color: #0a0a0a;
    transition: box-shadow .5s ease 0s, border-color .25s ease-in-out 0s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance:none
}

[type=text]:focus, [type=password]:focus, [type=date]:focus, [type=datetime]:focus, [type=datetime-local]:focus, [type=month]:focus, [type=week]:focus, [type=email]:focus, [type=number]:focus, [type=search]:focus, [type=tel]:focus, [type=time]:focus, [type=url]:focus, [type=color]:focus, textarea:focus {
    background-color: #fefefe;
    border: 1px solid #8a8a8a;
    box-shadow: 0 0 5px #cacaca;
    outline: none;
    transition:box-shadow .5s ease 0s, border-color .25s ease-in-out 0s
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color:#cacaca
}

select {
    width: 100%;
    background-color: #fefefe;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%28138, 138, 138%29"></polygon></svg>');
    background-origin: content-box;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 9px 6px;
    border: 1px solid #cacaca;
    border-radius: 4px;
    font-family: inherit;
    font-size: 16px;
    font-size: 1.6rem;
    margin: 0 0 1rem;
    padding: .5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance:none
}

label {
    display:block
}

fieldset {
    padding: .5em;
    border:1px solid #cacaca
}

legend {
    margin-bottom: .5em;
    margin: 0 0 -0.25em 0;
    padding: .5em;
    background:#fff
}

fieldset > label {
    display: inline-block;
    margin-right: 1em;
    margin-bottom: .5em;
    padding: .5em;
    border-radius: 4px;
    cursor: pointer;
    transition:background .2s
}

fieldset > label:hover {
    background:#dfdfdf
}

input:disabled, input[readonly], textarea:disabled, textarea[readonly] {
    background-color: #e6e6e6;
    cursor:not-allowed
}

[type=submit], [type=button] {
    -moz-appearance: none;
    border-radius:0
}

input[type=search] {
    box-sizing:border-box
}

[type=checkbox] + label, [type=radio] + label {
    display: inline-block;
    margin-bottom: 0;
    margin-left: .5rem;
    margin-right: 1rem;
    vertical-align:baseline
}

[type=checkbox] + label[for], [type=radio] + label[for] {
    cursor:pointer
}

label > [type=checkbox], label > [type=radio] {
    margin-right:.5rem
}

[type=file] {
    width:100%
}


.u-tac {
    text-align:center !important
}

.u-tal {
    text-align:left !important
}

.u-tar {
    text-align:right !important
}

.u-clear {
    clear:both !important
}

.u-clearfix:after {
    content: "";
    display: block;
    clear:both
}

.u-hidden {
    display:none !important
}

.u-visibility-hidden {
    visibility:hidden !important
}

.u-fl {
    float:left !important
}

.u-fr {
    float:right !important
}

@media (min-width: 701px) {
    .u-hidden-desktop {
        visibility: hidden !important;
        display:none !important
    }
}

@media (max-width: 700px) {
    .u-hidden-mobile {
        visibility: hidden !important;
        display:none !important
    }
}

.u-fz10 {
    font-size:10px !important
}

.u-fz11 {
    font-size:11px !important
}

.u-fz12 {
    font-size:12px !important
}

.u-fz13 {
    font-size:13px !important
}

.u-fz14 {
    font-size:14px !important
}

.u-fz15 {
    font-size:15px !important
}

.u-fz16 {
    font-size:16px !important
}

.u-fz17 {
    font-size:17px !important
}

.u-fz18 {
    font-size:18px !important
}

.u-fz19 {
    font-size:19px !important
}

.u-fz20 {
    font-size:20px !important
}

.u-fz21 {
    font-size:21px !important
}

.u-fz22 {
    font-size:22px !important
}

.u-fz24 {
    font-size:24px !important
}

.u-fz28 {
    font-size:28px !important
}

.u-fz30 {
    font-size:30px !important
}

.u-fz32 {
    font-size:32px !important
}

.u-fz36 {
    font-size:36px !important
}

.u-fz40 {
    font-size:40px !important
}

.u-ff-sans {
    font-family: "YakuHanJP_Noto", "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}

.u-ff-serif {
    font-family: "YakuHanMP_Noto", "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Sawarabi Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif
}

.u-w-auto {
    width:auto !important
}

.u-w-0 {
    width:0 !important
}

.u-w-05p {
    width:5% !important
}

.u-w-10p {
    width:10% !important
}

.u-w-15p {
    width:15% !important
}

.u-w-20p {
    width:20% !important
}

.u-w-25p {
    width:25% !important
}

.u-w-30p {
    width:30% !important
}

.u-w-35p {
    width:35% !important
}

.u-w-40p {
    width:40% !important
}

.u-w-45p {
    width:45% !important
}

.u-w-50p {
    width:50% !important
}

.u-w-55p {
    width:55% !important
}

.u-w-60p {
    width:60% !important
}

.u-w-65p {
    width:65% !important
}

.u-w-70p {
    width:70% !important
}

.u-w-75p {
    width:75% !important
}

.u-w-80p {
    width:80% !important
}

.u-w-85p {
    width:85% !important
}

.u-w-90p {
    width:90% !important
}

.u-w-95p {
    width:95% !important
}

.u-w-100p {
    width:100% !important
}

.u-mt-0 {
    margin-top:0 !important
}

.u-pt-0 {
    padding-top:0 !important
}

.u-mt-auto {
    margin-top:auto !important
}

.u-pt-auto {
    padding-top:auto !important
}

.u-mt-S {
    margin-top:29px !important
}

.u-pt-S {
    padding-top:29px !important
}

.u-mt-M {
    margin-top:58px !important
}

.u-pt-M {
    padding-top:58px !important
}

.u-mt-L {
    margin-top:87px !important
}

.u-pt-L {
    padding-top:87px !important
}

.u-mt-XL {
    margin-top:116px !important
}

.u-pt-XL {
    padding-top:116px !important
}

.u-mr-0 {
    margin-right:0 !important
}

.u-pr-0 {
    padding-right:0 !important
}

.u-mr-auto {
    margin-right:auto !important
}

.u-pr-auto {
    padding-right:auto !important
}

.u-mr-S {
    margin-right:29px !important
}

.u-pr-S {
    padding-right:29px !important
}

.u-mr-M {
    margin-right:58px !important
}

.u-pr-M {
    padding-right:58px !important
}

.u-mr-L {
    margin-right:87px !important
}

.u-pr-L {
    padding-right:87px !important
}

.u-mr-XL {
    margin-right:116px !important
}

.u-pr-XL {
    padding-right:116px !important
}

.u-mb-0 {
    margin-bottom:0 !important
}

.u-pb-0 {
    padding-bottom:0 !important
}

.u-mb-auto {
    margin-bottom:auto !important
}

.u-pb-auto {
    padding-bottom:auto !important
}

.u-mb-S {
    margin-bottom:29px !important
}

.u-pb-S {
    padding-bottom:29px !important
}

.u-mb-M {
    margin-bottom:58px !important
}

.u-pb-M {
    padding-bottom:58px !important
}

.u-mb-L {
    margin-bottom:87px !important
}

.u-pb-L {
    padding-bottom:87px !important
}

.u-mb-XL {
    margin-bottom:116px !important
}

.u-pb-XL {
    padding-bottom:116px !important
}

.u-ml-0 {
    margin-left:0 !important
}

.u-pl-0 {
    padding-left:0 !important
}

.u-ml-auto {
    margin-left:auto !important
}

.u-pl-auto {
    padding-left:auto !important
}

.u-ml-S {
    margin-left:29px !important
}

.u-pl-S {
    padding-left:29px !important
}

.u-ml-M {
    margin-left:58px !important
}

.u-pl-M {
    padding-left:58px !important
}

.u-ml-L {
    margin-left:87px !important
}

.u-pl-L {
    padding-left:87px !important
}

.u-ml-XL {
    margin-left:116px !important
}

.u-pl-XL {
    padding-left: 116px !important
}