@charset "UTF-8";
/***************************************************
記事単体 videoType1
***************************************************/
:root {
  --app-main-txt: #FF5C58;
  --app-main-cr: #FD8F8F;
  --app-main-cr-c: #58BFFD;
  --app-main-brd: #e7e7e7;
  --app-bg-cr: #F7D9D9;
  --app-glnv-cr: #FD8F8F;
  --app-sbnv-cr: #FFEDD3;
  --app-sbnv-txt: #898989;
  --app-copy-txt: #ddd;
  --app-alert-cr: #FF5C58;
  --app-alert-bg: #FFF0F3;
  --app-gray-brd: #e7e7e7;
  --app-gray-txt: #898989;
  --app-gray-bg: #f2f2f2;
  --app-btn-check: #58BFFD;
  --app-btn-save: #FF5C58;
  --app-btn-back: #58BFFD;
  --app-main-hov: rgba(88, 191, 255, 0.25);
  --app-main-hov-c: rgba(88, 191, 255, 0.2);
  --main-font: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  --txt-size-s: 14px;
}


p.strongTxt{text-align:center;line-height:2;padding-bottom: 8px;}
p.strongTxt span{padding-bottom:4px;border-bottom:1px dotted #FD8F8F;font-weight:bold;}
.ordsv_saveBox p.strongTxt{color:#FF5C58;}
ul li {
  font-size: 16px;
  line-height: 1.75;
  list-style: none;
}
@media screen and (max-width:425px) {
  ul li {
    font-size: 14px;
  }
}
/************ 閲覧不可時本文 ************/
.closedBox{
  width:71%;
  padding:40px 0px 16px;
  margin:32px auto;
  border:2px solid var(--app-main-brd);
  position:relative;
}

.closedBox::before{
  position:absolute;
  content:'';
  background:#fff;
  width:32px;
  height:38px;
  top:-6px;
  left:-6px;
}
.closedBox::after{
  position:absolute;
  content:'';
  background:url(../../images/contents/icon_conBox_key.png)no-repeat;
  background-size:contain;
  width:26px;
  height:26px;
  top:-6px;
  left:-6px;
}

.closedBox__title{
  font-size:20px;
  font-weight:bold;
  text-align: center;
}
.closedBox__title span{
  color:var(--app-main-cr);
}

@media screen and (max-width:540px){
  .closedBox{
    width:85%;
    padding:40px 0px 16px;
    margin:32px auto;
    border:1px solid var(--app-main-brd);
  }
  .closedBox::after{
    width:24px;
    height:24px;
    left:-4px;
  }
  .closedBox__title{
    font-size:17px;
  }
}

/****************** デフォルトボタン ******************/
.buttonBox{
  text-align: center;
  margin:16px auto;
}
button,.buttonBox a{
  font-size:16px;
  background:var(--app-main-cr);
  color:#fff;
width:360px;
margin:auto;
  border:none;
  padding:16px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  transition:0.4s ease;
}
button{width:90%;}
.buttonBox a{
  display: block;
  margin:auto;
}
button:hover{
  transform:scale(0.99);
  box-shadow: none;
  transition:0.2s ease;
}
button.line,.buttonBox a.line{
  color: var(--app-main-txt);
  padding:14px 8px;
  background:none;
  border:2px solid var(--app-main-txt);
  box-shadow: none;
}
button.line:hover{
  background:var(--app-bg-cr);
  transform:scale(1);
}

@media screen and (max-width:767px){
  button,.buttonBox a{
    width:320px;
  }
}
@media screen and (max-width:440px){
  button,.buttonBox a{
    width:71%;
  }
}

/****************** 目立つボタン ******************/

button.main,.buttonBox a.main{
  background:var(--app-main-cr-c);
}
button.mainBig,.buttonBox a.mainBig{
  font-size:18px;
  width:480px;
  background:var(--app-main-cr-c);
}

@media screen and (max-width:650px){
  button.mainBig,.buttonBox a.mainBig{
    width:85%;
  }
}
@media screen and (max-width:540px){
  button.mainBig,.buttonBox a.mainBig{
    width:90%;
  }
}

/****************** アイコンボタン ******************/

/****************** 次記事リンクボタン ******************/
.nbLinkBox{
  display:flex;
  align-items: center;
  justify-content: center;
}
.nbLinkBox p{
  margin:16px;
}
button.nbLink__back{
  color: var(--app-main-cr-c);
  width:200px;
  padding: 13px 0px;
  background:none;
  border: 2px solid var(--app-main-cr-c);
  box-shadow: none;
  position:relative;
}
button.nbLink__back::before{
  position:absolute;
  content:'';
  border-style: solid;
  border-width: 6px 6px 6px 0;
  border-color: transparent var(--app-main-cr-c) transparent transparent;
  top:50%;
  left:4px;
  transform:translateY(-50%);
}
button.nbLink__back:hover{
  background: var(--app-main-hov-c);
  transform:scale(1);
}

button.nbLink__next{
  width:200px;
  padding: 13px 0px;
  background:var(--app-main-cr-c);
  border: 2px solid var(--app-main-cr-c);
  box-shadow: none;
  position:relative;
}
button.nbLink__next::after{
  position:absolute;
  content:'';
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent #fff;
  top:50%;
  right:4px;
  transform:translateY(-50%);
}
button.nbLink__next:hover{
  opacity:0.75;
  transform:scale(1);
}

@media screen and (max-width:540px) {
 .nbLinkBox p{
  margin:8px;
  width:40%;
 }
button.nbLink__next{
  width:100%;
}
button.nbLink__back{
  width:100%;
}
}
/****************** フォームボタン ******************/

/* 確認ボタン */
button.check{
  background:var(--app-btn-check, #58BFFD);
}

/* 完了ボタン */
button.save{
  background:var(--app-btn-save, #FF5C58);
}

/* 戻るボタン */
button.back{
  background:var(--app-btn-back, #58BFFD);
}

/* 決済フォーム中間ページ */
.plan-logo{
max-width:160px;
margin:auto;
}
.cta-txt{
width:60%;
margin:auto;
position:relative;
text-align: center;
font-weight:bold;
font-size:20px;
transform:translateY(8px);
}
.cta-txt p span{
font-size:135%;
color:#FC578A;
}
.cta-txt::before{
    position: absolute;
    content: '';
    width: 25px;
    height: 2px;
    top: 50%;
    left: 30%;
    background-color: #333;
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg);
}
.cta-txt::after {
    position: absolute;
    content: '';
    width: 25px;
    height: 2px;
    top: 50%;
    right: 30%;
    background-color: #333;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

@media screen and (max-width:540px){
.plan-logo{
width:30%;
margin-top:20px;
}
.cta-txt::before{
    left: 0%;
}
.cta-txt::after {
    right: 0%;
}
}