﻿

/*** for PC Browser ***/
@media (min-width:401px)
{
.slide_1 {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 282px;
  padding: 0.5rem 1.0rem;
  margin: 0.5rem auto;
  background: #fff;
  border: 1px solid #AAA;
}

.slide_1 img {
  display: block;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  width: inherit;
  height: inherit;
  left: 100%;
  animation: slide-anime 24s linear infinite; /* 4枚 × 6秒 = 24秒 */
}

.slide_1 img:nth-of-type(1) { animation-delay: 0s; }
.slide_1 img:nth-of-type(2) { animation-delay: 6s; }
.slide_1 img:nth-of-type(3) { animation-delay: 12s; }
.slide_1 img:nth-of-type(4) { animation-delay: 18s; }

@keyframes slide-anime {
  0%   { left: 100%; }
  4%   { left: 3%; }
  20%  { left: 3%; }
  24%  { left: -100%; }
  100% { left: -100%; }
}






.row{
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

.qa-1 {
margin:0 20px 5px 10px;
border-bottom: 2px solid #007354;
}

.qa-1 summary {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 1em 1em 1em 2.5em;
color: #333333;
font-weight: 600;
cursor: pointer;
}

.qa-1 summary::before,
.qa-1 p::before {
position: absolute;
left: 0.5em;
font-weight: 600;
font-size: 1.3em;
}



.qa-1 summary::after {
transform: translateY(-25%) rotate(45deg);
width: 7px;
height: 7px;
margin-left: 10px;
border-bottom: 3px solid #333333b3;
border-right: 3px solid #333333b3;
content: '';
transition: transform .5s;
}

.qa-1[open] summary::after {
transform: rotate(225deg);
}

.qa-1 p ,
.qa-6 .answer{
position: relative;
transform: translateY(-10px);
opacity: 0;
margin: 0;
padding: .3em 2.5em 1.5em !important;
color: #333;
transition: transform .5s, opacity .5s;
}



.qa-1[open] p,
.qa-1[open] .answer {
transform: none;
opacity: 1;
}
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
.slide_1 {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 226px;
  padding: 0.5rem 1.0rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border: 1px solid #AAA;
}

.slide_1 img {
  display: block;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  width: inherit;
  height: inherit;
  left: 100%;
  animation: slide-anime 24s linear infinite; /* 4枚 × 6秒 = 24秒 */
}

.slide_1 img:nth-of-type(1) { animation-delay: 0s; }
.slide_1 img:nth-of-type(2) { animation-delay: 6s; }
.slide_1 img:nth-of-type(3) { animation-delay: 12s; }
.slide_1 img:nth-of-type(4) { animation-delay: 18s; }

@keyframes slide-anime {
  0%   { left: 100%; }
  4%   { left: 3%; }
  46%  { left: 3%; }
  50%  { left: -100%; }
  100% { left: -100%; }
}










 



 




.row{
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

.qa-1 {
margin:0 20px 5px 10px;
border-bottom: 2px solid #007354;
}

.qa-1 summary {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 1em 1em 1em 2.5em;
color: #333333;
font-weight: 600;
cursor: pointer;
}

.qa-1 summary::before,
.qa-1 p::before {
position: absolute;
left: 0.5em;
font-weight: 600;
font-size: 1.3em;
}



.qa-1 summary::after {
transform: translateY(-25%) rotate(45deg);
width: 7px;
height: 7px;
margin-left: 10px;
border-bottom: 3px solid #333333b3;
border-right: 3px solid #333333b3;
content: '';
transition: transform .5s;
}

.qa-1[open] summary::after {
transform: rotate(225deg);
}

.qa-1 p ,
.qa-6 .answer{
position: relative;
transform: translateY(-10px);
opacity: 0;
margin: 0;
padding: .3em 2.5em 1.5em !important;
color: #333;
transition: transform .5s, opacity .5s;
}



.qa-1[open] p,
.qa-1[open] .answer {
transform: none;
opacity: 1;
}
.row{
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

.qa-1 {
margin:0 20px 5px 10px;
border-bottom: 2px solid #007354;
}

.qa-1 summary {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 1em 1em 1em 2.5em;
color: #333333;
font-weight: 600;
cursor: pointer;
}

.qa-1 summary::before,
.qa-1 p::before {
position: absolute;
left: 0.5em;
font-weight: 600;
font-size: 1.3em;
}



.qa-1 summary::after {
transform: translateY(-25%) rotate(45deg);
width: 7px;
height: 7px;
margin-left: 10px;
border-bottom: 3px solid #333333b3;
border-right: 3px solid #333333b3;
content: '';
transition: transform .5s;
}

.qa-1[open] summary::after {
transform: rotate(225deg);
}

.qa-1 p ,
.qa-6 .answer{
position: relative;
transform: translateY(-10px);
opacity: 0;
margin: 0;
padding: .3em 2.5em 1.5em !important;
color: #333;
transition: transform .5s, opacity .5s;
}



.qa-1[open] p,
.qa-1[open] .answer {
transform: none;
opacity: 1;
}
}
