/* 
----------------------------------
	定義
----------------------------------
*/
:root {
   /* Color styles */
   --ack-basic-white: rgba(255, 255, 255, 1);
   --ack-basic-black: rgba(0, 0, 0, 1);
   --ack-basic-transparent: rgba(255, 255, 255, 0);
   --ack-color-warning-red: rgba(220, 53, 69, 1);
   --ack-color-primary: rgb(101, 213, 78);
   --ack-color-primary-deep: rgba(31, 139, 10, 1);
   --ack-color-secondary: rgba(253, 222, 47, 1);
   --ack-color-secondary-20: rgba(253, 222, 47, 0.20000000298023224);
   --ack-color-tertiary: rgba(255, 107, 139, 1);
   --ack-color-quaternary: rgba(56, 205, 255, 1);
   --ack-color-pink: #FFEBED;
   --ack-text-default: rgba(83, 83, 83, 1);
   --ack-text-sub: rgba(172, 172, 172, 1);
   --ack-border-default: rgba(209, 209, 209, 1);
   --ack-gradient: linear-gradient(90deg, #00F5A0 0%, #00D9F5 100%);
   

   /* Text-size styles */
   --ack-basic: 12px;

   /* Effect styles */
   --ack-default:  0px 0px 10px rgba(0, 0, 0, 0.3)
}

/* 
----------------------------------
 基本
----------------------------------
*/

body {
  font-size: 16px;
  color: var(--ack-text-default);
}

/* primary */
.primary-color {
   color: var(--ack-color-primary) !important;
}
.primary-color-base {
   background-color: var(--ack-color-primary) !important;
}

/* .primary-deep */
.primary-deep-color {
   color: var(--ack-color-primary-deep) !important;
}
.primary-deep-color-base {
   background-color: var(--ack-color-primary-deep) !important;
}

/* secondary */
.secondary-color {
   color: var(--ack-color-secondary) !important;
}
.secondary-color-base {
   background-color: var(--ack-color-secondary) !important;
}

/* secondary-20 */
.secondary-20-color {
   color: var(--ack-color-secondary-20) !important;
}
.secondary-20-color-base {
   background-color: var(--ack-color-secondary-20) !important;
}

/* tertiary */
.tertiary-color {
   color: var(--ack-color-tertiary) !important;
}
.tertiary-color-base {
   background-color: var(--ack-color-tertiary) !important;
}

/* quaternary */
.quaternary-color {
   color: var(--ack-color-quaternary) !important;
}
.quaternary-color-base {
   background-color: var(--ack-color-quaternary) !important;
}

/* tertiary */
.warning-red {
   color: var(--ack-color-warning-red) !important;
}
.warning-red-base {
   background-color: var(--ack-color-warning-red) !important;
}

.ack-menu-modal-content{
   height : 100%;
   border-radius: 40px;
   border : none;
}

.ack-main-height-adj {
   padding-top: 140px;
}

.ack-main-content{
   margin : 0px -15px;
   border-radius : 40px 40px 0 0;
   padding : 25px 16px 50px 16px;
   background : var(--ack-basic-white);
}

.background-top-image-container {
   z-index:-1;
   background-color: var(--ack-color-primary);
   position: absolute;
   top: 0px;
   left:0px;
   width: 100%;
}

.background-top-image {
   height: 217px;
}

.page-title-container {  
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 80px;
   left:0px;
   width:100%;
   height: 60px;
   align-items: center;
}

.page-title {
   color: #FFF;
   font-size: 18px;
   font-weight: 700;
   line-height: 130%;
   letter-spacing: 0.36px;
}

.tenshizu-top-container {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 110px;
   right:40px;
   width:40px;
}

.tenshizu-top-image {
    width: 100%;
    height: auto;
    transform: translateZ(0); 
}

.tenshizu-close-container {
   display: flex;
   flex-direction: column;
   align-items: center; 
   margin-top: auto;
   width :100%;
   height: auto;
   align-items: center;
}

.tenshizu-close-container > button{
    outline: none !important;
   box-shadow: none !important
}

.tenshizu-close-image {
   width: 50px;
}

.item-title {
   color: var(--ack-color-primary-deep);
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 130%; 
   letter-spacing: 0.32px;
}

a:hover  {
  opacity: 0.5;
}

.top-category {
   color: var(--ack-color-primary-deep);
   text-overflow: ellipsis;
   font-family: "Noto Sans JP";
   font-size: 18px;
   font-style: normal;
   font-weight: 700;
   line-height: 130%; /* 20.8px */
   letter-spacing: 0.32px;
}

/* ボタン */
.btn:active{
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   filter: brightness(0.95);
}

button.questionnaire-answer{
   background-color: var(--ack-color-primary);
   border-color: var(--ack-color-primary);
}

button.btn-back{
  color: var(--ack-color-primary) !important;
  background-color: #fff;
  border: 1px solid var(--ack-color-primary);
}

/* input */
input,
select,
textarea {
   border: 1px solid var(--ack-color-primary) !important;
   border-radius: 10px !important;
   outline: none !important;
   color: var(--ack-text-default);
}

input[type=time] {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
}

input[type=checkbox] {
	position: relative;
	border-radius: 7px !important;
   flex-shrink: 0;
}

input:not([type=checkbox]):not([type=radio]):focus,
input:not([type=checkbox]):not([type=radio]):active,
input:not([type=checkbox]):not([type=radio]):target,
input:not([type=checkbox]):not([type=radio]):focus-visible,
select:focus,
select:active,
select:target,
select:focus-visible,
textarea:focus,
textarea:active,
textarea:target,
textarea:focus-visible {
	outline: none !important;
	border: 3px solid var(--ack-color-primary) !important;
}

/* error */
.form-group input.input-error-frame,
.dropdown select.input-error-frame,
.form-group textarea.input-error-frame,
.ticket-type-container.input-error-frame {
	background-color: var(--ack-color-pink) !important;
	border-color: var(--ack-color-warning-red) !important;
	border-width: 1px !important;
}

#top-error-message{ 
   width: 100%;
   background-color: var(--ack-color-pink) !important;
	border-color: var(--ack-color-warning-red) !important;
   color: var(--ack-color-warning-red) !important;
}

.form-error-message {
	color: var(--ack-color-warning-red) !important;
}

.required {
   background: var(--ack-color-warning-red) !important;
	border-color: var(--ack-color-warning-red) !important;
}

/* 
----------------------------------
 ヘッダー
----------------------------------
*/
.ack-site-header {
   height:80px;
}
.ack-header-title {
   position: relative;
   background: #FFF;
   height:100%;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
   justify-content: space-between;
   flex-shrink: 0;
}
.header-image-container img{
   padding : 15px;
   height:100%;
   width :auto;
}

/* 
----------------------------------
 フッター
----------------------------------
*/
.wrapper footer {
   font-size: 14px;
   color: #231815;
}

#re-top {
   position: fixed;
   bottom: 20px;
   right: 80px;
   z-index: 1000;
}

.re-topB img{  
	width: 20px;
   height: 20px;
}

/* 
----------------------------------
 ハンバーガーメニュー
----------------------------------
*/
.header-menu-container {
   display: none;
   flex-direction: column;
   align-items: center; 
   height:80px;
   width: 80px;
   padding : 20px 25px;
   border-radius: 0 0 0 40px;
   background: var(--ack-basic-white, #FFF);
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.30);
   z-index: 1051;
}

.header-menu-close-container {
   position: absolute;
   top:0px;
   right: 0px;
   display: flex;
   flex-direction: column;
   align-items: center; 
   height:80px;
   width: 80px;
   padding : 20px 25px;
   border-radius: 0 0 0 40px;
   background: var(--ack-basic-white, #FFF);
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.30);
   z-index: 1051;
}

#modal-menu {
   background: var(--ack-color-primary);
}

.ack-menu-modal-dialog {
   display: flex !important;
   align-items: center;
   height : 90%;
   padding : 15px;
}

#hamburger-button {
   border-radius: 0;
   height:26px;
   width: 26px;
   padding: 0;
   outline: none !important;
   box-shadow: none !important
}

.menu-text {
   width: 100%;
   height:10px;
   color: var(--ack-text-sub);
   text-align: center;
   font-size: 10px;
   font-style: normal;
   font-weight: 700;
   line-height: 130%; /* 13px */
   letter-spacing: 0.2px;
}

.menu-line {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.menu-line span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
}

.menu-line, .menu-line span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}

.menu-line span:nth-of-type(3) {
   bottom: 0;
   background : var(--ack-color-tertiary);
}

.menu-line span:nth-of-type(2) {
   top: 10px;
   background : var(--ack-color-secondary);
}

.menu-line span:nth-of-type(1) {
   top: 0;
   background : var(--ack-color-quaternary);
}

body:has(#modal-menu.show) #hamburger-menu-line span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}

body:has(#modal-menu.show) #hamburger-menu-line span:nth-of-type(2) {
  opacity: 0;
}

body:has(#modal-menu.show) #hamburger-menu-line span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}

/* 
----------------------------------
 メニュー
----------------------------------
*/
#modal-menu .modal-body {
   display: flex !important;
   flex-direction: column !important;
   padding: 50px 20px!important;
}

/* モーダルボディのコンテンツが長い場合にスクロールを有効にする */
.modal-body {
   overflow-y: auto;
}

body.is-menu-open .modal-backdrop {
    background-color: transparent !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease-out !important; 
}

body.is-menu-open .modal-backdrop.show {
    opacity: 1 !important; 
}

#modal-menu.fade .modal-dialog {
    transform: none !important;
    transition: none !important;
}

.fixed-bottom-btn-container {
   padding-bottom: env(safe-area-inset-bottom);
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

body.is-menu-open .fixed-bottom-btn-container {
    z-index: -1 !important; 
    visibility: hidden;
    transition: visibility 0s linear 0.1s;
}

.user-name-container {
   width: 100%;
   word-break: break-all !important;
}

.user-name {
   color: var(--ack-text-default);
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 130%;
   letter-spacing: 0.48px;
}

.user-name-honorific {
   margin-left: 5px;
   color: var(--ack-text-default);
   font-size: 12px;
   font-style: normal;
   font-weight: 700;
   line-height: 130%
   letter-spacing: 0.36px;
}

.nav-item {
   padding-left: 35px !important;
}

.nav-item a::before {
   content: '';
   display: inline-block;
   position: absolute;
   top: 8px;
   left: -20px;
   width: 15px;
   height: 5px;
   background:  var(--ack-color-secondary);
   border-radius: 4px;
}

/* ヘッダーメニュー（PC） */
.header-menu-ul {
   display: flex;
   margin : 0px;
   padding: 0px;
}
.header-menu-ul > .sp-ham-menu {
   background :transparent;
   padding : 0px;
}
.header-menu-ul > .nav-item{
   display: flex;
   justify-content: center;
   align-items: center;
      margin-top : 0px !important;
}
.header-menu-ul > .nav-item > .nav-link{
      margin-top : 0px !important;
}
.header-menu-ul > .sp-ham-menu a{
   font-size: 14px !important;
}

/* 
----------------------------------
 ログイン
----------------------------------
*/
.row-title-login {
    display: none !important;
}


/* 
----------------------------------
 メールアドレス・パスワード変更
----------------------------------
*/
.unusable-mail-wrapper{
   background-color: var(--ack-color-secondary-20);
   color: var(--ack-text-default);
   border-radius: 10px;
   padding: 15px 10px !important;
}
/* 
----------------------------------
 パスワード初期設定
----------------------------------
*/
#resetModal input[style*="border-color:red"] {
   background-color: var(--ack-color-pink) !important;
	border-color: var(--ack-color-warning-red) !important;
	border-width: 1px !important;
}

/* 
----------------------------------
 チケット一覧
----------------------------------
*/
.ticket-card-container {
   border-radius: 30px;
   overflow: hidden;
   color: var(--ack-text-default);
}

.ticket-card-next {
   border-radius: 30px 0px 0px 0px;
}

.ticket-card-title {
   color: var(--ack-text-default) !important;
   font-size: 16px;
   font-weight: 700;
   line-height: 130%;
   letter-spacing: 0.32px;
   margin-bottom: 0px;
}

.ticket-card-detail {
   font-weight: 400;
   line-height: 130%;
   letter-spacing: 0.32px;
   gap : 10px;
}

.ticket-card-detail-span{
   font-size: 16px;
}

.ticket-card-sub-text {
   color: var(--ack-text-sub);
   font-size: 12px;
   font-weight: 400;
   line-height: 130%;
   letter-spacing: 0.18px;
}

.ticket-card-having {
   color: var(--ack-text-default);
   font-size: 12px;
   font-weight: 400;
   line-height: 130%;
   letter-spacing: 0.18px;
}

/* 
----------------------------------
 チケット詳細
----------------------------------
*/
.ticket-title-text {
   color: var(--ack-color-primary-deep);
}  

.ticket-valid-date {
   display: flex;
   width: 50%;
   padding: 15px 10px;
   justify-content: center;
   align-items: center;
   gap: 10px;
   flex-shrink: 0;
   border-radius: 10px;
   background: #FFF1AB;
   white-space: nowrap; 
   -webkit-text-size-adjust: 100%;
}

.ticket-valid-date .ticket-card-sub-text {
   color: var(--ack-color-primary-deep);
}

.owned-num {
  color: var(--ack-color-primary-deep);
}
.owned-per {
   display: flex;
   align-items: flex-end;
   height: 60%;
   color: var(--ack-text-default);
}

.ticket-use-button-color {
  background-color: var(--ack-color-tertiary) !important;
}

.ticket-cancel-button-color {
  background-color: var(--ack-border-default) !important;
}

.ticket-deliver-button-color {
  background-color: var(--ack-color-quaternary) !important;
}

.ticket-staus-icon.deliver{
   background-color: var(--ack-color-quaternary) !important;
}

.ticket-staus-icon.cancel{
   background-color: var(--ack-border-default) !important;
}

.ticket-staus-icon.used{
   background-color: var(--ack-color-warning-red) !important;
}

.ticket-staus-icon.unused{
   background-color: var(--ack-color-primary) !important;
}


/* 
----------------------------------
 チケット枚数入力
----------------------------------
*/
.ticket-form-label {
   color: var(--ack-color-primary-deep);
   margin-left: 20px !important;
}

.ticket-form-label::before {
   content: '';
   display: inline-block;
   position: absolute;
   top: 0px;
   left: -20px;
   width: 10px;
   height: 25px;
   background: var(--ack-color-secondary);
}


/* 
----------------------------------
 チケット利用
----------------------------------
*/
#feature_ticket_0 .questionnaire-contents,
#feature_ticket_1 .questionnaire-contents
{
   position: relative;
   font-size: 18px;
   font-weight: 400;
   line-height: 130%;
   letter-spacing: 0.36px;
   color: var(--ack-color-primary-deep);
   margin-left: 20px !important;
}

#feature_ticket_0 .questionnaire-contents::before,
#feature_ticket_1 .questionnaire-contents::before
{
   content: '';
   display: inline-block;
   position: absolute;
   top: 15px;
   left: -20px;
   width: 10px;
   height: 25px;
   background: var(--ack-color-secondary);
}

#feature_ticket_1 .questionnaire-contents::before {
   top: 7px;
}

.question_explain {
   font-size: 16px;
   color: var(--ack-text-default);
}

.ticket-use-complete-button-color {
   background: var(--ack-gradient);
}

.ticket-slide .slick-arrow:before {
    color: var(--ack-color-primary);
}


/* 
----------------------------------
スマホ・タブレット用レイアウト
----------------------------------
*/
@media screen and (max-width: 768px) {
   body {
      font-size: 16px;
   }
   .questionnaire-answer {
      width: 70% !important;
   }

   .header-menu-ul {
      display: none !important;
   }

   .user-name {
      font-size: 24px;
   }

   .user-name-honorific {
      font-size: 18px;
   }

   .header-menu-container {
      display: flex;
      position: absolute; 
      right: 0px; 
      flex-shrink: 0; 
      white-space: nowrap;
   }

   #re-top {
      right: 20px;
   }
   .ticket-valid-date {
      width: 90%;
   }

   #ticket-confirm-notice {
      font-size: 95%;
   }

   #top-error-message {
      margin: 15px 0px 20px 0px;
   }
}