/* Base */
#base {
  width: 1200px;
  margin: 0 auto;
  text-align: left;
  font-family: "Noto Sans CJK JP";
}

div#cont {
  margin: 0;
}

.l_main {
  width: 880px;
  font-size: 16px;
  font-weight: 500;
}

/* Layout */
.l_section {}

.l_section__item {
  margin-top: 24px;
}

.l_section--primary {}

.l_usageplan__flow {
  display: flex;
  border: 1px solid #000;
  padding: 15px;
}


.l_section--secondary {
  /*margin-top: 24px;*/
}

.m_videoPlan .l_section--secondary:not(.u_opaque) {
  margin-top: 24px;
}

.l_section--thirdly {}


.l_rightnavi {
  margin-top: 30px;
  width: 300px;
  float: right;
  font-size: 18px;
  position: sticky;
  top: 0px;
  left: 0px;
}

/* Module */
.m_heading {}

.m_heading__topImage {}

.m_heading__img {}

.m_heading__img>img {
  width: 880px;
}

.m_heading__txt {
  margin-top: 12px;
}

.m_heading__txt_attentionLink:hover{
  text-decoration: underline;
}

.m_heading__txt>p {}

.m_usageplan {}

.m_usageplan__groupWrap {}

.m_usageplan__group {}

.m_usageplan__tab {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin-bottom: 24px;
}

.m_usageplan__tabItem {
  width: 45%;
}

.m_usageplan__tabItem+.m_usageplan__tabItem {
  margin-left: -50px
}

.m_usageplan__tabLink {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  font-weight: 500;
  font-size: 24px;
  color: #000;
  border-radius: 40px;
  z-index: 0;
  transition-duration: 400ms;
  color: gray;
}

.m_usageplan__tabLink--active {
  background-color: #a11f24;
  color: #fff;
  font-weight: 600;
}

.m_usageplan__tabLink--active::before {
  content: url("../../img/dougahyakkaten/video-application-flow/icon_arrow.png");
  padding-right: 10px;
}

.m_usageplan__tabLink--left {
  border-top: 2px solid #a11f24;
  border-left: 2px solid #a11f24;
  border-bottom: 2px solid #a11f24;
}

.m_usageplan__tabLink--right {
  border-top: 2px solid #a11f24;
  border-right: 2px solid #a11f24;
  border-bottom: 2px solid #a11f24;
}

.m_usageplan__tab--left {}

.m_usageplan__tab--rgiht {}

.m_usageplan__tab--active {
  color: #fff;
  background-color: #a11f24;
}

.m_usageplan__tab--active::before {
  content: url("../../img/dougahyakkaten/video-application-flow/icon_arrow.png");
}

.m_videoPlan {
  opacity: 0;
  height: 0;
  transform: translate(0, 100px);
}

.m_videoPlanInner {}

.m_videoPlanWrap {
  height: auto;
}

.m_usageplan__flow {
}

.m_usageplan__stepWrap {}

.m_usageplan__step {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #ffdce4;
  color: #000;
  position: relative;
}

.js_targetStep--active:not(.m_naviTable__stepWrap):hover {
  color: #fff;
  background-color: #E2344A;
}

.js_targetStep--active:not(.m_naviTable__stepWrap)::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -10px;
  z-index: 1;
  border-right: 4px solid #fff;
  background: #e2344a;
  width: 23px;
  height: 30px;
  transform: skew(-30deg);
  transition-duration: 100ms;
}

.js_targetStep--active:not(.m_naviTable__stepWrap)::before {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  z-index: 1;
  width: 23px;
  height: 30px;
  border-right: 4px solid #fff;
  background: #e2344a;
  transform: skew(30deg);
  transition-duration: 100ms;
}

.js_targetStep--active>.m_usageplan__InnerWrap::before {
  content: url("../../img/dougahyakkaten/video-application-flow/icon_arrow.png");
  padding-right: 5px;
}

.js_targetStep--active::before{
  content: url("../../img/dougahyakkaten/video-application-flow/icon_arrow.png");
  padding-right: 5px;
}

.js_targetStep--active--last::before {
  display: none;
}

.js_targetStep--active--last::after {
  display: none;
}

.m_usageplan__step--tips {
  background-color: #DDEDF9;
}


.m_usageplan__step--active {
  color: #fff;
  background-color: #E2344A;
}

.m_usageplan__InnerWrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.m_usageplan__InnerWrap::before {}

.m_usageplan__Inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.m_usageplan__Inner>span {
  font-weight: bold;
  font-size: 18px;
  line-height: 1.4em;
}

.m_usageplan__stepNum {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}


.m_usageplan__overviewWrap {
  position: relative;
  padding: 15px;
}
.m_usageplan__stepWrap:first-child .m_usageplan__overviewWrap {
  padding-left: 0;
}
.m_usageplan__stepWrap:last-child .m_usageplan__overviewWrap {
  padding-right: 0;
}

.m_usageplan__overviewWrap--border{}

.m_usageplan__overviewWrap--border::before{
  content:"";
  display:inline-block;
  top: 10px;
  width:2px;
  height: 180px;
  background-color:#cfcfcf;
  position:absolute;
  left: 0px;
}

.m_usageplan__overviewWrap--smallborder{}

.m_usageplan__overviewWrap--smallborder::before{
  content:"";
  display:inline-block;
  top: 10px;
  width:2px;
  height: 80%;
  background-color:#cfcfcf;
  position:absolute;
  left: 0px;
}

.m_usageplan__overview {}

.m_usageplan__case {
  display: flex;
  flex-direction: column;
}

.m_usageplan__case+.m_usageplan__case {
  margin-top: 20px;
}

.m_usageplan__heading {
  border-bottom: 3px solid #000;
}

.m_usageplan__headingTxt {}

.m_usageplan__flowList {
  margin-top: 10px;
}

.m_usageplan__item{
  font-size: 16px;
  font-weight: normal;
}

.m_usageplan__flowItem {
  font-weight: normal;
}

.m_usageplan__flowItem::before {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  content: '';
  border-radius: 100%;
  background: black;
}

.m_VideoAppFlow__heading {
  background-color: #E2344A;
  display: flex;
  align-items: center;
  font-size: 24px;
  color: #fff;
  padding: 10px;
}

.m_VideoAppFlow__ttl {}

.m_VideoAppFlow__ttl>span:not([class]) {
  padding-left: 30px;
}

.m_VideoAppFlow__body {
  padding: 10px;
  margin-top: 10px;
}

.m_VideoAppFlow__copy {}

.m_VideoAppFlow__pageLink {}

.m_VideoAppFlow__linkItem {
  line-height: 1.8em;
}

.m_VideoAppFlow__link {
  border-bottom: 1px solid #000;
  font-weight: bold;
}

.m_VideoAppFlow__link:hover{
  opacity: .6;
}

.m_VideoAppFlow__link>i{
  padding-left: 5px;
}

.m_VideoAppFlowNode__heading {
  padding: 10px;
  border: 2px solid #a11f24;
  color: #a11f24;
  font-weight: bold;
  font-size: 20px;
}

.m_VideoAppFlowNode__ttl {}

.m_VideoAppFlowNode__bodyWrap {}

.m_VideoAppFlowNode__body {
  padding: 15px 0px 10px 10px;
  position: relative;
}

.m_VideoAppFlowNode__subHeading {
  padding: 10px;
  font-weight: bold;
  font-size: 18px;
  background-color: #ffdce4;
}

.m_VideoAppFlowNode__subHeading--tips {
  background-color: #DDEDF9;
}

.m_VideoAppFlowNode__subTtl {}

.m_VideoAppFlowNode__subTtlStrength {
  color: #A11F24;
  text-decoration: underline;
}

.m_VideoAppFlowNode__subCopyWrap {
  margin: 15px 0px 10px 10px;
  border-left: 2px dotted;
}

.m_VideoAppFlowNode__subCopyWrap:last-child::before {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 18px;
  display: block;
  width: 15px;
  height: 15px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: translateX(-11px) rotate(135deg);
}

.m_VideoAppFlowNode__subCopyInner {
  padding-left: 10px;
  line-height: 1.6em;
}

.m_VideoAppFlowNode__subCopyWrap--noborder{
  border-left: none;
  padding-left: unset;
}

.m_VideoAppFlowNode__subCopyWrap--noborder:last-child::before{
  display: none;
}

.m_VideoAppFlowNode__subCopy {
  margin-top: 15px;
  font-size: 15px;
}

.m_VideoAppFlowNode__StrengthText {
  font-weight: bold;
}

.m_VideoAppFlowNode__StrengthText--color{
  color: #A11F24;
  font-weight: bold;
}

.m_VideoAppFlowNode__text {
  padding-left: 15px;
}

.m_VideoAppFlowNode__textLink{
  font-weight: bold;
  text-decoration: underline;
}

.m_VideoAppFlowNode__textLink:hover{
  opacity: .6;
}

.m_VideoAppFlowNode__img {
  margin-top: 20px;
}

.m_VideoAppFlowNode__img>img {
  width: 825px;
}

.m_VideoAppFlowNode__imgGroup {
  margin-top: 14px;
  font-weight: bold;
}

.m_VideoAppFlowNode__imgGroup>img {
  width: 825px;
}

.m_VideoAppFlowNode__imgText {
  font-size: 15px;
}

.m_naviTableWrap {
  font-size: 15px;
  opacity: 0;
  height: 0;
  transform: translate(0, 100px);
}

.m_naviTable__heading {
  padding: 10px;
  background-color: #a11f24;
  font-weight: bold;
  color: #fff;
}

.m_naviTable__ttl {}

.m_naviTable {}

.m_naviTable__item {
  margin-top: 5px;
}

.m_naviTable__stepWrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  height: 60px;
  background-color: #ffdce4;
  color: #000;
  font-weight: 600;
}

.m_naviTable__stepWrap--tips {
  background-color: #DDEDF9;
}

.m_naviTable__step {}


.m_maviTable__Inner {}

.m_naviTable__InnerItem {
  display: flex;
  position: relative;
  align-items: center;
  font-size: 15px;
  text-decoration: none;
  color: #000;
  border-left: 5px solid #cfcfcf;
  margin: 10px auto;
  height: 40px;
  padding-left: 10px;
}

.m_naviTable__InnerItem::before{
  content: '';
  display: block;
  width: 102%;
  top: 45px;
  left: -5px;
  height: 1px;
  background-color: #9d9d9d;
  position: absolute;
}

.m_naviTable__InnerItem:hover{
  opacity: .6;
}

.m_naviTable__InnerItem + .m_naviTable__InnerItem {
  margin-top: 15px;
}

.m_naviTable__InnerItemLink {
  font-size: 14px;
  color: #000;
}

.m_naviTable--active {
  display: block;
}

.m_naviTable--inactive {
  display: none;
}


.m_userplan__tipsWrap {
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #DDEDF9;
  font-weight: bold;
  font-size: 18px;
  list-style: 1.4em;
}

.m_userplan__tips {
  color: #000;
}

.m_userplan__tipsCase {
  padding: 15px;
  position: relative;
  height: 130px;
  margin-top: 5px;
}

.m_pagelink{
  margin-right:  10px;
}


/* Utility */
.u_col1 {
  width: 8.333%;
}

.u_col2 {
  width: 16.667%;
}

.u_col3 {
  width: 25%;
}

.u_col4 {
  width: 33.333%;
}

.u_col5 {
  width: 41.666%;
}

.u_col6 {
  width: 50%;
}

.u_col7 {
  width: 58.333%;
}

.u_col8 {
  width: 66.666%;
}

.u_col9 {
  width: 75%;
}

.u_col10 {
  width: 83.33%;
}

.u_col11 {
  width: 91.666%;
}

.u_col12 {
  width: 100%;
}

@media screen and (max-width:768px) {
  .u_resMdCol1 {
    width: 8.333%;
  }

  .u_resMdCol2 {
    width: 16.667%;
  }

  .u_resMdCol3 {
    width: 25%;
  }

  .u_resMdCol4 {
    width: 33.333%;
  }

  .u_resMdCol5 {
    width: 41.666%;
  }

  .u_resMdCol6 {
    width: 50%;
  }

  .u_resMdCol7 {
    width: 58.333%;
  }

  .u_resMdCol8 {
    width: 66.666%;
  }

  .u_resMdCol9 {
    width: 75%;
  }

  .u_resMdCol10 {
    width: 83.33%;
  }

  .u_resMdCol11 {
    width: 91.666%;
  }

  .u_resMdCol12 {
    width: 100%;
  }

  .u_resMdHide {
    display: none !important;
  }

  .u_resMdInline {
    display: inline !important;
  }

  .m_heading__img > img{
    max-width: 100%;
    height: auto;
    margin: 0;
  }

  .l_main{
    width: 100%;
    overflow: visible;
  }

  #base{
    width: 100%;
  }

  .m_usageplan__tabItem{
    width: 100%;
  }

  .m_usageplan__tabLink{
    font-size: 16px;
  }

}

@media screen and (max-width:599px) {
  .u_resSmCol1 {
    width: 8.333%;
  }

  .u_resSmCol2 {
    width: 16.667%;
  }

  .u_resSmCol3 {
    width: 25%;
  }

  .u_resSmCol4 {
    width: 33.333%;
  }

  .u_resSmCol5 {
    width: 41.666%;
  }

  .u_resSmCol6 {
    width: 50%;
  }

  .u_resSmCol7 {
    width: 58.333%;
  }

  .u_resSmCol8 {
    width: 66.666%;
  }

  .u_resSmCol9 {
    width: 75%;
  }

  .u_resSmCol10 {
    width: 83.33%;
  }

  .u_resSmCol11 {
    width: 91.666%;
  }

  .u_resSmCol12 {
    width: 100%;
  }

  .u_resSmHide {
    display: none !important;
  }

  .u_resSmInline {
    display: inline !important;
  }

  .m_heading__img > img{
    max-width: 100%;
    height: auto;
    margin: 0;
  }

  .l_main{
    width: 100%;
    overflow: visible;
  }

  #base{
    width: 100%;
  }

  .m_usageplan__tabItem{
    width: 100%;
  }

  .m_usageplan__tabLink{
    font-size: 16px;
  }

}

.u_br {}

.u_br::before {
  content: "\A";
  white-space: pre;
}

.u_hide {
  display: none !important;
}

.u_opaque {
  opacity: 0;
  height: 0;
}

.u_indent{
  margin-left: 10px;
}

.u_indent__large{
  margin-left: 30px;
}

/* JS逕ｨ繧ｯ繝ｩ繧ｹ */
.js_targetStep,
.js_targetStepSection,
.js_plan {
  transition-duration: 150ms;
}

.js_plan--inactive {
  z-index: 0;
  opacity: 0;
  height: 0;
  transition-duration: 600ms;

}

.js_plan--active {
  z-index: 10;
  top: 0;
  opacity: 1;
  transform: translate(0, 0);
  transition: all 600ms;
  height: auto;
}

.js_targetStep--active {
  background-color: #e2344a;
  color: #fff;
}

.js_targetlink {
 color: #000;
}

.js_targetlink:hover {
 opacity: .6;
}

.js_targetlink--active {
  border-left: 5px solid #E2344A;
}