@charset "UTF-8";

/*---------- ページ全体の指定 ----------*/

body {
margin:0;
padding:0;
font-size:100%;
color:#3c3c43;
background-color:#fff!important;
font-family:'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
}


/*---------- リンク設定 ----------*/

#wrapper a:link {color:#37859a;text-decoration:underline;}
#wrapper a:visited {color:#37859a;text-decoration:underline;}
#wrapper a:hover {color:#139eb1;text-decoration:none;}
#wrapper a{-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;}
#wrapper a img {border-style:none;}
#wrapper img {vertical-align:bottom;image-rendering:-webkit-optimize-contrast;}
#wrapper a:hover img{opacity:0.6;filter:alpha(opacity=60);}
#wrapper a img {border-style:none;-webkit-transition:all .3s;transition:all .3s;}


/*---------- ベーステキストの指定 ----------*/

#wrapper p {
font-size:100%;
line-height:180%;
}
@media screen and (min-width:769px){
#wrapper p {
font-size:18px;
line-height:180%;
letter-spacing:1px;
}
}


/*---------- 見出し ----------*/

h1{}
h2{}
h3{}
h4{}


/*---------- PC・スマホの非表示指定 ----------*/

@media screen and (max-width:768px){.spnone{display:none;}}
@media screen and (min-width:769px){.pcnone{display:none;}}



/*------------------------------ ヘッダー ------------------------------*/

header{
width:100%;
/* height:55px; */
margin:0;
padding:0;
background:rgba(235,130,129,0.9);
position:fixed;
top:0;
left:0;
z-index:9990;
}
.logo {
margin:0 auto;
/* padding:10px 15px 0 15px; */
padding:10px 15px;
}
.logo img{width:180px;}
#wrapper{
margin:0;
padding:55px 0 0 0;
}
.upg_subcopy{
margin:0;
padding:30px 0 0 0;
font-size:120%;
line-height:150%;
text-align:center;
color:#eb8281;
}
.upg_copy{
margin:0 0 45px 0;
padding:0;
font-size:180%;
font-weight:900;
line-height:150%;
text-align:center;
font-family: "Noto Sans Japanese";
}
@media screen and (min-width:769px){
/* header{height:65px;} */
/*.logo {width:1080px;padding:15px 0 0 0;}*/
.logo {padding:15px 0;}
.logo img{width:200px;}
#wrapper{padding:65px 0 0 0;width: 1080px;margin: 0 auto;}
.upg_subcopy{padding:60px 0 0 0;font-size:21px;}
.upg_copy{margin:0 0 75px 0;font-size:48px;}
}


.upg_subhead{
margin:100px 0 20px 0;
padding:0 0 5px 0;
font-size:150%;
font-weight:900;
line-height:150%;
font-family: "Noto Sans Japanese";
border-bottom:2px solid #eb8281;
}
.upg_contents{
margin:0 20px 45px 20px;
padding:0;
}
.upg_contents a.btn {
text-decoration: none!important;
}
.upg_contents .button {
width: 230px;
}
.upg_howto{
margin:0 20px 45px 20px;
padding:0;
}
table.packplan {
width:100%;
margin:0;
padding:0;
border-collapse: separate;
border-spacing: 5px;
}
table.packplan td {
padding: 10px;
}
table.packplan thead th{
padding:15px 10px;
font-size:100%;
color:#fff;
border-right: none;
}
table.packplan th{
padding:10px;
font-size:100%;
text-align:left;
line-height: 130%;
}
table.packplan tr.bggray {background-color:#f9f9f9;}
table.packplan th span.single{font-size:80%;font-weight: normal;	}
table.packplan td {padding:10px;text-align:center;}
table.packplan td i{font-size:1.5em;}
table.packplan summary { list-style-type: "\1F4AC";}
table.packplan details p {
 font-size: 12px !important;
 font-weight: normal;
}

/*.plan_free{background:#fff;color: #bbb !important;}*/
.plan_free{background: #FFF;border: 1px solid #999!important;color: #999!important;}
.plan_silver{background:#999;}
.plan_gold{background:#ce9900;}
.plan_platinum{background:#5aa0c2;}
.upg_plan_name{
margin:0 0 25px 0;
padding:0;
font-size:100%;
line-height:150%;
text-align:center;
border-bottom:solid 1px #fff;
}
.upg_plan_off{
margin:0;
padding:0;
font-size:100%;
line-height:150%;
text-align:center;
font-family:Arial, Helvetica, "sans-serif";
animation:flash 1.5s linear infinite;
}
@keyframes flash {
 0% {opacity:1;}
 50% {opacity:0.4;}
 100% {opacity:1;}
}
.upg_plan_off span{font-size:240%;}
.upg_plan_price{
margin:0;
padding:10px 0;
font-size:90%;
line-height:150%;
text-align:center;
}
.upg_plan_price span{font-size:180%;font-family:Arial, Helvetica, "sans-serif";}
.upg_plan_price-y{
margin:0;
padding:10px 0;
font-size:80%;
line-height:150%;
text-align:center;
font-weight: normal;
}
.upg_plan_price-y span{font-size:140%;font-family:Arial, Helvetica, "sans-serif";font-weight: bold;}
.upg_plan_price-m{
color: #333;
margin:0;
padding:7px 2px;
font-size:90%;
line-height:150%;
text-align:center;
background-color: #fff;
}
.upg_plan_price-m span{font-size:180%;font-family:Arial, Helvetica, "sans-serif";}
.upg_plan_price-m i{border-bottom: solid 3px #e53742;font-style:normal;}
.upg_plan_single{
margin:0;
padding:0;
font-size:75%;
font-weight:normal;
line-height:150%;
text-align:center;
opacity:0.6;
}
.check_free{color:#666;}
.check_silver{color:#666;}
.check_gold{color:#ce9900;}
.check_platinum{color:#5aa0c2;}
.purchase{
margin:0;
padding:0;
text-align:center;
}
#wrapper .purchase a:link {color:#000;text-decoration:none;}
#wrapper .purchase a:visited {color:#000;text-decoration:none;}
#wrapper .purchase a:hover {color:#f7b93b;text-decoration:none;}
.buybtn {
width:100%;
margin:0 auto 0 auto;
padding:15px 5px;
font-size:100%;
font-weight:bold;
display:block;
background:#f7b93b;
border:solid 1px #f7b93b;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.buybtn:hover {
background:#fff;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}
.buybtn0 {
width:100%;
margin:0 auto 0 auto;
padding:15px 0;
font-size:100%;
font-weight:bold;
display:block;
background:#999;
border:solid 1px #999;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.upg_for {
margin: 0;
padding:10px 5px;
position:relative;
display:inline-block;
width:100%;
font-size:90%;
color:#e53742;
background:#fff;
text-align:center;
border:solid 2px #e53742;
box-sizing:border-box;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.upg_for:before {
content: "";
position:absolute;
bottom:-24px;
left:50%;
margin-left:-15px;
border:12px solid transparent;
border-top:12px solid #FFF;
z-index:2;
}
.upg_for:after {
content: "";
position:absolute;
bottom:-29px;
left:50%;
margin-left:-17px;
border:14px solid transparent;
border-top:14px solid #e53742;
z-index:1;
}
@media screen and (min-width:200px) and ( max-width:768px) {
.scroll-table{
margin:0;
padding:0;
overflow:auto; 
white-space:nowrap;
}
}
@media screen and (min-width:769px){
.upg_subhead{
margin:100px auto 90px auto;
padding:0 0 5px 0;
font-size:30px;
width:1080px;
}
.upg_howto{
width:768px;
margin:0 auto 90px auto;
}
table.packplan {width:100%;table-layout:fixed;}
table.packplan thead th{padding:15px;font-size:18px;}
table.packplan th{padding:15px;font-size:18px;}
table.packplan tr.bggray {background-color:#f9f9f9;}
table.packplan th span.single{font-size:14px;font-weight: normal;}
table.packplan td {padding:15px;}
.upg_plan_name{font-size:24px;}
.upg_plan_off{font-size:24px;}
.upg_plan_price{font-size:15px;}
.upg_plan_single{font-size:12px;}
.buybtn {font-size:18px;}
.upg_for {font-size:16px;}
.scroll-table{margin:0;padding:0;}
.upg_plan_price-m{font-size:16px;}
.upg_plan_price-y{font-size:14px;}
}


.upg_movie{
margin:0 20px 45px 20px;
padding:0;
}
.iframe_box{
width:100%;
height:0;
margin:0;
padding:56.25% 0 0 0;
position:relative;
border:solid 1px #eee;
}
.iframe_box iframe{
width:100%;
height:100%;
top:0;
left:0;
position:absolute;
}
@media screen and (min-width:769px){
.upg_movie{width:768px;margin:0 auto 90px auto;}
}


.upg_detail_box{
margin:30px 0 0 0;
padding:0;
}
.upg_category{
margin:0;
padding:15px 0 15px 10px;
font-size:120%;
font-weight:bold;
line-height:150%;
font-family: "Noto Sans Japanese";
-webkit-box-sizing:border-box;
box-sizing:border-box;
background:#f9f9f9;
display:flex;
align-items:center;
}
.upg_category_free{
background:#999; !important;
color: white; !important;
}
.upg_category_silver{
background:#999; !important;
color: white; !important;
}
.upg_category_gold{
background:#ce9900; !important;
color: white; !important;
}
.upg_category_platinum{
background:#5aa0c2; !important;
color: white; !important;
}
.upg_detail{margin:0;padding:10px 0 0 0;}
table.singleplan{
width:100%;
margin:0;
border-collapse:collapse;
}
table.singleplan th{
padding:10px 10px 10px 0;
font-size:100%;
line-height:150%;
border-bottom:solid 1px #eee;
text-align:left;
}
table.singleplan td{
width:28%;
padding:10px 0 10px 10px;
font-size:100%;
line-height:150%;
text-align:right;
border-bottom:solid 1px #eee;
}
@media screen and (min-width:769px){
.upg_detail_box{
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
justify-content:space-between;
}
.upg_category{width:35%;padding:0 0 0 20px;font-size:21px;}
.upg_detail{width:65%;padding:0;}
table.singleplan th{padding:10px 10px 10px 20px;font-size:18px;}
table.singleplan td{width:180px;padding:10px;font-size:18px;}
}
.howto img{
display: block;
margin:0 auto 30px;	
padding:0;
border:solid 1px #eee;
}
.upg_pict{
margin:0 0 30px 0;
padding:0;
border:solid 1px #eee;
}
.upg_pict img{width:100%;}
.upg_caution_title{
margin:30px 0 0 0;
padding:0;
font-size:100%;
font-weight:bold;
line-height:150%;
color:#eb8281;
}
.device{
margin:0;
padding:0 30px;
text-align:center;
}
#wrapper .device a:link {color:#fff;text-decoration:none;}
#wrapper .device a:visited {color:#fff;text-decoration:none;}
#wrapper .device a:hover {color:#e53742;text-decoration:none;}
.upgbtn {
width:100%;
margin:0 auto 0 auto;
padding:15px 0;
font-size:110%;
font-weight:bold;
display:block;
background:#e53742;
border:solid 1px #e53742;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.upgbtn:hover {
background:#fff;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}

@media screen and (min-width:769px){
.device{padding:0;}
.upgbtn {width:480px;padding:20px 0;font-size:20px;}
.upg_caution_title{margin:45px 0 0 0;font-size:18px;}
}


.toggle_input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

table.packplan tr td span{
	display: block;
    font-size: 0.8em;
    line-height: 1.5em;
    text-align: left;
	color: #666;
}

/*------------------------------ 月額年額toggle ------------------------------*/

.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  top: 50%;
  width: 210px;
  height: 50px;
  overflow: hidden;
}

.button.r,
.button.r .layer {
  border-radius: 10px;
  box-shadow: inset 1px 1px 3px rgb(0 0 0 / 20%);
} 

.button.b2 {
  border-radius: 2px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #f9f9f9;
  transition: 0.3s ease all;
  z-index: 1;
}

/* Button 1 */
#button-1 .knobs:before,
#button-2 .knobs:before {
  content: "年払い";
  position: absolute;
  top: 6px;
  left: 10px;
  width: 100px;
  height: 40px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #f44336;
  border-radius: 10px;
  transition: none;
  z-index: 50;
  box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
}
#button-1 .checkbox:checked + .knobs:before,
#button-2 .checkbox:checked + .knobs:before{
  content: "月払い";
  left: 120px;
  background-color: #f44336;
}
#en #button-1 .knobs:before,
#en #button-2 .knobs:before {
  content: "Annual";
}
#en #button-1 .checkbox:checked + .knobs:before,
#en #button-2 .checkbox:checked + .knobs:before{
  content: "Monthly";
}
#button-1 .checkbox:checked ~ .layer,
#button-2 .checkbox:checked ~ .layer{
  background-color: #f9f9f9;
} 

#button-1 .knobs,
#button-1 .knobs:before,
#button-1 .layer,
#button-2 .knobs,
#button-2 .knobs:before,
#button-2 .layer{
  transition: none;
}

.knobs span{
position: absolute;
    top: 6px;
    left: 10px;
    width: 100px;
    height: 40px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    background-color: #dee2e6;
    border-radius: 10px;
    z-index: 10;
}
.knobs span.month{
    left: 120px;
}

/* Button ctw */
#button-ctw .knobs:before {
  content: "特別";
  position: absolute;
  top: 6px;
  left: 10px;
  width: 100px;
  height: 40px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #f44336;
  border-radius: 10px;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-ctw .checkbox:checked + .knobs:before {
  content: "通常";
  left: 100px;
  background-color: #999;
}

#button-ctw .checkbox:checked ~ .layer {
  background-color: #f9f9f9;
}

#button-ctw .knobs,
#button-ctw .knobs:before,
#button-ctw .layer {
  transition: 0.3s ease all;
}
.priceoff_box_none,.priceoff_box_none2 {
 padding: 5px;
 text-align: center;
 margin-bottom: 12px;
}
.priceoff_box,.priceoff_box2 {
 position: relative;
 width: 150px;
 background: #e53742;
 color: #fff;
 font-size: 12px !important;
 padding: 5px;
 text-align: center;
 margin: 0 auto 5px;
}
.priceoff_box:before,.priceoff_box2:before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 50%;
  bottom: -7px;
  margin-left: -7px;
  border-top: 7px solid #e53742;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}
table.ctw div.upg_plan_name {
    margin-bottom: 10px!important;
}

div.card-header{
white-space: normal;
}
.card-text.fs-2{
font-size: 2em!important;
color: #6c757d;
}
.nav-tabs {
border-bottom: 1px solid #666 ;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
background-color: #fff;
border-color: #666 #666 #fff;
}
.nav-tabs .nav-link {
background-color: #dee2e6;
border-bottom: 1px solid #666 ;
margin-right: 10px;
}

@media screen and (max-width:768px){
.nav-tabs .nav-link {
    margin-right: 3px;
    font-size: 14px;
    padding: 5px 3px!important;
}
}

.insbtn {
    width: 100%;
    margin: 0 auto 0 auto;
    padding: 15px 5px;
    font-size: 100%;
    font-weight: bold;
    display: block;
    background: #3858e9;
    border: solid 1px #3858e9;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
@media screen and (min-width: 769px){
.insbtn { font-size: 18px;}
}
#wrapper .purchase a.insbtn:link, #wrapper .purchase a.insbtn:visited {
    color: #FFF;
}
#wrapper .purchase a.insbtn:hover {
    color: #3858e9;
    background: #fff;
}

/*------------------------------ フッター ------------------------------*/





/*---------- 文字装飾 ----------*/

.bold{font-weight:bold;}
.ul{text-decoration:underline;}
.red {font-weight:bold;color:#e53742;}
.through{text-decoration:line-through;}
.ym{font-weight:bold;background:linear-gradient(transparent 60%, #ffe24d 60%);}
.caption{font-size:75%;color:#666666;font-weight:normal;line-height:180%;}


/*---------- 文字位置 ----------*/

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