.link {
    width: 80%;
    border: 2px solid #EEE;
    border-radius: 20px;
    box-shadow: 2px 2px 2px #EEE;
    margin: 5% auto;
    padding: 5%;
    display: flex;
    align-items: center;
    color: #ffb566;
    position: relative;
}
.link-icon {
    width: 20%;
    height: auto;
    padding-right: 5%;
}

.title {
    width: 60%;
    height: auto;
}

.arrow-right{
    width: 10%;
    height: auto;
    position: absolute;
    right: 5%;
}


.footer-link {
    width: 100%;
    font-size: 2rem;
    display: flex;
    align-items: center;
    color: #ffb566;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: absolute;
    bottom: 150px;
}
.footer-link-inner {
    border: 2px dashed #CCC;
    position: relative;
    display: flex;
    align-items: center;
    /* padding: 5%; */
    justify-content: center;
    height: 100px;
    padding-right: 15%;
}
.footer-link-icon {
    width: 10%;
    height: auto;
    padding-right: 5%;
}
.footer-arrow-right{
    width: 10%;
    height: auto;
    position: absolute;
    right: 5%;

    /* display: none;後で消す */
}
.footer-adjust {
    width: 6%;
    padding-left: 3%;
    padding-right: 7%;
}


/*-----------index-----------*/
.index-login-btn {
    height: 60px;
    width: 20%;
    font-size: 3vw;
    border-radius: 10px;
    background-color: #ff8368;
    padding: 1%;
    align-items: center;
    border: 0;
    color: white;
    box-shadow: 0 5px 0 #ff3c3c;
    position: absolute;
    right: 0;
    margin-right: 1%;
    margin-top: 1%;
}
.index-title-img {
    width: 60%;
    display: flex;
    padding-top: 10%;
    margin: 0 auto;
    margin-bottom: 8%;
}
.regist-btn {
    height: 100px;
    width: 38%;
    font-size: 3vw;
    border-radius: 10px;
    background-color: #ff8368;
    padding: 1%;
    border: 0;
    color: white;
    box-shadow: 0 10px 0 #ff3c3c;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10%;
}
.index-explain {
    text-align: center;
    margin-bottom: 5%;
    font-size: 32px;
    font-weight: bold;
}
/*
.index-icon-area {
    display: flex;
    justify-content: center;
    margin-bottom: 10%;
}
.index-icon-area a:first-child {
    text-align: end;
}
.index-icon-area a:last-child {
    text-align: start;
}
*/
/*
.index-icon {
    width: 30%;
    height: auto;
    margin-right: 3%;
    margin-left: 3%;
}
.index-icon-link {
    width: 60%;
    height: auto;
    margin-right: 6%;
    margin-left: 6%;
}
*/
.regist-icon {
    width: 15%;
    /* height: auto; */
    padding-right: 5%;
}







/*-----------support-----------*/
.sapo-ribbon {
    color: white;
    background-color: #ffb566;
    display: inline-block;
    position: relative;
    height: 100px;/*リボンの高さ*/
    line-height: 100px;/*リボンの高さ*/
    text-align: center;
    padding: 0 30px;/*横の大きさ*/
    font-size: 18px;/*文字の大きさ*/
    box-sizing: border-box;
    width: 65%;
    margin: 0 auto;
    margin-bottom: 5%;
    margin-top: 5%;
}


.sapo-ribbon:before, .sapo-ribbon:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}
  
.sapo-ribbon:before {
    top: 0;
    left: 0;
    border-width: 50px 0px 50px 30px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
}
  
.sapo-ribbon:after {
    top: 0;
    right: 0;
    border-width: 50px 30px 50px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
}

.sapo-ribbon-title {
    font-size: 3.5vw;
}
#sousalite{
    background-color: #7f7f7f;
}
#sousapremium{
    background-image: radial-gradient(circle, #FCE364, #B29400 31%);
    color: #000;
    font-weight: bold;
}

.soudan-ribbon {
    color: white;
    background-color: #ffb6c1;
    display: inline-block;
    position: relative;
    height: 100px;/*リボンの高さ*/
    line-height: 100px;/*リボンの高さ*/
    text-align: center;
    padding: 0 30px;/*横の大きさ*/
    font-size: 18px;/*文字の大きさ*/
    box-sizing: border-box;
    width: 65%;
    margin: 0 auto;
    margin-bottom: 5%;
    margin-top: 5%;
}

.soudan-ribbon:before, .soudan-ribbon:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}
  
.soudan-ribbon:before {
    top: 0;
    left: 0;
    border-width: 50px 0px 50px 30px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
}
  
.soudan-ribbon:after {
    top: 0;
    right: 0;
    border-width: 50px 30px 50px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
}

.soudan-ribbon-title {
    font-size: 3.5vw;
}

.form-btn {
    height: 100px;
    width: 40%;
    font-size: 3vw;
    border-radius: 10px;
    background-color: #ff8368;
    padding: 1%;
    align-items: center;
    border: 0;
    color: white;
    box-shadow: 0 10px 0 #ff3c3c;
    margin: 5% auto;
    margin-bottom: 10%;
    text-align: center;
}

.container {
    margin: 0 auto;
    width: 90%;
    display: flex;
    justify-content: center;
    flex-flow: column;
}

.explain1 {
    text-align: center;
    margin-bottom: 5%;
    font-size: 40px;
    font-weight: bold;
}
.explain2 {
    width: 70%;
    font-size: 32px;
    font-weight: bold;
    /* border: 5px solid #777;
    border-radius: 50px; */
    padding: 0 5%;
    margin: 0 auto;
    margin-bottom: 5%;
    position: relative;
}
.ex2-list li {
    list-style-type: none!important;
}
  
.ex2-list li:before {
    content: "■";
}
.ex2-img {
    width: 130px;
    position: absolute;
    right: 0;
    top: 10%;
    transform: rotate(45deg);
}
.ex3-title {
    margin-top: 10%;
    margin-bottom: 5%;
    font-size: 40px;
}
.explain3 {
    text-align: center;
    margin-bottom: 2%;
    font-size: 40px;
    font-weight: bold;
}
.ex3-link {
    color: blue;
    font-size: 40px;
    line-height: 2;
}
.ex2-sentence {
    font-weight: bold;
    font-size: 28px;
    text-align: center;
}
.ex3-agree {
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 5%;
}

input[type="checkbox"]  {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

/* チェックボックスデザイン */

input[type="checkbox"] {
    cursor: pointer;
    padding-left: 30px;/*label手前にチェックボックス用の余白を開ける*/
    vertical-align: middle;
    position: relative;
  }
  input[type="checkbox"]::before,
  input[type="checkbox"]::after {
    content: "";
    display: block; 
    position: absolute;
  }
  input[type="checkbox"]::before {
    background-color: #fff;
    border-radius: 0%;
    border: 1px solid #666464;
    width: 40px;/*チェックボックスの横幅*/
    height: 40px;/*チェックボックスの縦幅*/
    transform: translateY(-50%);
    top: 50%;
    left: -20px;
  }
  input[type="checkbox"]::after {
    border-bottom: 3px solid #666464;/*チェックの太さ*/
    border-left: 3px solid #666464;/*チェックの太さ*/
    opacity: 0;/*チェック前は非表示*/
    height: 14px;/*チェックの高さ*/
    width: 24px;/*チェックの横幅*/
    transform: rotate(-45deg);
    top: -14px;/*チェック時の位置調整*/
    left: -12px;/*チェック時の位置調整*/
  }
  input[type="checkbox"]:checked::after {
    opacity: 1;/*チェック後表示*/
  }

.callcenter {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}
.attention-area {
    display: flex;
    justify-content: center;
}
.attention-detail {
    width: 70%;
    font-size: 28px;
    padding-left: 10%;
    margin: 5%;
}
.ta-center {
    text-align: center;
}
.inquiry-area {
    width: 80%;
    font-size: 38px;
    font-weight: bold;
    border: 3px solid black;
    border-radius: 30px;
    padding: 4%;
    margin: 0 auto;
    margin-bottom: 5%;
    position: relative;
    text-align: center;
}
.inquiry-link {
    color: blue;
}
.call-link-disable {
    pointer-events:none;
    background-color: #666;
    box-shadow: 0 10px 0 #CCC;
}
.attention {
    text-align: center;
    margin-bottom: 5%;
    font-size: 32px;
    font-weight: bold;
}
.btn-area {
    display: flex;
    flex-flow: column;
}
.btn-area :first-child {
    margin-bottom: 5%;
}
body.open_popup {
    overflow: hidden;
}
/*-------------------------モーダル--------------------------------*/
.bg_onetime_popup {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

body.open_popup .bg_onetime_popup{
    opacity: 1;
    visibility: visible;
}
div.open_popup2{
    opacity: 1;
    visibility: visible;
}
.onetime_popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 500px;
    background-color: #fff;
    width: 90%;
    font-size: 38px;
    font-weight: bold;
    border-radius: 25px;
    border: 3px solid black;
}

.onetime_popup_title {
    position: relative;
    padding: 1em 80px;
    margin: 0px;
    /* background-color: #3388dd; */
    color: #fff;
    font-size: 32px;
    text-align: center;
    line-height: 1.5;
}

.onetime_popup_title_close {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    cursor: pointer;
}
.onetime_popup_title_close::before,
.onetime_popup_title_close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 4px;
    background-color: black;
    content: "";
}
.onetime_popup_title_close::before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.onetime_popup_title_close::after {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.onetime_popup_content {
    text-align: center;
    padding: 0 5% 5% 5%;
}
.onetime_popup_content p:first-child {
    margin-top: 0;
}
/*------------------------------------------------------------------*/
#ex4-input {
    font-size: 32px;
    margin-bottom: 10%;
}
#ex4-title {
    margin-bottom: 10%;
}
.explain4-1 {
    margin: 15% 0;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
}
.support-img-area {
    width: 50vw;
    margin: 0 auto;
    margin-bottom: 15%;
}
.dial-img-area {
    width: 20vw;
}
.tel1 {
    display: flex;
    justify-content: center;
    flex-flow: row;
    align-items: center;
    font-size: 72px;
    font-weight: bold;
}
.tel2 {
    display: flex;
    justify-content: space-evenly;
    flex-flow: row;
    align-items: center;
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 5%;
}


/*-----------restore-----------*/
.explain5,
.explain7 {
    text-align: center;
    margin-bottom: 5%;
    font-size: 38px;
    /* font-weight: bold; */
}

.explain6 {
    width: 80%;
    font-size: 24px;
    font-weight: bold;
    /* padding: 0% 10%; */
    margin: 0 auto;
    /* margin-bottom: 5%; */
}
.ex6-sentence {
    text-align: center;
    margin-top: 5%;
}
.restore1-img {
    width: 20vw;
}
.restore1-img-area {
    display: block;
}
.img-line1 {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 5%;
}
.img-line2 {
    display: flex;
    justify-content: space-evenly;
    padding: 0 12%;
}
.ex6-list {
    padding-left: 25%;
}    
.ex6-list li {
    list-style-type: none!important;
}
  
.ex6-list li:before {
    content: "■";
}
.ex6-list-adjust {
    padding-left: 2%;
}

.ex7-link {
    color: blue;
}
.ex7-agree {
    margin: 10% 0;
}
.disable {
    background-color: #666;
    box-shadow: 0 10px 0 #CCC;
}

.ex7-title,
.ex8-title {
    margin-top: 10%;
    margin-bottom: 5%;
    font-weight: bold;
    font-size: 38px;
}
.explain8 {
    text-align: center;
    /* margin-bottom: 5%; */
    font-size: 32px;
    /* font-weight: bold; */
}
.explain8-2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 3%;
}
.explain8-2 a {
    font-size: 50px;
}
.ex8-contents {
    width: 80%;
    margin: 0 auto;
    text-align: left;
}
.ex8-contents a {
    color: blue;
}
.ex8-order {
    font-size: 50px;
    /* margin-bottom: 10%; */
    border: 1px solid black;
    width: 90%;
    height: 80px;
    padding-left: 5%;
}
.ex8-license {
    font-size: 24px;
}
.explain9 {
    width: 90%;
    font-size: 24px;
    /* font-weight: bold; */
    padding: 2% 5%;
    margin: 0 auto;
    margin-bottom: 5%;
}
.fw-bold {
    font-weight: bold;
}
/*-----------login-----------*/
/* テーブル */
.login-table {
    width: 50%;
    margin: 0 auto;
}

.forget {
    position: absolute;
    right: 25%
}

.login-btn {
    display: flex;
    margin: 0 auto;
    margin-top: 5%;
}

.forget-area {
    text-align: end;
    margin-bottom: 15%;
}
.forget-area a {
    border-bottom: 2px solid tomato;
    font-size: 28px;
}
/* ログインフォーム */
@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page,
.pass-form {
  padding: 25% 0 0;
}
.form {
  margin: 0 auto 100px;
  width: 72vw;
}
.form input {
  font-family: "Roboto", sans-serif;
  /* outline: 0;
  background: #f2f2f2; */
  width: 100%;
  border: 1px solid black;
  margin: 0 0 50px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 40px;
  /* height: 100px; */
}
.form span {
    font-size: 40px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #ff8368;
  width: 50%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 40px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  /* height: 100px */
}
.form button:hover,.form button:active,.form button:focus {
  background: #ff6b5d;
}
.form .message {
  margin: 15px 0 0;
  /* color: #b3b3b3; */
  font-size: 28px;
}
.form .message a {
  color: #ffb566;
  text-decoration: none;
}
.form .register-form {
  display: none;
}


/*-----------logout-----------*/
.done-msg {
    text-align: center;
    font-size: 30px;
    margin: 20% 0;
}

.top-btn {
    height: 60px;
    width: 20%;
    font-size: 3vw;
    border-radius: 10px;
    background-color: #ff8368;
    padding: 1%;
    border: 0;
    color: white;
    box-shadow: 0 5px 0 #ff3c3c;
    margin-right: 1%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 10%;
}



/*-----------registconf-----------*/
.regist-form {
    text-align: center;
}
.regist-form p {
    font-size: 36px;
    font-weight: bold;
}
.regist-form .subject {
    font-size: 26px;
    text-align: start;
    /* font-weight: bold; */
}
.regist-form .id,
.regist-form .pass {
    font-size: 36px;
    font-weight: bold;
}

.regist-form .btn-back {
    color: #ffb566;
    background-color: white;
    border: 1px solid #ffb566
}
.regist-form .btn-back,
.regist-form .btn-regist {
    margin-top: 7%;
}
/* .regist-tbl {
    margin: 0 auto;
    margin-bottom: 10%;
} */
/*-----------result-----------*/
.contract-tbl{
    width:97%;
    margin:16px;
    font-size:32px;
}
.contract-tbl,
.contract-tbl td, 
.contract-tbl th {
    border: 1px #ffb566 solid;
}
.contract-tbl th {
    background: #ffb566;
    text-shadow: 0 -1px 0 rgba(67, 40, 4, 0.9);
}
.contract-tbl tr:nth-child(2n+1) {
    background: #fcf8f1;
}
div.u_info{
    width:97%;
    margin:16px;
    font-size:32px;
}
/*-----------mypage-----------*/
.mypage-list {
    height: 80vh;
    /* height: calc(100vh - 490px); */
    background-color: gray;
}

.mypage-list ul {
    padding-left: 0;
    /*padding-top: 10%;*/
    margin-top: 0;
}
.mypage-list li {
    list-style: none;
    font-size: 5vw;
    /* color: white; */
    /* margin-bottom: 3%; */
    text-align: center;
    line-height: 2.5;
}

.mypage-list a {
    color: white;
}

.contents-list {
    color: white;
    font-size: 5vw;
    text-align: center;
    padding-top : 90px;
}
.order-number,
.license-code {
    color: white;
    font-size: 5vw;
    text-align: center;
}

/*-----------withdraw-----------*/
.withdraw-title {
    margin-top: 10%;
    margin-bottom: 5%;
    font-weight: bold;
    font-size: 38px;
    text-align: center;
}
.withdraw-form {
    text-align: center;
}
.withdraw-form p {
    font-size: 32px;
    font-weight: bold;
}
.withdraw-form .subject {
    font-size: 26px;
    text-align: start;
    /* font-weight: bold; */
}
.withdraw-form .id,
.withdraw-form .pass {
    font-size: 36px;
    font-weight: bold;
}

.withdraw-form .btn-back {
    color: #ffb566;
    background-color: white;
    border: 1px solid #ffb566
}
.withdraw-form .btn-back,
.withdraw-form .btn-regist {
    margin-top: 7%;
}

.withdraw-txt {
    font-size: 42px;
    height: 300px;
    width: 70vw;

}
/*-----------term-----------*/
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 75vh;
    background-color: gray;
    flex-flow: column;
}
.child {
    width: 70vw;
    background-color: white;
    padding: 0 5%;
    font-size: 40px;
    color: #777;
    margin: 10% 0;
}
.term-title {
    text-align: center;
    font-weight: bold;
}
.term-heading {
    font-weight: bold;
}
.term-inquiry-link {
    margin-top: 5%;
    border-bottom: 1px black solid;
}
/*-----------inquiry-----------*/
.parent-inquiry {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 75vh;
    /* position: relative; */
    background-color: gray;
    flex-flow: column;
    height: 80vh;
}
.child-inquiry {
    width: 70vw;
    min-height: 35vh;
    background-color: white;
    padding: 3% 3%;
    font-size: 40px;
    color: #777;
    margin: 10% 0;
}
.btn-inquiry {
    width: 50vw;
    padding: 5%;
    font-size: 40px;
    color: white;
    background-color: #ff8368;
    border: none;
}
/*-----------privacy-----------*/
.child-common {
    width: 70vw;
    background-color: white;
    padding: 10% 5%;
    font-size: 40px;
    color: #777;
    margin: 10% 0;
}

.term-inquiry-link,
.privacy-inquiry-link {
    color: blue;
    margin-top: 5%;
    border-bottom: 1px black solid;
}
.privacy-title {
    text-align: center;
    font-weight: bold;
}
.privacy-heading {
    font-weight: bold;
}

/*-----------faq-----------*/
.inquiry-container {
    /* background-color: gray; */
    padding: 10%; 
    /* height: 72vh; */
}
.faq-title {
    font-weight: bold;
    margin-bottom: 5%;
    text-align: center;
    font-size: 40px;
}
.faq-group {
    margin-bottom:10%;
}
.faq-genre {
    font-size: 40px;
    margin-right: 2%;
}
.faq-question-text {
    padding: 1%;
    font-size: 40px;
    /* background-color: white;
    color: #777; */
    margin-bottom: 10%;
    border-bottom: 1px solid gray;
}
.faq-answer {
    display: none;
    margin-left: 5%;

}
.faq-answer-text {
    font-size: 40px;
}


.faq-detail {
    font-size: 40px;
    font-weight: bold;
}
.faq-btn-area {
    display: flex;
}

/*-----------asct-----------*/
.asct-title {
    text-align: center;
    font-weight: bold;
}
.asct-content {
    padding-left: 5%;
    padding-bottom: 25px;
    font-size:35px;
}
.asct-heading {
    font-weight: bold;
}
p.hanging{
    margin-left: 2rem;
  text-indent: -2rem;
  font-size: 35px;
}
p.hanging2{
    margin-left: 6rem;
  text-indent: -6rem;
  font-size: 35px;
}
p.hanging0{
  font-size: 35px;
}
div.hanging{
  margin-left: 4rem;
  text-indent: -4rem;
  font-size: 35px;
}
div.sapo_notis{
    text-align: left;
    margin: 140px 140px 70px 140px;
}
p.notis_title{
        text-align: center;
    background-color: darkgray;
    color: white;
    margin: 0;
    font-size: 45px;
}
p.notis_text{
    margin: 0 0 50px 10px;
    font-size: 23px;
}
div.consent{
    font-size: 35px;
}
div.consent-area{
    margin-bottom: 20px;
}
a.consent-area2{
    color:blue;
}