@charset "UTF-8";

/*----------------------------------------------------
タブレット・PC用 1000- 
----------------------------------------------------*/
@media screen and (min-width:1000px) {

  /* ----- .plan-detail ----- */
  .plan-detail h4 {
    width: 62rem;
    height: 8rem;
    align-content: center;
    padding: 0 0 0 14rem;
    border-radius: 4rem;
    margin-bottom: 8rem;
    position: relative;
  }
  .plan-detail h4 span {
    display: block;
    font-size: 2.6rem;
    line-height: 1;
    padding-left: 2rem;
  }
  .plan-detail h4::before {
    font-size: 2rem;
    left: 5rem;
  }
  .plan-detail h4 span::after {
    left: 3rem;
  }

  /* 月掛金 01
  -------------------------------*/
  .plan-detail .premium {
    width: 24rem;
    height: 17rem;
    text-align: center;
    padding: 3rem 2rem 2.5rem;
  }
  .plan-detail .premium p:first-child span:first-child {
    display: block;
    width: 8rem;
    font-size: 1.8rem;
    padding: 0.2rem 1rem;
    border-radius: 0.5rem;
    margin: 0 auto 1rem;
  }
  .plan-detail .premium p:first-child strong {
    font-size: 3.6rem;
    margin-left: 0;
  }
  .plan-detail .premium p:last-child {
    font-size: 1.3rem;
    padding-top: 1rem;
    border-top: 0.1rem #ccc solid;
    margin-top: 1.2rem;
  }

  /* 月掛金-02（複数）　1000
  -----------------------------------*/
  .plan-detail .premium-02{
    flex-direction: column;
    width: 29rem;
    padding: 3rem 2rem 2rem;
    right: 1rem;
  }
  .plan-detail .premium-02 p{
    width: 9.5rem;
    display: block;
    margin: 0 auto;
    text-align: center;
    border-radius: 0.5rem;
    font-size: 2.1rem;
  }
  .premium-02-in{
    width: 100%;
  }
  .premium-02-in dl{
    align-items: fx-end;
    padding: 0;
    line-height: 1.4;
    font-size: 2rem;
  }
  .premium-02-in dl dt{
    width: 12rem;
    padding: 0 0.5rem 0.5rem 0;
  }
  .premium-02-in dl dd{
    width: calc(100% - 12rem);
  }
  .premium-02-in dl dd strong{
    font-size: 3.6rem;
  }

  /* PC / SP 共通・切り替え
  --------------------------*/
  .plan-table-sp {
    display: none;
  }
  .plan-table-pc {
    display: block;
	}


  /* -----------------------
  table PC 1000
  --------------------------*/

  /* 共通 --- */	
  .plan-table-pc .table-wrap {
  	border: 0.2rem var(--green) solid;
  	border-radius: 1rem;
  	box-shadow: 0 0 10px 1px rgba(102, 102, 102, 0.3);
    overflow: hidden;
  }	
  .plan-table-pc .table-wrap table{
    width: 100%;
    background: #fff;
    overflow: hidden;
  }
  .plan-table-pc .table-wrap th,
  .plan-table-pc .table-wrap td{
  	padding: 1rem;
    vertical-align: middle;
  	line-height: 1.4;
  	font-size: 1.4rem;
  	/*border-left: 1px solid var(--green);*/
    border-right: 1px solid var(--green);
  }

  .plan-table-pc .table-wrap th:last-of-type,
  .plan-table-pc .table-wrap td:last-of-type{
    border-right: 0;
  }
  .plan-table-pc .table-wrap tr:last-child th,
  .plan-table-pc .table-wrap tr th[rowspan="3"],  
  .plan-table-pc .table-wrap tr:last-child td{
    border-bottom: 0;
  }

  .plan-table-pc .table-wrap th{
    text-align: left;
    font-size: 1.6rem;
    border-bottom: 1px solid var(--green);
  }
  .plan-table-pc .table-wrap th.line-dash,
  .plan-table-pc .table-wrap td.line-dash{
    border-bottom: 2px dashed var(--green);  
  }

  .plan-table-pc .table-wrap td{
    text-align: right;
    border-bottom: 1px solid var(--green);
  }

  .plan-table-pc .table-wrap th.line-landr,
  .plan-table-pc .table-wrap td.line-landr{
    border-left: 2px solid var(--green);
    border-right: 2px solid var(--green);
  }

  .plan-table-pc .table-wrap td.t-left{
    text-align: left;
  }
  .plan-table-pc .table-wrap td.t-center{
    text-align: center;
  }
  .plan-table-pc .table-wrap td span{
    padding-right:0.2rem;
    font-size: 2.1rem;
    font-weight: bold;
  }	
  .plan-table-pc .table-wrap td br{
    display: none;
  }

  .plan-table-pc .table-wrap span.paren,
  .plan-table-pc .table-wrap span.paren02{
    font-size:1.4rem;
    font-weight: 500;
  }
  .plan-table-pc .table-wrap span.paren{
    display: inline;
  }
  .plan-table-pc .table-wrap small{
    font-size: 1rem;
  }

  /* 期間 ----- */
  .plan-table-pc .table-wrap td.bg-lbule{
    padding: 0.8rem 1.5rem;
    line-height: 1;
    text-align: center;
    background: #eaf6fd;
  }
  .plan-table-pc .table-wrap .day{
    padding: 0;
    line-height: 1;
    font-size: 1.6rem; 
  }
  .plan-table-pc .table-wrap .bg-gray{
    background: #e8eeed;
  }

  .plan-table-pc .table-wrap tr th {
    width:10%;/* ★1列目 */
  }	

  /* 1行目（幅調整箇所） -------- */
  .plan-table-pc .table-wrap tr.tb-row01 th{
    width:11%; /* ★3-8列目 */
    text-align: center;
  }
  .plan-table-pc .table-wrap tr.tb-row01 th.tb-row01-th-01{
    letter-spacing: 0.05em;
    font-size: 1.6rem;
  	color: #fff;
  	background: var(--green);
  }
  .plan-table-pc .table-wrap tr.tb-row01 th.tb-row01-th-02{
  	width: 12%; /* ★2列目 */
    padding-right:3.5rem;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: right;
    position: relative;
  }
  .plan-table-pc .table-wrap tr.tb-row01 th.tb-row01-th-02::after{
    display: block;
    content: url('../img/plan-tb-arrow.svg');
    width: 1rem;
    position: absolute;
    top: 25%;
    right: 15px;
  }
  .plan-table-pc .table-wrap tr.tb-row01 strong{
    padding-right:0.2rem;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--green);
  }   


  /* 2行目 -------- */
  .plan-table-pc .table-wrap tr.tb-row02{
  	padding: 1rem;
  	border-bottom: 2px solid var(--green);	
  }
  .plan-table-pc .table-wrap tr.tb-row02 th:first-child{
    padding-right:3.5rem;
    text-align: right;
    font-size: 1.6rem;
    font-weight: bold;
    position: relative;
  }
  .plan-table-pc .table-wrap tr.tb-row02 th:first-child::after{
    display: block;
    content: url('../img/plan-tb-arrow.svg');
    width: 1rem;
    position: absolute;
    top: 25%;
    right: 15px;
  }

  .plan-table-pc .table-wrap tr.tb-row02 th:nth-child(2),
  .plan-table-pc .table-wrap tr.tb-row02 th:last-child{
  	text-align: center;
  }
  .plan-table-pc .table-wrap tr.tb-row02 th:nth-child(2) strong,
  .plan-table-pc .table-wrap tr.tb-row02 th:last-child strong{
  	padding-right:0.2rem;
  	font-size: 2.1rem;
  	font-weight: bold;
  }
  		
	
	/* コメント PC 1000
  --------------------------*/
  .comment-box {
    margin-top: 3rem;
  }
  .comment-box ul {
    font-size: 1.6rem;
  }


}



/*----------------------------------------------------
タブレット・PC用 1400- 
----------------------------------------------------*/
@media screen and (min-width:1400px) {

  /* ----- .plan-detail ----- */
  .plan-detail h4 {
    width: 94rem;
    height: 10rem;
    align-content: center;
    padding: 0 0 0 22rem;
    border-radius: 5rem;
    margin-bottom: 10rem;
    position: relative;
  }
  .plan-detail h4 span {
    display: block;
    font-size: 3.6rem;
    padding-left: 5rem;
  }
  .plan-detail h4::before {
    font-size: 2.6rem;
    left: 9.5rem;
  }
  .plan-detail h4 span::after {
    left: 6.5rem;
  }


  /* -----------------------
  table PC 1400
  --------------------------*/

  /* 共通 1400 --- */  
  .plan-table-pc .table-wrap th,
  .plan-table-pc .table-wrap td{
    padding: 1rem 1rem 1rem 2rem;
    font-size: 1.8rem;
  }
  .plan-table-pc .table-wrap th{
    font-size: 2rem
  }
  .plan-table-pc .table-wrap td span{
    font-size: 2.8rem;
  } 

  .plan-table-pc .table-wrap span.paren,
  .plan-table-pc .table-wrap span.paren02{
    font-size:1.6rem;
  }
  .plan-table-pc .table-wrap span.paren{
    display: block;
  }
  .plan-table-pc .table-wrap small{
    font-size: 1.2rem;
  }

  /* 期間 1400 ----- */
  .plan-table-pc .table-wrap .day{
    font-size: 2rem; 
  }
  .plan-table-pc .table-wrap tr th {
    width:11%;/* ★1列目 */
  } 

  /* 1行目（幅調整箇所）1400 -------- */
  .plan-table-pc .table-wrap tr.tb-row01 th {
    width:12%; /* ★3-8列目 */
  }
  .plan-table-pc .table-wrap tr.tb-row01 th.tb-row01-th-01{
    font-size: 2.2rem;
  }
  .plan-table-pc .table-wrap tr.tb-row01 th.tb-row01-th-02{
    width: 17%;/* ★2列目 */
    font-size: 1.8rem;
  }
  .plan-table-pc .table-wrap tr.tb-row01 th.tb-row01-th-02::after{
    width: 1.2rem;
  }
  .plan-table-pc .table-wrap tr.tb-row01 strong{
    font-size: 2.4rem;
  }   

  /* 2行目 1400 -------- */
  .plan-table-pc .table-wrap tr.tb-row02 th:first-child{
    font-size: 1.8rem;
  }
  .plan-table-pc .table-wrap tr.tb-row02 th:first-child::after{
    width: 1.2rem;
  }
  .plan-table-pc .table-wrap tr.tb-row02 th:nth-child(2) strong,
  .plan-table-pc .table-wrap tr.tb-row02 th:last-child strong{
    font-size: 2.6rem;
  }


}