@charset "utf-8";
/* CSS Document */


/* =====================
   planページ専用スタイル
===================== */ 



/*PC_px*/
/*@media screen and (min-width: 1680px) {}*/



/*PC*/
@media print, screen and (min-width: 768px) {


.sec01 { border-top: solid 1px var(--color99);}

.sec01 h2 { font-size: 90px; margin: 50px 0 80px; text-align: center; color: var(--color00); -webkit-text-stroke: 1px var(--color99); text-stroke: 1px var(--color99); font-family: Arial, Helvetica, "sans-serif";}
.plan_wrap { max-width: 1100px; margin: 0 auto; display: flex; border-bottom: solid 1px var(--color99);}
.plan_wrap > div { display: flex; flex-direction: column; width: 192px;}
.plan_wrap > div:nth-of-type(1) { width: 140px;}
.plan_wrap > div .box01,
.plan_wrap > div .box02,
.plan_wrap > div .box03,
.plan_wrap > div .box04,
.plan_wrap > div .box05 { text-align: center; padding: 10px 5px; border-top: solid 1px var(--color99); border-left: solid 1px var(--color99); font-size: 16px;}
.plan_wrap .ttls .box01 { border: none;}
.plan_wrap .ttls .box02,
.plan_wrap .ttls .box03,
.plan_wrap .ttls .box04,
.plan_wrap .ttls .box05 { border-top: solid 1px var(--color99); border-left: solid 1px var(--color99); align-content: center; font-size: 20px;}
.plan_wrap .ttls .box01 { border: none;}
.plan_wrap .platinum .box02,
.plan_wrap .platinum .box03,
.plan_wrap .platinum .box04,
.plan_wrap .platinum .box05 { border-right: solid 1px var(--color99);}
.plan_wrap .ttls .box01 { border: none;}

.plan_wrap > div .box01 { margin: 0 5px; border: none; padding: 0;}
.plan_wrap .regular .box01 { background: var(--color12); text-align: center;}
.plan_wrap .regular .box01 .ttl { background: var(--color11); padding: 10px 0;}
.plan_wrap .regular .box01 .price { padding: 10px 0;}

.plan_wrap .bronze .box01 { background: var(--color22); text-align: center;}
.plan_wrap .bronze .box01 .ttl { background: var(--color21); padding: 10px 0;}
.plan_wrap .bronze .box01 .price { padding: 10px 0;}

.plan_wrap .silver .box01 { background: var(--color32); text-align: center;}
.plan_wrap .silver .box01 .ttl { background: var(--color31); padding: 10px 0;}
.plan_wrap .silver .box01 .price { padding: 10px 0;}

.plan_wrap .gold .box01 { background: var(--color42); text-align: center;}
.plan_wrap .gold .box01 .ttl { background: var(--color41); padding: 10px 0;}
.plan_wrap .gold .box01 .price { padding: 10px 0;}

.plan_wrap .platinum .box01 { background: var(--color52); text-align: center;}
.plan_wrap .platinum .box01 .ttl { background: var(--color51); padding: 10px 0;}
.plan_wrap .platinum .box01 .price { padding: 10px 0;}

.boxIn { display: flex; align-items: stretch; flex-direction: column;}
.img { text-align: center; margin: 10px auto; width: 34px;}
.price { font-size: 50px;}
.price span { font-size: 28px;}
.kome { font-size: 14px; color: var(--color02); margin-top: 10px;}

.plan_wrap .box01 { min-height: 190px;}
.plan_wrap .box02 { min-height: 180px;}
.plan_wrap .box03 { min-height: 60px;}
.plan_wrap .box04 { min-height: 280px;}
.plan_wrap .box05 { min-height: 80px;}


.sec02 { padding: 100px 0 50px;}

.ttl-jp { font-size: 14px; font-weight: 500; color: var(--color02); margin-bottom: 30px; text-align: center;}
.ttl-jp span::before { content: attr(data-en); display: block; font-size: 30px; font-weight: 600; color: var(--color99); margin-bottom: 10px;}

.flow-list { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 40px 0; counter-reset: flow-num; max-width: 820px; margin-left: auto; margin-right: auto; }
.flow-list li { background: var(--color01); border-radius: 12px; padding: 24px 16px; width: 100%; position: relative; text-align: left; display: flex; flex-direction: row; align-items: flex-start; margin-top: 24px;}
.flow-list li:nth-of-type(1) { margin-top: 0;}

.flow-step { display: flex; flex-direction: row; align-items: center; flex-grow: 1; position: relative; }
.flow-step::before { content: ''; position: absolute; left: 96px; top: 0; bottom: 0; width: 2px; background: var(--color05); border-radius: 1px; }
.flow-no { width: 98px; text-align: center; font-size: 30px;}
.flow-no span { font-size: 15px; display: block;}

.flow-box { height: 100%; padding: 0 0 0 20px; display: flex; justify-content: flex-start; align-items: center; }
.flow-box .flow-img { width: 80px; margin-right: 20px;}
.flow-txt { height: 100%; }
.flow-step h4 { font-size: 20px; }
.flow-step p { font-size: 15px; margin: 8px 0 0;}
.flow-txt span { font-size: 0.85em; color: #d32f2f; }
.flow-lead { font-size: 20px; color: var(--color05); margin: 8px 0 15px; text-align: center; }
.flow-note { font-size: 16px; color: var(--color03); margin: 0 0 55px 0; text-align: center; }
.plan-lead { font-size: 20px; color: var(--color05); margin: 8px 0 0 0; text-align: center; }
.plan-note { font-size: 17px; color: var(--color03); margin: 2px 0 40px 0; text-align: center; }
.plan-kana { font-size: 16px; color: var(--color03); letter-spacing: 0.1em; margin-bottom: 2px; display: inline-block; }
.plan-title { text-align: center; margin-bottom: 4px; }
.plan-title h3 { margin: 0 0 2px 0; font-size: 26px; }
.plan-title .plan-kana { margin-bottom: 0; }
.plan-price { font-size: 50px; font-weight: bold; text-align: center; margin-bottom: 4px; position: relative; }
.plan-price::after { content: ''; display: block; width: 100%; height: 2px; background: var(--color05); margin: 10px auto 0 auto; border-radius: 1px; }
.plan-price span { font-size: 28px; color: var(--color03); margin-left: 2px; }
.plan-detail { margin-bottom: 4px; text-align: left; padding-top: 5px; }
.plan-detail p { font-size: 17px; margin: 0 0 20px 0; }
.plan-detail ul { padding-left: 0; margin: 0; }
.plan-detail ul li { color: var(--color05); font-size: 17px; padding-left: 1.2em; position: relative;}
.plan-detail ul li::before { content: "●"; position: absolute; top: 0; left: 0;}
.plan-title h3, .plan-title .plan-kana { color: var(--color05); }


}



/*sp*/
@media only screen and (max-width: 767px) {


.sec01 { border-top: solid 1px var(--color99);}

.sec01 h2 { font-size: 14.063vw; margin: 7.813vw 0 12.5vw; text-align: center; color: var(--color00); -webkit-text-stroke: 1px var(--color99); text-stroke: 1px var(--color99); font-family: Arial, Helvetica, "sans-serif";}
.plan_wrap { width: auto; margin: 0 3.125vw;}

.plan_wrap table { width: 100%; border-collapse: collapse; table-layout: fixed;}
.plan_wrap table thead {}
.plan_wrap table thead tr {}
.plan_wrap table thead tr th { border: solid 1px #000;}
.plan_wrap table thead tr th:nth-of-type(1) { width: 25%; border: none;}
.plan_wrap table thead tr th:nth-of-type(2) { width: 25%;}
.plan_wrap table thead tr th:nth-of-type(3) { width: 15%;}
.plan_wrap table thead tr th:nth-of-type(4) { width: 35%;}

.plan_wrap table tbody {}
.plan_wrap table tbody tr {}
.plan_wrap table tbody tr th { border: solid 1px #000; height: 100%;}
.plan_wrap table tbody tr th .head { height: 100%; display: flex; flex-direction: column;}
.plan_wrap table tbody tr th .head .rank { height: 50%; padding: 3.125vw 0;}
.plan_wrap table tbody tr th .head .price { height: 50%; padding: 3.125vw 0;}
.plan_wrap table tbody tr td { border: solid 1px #000; padding: 3.125vw 1.563vw;}
.plan_wrap table tbody tr td:nth-of-type(1) { font-size: 2.031vw; text-align: center;}
.plan_wrap table tbody tr td:nth-of-type(2) { font-size: 3.125vw; text-align: center;}
.plan_wrap table tbody tr td:nth-of-type(3) { font-size: 2.031vw; text-align: center;}
.plan_wrap table tbody tr td:nth-of-type(3) .box { width: 50%; display: inline-block;}
.plan_wrap table tbody tr td:nth-of-type(3) .kome { width: 50%; display: inline-block; font-size: 1.719vw; color:var(--color02)}

.plan_wrap table .regular { background: var(--color11); text-align: center;}
.plan_wrap table .regular .price { background: var(--color12); text-align: center;}

.plan_wrap table .bronze { background: var(--color21); text-align: center;}
.plan_wrap table .bronze .price { background: var(--color22); text-align: center;}

.plan_wrap table .silver { background: var(--color31); text-align: center;}
.plan_wrap table .silver .price { background: var(--color32); text-align: center;}

.plan_wrap table .gold { background: var(--color41); text-align: center;}
.plan_wrap table .gold .price { background: var(--color42); text-align: center;}

.plan_wrap table .platinum { background: var(--color51); text-align: center;}
.plan_wrap table .platinum .price { background: var(--color52); text-align: center;}


.plan_wrap .img { width: 3.75vw; margin: 0 auto 10px;}
.plan_wrap .price { font-size: 6.25vw;}
.plan_wrap .price span { font-size: 3.438vw;}
.plan_wrap table tbody tr th h3 { font-size: 3.125vw;}
.plan_wrap table tbody tr th p { font-size: 1.875vw;}




.sec02 { padding: 15.625vw 0 7.813vw;}

.ttl-jp { font-size: 2.188vw; font-weight: 500; color: var(--color02); margin-bottom: 4.688vw; text-align: center;}
.ttl-jp span::before { content: attr(data-en); display: block; font-size: 6.25vw; font-weight: 600; color: var(--color99); margin-bottom: 2.344vw;}

.flow-list { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 6.25vw 3.125vw 0; counter-reset: flow-num; width: auto; }
.flow-list li { background: var(--color01); border-radius: 1.875vw; padding: 3.75vw 2.5vw; width: 100%; position: relative; text-align: left; display: flex; flex-direction: row; align-items: flex-start; margin-top: 3.75vw;}
.flow-list li:nth-of-type(1) { margin-top: 0;}

.flow-step { display: flex; flex-direction: row; align-items: center; flex-grow: 1; position: relative; }
.flow-step::before { content: ''; position: absolute; left: 15vw; top: 0; bottom: 0; width: 0.313vw; background: var(--color05); border-radius: 0.156vw; }
.flow-no { width: 15.313vw; text-align: center; font-size: 4.688vw;}
.flow-no span { font-size: 2.344vw; display: block;}

.flow-box { width: calc( 100% - 15.313vw ); height: 100%; padding: 0 0 0 3.125vw; display: flex; justify-content: flex-start; align-items: center; }
.flow-box .flow-img { width: 12.5vw; margin-right: 3.125vw;}
.flow-txt { width: calc( 100% - 15.625vw ); height: 100%;}
.flow-step h4 { font-size: 3.125vw; }
.flow-step p { font-size: 2.344vw; margin: 1.25vw 0 0;}
.flow-txt span { font-size: 0.85em; color: #d32f2f; }
.flow-lead { font-size: 3.125vw; color: var(--color05); margin: 1.25vw 0 1.563vw; text-align: center; }
.flow-note { font-size: 2.5vw; color: var(--color03); margin: 0 0 6.25vw 0; text-align: center; }


}



/*sp_px*/
@media screen and (width: 640px) {


.sec01 { border-top: solid 1px var(--color99);}

.sec01 h2 { font-size: 90px; margin: 50px 0 80px; text-align: center; color: var(--color00); -webkit-text-stroke: 1px var(--color99); text-stroke: 1px var(--color99); font-family: Arial, Helvetica, "sans-serif";}
.plan_wrap { width: auto; margin: 0 20px;}

.plan_wrap table { width: 100%; border-collapse: collapse; table-layout: fixed;}
.plan_wrap table thead {}
.plan_wrap table thead tr {}
.plan_wrap table thead tr th { border: solid 1px #000;}
.plan_wrap table thead tr th:nth-of-type(1) { width: 25%; border: none;}
.plan_wrap table thead tr th:nth-of-type(2) { width: 25%;}
.plan_wrap table thead tr th:nth-of-type(3) { width: 15%;}
.plan_wrap table thead tr th:nth-of-type(4) { width: 35%;}

.plan_wrap table tbody {}
.plan_wrap table tbody tr {}
.plan_wrap table tbody tr th { border: solid 1px #000; height: 100%;}
.plan_wrap table tbody tr th .head { height: 100%; display: flex; flex-direction: column;}
.plan_wrap table tbody tr th .head .rank { height: 50%; padding: 20px 0;}
.plan_wrap table tbody tr th .head .price { height: 50%; padding: 20px 0;}
.plan_wrap table tbody tr td { border: solid 1px #000; padding: 20px 10px;}
.plan_wrap table tbody tr td:nth-of-type(1) { font-size: 13px; text-align: center;}
.plan_wrap table tbody tr td:nth-of-type(2) { font-size: 20px; text-align: center;}
.plan_wrap table tbody tr td:nth-of-type(3) { font-size: 13px; text-align: center;}
.plan_wrap table tbody tr td:nth-of-type(3) .box { width: 50%; display: inline-block;}
.plan_wrap table tbody tr td:nth-of-type(3) .kome { width: 50%; display: inline-block; font-size: 11px; color:var(--color02)}

.plan_wrap table .regular { background: var(--color11); text-align: center;}
.plan_wrap table .regular .price { background: var(--color12); text-align: center;}

.plan_wrap table .bronze { background: var(--color21); text-align: center;}
.plan_wrap table .bronze .price { background: var(--color22); text-align: center;}

.plan_wrap table .silver { background: var(--color31); text-align: center;}
.plan_wrap table .silver .price { background: var(--color32); text-align: center;}

.plan_wrap table .gold { background: var(--color41); text-align: center;}
.plan_wrap table .gold .price { background: var(--color42); text-align: center;}

.plan_wrap table .platinum { background: var(--color51); text-align: center;}
.plan_wrap table .platinum .price { background: var(--color52); text-align: center;}


.plan_wrap .img { width: 24px; margin: 0 auto 10px;}
.plan_wrap .price { font-size: 40px;}
.plan_wrap .price span { font-size: 22px;}
.plan_wrap table tbody tr th h3 { font-size: 20px;}
.plan_wrap table tbody tr th p { font-size: 12px;}




.sec02 { padding: 100px 0 50px;}

.ttl-jp { font-size: 14px; font-weight: 500; color: var(--color02); margin-bottom: 30px; text-align: center;}
.ttl-jp span::before { content: attr(data-en); display: block; font-size: 40px; font-weight: 600; color: var(--color99); margin-bottom: 15px;}

.flow-list { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 40px 20px 0; counter-reset: flow-num; width: auto; }
.flow-list li { background: var(--color01); border-radius: 12px; padding: 24px 16px; width: 100%; position: relative; text-align: left; display: flex; flex-direction: row; align-items: flex-start; margin-top: 24px;}
.flow-list li:nth-of-type(1) { margin-top: 0;}

.flow-step { display: flex; flex-direction: row; align-items: center; flex-grow: 1; position: relative; }
.flow-step::before { content: ''; position: absolute; left: 96px; top: 0; bottom: 0; width: 2px; background: var(--color05); border-radius: 1px; }
.flow-no { width: 98px; text-align: center; font-size: 30px;}
.flow-no span { font-size: 15px; display: block;}

.flow-box { width: calc( 100% - 98px ); height: 100%; padding: 0 0 0 20px; display: flex; justify-content: flex-start; align-items: center; }
.flow-box .flow-img { width: 80px; margin-right: 20px;}
.flow-txt { width: calc( 100% - 100px ); height: 100%;}
.flow-step h4 { font-size: 20px; }
.flow-step p { font-size: 15px; margin: 8px 0 0;}
.flow-txt span { font-size: 0.85em; color: #d32f2f; }
.flow-lead { font-size: 20px; color: var(--color05); margin: 8px 0 10px; text-align: center; }
.flow-note { font-size: 16px; color: var(--color03); margin: 0 0 40px 0; text-align: center; }



}