.ft10 { font-size: 10px; }
.ft11 { font-size: 11px; }
.ft12 { font-size: 12px; }
.ft13 { font-size: 13px; }
.ft14 { font-size: 14px; }
.ft15 { font-size: 15px; }
.ft16 { font-size: 16px; }
.ft17 { font-size: 17px; }
.ft18 { font-size: 18px; }
.ft19 { font-size: 19px; }
.ft20 { font-size: 20px; }
.ft21 { font-size: 21px; }
.ft22 { font-size: 22px; }
.ft23 { font-size: 23px; }
.ft24 { font-size: 24px; }
.ft25 { font-size: 25px; }
.ft26 { font-size: 26px; }
.ft27 { font-size: 27px; }
.ft28 { font-size: 28px; }
.ft29 { font-size: 29px; }
.ft30 { font-size: 30px; }
.ft31 { font-size: 31px; }
.ft32 { font-size: 32px; }
.ft33 { font-size: 33px; }
.ft34 { font-size: 34px; }
.ft35 { font-size: 35px; }

.ft_ffffff { color : #fff; }

.float_left { float : left; }
.float_right { float : right; }
.float_clear { clear : both; }

.text-center { text-align : center; }
.text-left { text-align : left; }
.text-right { text-align : right; }

.display_flex {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-box;
  display:-webkit-flexbox;
  display:-moz-flexbox;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

a {
  color : #333;
  text-decoration: none;
}

html { font-size: 62.5%; }
body {
  /* font-size: 1.6em; */
  color: #262626; }

br.sm,
br.md
br.lg,
br.xl {
  display: inline; }
@media all and (min-width: 1200px) {
  br.xl {
    display: none; }
}
@media all and (min-width: 992px) {
  br.lg {
    display: none; }
}
@media all and (min-width: 768px) {
  br.md {
    display: none; }
}
@media all and (min-width: 576px) {
  br.sm {
    display: none; }
}

.sample {
  /*padding: 0 20px;*/
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","貂ｸ繧ｴ繧ｷ繝�け Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",繝｡繧､繝ｪ繧ｪ,Meiryo,sans-serif;
  color: #262626; }
@media screen and (min-width: 768px) {
	.sample {
		margin-top : 150px;
	}
}
@media screen and (max-width: 767px) {
	.sample {
		margin-top : 0;
	}
}

.sample-inner {
  margin: 60px auto 100px;
  width: 100%; }
@media screen and (min-width: 768px) {
  .sample-inner {
    max-width: 1140px;
    margin: 60px auto 100px; }
}
@media screen and (max-width: 767px) {
	.sample-inner {
		margin: 5% auto ;
	}
}

.sample-caption {}
.sample-caption h2 {
  margin: 20px 0;
  text-align: center;
  font-size: 2rem;
  line-height: 1.4;
  font-family: Georgia,貂ｸ譏取悃,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS譏取悃E,繝｡繧､繝ｪ繧ｪ,Meiryo,serif; }

.sample-caption p {
  margin: 20px 0;  
  font-size: 1.5rem;
  line-height: 1.4;
  color: #444; }

/* sample-first */
#sample01 .imstream-wrapper {
  width: 100%; }

  #sample01 .imstream-wrapper .imstream-thumb {
  float: left;
  width: 33.3%;
  overflow: hidden;
  position: relative; }
@media all and (min-width: 768px) {
  #sample01 .imstream-wrapper .imstream-thumb {
    width: 20%; }
}
#sample01 .imstream-wrapper .imstream-thumb:before {
  display: block;
  content: '';
  padding-top: 100%; }

  #sample01 .imstream-wrapper .imstream-thumb-inner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden; }

    #sample01 .imstream-wrapper .imstream-thumb a {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: auto; }

      #sample01 .imstream-wrapper .imstream-thumb a img {
        width: 100%;
        height: auto;
        transition-duration: 0.3s; }

      #sample01 .imstream-wrapper .imstream-thumb a:hover img {
        transform: scale(1.1);
        transition-duration: 0.3s;縲€}

/* sample-second */
#sample02 .imstream-3columns-wrapper {
  position: relative;
  height: auto;
  width: 100%; }

  #sample02 .imstream-3columns-wrapper .imstream-3columns-inner {
    width: 49%;
    padding: .5%;
    float: left;
    margin: 0; }

    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner a {
      display: block;
      overflow: hidden;
      position: relative;
      padding: 100% 0 0; }

      #sample02 .imstream-3columns-wrapper .imstream-3columns-inner a img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition-duration: 0.3s; }

        #sample02 .imstream-3columns-wrapper .imstream-3columns-inner a:hover img {
          transform: scale(1.1);
          transition-duration: 0.3s;縲€}

@media only screen and (min-width: 768px) {
  #sample02 .imstream-3columns-wrapper {
    height: 0;
    padding: 50% 0 0;
    position: relative; }

    #sample02  .imstream-3columns-wrapper .imstream-3columns-inner {
      float: none;
      padding: 0;
      position: absolute;
      width: 16.25%; }
    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner_0,
    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner_5,
    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner_6 {
      width: 33%; }
    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner_0 {
      top: 0;
      left: 0; }
    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner_1 {
      bottom: .75%;
      left: 0; }
    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner_2 {
      bottom: .75%;
      left: 16.75%; }
    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner_3 {
      top: 0;
      left: 33.5%; }
    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner_4 {
      top: 0;
      left: 50.25%; }
    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner_5 {
      bottom: .75%;
      left: 33.5%; }
    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner_6 {
      top: 0;
      left: 67%; }
    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner_7 {
      bottom: .75%;
      left: 67%; }
    #sample02 .imstream-3columns-wrapper .imstream-3columns-inner_8 {
      bottom: .75%;
      left: 83.75%; }
}

/* sample-third */
#sample03 .imstream-wrapper {
  width: 100%; }

  #sample03 .imstream-wrapper .imstream-thumb {
  float: left;
  width: 50%;
  overflow: hidden;
  position: relative; }
@media all and (min-width: 768px) {
  #sample03 .imstream-wrapper .imstream-thumb {
    width: 25%; }
}
#sample03 .imstream-wrapper .imstream-thumb:before {
  display: block;
  content: '';
  padding-top: 100%; }

  #sample03 .imstream-wrapper .imstream-thumb-inner {
    position: absolute;
    top: 0;
    width: 96%;
    height: 96%;
    padding: 2%;
    box-sizing: border-box;
    overflow: hidden; }

    #sample03 .imstream-wrapper .imstream-thumb-hover {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      top: 0;
      left: 0;
      width: 96%;
      height: 96%;
      padding: 2%;
      text-align: center;
      background-color: rgba(0,0,0,.75); }

    #sample03 .imstream-wrapper .imstream-thumb a {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: auto; }

      #sample03 .imstream-wrapper .imstream-thumb a img {
        width: 100%;
        height: auto; }

        #sample03 .imstream-wrapper .imstream-thumb a .imstream-thumb-hover {
          display: none; }

        #sample03 .imstream-wrapper .imstream-thumb a:hover .imstream-thumb-hover {
          display: flex; }

          #sample03 .imstream-wrapper .imstream-thumb a .imstream-thumb-hover img {
            width: 80px;
            border-radius: 50%; }
    
          #sample03 .imstream-wrapper .imstream-thumb a .imstream-thumb-hover span {
            color: white;
            font-size: .8em;
            padding: 5px; }
            @media all and (min-width: 768px) {
              #sample03 .imstream-wrapper .imstream-thumb a .imstream-thumb-hover span {
                padding: 10px; }
            }


#layer {
  position: fixed;
  z-index: 14;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display : none; }

.opacity:hover {
  opacity: 0.7; }

.modalPanel {
  display: none;
  z-index: 15;
  background-color: white;
  width: 960px;
  max-height: 490px;
  top: 50%;
  left: 50%;
  padding: 30px;
  position: fixed;
  overflow : scroll; }

.modalPanel a.modalClose {
  position: absolute;
  right: 10px;
  top: 0;
  z-index: 10;
  font-size: 3.4rem;
  color: #464646;
  font-weight: 100; }

.modalPanelInner {
  width: 100%;
  min-height: 470px;
  position: relative; }

.modalPanel .modalPanelLeft {
  position: absolute;
  width: 480px;
  height: 100%;
  text-align: center;
  overflow: hidden; }

.modalPanel .modalPanelLeft img {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 100%;
  height: auto;
  transition-duration: 0.3s; }

.modalPanel .modalPanelLeft img:hover {
  opacity: .85; }

.modalPanel .modalPanelRight {
  float: right;
  width: 480px; }

.modalPanelRight--title {
  width: 460px;
  margin-left: 20px; }

.modalPanelRight--title img {
  border-radius: 50%;
  width: 30px; }

.modalPanelRight--title span {
  position: relative;
  top: -10px;
  display: inline-block;
  margin-left: 10px; }

.modalPanelRight--title span.like {
  font-size: 1.4rem;
  margin-left: 20px;
  font-weight: 700; }

  .modalPanelRight--title span.like i {
    padding-right: .3rem; }

.modalPanelRight--description {
  width: 450px;
  margin: 10px 0 20px 20px;
  padding: 0 1rem;
  font-size: 1.4rem;
  line-height: 1.4;
  /* max-height: 210px; */
  overflow: hidden; }

.modalPanel .modalPanelRight .related_objects {
  width: 480px; }

.modalPanel .modalPanelRight .related_objects img {
  width: 100px;
  height: auto; }

.modalPanel .modalPanelRight .related_objects .related_objects_inner {
  padding: 15px;
  background-color: #f8f8f8;
  margin: 0 0 20px 20px; }

.modalPanel .modalPanelRight .related_objects .related_objects_inner a {
  display: inline-block;
  width: 100px; }

.modalPanel .modalPanelRight .related_objects .related_objects_inner a img {
  transition-duration: 0.3s;
  text-align : center; }

.modalPanel .modalPanelRight .related_objects .related_objects_inner a img:hover {
  opacity: .85; }

.modalPanel .modalPanelRight .related_objects .related_objects_inner .related_object_description {
  width: 310px;
  font-size: 14px;
  line-height : 17px;
  position : relative;
  color: #333; }

.modalPanel .modalPanelRight .related_objects .related_objects_inner .related_object_title {
  font-size: 12px; }

.modalPanel .modalPanelRight .related_objects .related_objects_inner .related_object_description a.buy {
  margin : auto;
  margin-top: 15px;
  width: 200px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #fd8185;
  display: block;
  color : #fff;
  transition-duration: 0.3s;
  text-align : center; }

.modalPanel .modalPanelRight .related_objects .related_objects_inner .related_object_description a.buy:hover {
  background-color: #F9757A; }

@media all and (max-width: 1200px ){
  .modalPanel {
    width: 900px; }
  .modalPanel .modalPanelLeft {
    width: 450px; }
  .modalPanel .modalPanelRight {
    width: 450px; }
  .modalPanelRight--title {
    width: 430px; }
  .modalPanelRight--description {
    width: 420px; }
  .modalPanel .modalPanelRight .related_objects {
    width: 450px; }
  .modalPanel .modalPanelRight .related_objects .related_objects_inner .related_object_description {
    width: 280px; }
}

@media all and (max-width: 960px ){
  .modalPanel {
    width: 708px; }
  .modalPanel .modalPanelLeft {
    width: 354px; }
  .modalPanel .modalPanelRight {
    width: 354px; }
  .modalPanelRight--title {
    width: 334px; }
  .modalPanelRight--description {
    width: 324px; }
  .modalPanel .modalPanelRight .related_objects {
    width: 354px; }
  .modalPanel .modalPanelRight .related_objects .related_objects_inner .related_object_description {
    width: 280px; }
  .modalPanelRight--title span.like {
    display: block;
    margin-left: 0;
    margin-top: 10px;
    text-align: right; }
}

@media all and (max-width: 768px ){
  .modalPanel {
    width: 80vw; }
  .modalPanelInner {
    position: relative; }
  .modalPanel .modalPanelLeft {
    width: 100%;
    position: relative; }
  .modalPanel .modalPanelLeft img {
    position: relative; }
  .modalPanel .modalPanelRight {
    width: 100%; }
  .modalPanelRight--title {
    width: 100%;
    margin-top: 20px;
    margin-left: 0; }
  .modalPanelRight--description {
    width: 100%;
    padding: 0;
    margin: 0 0 20px; }
  .modalPanel .modalPanelRight .related_objects {
    width: 100%; }
  .modalPanel .modalPanelRight .related_objects .related_objects_inner {
    margin: 0; }
  .modalPanel .modalPanelRight .related_objects .related_objects_inner a {
    width: 20%; }
  .modalPanel .modalPanelRight .related_objects .related_objects_inner .related_object_description {
    width: 75%; }
  .modalPanelRight--title span.like {
    display: block;
    margin-left: 0;
    margin-top: 10px;
    text-align: right; }
}

@media all and (max-width: 576px ){
  .modalPanel .modalPanelRight .related_objects .related_objects_inner a {
    width: 100%;
    display: block;
    text-align: center; }
  .modalPanel .modalPanelRight .related_objects .related_objects_inner .related_object_description {
    margin-top: 10px;
    width: 100%; }
  .modalPanel .modalPanelRight .related_objects .related_objects_inner .related_object_description a.buy {
    width: auto; }
}

/*
.display_flex {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-box;
  display:-webkit-flexbox;
  display:-moz-flexbox;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.vAlignMiddle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.AlignCenter {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.AlignMiddleCenter {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#sample.sample1 .inner .campaign {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
#sample.sample1 .inner .contents {
  width : 100%;
  margin : auto;
}
#sample.sample1 .inner .contents div.imstream_wrapper div.imstream_inner {
  width : 25%;
  height: 320px;
  overflow: hidden;
  background-color : #f8f8f8;
}
#sample.sample1 .inner .contents div.imstream_wrapper div.imstream_inner img {
  width : 100%;
}
#sample.sample1 .inner .contents div.imstream_wrapper div.imstream_inner img:hover {
  opacity: 0.7;
}
#sample.sample1 .inner .contents .modalPanel {
  z-index: 3;
  padding: 20px;
  background-color: white;
  width: 960px;
  height: 490px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -245px;
  margin-left: -480px;
  overflow : scroll;
}
#sample.sample1 .inner .contents .modalPanel a.modalClose {
  position: absolute;
  right: 10px;
  top: 10px;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelLeft {
  width: 49%;
  text-align: center;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelLeft img {
  width: 100%;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelRight {
  width: 49%;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelRight .username {
  width: 100%;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelRight .username img {
  border-radius: 50%;
  width: 30px;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelRight .username span {
  position: relative;
  top: -10px;
  margin-left: 5px;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelRight .description {
  width: 100%;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelRight .related_objects {
  width: 100%;
  margin-top: 10px;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelRight .related_objects img {
  max-width: 100px;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelRight .related_objects .related_objects_inner {
  padding: 10px;
  background-color: #f8f8f8;
  margin-bottom: 10px;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelRight .related_objects .related_objects_inner a {
  display: inline-block;
  width: 30%;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelRight .related_objects .related_objects_inner a img {
  text-align : center;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelRight .related_objects .related_objects_inner .related_object_description {
  width: 70%;
  line-height : 17px;
  position : relative;
  color: #333;
}
#sample.sample1 .inner .contents .modalPanel .modalPanelRight .related_objects .related_objects_inner .related_object_description a.buy {
  margin : auto;
  margin-top: 20px;
  width: 200px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #fd8185;
  display: block;
  color : #fff;
  text-align : center;
}
@media (max-width: 767px) {
  #sample.sample1 .inner .contents ul li {
    width : 50%;
  }
}
*/