/*.....................................................................
	snippet.css
	version v4
	date 2025.06.26
.....................................................................*/

/*
  global
=======================================================================*/

[data-snippet|="getup"] {
  animation-direction: reverse !important;
}

[data-snippet|="getup-fade"] {
  animation: getup-fade .5s ease;
}

[data-snippet|="getup-foward"] {
  animation: getup-foward .5s ease-in;
}

[data-snippet|="getup-back"] {
  animation: getup-back .5s ease-in;
}

@keyframes getup-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes getup-foward {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes getup-back {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100%); }
}



/*
  table
=======================================================================*/
/* default */
[data-snippet|="table"] {
	table-layout: fixed;
  width: 100%;
}

/*
  User Interface
=======================================================================*/

/*
  ui (base) 入力のサポート
  data-help属性に入力の際のサポートを設定するとフォーカス時に表示
  <label data-snippet="ui">
    <input|textarea />
    <i data-help=""></i>
    <span>label text</span>
  </label>
.....................................................................*/

[data-snippet|="ui"] {
  display:  block;
  position: relative;  
}

label[data-snippet|="ui"] > i[data-help]::after {
  content: attr(data-help);
  white-space: pre;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: .5em;

  text-align: center;
  font-style: normal;

  box-shadow: 0 5px 15px rgba(125, 125, 125, 0.5);

  opacity: 0;  
  transform: translateY(-100%);
  transition: all 200ms ease-in;

}

label[data-snippet|="ui"] > input:focus + i[data-help]::after,
label[data-snippet|="ui"] > textarea:focus + i[data-help]::after,
label[data-snippet|="ui"] > select:focus + i[data-help]::after {
  opacity: 1;
  transform: translateY(0%);
}

label[data-snippet|="ui"] > span {
  display: inline-block;
  /* height: inherit; */
}

/*
  button
.....................................................................*/

[data-snippet|="ui-button"] {
  display: inline-block;
  margin: .25rem;
  padding: .5rem 1rem;
/*   width: 12rem; */
  min-width: 2rem;
  text-align: center;
  text-decoration: none;
  box-shadow: 0px .2rem .5rem rgba(0, 0, 0, 0.2);
  cursor:   pointer;
  
  transition: all .3s ease-in-out;
}

[data-snippet|="ui-button"][data-attr~="round"] {
  border-radius: 2rem;
}
 
/* 
  ui-choose 選択
  <label data-snippet="ui-choose">
    <input type="checkbox|radio" name="" value=""/>
    <i></i>
    <span>label text</span>
  </label>
.....................................................................*/
label[data-snippet|="ui-choose"] {
  margin-bottom: 1em;
  cursor: pointer;
}

label[data-snippet|="ui-choose"]::before {
  content: "";
  display: block;
  position: absolute;
  top:0;
  left:0;
  
  /* base size */
  width:  2rem;
  height: 2rem;

  /* base border-color bk-color */
  border: solid 1px rgba(139, 139, 139, 0.91);
}

label[data-snippet|="ui-choose"] > i {
  display:  inline-block;
  position: absolute;
  top: 0;
  left: 0;

  /* size */
  width:  2rem;
  height: 2rem;
    
  /* off color */
  border: solid 1px rgba(139, 139, 139, 0.91);

  transition: all 200ms ease-in;
}

label[data-snippet|="ui-choose"] > input:checked + i {
  
  /* on color */
  background-color: rgba(47, 47, 47, 1);
  border: none;

}

label[data-snippet|="ui-choose"] > span {
  /* label text left space */
  margin-left: 2rem; 
}

label[data-snippet|="ui-choose"] > input {
  opacity: 0;
  height: 0;
  width: 0;
}

/* 
  ui-choose attr
.....................................................................*/
label[data-snippet|="ui-choose"][data-attr~="round"]::before {
  border-radius: 1rem;
}

label[data-snippet|="ui-choose"][data-attr~="round"] > i {
  border-radius: 50%;
}

label[data-snippet|="ui-choose"][data-attr~="inline"]{
  display: inline-block;
}

label[data-snippet|="ui-choose"][data-attr~="slide"]::before {
  width: 4rem;
}

label[data-snippet|="ui-choose"][data-attr~="slide"] > input:checked + i {
  left: 2rem;
}

label[data-snippet|="ui-choose"][data-attr~="slide"] > span {
  /* label text left space */
  margin-left: 4.5rem; 
}

/* 
  ui-choose-pulldown プルダウン
.....................................................................*/

[data-snippet|="ui-pulldown"] > select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  position: relative;
  display: inline-block;
  padding: 0.25em;
  padding-right: 2em;
  background: transparent;
  z-index: 1;
  border: 1px solid #b4b3b3;
  border-radius: 5px;  
}

[data-snippet|="ui-pulldown"] > select::-ms-expand {
  display: none;
}

[data-snippet|="ui-pulldown"] {
  display: inline-block;
}

[data-snippet|="ui-pulldown"]::after {
  content: '';
  position: absolute;
  top: calc( 50% - .25em);
  left: calc(100% - 1.5em );
  width: 1em;
  height: 1em;
  background-image: url(https://kandy.xsrv.jp/snippets/aacss-v4/angle-down.svg);
  background-repeat: no-repeat;
  z-index: -1;
}

/*
  ui datepicker
.....................................................................*/
.aa-datepicker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  width: 98%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.87);  
}

.aa-datepicker .datepicker-open {
  display: inline-block;
  padding: 0.15em;
  background-color: #accad3;
  text-align: center;
  cursor: pointer;
}

.aa-datepicker .datepicker-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.aa-datepicker p {
  text-align: center;
}

.aa-datepicker .datepicker-header > * {
  display: inline-block;
  margin: 1em 1.15em;
}
.aa-datepicker .datepicker-weeks span,
.aa-datepicker .datepicker-days span{
  display: inline-block;
  margin: 0;
  padding: 0;
  width: calc(100% / 7 - 0.01em);
  height: 3em;
  text-align: center;
  line-height: 3em;
}

.aa-datepicker .datepicker-days span[data-today="true"] {
  color: #009e96;
  background-color: #96ffdc;
}
/* 指定日 */
.aa-datepicker .datepicker-days span[data-designatedday="true"]{
  color: #9e0000;
  background-color: #ff9797;  
}

/* 当月の日以外 */
[data-monthDay="false"]{
  color:#bcbcbc;
}

/* 
  ui-panel
  
  -- html --
  
  <label for="xxx"><elm>open</elm></label>
  ...
  ...
  <input id="xxx" type="checkbox" data-attr="from-top|from-bottom|from-left|from-right"/>
  <elm data-snippet="ui-panel">
    <label for="xxx"><elm>close</elm></label>
    
    <!-- panel content -->
    ...
  </elm>
  
  -- javascript --
  // パネルオープン時の下部レイヤーのスクロールストップ
  function panel(){
  
  	var panelStatus = document.querySelectorAll('input[id*="panel-from-"]');
  	var _panel      = panelStatus;
  	
  	if(panelStatus && panelStatus.length){
    	
    	for(var i=0,m=panelStatus.length; i<m; i++){
        
        var panel = panelStatus[i];
        
    	  panel.addEventListener('change', function(e){
          
          document.body.style.overflow = 'visible';
          
          for(var j=0,l=_panel.length; j<l; j++){
            
            if(_panel[j].checked){
              document.body.style.overflow = 'hidden';
              break;
            }
          
          }
          
        });
      }
    }
  	
  }

.....................................................................*/

input[type="checkbox"][data-attr*="from-"] {
  display: none;  
}

[data-snippet|="ui-panel"] {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%; 
  overflow-y: scroll;
  z-index: -1;
  background-color: #fff;
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1), z-index 0s 1s;
/* 
  transition: transform .8s cubic-bezier(0.645, 0.045, 0.355, 1)
              z-index 1s ,visibility 1s, opacity 1s;
 */

}

[data-attr~="from-top"] + [data-snippet|="ui-panel"]{
  transform: translate3d(0, -200%, 0);
}

[data-attr~="from-bottom"] + [data-snippet|="ui-panel"]{
  transform: translate3d(0, 100%, 0);
}

[data-attr~="from-left"] + [data-snippet|="ui-panel"]{
  transform: translate3d(-200%, 0, 0);
}

[data-attr~="from-right"] + [data-snippet|="ui-panel"]{
  transform: translate3d(200%, 0, 0);
}

input[type="checkbox"][data-attr*="from-"]:checked + [data-snippet|="ui-panel"] {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  z-index: 100;
  transform: translate3d(0, 0, 0);
  transition: transform .4s cubic-bezier(0.645, 0.045, 0.355, 1), z-index 0s;
/* 
  transition: transform .8s cubic-bezier(0.645, 0.045, 0.355, 1)
              ,z-index 1s ,visibility 1s, opacity .3s;
 */
}

/*
  tabset

  <elm data-snippet="ui-tabset">

    <!-- tabs -->
    <input type="radio" name="tabset" id="tab1" checked="checked"/>
    ...
      
    <label for="tab1">Tab1</label>
    ...
        
    <elm class="tab-panels">
      <elm>
        <p>tab1</p>
      </elm>
    </elm>
  
  </elm>
----------------------------------------------*/
/* base setting */
[data-snippet|="ui-tabset"] > input[type="radio"] {
  position: absolute;
  left: -200vw;  
}

[data-snippet|="ui-tabset"] > .tab-panels > * {
  display: none;  
}

[data-snippet|="ui-tabset"] > input:nth-of-type(1):checked ~ .tab-panels > *:nth-child(1),
[data-snippet|="ui-tabset"] > input:nth-of-type(2):checked ~ .tab-panels > *:nth-child(2),
[data-snippet|="ui-tabset"] > input:nth-of-type(3):checked ~ .tab-panels > *:nth-child(3),
[data-snippet|="ui-tabset"] > input:nth-of-type(4):checked ~ .tab-panels > *:nth-child(4),
[data-snippet|="ui-tabset"] > input:nth-of-type(5):checked ~ .tab-panels > *:nth-child(5)
{
  display: block;  
}

/* style */
[data-snippet|="ui-tabset"] > label {
  position: relative;
  display: inline-block;
  padding: 1rem;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
}

[data-snippet|="ui-tabset"] > label:hover {
  color: #700;
}

[data-snippet|="ui-tabset"] > input:nth-of-type(1):checked ~ label:nth-of-type(1),
[data-snippet|="ui-tabset"] > input:nth-of-type(2):checked ~ label:nth-of-type(2),
[data-snippet|="ui-tabset"] > input:nth-of-type(3):checked ~ label:nth-of-type(3),
[data-snippet|="ui-tabset"] > input:nth-of-type(4):checked ~ label:nth-of-type(4),
[data-snippet|="ui-tabset"] > input:nth-of-type(5):checked ~ label:nth-of-type(5)
 {
  border-color: #ccc;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

[data-snippet|="ui-tabset"] > .tab-panels {
  padding: 30px 0;
  border-top: 1px solid #ccc;
}

/*
  flow tabset

  <elm data-snippet="ui-flow-tabset">

    <!-- inputs -->
    <input type="radio" name="tabset" id="tab1" checked="checked"/>
    ...
    <!-- tabs -->
    <elm data-attr="tabs">
      <label for="tab1">Tab1</label>
      ...
    </elm>    
    <elm class="tab-panels">
      <elm>
        <p>tab1</p>
      </elm>
    </elm>
  
  </elm>
----------------------------------------------*/
/* base setting */
[data-snippet|="ui-flow-tabset"] {
  display: block;
}

[data-snippet|="ui-flow-tabset"] > input[type="radio"] {
  position: absolute;
  left: -200vw;  
}

[data-snippet|="ui-flow-tabset"] > .tab-panels > * {
  display: none;  
}

[data-snippet|="ui-flow-tabset"] > input:nth-of-type(1):checked ~ .tab-panels > *:nth-child(1),
[data-snippet|="ui-flow-tabset"] > input:nth-of-type(2):checked ~ .tab-panels > *:nth-child(2),
[data-snippet|="ui-flow-tabset"] > input:nth-of-type(3):checked ~ .tab-panels > *:nth-child(3),
[data-snippet|="ui-flow-tabset"] > input:nth-of-type(4):checked ~ .tab-panels > *:nth-child(4),
[data-snippet|="ui-flow-tabset"] > input:nth-of-type(5):checked ~ .tab-panels > *:nth-child(5)
{
  display: block;  
}

[data-snippet|="ui-flow-tabset"] > [data-attr|="tabs"] {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	overflow: hidden;
	overflow-x: auto;
}

/*
  flow
  itemがスライドする
  <elm data-snippet="flow">
    <elm>...</elm> <!-- flow item -->
    ...
  </elm>
  min-widthを個別に指定
=======================================================================*/
  
[data-snippet|="flow"] {
  position: relative;
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
}

[data-snippet*="flow"] > * {
  flex-shrink: 0;
}

/*
  fit
  imgのトリミング
  <elm data-snippet="fit-xxx">
    <img >
    ...
  </elm>
=======================================================================*/
[data-snippet|="fit-cover"] img {
  object-fit: cover;
  object-position: 50% 50%;
}

[data-snippet*="fit-contain"] img {
  object-fit: contain;
  object-position: 50% 50%;
}

/*
  spinner
  loading
=======================================================================*/

.spinner-a {
  position: fixed;
  top: calc(100vh - 50%);
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  border-top: solid 2px #1694be;
  border-left: solid 2px #1694be;
  border-radius: 50%;

  transform: rotate(0deg);

  animation: spinner-a .6s linear 1s infinite;
  z-index: 10000;
}

@keyframes spinner-a {
  0% {
    transform: rotate(0deg);
  }
  99.9%,to {
    transform: rotate(360deg);
  }
}


/*
  navi type1

  <header class="auto-hide-header"></header>
  <section class="concept"></section>
  <nav class="primary-nav">
    <ul data-layout="row-center-center" data-snippet="flow"> <!-- flow::=small screen -->
		  <li><a href="">xxx</a></li>
		</ul>
  </nav>
  <main class="content"></main>

  js
   sap://def/ui/navi/type1

=======================================================================*/
/* 
  header
.........................*/
.auto-hide-header {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100vw;
  height: 8rem;
  
  will-change: transform;
  transform: translateZ(0);
  transition: transform .5s;
  
  background-color: hsla(120, 5%, 60%, 0.9);
}

.auto-hide-header.is-hidden {
  transform: translateY(-8rem); /* .auto-hide-header height */
}

.auto-hide-header > * {
  
  display: flex;
  align-items: center;
  
  height: inherit;
  
  will-change: transform;
  transform: translateZ(0);  
  transition: height .5s, transform .5s;
  
}

.auto-hide-header.is-hidden > * {
  height: 5rem; /* .primary-nav height */
}

.auto-hide-header nav li {
  display: inline-block;  
}

.auto-hide-header nav li a {
  display: flex;
  align-items: center;
}



/* 
  cencept or slider etc
.........................*/
.concept {
  width: 100%;
  height: 50vh;
}

/* 
  navi
.........................*/
.primary-nav {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 5rem;
  overflow: hidden;
    
  will-change: transform;
  transform: translateZ(0);
  transition: transform .5s;
  
  background-color: hsla(300, 5%, 60%, 0.9);

}

.primary-nav.fixed {
  position: fixed;
  top: 8rem; /* auto-hide-header height */
}

.primary-nav.slide-up {
  /* min-width: initial; */
  transform: translateY(-8rem); /* auto-hide-header height */
}

.primary-nav > ul {
  height: inherit;
  justify-content: left; /* flow override */
  
  animation: snippet-nav-type1 1s ease-in;
}

.primary-nav > ul > li {
  margin: 0;
  padding: 0 .75rem;
  /* min-width: initial; flow override */
  height: inherit;
}

.primary-nav li a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: inherit;
}

/* 
  content
.........................*/
.content {
  margin-top: 0px;
}

.content.slide-offset {
  margin-top: 5rem; /* primary-nav height */
}

@media only screen and (min-width: 768px) {

.primary-nav > ul {
  justify-content: center;
  animation: none;
}

}

/* 
  animation
.........................*/
@keyframes snippet-nav-type1 {
  0% {
    transform: translateX(100vw);
  }
  50% {
    transform: translateX(-10vw);    
  }
  100% {
    transform: translateX(0vw);
  }
}

/*
  cards

  <elm data-snippet="cards">
    <elm>
      <elm class="front">
        <!-- etc img -->
      </elm>
      <elm class="back">
        <!-- etc text -->
      </elm>
      <elm class="card-ctl">
        <!-- etc icon -->
      </elm>
    </elm>
  </elm>

  js
   sap://def/ui/card

=======================================================================*/
[data-snippet*="cards"] {
  margin: 0 auto;
  padding: 0 0 3rem 0;
  font-size: 0; /* white space 0 */
}

[data-snippet*="cards"] > * {
  position: relative;
  margin: 0 .5rem;
  width: 260px;
  height: 320px;
  list-style: none;
  border: 1px solid #dddcdc;
  box-shadow: 0 20px 25px -20px hsla(0, 0%, 30%, 0.5);
  overflow: hidden;
}

[data-snippet*="cards"] > * > .front,
[data-snippet*="cards"] > * > .back {
  width: 100%;
  height: inherit;
  transform: translate3d(0,0,0);
}

[data-snippet*="cards"] > * > .front {
  overflow: hidden;
}

[data-snippet*="cards"] > * > .front img {
  display: block;
  width: 100%;
  height: 60%;
  margin: 0 auto;
}

[data-snippet*="cards"] > * > .back {
  opacity: 0;
  transform: translateY(-100%) scale(0.7);
  background-color: hsla(0,0%,100%,0.8);
  transition: opacity .25s,transform .25s;
}

[data-snippet*="cards"] > * > .back.up {
  transform: translateY(-100%) scale(1);
  opacity: 1;
}

[data-snippet*="cards"] > * > .card-ctl {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

@media screen and (min-width: 768px) {

[data-snippet*="cards"] {
  flex-wrap: wrap;  
}

[data-snippet*="cards"] > * {
  display: inline-block;
  margin: 1rem;
  min-width: auto;
  vertical-align: top;
}

/* safari 9~10*/
 _::-webkit-:not(:root:root), [data-snippet*="cards"] > * {
  min-width: initial;
}

}

@media screen and (min-width: 768px) and (max-width: 1023px) {

  [data-snippet*="cards"] > * {
    width: calc((100% /2 ) - 2rem );
    height: 400px;
  }
  
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {

[data-snippet*="cards"] > * {
  width: calc((100% /3 ) - 2rem );
  height: 400px;
}

}

@media screen and (min-width: 1201px) {

[data-snippet*="cards"] > * {
  width: calc((100% / 4 ) - 2rem );
  height: 400px;
}

}

@media screen and (min-width: 1601px) {

[data-snippet*="cards"] > * {
  width: calc((100% / 5 ) - 2rem );
  height: 400px;
}

}