/* duo
two columns for large devices
------------------------- */

.duo:after {
  content: '';
  display: block;
  clear: both;
}

.duo__cell {
margin-top: -80px;
}

.sp_device .duo__cell {
margin-top: 50px;
}

/* --- duo--legal --- */


.duo--legal__plain {
  padding: 0 0.8rem;
  background: #fff;
  color: #888;
}

.duo--legal--first .duo--legal__official:before,
.duo--legal--first .duo--legal__plain:before {
  display: block;
  padding-top: 0.5rem;
  font-size: 0.88rem;
  color: #888;
}

.duo--legal--first .duo--legal__official:before {
  content: 'Official legal copy'
}

.duo--legal--first  .duo--legal__plain:before {
  content: 'Plain English'
}



/* demo carousels
------------------------- */

.carousel {
background-color: #454545;
counter-reset: carousel-cell;
padding-top: 0px;
padding-left: 23px;
}

.sp_device .carousel {
padding-top: 0px;
margin-top: -8px;
padding-left: 10px;
}

.carousel-cell {
width: 300px;
height: 220px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}

.flickity-enabled .carousel-cell {
margin-right: 20px;
}

.carousel-cell:before,
.carousel-cell__number {
display: block;
width: 100px;
margin: 0 auto;
content: counter(carousel-cell);
text-align: center;
line-height: 160px;
font-size: 80px;
color: white;
}

.carousel--not-counting .carousel-cell:before { content: none; }

/* ---- carousel-image-cell ---- */
/* frames single image in cell */

.carousel-image-cell {
width: 450px;
height: 250px;
margin-right: 10px;
/* center images */
display: flex;
align-items: center;
justify-content: center;
margin-left: 40px;
padding-left: 20px;
border: 10px solid #454545;
padding-right: 20px;
padding-bottom: 20px;
margin-bottom: 21px;
padding-top: 20px;
}
.sp_device .carousel-image-cell {
width: 380px;
padding-left: 10px;
display: block;
height: auto;
padding-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: -15px;
padding-right: 10px;
}
.carousel-image-cell .nagareImage {
width: 250px;
float: left!important;
margin-right: 30px;
}
.sp_device .carousel-image-cell .cellBox .nagareImage {
width: 100%;
float: none!important;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 13px;
}

.cellBox .nagereNumber {
width: 80px;
display: block;
z-index: 8;
margin-right: auto;
margin-left: auto;
margin-bottom: -32px;
}
.sp_device .cellBox .nagereNumber {
width: 80px;
display: block;
margin-right: auto;
margin-left: auto;
opacity: 1;
z-index: 10;
margin-top: 108px;
margin-bottom: 13px;
}

.cellBox .nagareSankaku {
display: block;
height: 80px;
position: absolute;
right: -49px;
z-index: 55;
top: 100px;
}
.sp_device .cellBox .nagareSankaku {
height: 70px;
margin-right: 24px;
margin-top: -30px;
margin-left: 13px;
right: -62px;
}




.carousel-image-cell--wide {
  width: 100%;
}

.carousel.is-fullscreen .carousel-image-cell {
  background: transparent;
}

/* ---- carousel__natural-image ---- */
/* use natural sizes for cell size */

.carousel__natural-image {
  display: block;
  height: 200px;
  min-width: 150px;
  max-width: 100%;
  margin-right: 10px;
}




/*! Flickity v2.1.2
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus{
outline:0
}
.flickity-viewport
{
overflow: hidden;
position: relative;
height: 100%
}
.flickity-slider{
position: absolute;
width: 100%;
height: 100%
}
.flickity-enabled.is-draggable{
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport{
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{
cursor: -webkit-grabbing;
cursor: grabbing;
}
.flickity-button{
position: absolute;
background: hsla(0,0%,100%,.75);
border: none;
color: #333;
}
.flickity-button:hover{
background: #fff;
cursor: pointer;
}
.flickity-button:focus{
outline: 0;
box-shadow: 0 0 0 5px #19f;
}
.flickity-button:active{
opacity: .6;
}
.flickity-button:disabled{
opacity: .3;
cursor: auto;
pointer-events: none;
}
.flickity-button-icon{
fill: #333;
}
.flickity-prev-next-button{
top: 50%;
width: 44px;
height: 44px;
border-radius: 50%;
transform: translateY(-50%);
}
.flickity-prev-next-button.previous{
left: 10px;
}
.flickity-prev-next-button.next{
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.previous{
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next{
right: auto;
left: 10px;
}
.flickity-prev-next-button .flickity-button-icon{
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flickity-page-dots{
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots{
direction: rtl;
}
.flickity-page-dots .dot{
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
opacity: .25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected{
opacity: 1;
}
.cellBox {
width: 100%;
color: #FFFFFF;
}

.sp_device .cellBox {
padding-top: 0px;
margin-top: -125px;
margin-right: 20px;

}



.cellBox h4 {
font-weight: bold;
font-size: 2rem;
margin-bottom: 10px;
margin-top: 50px;
line-height: 3rem;
text-align: center;
}
.sp_device .cellBox h4 {
margin-top: 0px;
font-size: 2rem;
line-height: 2.75rem;
text-align: center;
}
.sp_device .carousel-image-cell .cellBox p {
text-align: center;
font-size: 1.5rem;
}
.sp_device .goriyoukaishi_h4 {
font-size: 3rem!important;
}