@charset "utf-8";

/*common_start*/
:root {
  --st-ns_ospf_c_01: #9a99ff;
  --st-ns_ospf_c_02: #ffdf58;
  --st-ns_ospf_c_03: #6a6ae1;
  --st-ns_ospf_c_04: #ffdf58;
  --st-ns_ospf_c_05: #ffdf58;
  --st-ns_ospf_s_common: clamp(0px, 100%, 1024px);
  --st-ns_ospf_s_2: clamp(2px, (var(--st-ns_ospf_s_8) * (2 / 8)), 2px);
  --st-ns_ospf_s_4: clamp(4px, (var(--st-ns_ospf_s_8) * (4 / 8)), 4px);
  --st-ns_ospf_s_8: clamp(5px, 1svw, 8px);
  --st-ns_ospf_s_16: clamp(9px, (var(--st-ns_ospf_s_8) * (16 / 8)), 16px);
  --st-ns_ospf_s_24: clamp(13px, (var(--st-ns_ospf_s_8) * (24 / 8)), 24px);
  --st-ns_ospf_s_32: clamp(17px, (var(--st-ns_ospf_s_8) * (32 / 8)), 32px);
  --st-ns_ospf_s_40: clamp(21px, (var(--st-ns_ospf_s_8) * (40 / 8)), 40px);
  --st-ns_ospf_s_48: clamp(25px, (var(--st-ns_ospf_s_8) * (48 / 8)), 48px);
  --st-ns_ospf_s_56: clamp(29px, (var(--st-ns_ospf_s_8) * (56 / 8)), 56px);
  --st-ns_ospf_s_64: clamp(33px, (var(--st-ns_ospf_s_8) * (64 / 8)), 64px);
  --st-ns_ospf_s_72: clamp(37px, (var(--st-ns_ospf_s_8) * (72 / 8)), 72px);
  --st-ns_ospf_s_80: clamp(41px, (var(--st-ns_ospf_s_8) * (80 / 8)), 80px);
  --st-ns_ospf_anc_bt_s: calc(var(--st-ns_ospf_s_32) * 2);
}

.st-ns_ospf_contents_all {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100svw;
  margin-top: -44px;
  font-size: var(--st-ns_ospf_s_16);
  color: #222222;
  font-feature-settings: "palt";
  letter-spacing: 1.3px;
  line-height: 1.6;
  font-family: zen-maru-gothic, sans-serif;
  font-weight: 900;
}

#mainContent {
  padding: 0;
  margin-bottom: 0;
}

.st-ns_ospf_contents_all a {
  text-decoration: none;
  transition: 0.3s;
  display: block;
  color: #222;
}

.st-ns_ospf_contents_all a img {}

.st-ns_ospf_contents_all a:hover img {
  opacity: 1;
}

.st-ns_ospf_contents_all img {
  width: 100%;
  display: block;
}

.st-ns_ospf_contents_all a {}

.st-ns_ospf_contents_all a:before,
.st-ns_ospf_contents_all a:after {
  position: absolute;
  content: "";
  display: block;
}

.st-ns_ospf_common_size {
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  padding: 0 80px;
  display: block;
  box-sizing: border-box;
}

.st-ns_ospf_contents_all h1 {
  margin: 0;
  padding: 0;
  border: none;
}

.st-ns_ospf_contents_all h2 {
  margin: 0;
  padding: 0;
  border-bottom: none;
}

.st-ns_ospf_contents_all h3 {
  margin: 0;
  padding: 0;
  border-bottom: none;
  background: rgba(255, 255, 255, 0);
  line-height: 1.3;
}

.st-ns_sp,
.st-ns_sp a,
img.st-ns_sp {
  display: none;
}


h2.st-ns_ospf_common_title_h2 {
  padding-top: 80px;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 26px;
  line-height: 1.3;
}

h3.st-ns_ospf_common_title_h3 {
  font-size: 24px;
  text-align: center;
  margin: 0 auto 10px;
  width: fit-content;
  width: -moz-fit-content;
  padding-top: 48px;
}

.st-ns_ospf_area_h2 {
  padding-bottom: 180px;
}

.st-ns_ospf_contents_all {
  background: #eeeaff;
}

.st-ns_ospf_area_middle {}

/*common_end*/
/*hover_start*/
.st-ns_ospf_contents_all a,
.st-ns_ospf_contents_all a img,
.st-ns_ospf_ticket_bt .NS_general_7ticket {
  transition: 0.3s;
  opacity: 1;
}

.st-ns_ospf_contents_all a:hover,
.st-ns_ospf_ticket_bt .NS_general_7ticket:hover {
  transform: translate(10px, 0px);
  transition: 0.3s;
}

.st-ns_ospf_ticket_bt .NS_general_7ticket a:hover {
  transform: translate(0px, 0px);
}

.st-ns_ospf_contents_all .st-ns_ospf_anc a:hover {
  transform: translate(0px, 10px);
  transition: 0.3s;
}

/*hover_end*/
/*breadcrumb_start*/
.st-ns_ospf_breadcrumb {
  background: var(--st-ns_ospf_c_03);
  width: 100%;
  display: block;
  height: calc(1em + (8px * 2));
  padding: 8px;
  box-sizing: border-box;
  line-height: 1.3;
}

ol.st-ns_ospf_breadcrumb li {
  position: relative;
  float: left;
  padding-left: 20px;
  font-size: 12px;
}

ol.st-ns_ospf_breadcrumb li:before {
  position: absolute;
  content: "";
  display: block;
  top: 30%;
  left: 3%;
  width: 6px;
  height: 6px;
  border-right: solid 1px;
  border-top: solid 1px;
  transform: rotate(45deg) translate(0, -25%);
  color: #fff;
}

ol.st-ns_ospf_breadcrumb li:first-child:before {
  display: none;
}

ol.st-ns_ospf_breadcrumb li:first-child {
  padding-left: 0;
  background: none;
}

ol.st-ns_ospf_breadcrumb li,
ol.st-ns_ospf_breadcrumb li a {
  color: #fff;
}

ol.st-ns_ospf_breadcrumb li a:hover {
  transform: translate(0, 0);
}

ol.st-ns_ospf_breadcrumb li a {
  text-decoration: none;
}

/*breadcrumb_end*/
/* inner_start */
.st-ns_ospf_cover {
  position: relative;
  animation: st-ns_ospf_m_fadein_01 0.5s cubic-bezier(0, 0, 1, -0.45) 0s 1 forwards;
}

.st-ns_ospf_bk-gra {
  position: absolute;
  width: var(--st-ns_ospf_s_common);
  height: calc(100% + (var(--st-ns_ospf_bk-gra_b) * 2));
  background: url(https://7net-img.omni7.jp/cm/0001/sc_image/inc/pc/special/251125photoframes/ospf_howto_bk_02.jpg)repeat top 0 left 0/100%;
  top: calc(-1 * var(--st-ns_ospf_bk-gra_b));
  border-radius: calc(var(--st-ns_ospf_bk-gra_b) * 7.2);
  z-index: 1;
  left: calc(50%);
  transform: translate(-50%, 0);
  --st-ns_ospf_bk-gra_b: var(--st-ns_ospf_s_8);
  box-sizing: border-box;
}

.st-ns_ospf_inner {
  position: relative;
  z-index: 3;
  width: calc(var(--st-ns_ospf_s_common) - var(--st-ns_ospf_s_16));
  margin: var(--st-ns_ospf_s_32) auto;
  border-radius: var(--st-ns_ospf_s_48);
  box-sizing: border-box;
  overflow: hidden;
  /* border: var(--st-ns_ospf_s_8) solid var(--st-ns_ospf_c_03); */
}

/* inner_end */
/*top_start*/
h1.st-ns_ospf_top {
  background: var(--st-ns_ospf_c_02);
  padding: 0 0 var(--st-ns_ospf_s_24);
}

.st-ns_ospf_top_im {
  margin: 0;
  padding: 0;
  border: none;
  background: #9b9b9b;
}

h1.st-ns_ospf_top_im .st-ns_ospf_common_size {}

/*top_end*/
/* howto_start */
.st-ns_ospf_howto {
  background-color: #c2c1ff;
  background-image: url(https://7net-img.omni7.jp/cm/0001/sc_image/inc/pc/special/251125photoframes/ospf_deco_nami_01.png), url(https://7net-img.omni7.jp/cm/0001/sc_image/inc/pc/special/251125photoframes/ospf_howto_bk_01.png);
  background-position: top 0 left 0, top 0 left 0;
  background-repeat: repeat-x, repeat;
  background-size: 100%, 50%;
}

.st-ns_ospf_howto h2 {
  margin: 0 auto;
  width: 6em;
  text-align: center;
  font-size: var(--st-ns_ospf_s_40);
  /* color:#fff; */
  /* background:var(--st-ns_ospf_c_01); */
  /* border-radius:1000px; */
  /* line-height:1; */
  /* padding:0.5em 1em 0.3em; */
  /* box-sizing:border-box; */
  /* border: 0.1em #fff solid; */
  transform: translate(0px, -0.8em);
}

.st-ns_ospf_howto_list {
  padding: 0 0 var(--st-ns_ospf_s_40);
}

.st-ns_ospf_howto_item {
  background: #fff;
  border: var(--st-ns_ospf_s_4) solid #6a6ae1;
  position: relative;
  width: clamp(0px, 90%, 640px);
  margin: var(--st-ns_ospf_s_40) auto 0;
  border-radius: var(--st-ns_ospf_s_32);
  color: var(--st-ns_ospf_c_03);
}

.st-ns_ospf_howto_item:nth-of-type(n+2) {
  margin-top: var(--st-ns_ospf_s_56);
}

.st-ns_ospf_howto_item:nth-of-type(1) {}

.st-ns_ospf_howto_item:nth-of-type(1):before,
.st-ns_ospf_howto_item:nth-of-type(2):before {
  position: absolute;
  display: block;
  top: -0.5em;
  left: -0.5em;
  font-weight: bold;
  font-size: var(--st-ns_ospf_s_24);
  width: 1.8em;
  height: 1.8em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: var(--st-ns_ospf_c_03);
  border-radius: 100px;
  color: #fff;
}

.st-ns_ospf_howto_item:nth-of-type(1):before {
  content: '１';
}

.st-ns_ospf_howto_item:nth-of-type(2):before {
  content: '２';

}

.st-ns_ospf_howto_item_inner {
  padding: var(--st-ns_ospf_s_32);
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
}

.st-ns_ospf_howto_item_im {
  width: 50%;
}

.st-ns_ospf_howto_item_txt {
  width: 50%;
  font-size: var(--st-ns_ospf_s_24);
}

.st-ns_ospf_howto_item_bt_list {
  display: flex;
  width: clamp(0px, 90%, 420px);
  margin: 0 auto;
}

.st-ns_ospf_howto_item_bt_list>* {
  /* display: grid; */
  /* grid-template-columns: repeat(2, 1fr); */
  /* gap: 10px; */
  /* grid-auto-rows: 100px 200px; */
}

.st-ns_ospf_howto_item_bt_list>* a {}

.st-ns_ospf_howto_item_bt_list>* a img {}

.st-ns_ospf_howto_item_app-bt_wrap {
  position: relative;
}

.ospf_howto_item_app-bt_ic {
  z-index: 1;
  position: absolute;
  width: 3em;
  top: initial;
  left: calc(50% - 2em);
  bottom: calc(var(--st-ns_ospf_s_16) + 3.6em);
}

.st-ns_ospf_howto_item_app-bt_wrap {
  font-size: var(--st-ns_ospf_s_24);
  position: relative;
  background: var(--st-ns_ospf_c_02);
  border-radius: var(--st-ns_ospf_s_16);
  padding: var(--st-ns_ospf_s_16);
  margin: var(--st-ns_ospf_s_16) 0 0 0;
  filter: drop-shadow(var(--st-ns_ospf_s_4) var(--st-ns_ospf_s_4) var(--st-ns_ospf_s_8) rgba(0, 0, 0, .2));
  border: 0.2em solid #fff;
}

.st-ns_ospf_howto_item_app-bt_wrap.st-ns_ospf_is_fire .ospf_howto_item_app-bt_ic{
 transform: rotate(-40deg) translate(-150%,50%);
 animation: ospf_howto_item_app-bt_ic 0.2s cubic-bezier(0, 0, 0.28, 1.3) 0.5s 1 forwards;
}
@keyframes  ospf_howto_item_app-bt_ic{
  0% {
   transform:  rotate(-40deg) translate(-150%,50%); 
  }
  100% { transform:  rotate(0deg) translate(0,0); }
}

.st-ns_ospf_howto_item_app-bt_desc {
  text-align: center;
}

.st-ns_ospf_howto_item_app-bt_desc span {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 67.8%, rgb(255 255 255) 44%, rgb(255 255 255) 100%);
}

.st-ns_ospf_howto_item_app-bt {
  position: relative;
  z-index: 3;
  margin-top: var(--st-ns_ospf_s_80);
}

.st-ns_ospf_howto_item_app-bt a {
  background: #9a99ff;
  color: #fff;
  text-align: center;
  border-radius: 1000px;
  width: clamp(0px, 95%, 14em);
  margin: 0 auto 0;
  padding: 0.5em;
  border: var(--st-ns_ospf_s_2) solid #fff;
  box-shadow: 0.1em 0.1em 0 0.1em var(--st-ns_ospf_c_03);
  box-sizing: border-box;
}

.st-ns_ospf_howto_item_ex_title {
  margin: 0 0 var(--st-ns_ospf_s_8) var(--st-ns_ospf_s_40);
  /* font-size: 1.5em; */
  width: clamp(0px, 20em, 640px);
}

.st-ns_ospf_howto_item_ex_wrap {
  /* overflow-x: scroll; */
  /* overflow-y: hidden; */
  width: 834px;
  --st-ns_ospf_howto_item_ex_aki: calc(var(--st-ns_ospf_s_common) - clamp(0px, 90%, 640px));
  margin: 0 0 0 var(--st-ns_ospf_s_32);
  background: var(--st-ns_ospf_c_03);
  color: #fff;
  box-sizing: border-box;
  /* width: clamp(0px, 90%, 640px); */
  border-radius: var(--st-ns_ospf_s_16) 0 0 var(--st-ns_ospf_s_16);
  position: relative;
  border-top: 0.2em solid;
  border-right: 0;
  border-bottom: 0.2em solid;
  border-left: 0.2em solid;
  padding: 0 var(--st-ns_ospf_s_40) 0 0;
}

.st-ns_ospf_howto_item_ex_list {
  width: 97%;
  display: flex;
  padding: var(--st-ns_ospf_s_24) 0 var(--st-ns_ospf_s_24) var(--st-ns_ospf_s_16);
  position: relative;
}

.st-ns_ospf_howto_item_ex_list:before {}

.st-ns_ospf_howto_item_ex_list>* {}

.st-ns_ospf_howto_item_ex_item {
  position: relative;
  width: clamp(200px, ((100% - var(--st-ns_ospf_s_16) * 3) / 4), 1000px);
  background: var(--st-ns_ospf_c_01);
  border-radius: var(--st-ns_ospf_s_8);
}

.st-ns_ospf_howto_item_ex_item:nth-of-type(n+2):before {
  position: absolute;
  content: '';
  display: block;
  top: 43%;
  left: calc(var(--st-ns_ospf_s_16) * -1.2);
  --hoge_s: var(--st-ns_ospf_s_16);
  transform: rotate(90deg) translate(50%, 0px);
  /* bottom: calc(-1*(tan(48deg)* var(--hoge_s) / 2)); */
  background: var(--st-ns_ospf_c_01);
  height: calc(tan(48deg) * (var(--hoge_s) * 1.3) / 2);
  width: var(--hoge_s);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.st-ns_ospf_howto_item_ex_item:nth-of-type(n+2) {
  margin-left: var(--st-ns_ospf_s_16);
  padding: var(--st-ns_ospf_s_8) var(--st-ns_ospf_s_8) var(--st-ns_ospf_s_16);
  /* border-left: 2px dotted var(--st-ns_ospf_c_01); */
}

.st-ns_ospf_howto_item_ex_item_im {
  /* margin-top: -40%; */
}

.st-ns_ospf_howto_item_ex_item_im img {}

.st-ns_ospf_howto_item_ex_item_txt {
  padding: var(--st-ns_ospf_s_8) 0 0;
  line-height: 1.2;
}

.st-ns_ospf_howto_item_txt_01 {
  font-size: var(--st-ns_ospf_s_24);
  background: var(--st-ns_ospf_c_02);
  text-align: center;
  border-radius: 1000px;
  padding: var(--st-ns_ospf_s_8) var(--st-ns_ospf_s_16);
  width: 100%;
  box-sizing: border-box;
}

.st-ns_ospf_howto_item_note {
  font-weight: 500;
  margin: var(--st-ns_ospf_s_16) 0 0 1em;
  text-indent: -1em;
}

/* howto_end_scroll_start */
.scroll {
  position: absolute;
  transform: rotate(-90deg);
  bottom: 1.6em;
  left: 4em;
  font-size: clamp(12px, var(--st-ns_ospf_s_16), 1000px);
}

.scroll-text {
  color: var(--st-ns_ospf_c_03);
  text-align: center;
  transform: rotate(90deg);
}

.scroll-border {
  position: relative;
  top: 1em;
  width: 100%;
  height: 2.8em;
  overflow: hidden;
  z-index: 4;
}

.scroll-border:before {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: var(--st-ns_ospf_s_40);
  top: 0;
  left: 0;
  right: 0;
  background: var(--st-ns_ospf_c_03);
  animation: scrollbar 1.0s ease-in-out infinite;
  margin: auto;
}

@keyframes scrollbar {
  0% {
    height: 0;
    top: 0;
  }

  30% {
    height: 100%;
  }

  100% {
    top: 100%;
  }
}

.scroll:before {
  position: absolute;
  content: '';
  display: block;
  background: var(--st-ns_ospf_c_02);
  top: -2em;
  left: 0.4em;
  width: 2em;
  height: 7em;
  border-radius: 1000px 1000px 0 0;
}

.scroll:after {
  position: absolute;
  content: '';
  display: block;
  top: initial;
  left: 1.4em;
  --hoge_s: 2.5em;
  transform: rotate(180deg) translate(50%, 0px);
  bottom: -2em;
  background: var(--st-ns_ospf_c_02);
  height: calc(tan(48deg) * (var(--hoge_s) * 1.2) / 2);
  width: var(--hoge_s);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* howto_end_scroll_end */

/* スライドイン_satrt */
.st-ns_ospf_m_slidein_01.st-ns_ospf_is_fire {
  animation: st-ns_ospf_m_slidein_01 0.5s cubic-bezier(0, 2.26, 1, 1) 0s 1 forwards;
  filter: drop-shadow(var(--st-ns_ospf_s_4) var(--st-ns_ospf_s_4) var(--st-ns_ospf_s_8) rgba(0, 0, 0, .2));
}

@keyframes st-ns_ospf_m_slidein_01 {
  0% {
    opacity: 0;
    transform: translate(10%, 0);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* スライドイン_end */
/* フェードイン_start */
.st-ns_ospf_m_fadein_01.st-ns_ospf_target{
  opacity: 0;
}
.st-ns_ospf_m_fadein_01.st-ns_ospf_is_fire {
  animation: st-ns_ospf_m_fadein_01 0.5s cubic-bezier(0, 0, 1, -0.45) 0s 1 forwards;
}

@keyframes st-ns_ospf_m_fadein_01 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* フェードイン_end */
/* howto_end */


/*contents_end*/

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

  /*SP_common_start*/
  .st-ns_ospf_contents_all {
    overflow: hidden;
    box-sizing: border-box;
    margin-top: -44px;
    -webkit-text-size-adjust: 100%;
  }

  .st-ns_ospf_contents_all {
    background: var(--st-ns_ospf_c_03);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--st-ns_ospf_c_03) 100%);
  }

  .st-ns_ospf_contents_all img {
    width: 100%;
    display: block;
  }

  .st-ns_ospf_common_size {
    width: 94vw;
    padding: 0;
    box-sizing: border-box;
  }

  h2.st-ns_ospf_common_title_h2 {
    box-sizing: border-box;
    padding-top: 15vw;
    font-size: 7.5vw;
    margin-bottom: 3.5vw;
  }

  h2.st-ns_ospf_common_title_h2 picture {
    max-width: initial;
    height: 8.5vw;
    width: auto;
  }

  h3.st-ns_ospf_common_title_h3 {
    margin-bottom: 5vw;
    padding-top: 10vw;
    font-size: 6vw;
  }

  .st-ns_ospf_area_h2 {
    padding-bottom: 15vw;
  }

  .st-ns_sp,
  .st-ns_sp a,
  img.st-ns_sp {
    display: block;
  }

  .st-ns_pc,
  .st-ns_pc a,
  img.st-ns_pc {
    display: none;
  }

  /*SP_common_end*/
  /*SP_contents_start*/
  /*SP_breadcrumb_start*/
  .st-ns_ospf_breadcrumb {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    display: flex;
    padding-left: 2vw;
  }

  .st-ns_ospf_breadcrumb>* {
    float: initial;
    font-size: 2.8vw;
  }

  ol.st-ns_ospf_breadcrumb li:nth-of-type(n + 2) {
    padding-left: 15px;
    background-position: 1vw center;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }

  ol.st-ns_ospf_breadcrumb li:before {
    top: 50%;
    transform: rotate(45deg) translate(0, -50%);
    left: 0vw;
  }

  .st-ns_ospf_breadcrumb>* a {}

  /*SP_breadcrumb_end*/
  /*SP_inner_start */
  .st-ns_ospf_cover {}

  .st-ns_ospf_bk-gra {
    /* border-radius: 0; */
  }

  .st-ns_ospf_inner {
    margin: var(--st-ns_ospf_s_8) auto;
    /* border-radius: 0; */
  }

  /*SP_inner_end */
  /*top_start*/
  h1.st-ns_ospf_top {}

  .st-ns_ospf_top_im {}

  h1.st-ns_ospf_top_im .st-ns_ospf_common_size {}

  /*top_end*/
  /*SP_howto_start */
  .st-ns_ospf_howto {}

  .st-ns_ospf_howto h2 {}

  .st-ns_ospf_howto_list {}

  .st-ns_ospf_howto_item {}

  .st-ns_ospf_howto_item:nth-of-type(n+2) {}

  .st-ns_ospf_howto_item:nth-of-type(1) {}

  .st-ns_ospf_howto_item:nth-of-type(1):before,
  .st-ns_ospf_howto_item:nth-of-type(2):before {
    font-size: 5svw;
  }

  .st-ns_ospf_howto_item:nth-of-type(1):before {}

  .st-ns_ospf_howto_item:nth-of-type(2):before {}

  .st-ns_ospf_howto_item_inner {
    display: block;
  }

  .st-ns_ospf_howto_item_im {
    margin: 0 auto;
  }

  .st-ns_ospf_howto_item_txt {
    margin: var(--st-ns_ospf_s_16) auto 0;
    width: 100%;
    text-align: center;
  }

  .st-ns_ospf_howto_item_bt_list {}

  .st-ns_ospf_howto_item_bt_list>* {
    margin-left: var(--st-ns_ospf_s_16);
  }

  .st-ns_ospf_howto_item_bt_list>* a {}

  .st-ns_ospf_howto_item_bt_list>* a img {}

  .st-ns_ospf_howto_item_app-bt_wrap {}

  .ospf_howto_item_app-bt_ic {}

  .st-ns_ospf_howto_item_app-bt_wrap {}

  .st-ns_ospf_howto_item_app-bt_wrap {}

  .st-ns_ospf_howto_item_app-bt_desc {}

  .st-ns_ospf_howto_item_app-bt {}

  .st-ns_ospf_howto_item_app-bt a {}

  .st-ns_ospf_howto_item_ex_title {
    width: clamp(0px, 80%, 400px);
  }

  .st-ns_ospf_howto_item_ex_wrap {
    overflow-x: scroll;
    overflow-y: initial;
    width: clamp(0px, 150svw, 1000px);
    width: calc(100svw - var(--st-ns_ospf_s_32) - var(--st-ns_ospf_01) +  var(--st-ns_ospf_s_16) + var(--st-ns_ospf_s_2));
    --st-ns_ospf_01: calc((100svw - clamp(0px, 90%, 640px)) / 2);
  }

  .st-ns_ospf_howto_item_ex_list {
    width: clamp(0px, 150svw, 1000px);
    /* width: 900px; */
    /* width: 100%; */
    padding: var(--st-ns_ospf_s_24) 0 var(--st-ns_ospf_s_80) var(--st-ns_ospf_s_16);
  }

  .st-ns_ospf_howto_item_ex_list:before {}

  .st-ns_ospf_howto_item_ex_list>* {}

  .st-ns_ospf_howto_item_ex_item {
    /* width: 290px; */
  }

  .st-ns_ospf_howto_item_ex_item:nth-of-type(n+2):before {
    --hoge_s: clamp(4svw, var(--st-ns_ospf_s_16), 1000px);
    left: calc(var(--st-ns_ospf_s_16) * -1.9);
  }

  .st-ns_ospf_howto_item_ex_item:nth-of-type(n+2) {}

  .st-ns_ospf_howto_item_ex_item_im {}

  .st-ns_ospf_howto_item_ex_item_im img {}

  .st-ns_ospf_howto_item_ex_item_txt {
    text-align: center;
  }

  .st-ns_ospf_howto_item_txt_01 {}

  .st-ns_ospf_howto_item_note {}

  /*SP_howto_end_scroll_start */
  .scroll {}

  .scroll-text {}

  .scroll-border {}

  .scroll-border:before {}

  @keyframes scrollbar {
    0% {
      height: 0;
      top: 0;
    }

    30% {
      height: 100%;
    }

    100% {
      top: 100%;
    }
  }

  .scroll:before {}

  .scroll:after {}

  /*SP_howto_end_scroll_end */

  /*SP_スライドイン_satrt */
  .st-ns_ospf_m_slidein_01.st-ns_ospf_is_fire {}

  @keyframes st-ns_ospf_m_slidein_01 {
    0% {
      opacity: 0;
      transform: translate(10%, 0);
    }

    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }

  /*SP_スライドイン_end */

  /*hover_start*/
  .st-ns_ospf_contents_all a:hover,
  .st-ns_ospf_ticket_bt .NS_general_7ticket:hover {
    transform: translate(0px, 0px);
  }

  .st-ns_ospf_contents_all .st-ns_ospf_anc a:hover {
    transform: translate(0px, 0px);
    transition: 0.3s;
  }

  /*hover_end*/
  .st-ns_ospf_copy {
    font-size: 10px;
    padding: 30vw 0 2vw;
  }

  /*SP_contents_end*/
}