@charset "utf-8";

/* 進捗表示
---------------------------------------- */
.koudoku_progress {
	padding-bottom: 15px;
}
.koudoku_progress ul {
	padding: 0;
	font-size: 0;
}
.koudoku_progress ul li {
    position: relative;
	display: inline-block;
	width: 16%;
	margin-left: 5%;
	padding: 5px 0;
	background-color: #999;
    color: #fff;
	font-size: 1.0rem;
    line-height: 1.4;
	text-align: center;
}
.koudoku_progress ul li:first-of-type {
	margin-left: 0;
}
.koudoku_progress ul li span.step {
    display: block;
}
.koudoku_progress ul li::after {
	position: absolute;
	top: calc(50% - 4px);
	left: 112%;
	content: " ";
	display: block;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid #333;
}
.koudoku_progress ul li:last-of-type::after {
	display: none;
}
.koudoku_progress ul li.active {
	background-color: #00418f;
}
.koudoku_progress ul li.disabled {
	background-color: #ddd;
}

@media (min-width: 768px) {

    .koudoku_progress {
		padding-bottom: 30px;
    }
    .koudoku_progress ul li {
        width: 17.6%;
        margin-left: 3%;
        padding: 13px 0;
        font-size: 1.4rem;
    }
    .koudoku_progress ul li span.step {
        padding: 0 0 8px 0;
    }
    .koudoku_progress ul li::after {
        top: calc(50% - 8px);
        left: 106%;
        border-top: 8px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 10px solid #333;
    }

}

.registration p {
    padding: 0 0 10px 0;
}
.registration section {
    padding: 0 0 15px 0;
}

@media (min-width: 768px) {

    .registration p {
        padding: 0 0 15px 0;
    }
    .registration section {
        padding: 0 0 30px 0;
    }

}

/* --------------------------------------------------------------
  購読申し込み
-------------------------------------------------------------- */

.koudoku .course .item {
    margin: 0 0 15px 0;
    padding: 10px 10px 0 10px;
    background-color: #e5ecf4;
}
.koudoku .course .item h3 {
    color: #00418f;
    font-weight: bold;
    font-size: 1.6rem;
    text-align: center;
}
.koudoku .course .item p.img {
    text-align: center;
}
.koudoku .course .item p.price {
    font-weight: bold;
    font-size: 1.6rem;
    text-align: center;
}
.koudoku .application {
    margin: 0 0 15px 0;
    padding: 10px 10px 0 10px;
    background-color: #e5ecf4;
}
.koudoku .application .col_l {
    text-align: center;
}
.koudoku .application .col_r h3 {
    color: #00418f;
    font-weight: bold;
    font-size: 1.6rem;
}
.koudoku .application .free_call {
    font-weight: bold;
    text-align: center;
}
.koudoku .application .free_call p {
    padding: 0 0 5px 0;
    color: #00418f;
    font-size: 1.5rem;
}
.koudoku .application .free_call p.phone_num {
    padding: 0 0 10px 0;
    color: #f00;
    font-size: 2.2rem;
}
.koudoku .application .attention {
    color: #f00;
}
.koudoku ul.no_style li {
    text-indent: -1em;
    margin-left: 1em;
}
.koudoku .flow {
    margin: 0 0 10px 0;
    padding: 10px 10px 0 10px;
    border: solid 1px #b2c6dd;
}

/* ページ内リンクのずれを解消 */
#about_course,
#takuhai {
    margin-top: -70px;
    padding-top: 70px;
}

@media (min-width: 768px) {

    .koudoku section {
        padding: 0 0 30px 0;
    }
    .koudoku section section:last-of-type {
        padding: 0;
    }
    .koudoku h2.hl_a + p {
        padding: 0 0 20px 0;
    }
    .koudoku .course {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .koudoku .course .item {
        width: 32%;
        margin: 0;
        padding: 15px 15px 5px 15px;
    }
    .koudoku .course .item h3 {
        font-size: 1.8rem;
    }
    .koudoku .course .item p {
        font-size: 1.5rem;
    }
    .koudoku .course .item p.price {
        font-size: 1.8rem;
    }
    .koudoku .application {
        margin: 0 0 15px 0;
        padding: 15px 15px 5px 15px;
    }
    .koudoku .application:last-of-type {
        margin: 0;
    }
    .koudoku .application .col_l {
        width: 32%;
        text-align: left;
    }
    .koudoku .application .col_r {
        width: 68%;
    }
    .koudoku .application .col_r h3 {
        font-size: 1.8rem;
    }
    .koudoku .application .free_call {
    }
    .koudoku .application .free_call p {
        padding: 15px 0 0 0;
        font-size: 1.8rem;
    }
    .koudoku .application .free_call p.phone_num {
        padding: 0 0 10px 0;
        font-size: 3rem;
    }
    .koudoku ul.no_style {
        margin: 0;
        padding: 15px 0 0 0;
    }
    .koudoku ul.no_style li:last-of-type {
        padding: 0;
    }
    .koudoku .flow {
        margin: 0 0 15px 0;
        padding: 10px 15px 5px 15px;
    }
    .koudoku .course .item2 {
        width: 32%;
        padding: 0;
    }
    #about_course,
    #takuhai {
        margin-top: 0;
        padding-top: 0;
    }
    
}

/* --------------------------------------------------------------
  【購読申込 Step1】ユーザー登録
  【試読申込 Step1】電子版試読申し込み
-------------------------------------------------------------- */

/* 手元に準備するもの */
p.must {
	padding: 5px 0 15px;
	color: #f00;
}

/* ユーザー登録フォーム（WP-Members） */
#wpmem_reg legend,
#wpmem_reg .req-text {
	display: none;
}
#wpmem_reg label {
	display: block;
	width: 100%;
    padding: 3px 10px;
	background-color: #f2f2f2;
    border-bottom: solid 1px #ccc;
    font-weight: bold;
}
#wpmem_reg label:first-of-type {
    border-top: solid 1px #ccc;
}
#wpmem_reg label span.req {
	margin-left: 5px;
	color: #f00;
	font-size: 1.3rem;
	font-weight: normal;
}
#wpmem_reg div.div_text ,
#wpmem_reg div.div_select /* 20191023 add*/{
	padding: 15px 10px;
    border-bottom: solid 1px #ccc;
}
#wpmem_reg div.div_text input[type="text"],
#wpmem_reg div.div_text input[type="password"],
#wpmem_reg div.div_text input[type="email"] ,
#wpmem_reg div.div_select select /* 20191023 add*/{
	width: 100%;
    padding: 4px;
    border: solid 1px #5685BF;
    border-radius: 3px;
}
#wpmem_reg ul.note {
    padding: 10px 0;
}
#wpmem_reg div.button_div {
    padding: 0 0 20px 0;
}
#wpmem_reg div.button_div input[type="submit"].buttons {
	display: block;
    width: 60%;
    height: 50px;
    line-height: 50px;
	margin: 0 auto;
	background-color: #00418F;
    color: #fff;
	font-weight: bold;
	border-radius: 6px;
}
.wpmem_msg { /* エラーメッセージ */
    color: #f00;
    text-align: left;
    padding: 0 0 10px 0;
}
.mail_attention {
    padding: 10px;
    border: solid 1px #333;
}
.mail_attention h4 {
    padding: 0 0 5px 0;
    font-weight: bold;
}
.mail_attention p {
    padding: 0 0 5px 0;
    word-break: break-all;
}

@media (min-width: 768px) {

    p.must {
        padding: 15px 0 25px;
    }
    #wpmem_reg label {
        display: inline-block;
        width: 30%;
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        vertical-align: bottom;
    }
    #wpmem_reg div.div_text	,
	#wpmem_reg div.div_select /* 20191023 add*/{
        display: inline-block;
        width: 70%;
        height: 60px;
        padding: 12px 20px;
    }
    #wpmem_reg div.div_text:first-of-type {
        border-top: solid 1px #ccc;
        vertical-align: bottom;
    }
    #wpmem_reg div.div_text input[type="text"],
    #wpmem_reg div.div_text input[type="password"],
    #wpmem_reg div.div_text input[type="email"],
	#wpmem_reg div.div_select select /* 20191023 add*/{
        height: 35px;
        padding: 0 5px;
    }
    #wpmem_reg ul.note {
        padding: 20px 0 25px;
    }
    #wpmem_reg div.button_div {
        padding: 0 0 35px 0;
    }
    #wpmem_reg div.button_div input[type="submit"].buttons {
        width: 40%;
        height: 54px;
        line-height: 54px;
    }
    .wpmem_msg { /* エラーメッセージ */
        text-align: center;
    }
}
/* --------------------------------------------------------------
  【購読申込 Step2】受付完了
  【試読申込 Step2】電子版試読受付完了
-------------------------------------------------------------- */

.koudoku-step2 p.reregist,
.trial-step2 p.reregist {
    padding: 10px 0 20px;
}
.koudoku-step2 p.return_top a.btn,
.trial-step2 p.return_top a.btn {
    width: 60%;
    margin: 0 auto;
}

@media (min-width: 768px) {

    .koudoku-step2 p.reregist,
    .trial-step2 p.reregist {
        padding: 15px 0 25px;
    }
    .koudoku-step2 p.return_top a.btn,
    .trial-step2 p.return_top a.btn {
        width: 40%;
    }
    
}

/* --------------------------------------------------------------
  【Step3】お客様情報入力
  【試読申込 Step2-2】電子版試読お客様情報入力
-------------------------------------------------------------- */

/* 購読コースの選択 */
.koudoku-step3 .course {
    padding: 10px;
    background-color: #E5ECF4;
}
.koudoku-step3 .course + .course {
    margin: 10px 0 0 0;
}
.koudoku-step3 .course .name label {
    font-weight: bold;
    color: #00418F;
    font-size: 1.6rem;
}
.koudoku-step3 .course .info {
    padding: 5px 0;
}
.koudoku-step3 .course .price {
    text-align: right;
    font-weight: bold;
    font-size: 1.6rem;
}
.koudoku-step3 p.attention {
    padding: 5px 0 0 0;
    color: #f00;
}

/* お支払い方法 */
.koudoku-step3 .payment #cre {
    padding: 0 0 10px 0;
}
.koudoku-step3 .payment #sum.disabled { /* 使用不可 */
	color: #ddd;
	pointer-events: none;
}
.koudoku-step3 .payment #sum.disabled span.mwform-radio-field-text::before {
    border: solid 1px #ddd;
}

/* お客様情報入力 */re
.koudoku-step3 .name_inline:first-of-type,
.trial-step2-2 .name_inline:first-of-type {
    margin: 0 0 10px 0;
}
.koudoku-step3 .name_inline input[type="text"].inline,
.trial-step2-2 .name_inline input[type="text"].inline {
    width: 80%;
}
.koudoku-step3 p.note,
.trial-step2-2 p.note {
    padding: 3px 0 0 0;
}

/* 利用規約 */
.koudoku-step3 p.agree {
    padding: 10px 0 0 0;
}

/* 確認画面の表示 */
.koudoku-step3 .mw_wp_form_preview .course {
    padding: 0;
    background-color: #fff;
}
.koudoku-step3 .mw_wp_form_preview .course + .course {
    margin: 0;
}
.koudoku-step3 .mw_wp_form_preview .course .info,
.koudoku-step3 .mw_wp_form_preview .course .price {
    display: none;
}
.koudoku-step3 .mw_wp_form_preview #cre {
    padding: 0;
}
.koudoku-step3 .mw_wp_form_preview .name_inline,
.trial-step2-2 .mw_wp_form_preview .name_inline {
    display: inline-block;
}

@media (min-width: 768px) {
    
    .koudoku-step3 .course {
        padding: 15px;
    }
    .koudoku-step3 .course + .course {
        margin: 15px 0 0 0;
    }
    .koudoku-step3 .course .name label {
        font-size: 1.8rem;
    }
    .koudoku-step3 .course .info {
        padding: 5px 0;
    }
    .koudoku-step3 .course .price {
        font-size: 2rem;
    }
    .koudoku-step3 .name_inline,
    .trial-step2-2 .name_inline {
        display: inline-block;
        width: 45%;
    }
    .koudoku-step3 .name_inline:first-of-type,
    .trial-step2-2 .name_inline:first-of-type {
        margin: 0;
    }
    .koudoku-step3 .name_inline input[type="text"].inline,
    .trial-step2-2 .name_inline input[type="text"].inline {
        width: 90%;
    }
    .koudoku-step3 p.note,
    .koudoku-step3 p.agree,
    .trial-step2-2 p.note,
    .trial-step2-2 p.agree {
        font-size: 1.4rem;
    }
    /* 確認画面 */
    .koudoku-step3 .mw_wp_form_preview .name_inline,
    .trial-step2-2 .mw_wp_form_preview .name_inline {
        width: auto;
    }
}

/* --------------------------------------------------------------
  【Step4】クレジット決済（単独・併読クレカ）
  【Step5-a】最終確認（単独・併読クレカ）
-------------------------------------------------------------- */

input[type="submit"].paygent_submit {
    display: block;
    width: auto;
    margin: 0 auto;
    background-color: #00418f;
    color: #fff;
}

/* --------------------------------------------------------------
  【Step5-b】最終確認（併読合算）
-------------------------------------------------------------- */

.koudoku-step5-b .form_submit {
    padding: 15px 0 0 0;
}
.koudoku-step5-b .form_submit button[type="submit"] {
    width: 60%;
    margin: 0 auto;
}

@media (min-width: 768px) {
    
    .koudoku-step5-b .form_submit {
        padding: 30px 0 0 0;
    }
    .koudoku-step5-b .form_submit button[type="submit"] {
        width: 40%;
    }
    
}

/* --------------------------------------------------------------
  購読申込中止
-------------------------------------------------------------- */

@media (min-width: 768px) {

    .koudoku_error {
        text-align: center !important;
    }

}

/* --------------------------------------------------------------
  新聞宅配コース登録
  宅配版試読申し込み登録
-------------------------------------------------------------- */
.takuhai ul.note,
.takuhai-trial ul.note {
    padding: 10px 0;
}
.takuhai p.note,
.takuhai-trial p.note {
    padding: 3px 0 0 0;
}

@media (min-width: 768px) {

    .takuhai table.form_table th,
    .takuhai-trial table.form_table th {
        width: 28%;
    }
    .takuhai ul.note,
    .takuhai-trial ul.note {
        padding: 20px 0 25px;
    }
    .takuhai p.note,
    .takuhai-trial p.note {
        font-size: 1.4rem;
    }
}