@charset "UTF-8";
/*------------------------------------------------------------------------------
 * 注意：CSSセレクタの優先順位が同一の時は後方に記述されたCSSが優先されます。
 *----------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------
 * HTMLタグ
 *----------------------------------------------------------------------------*/
body {
	font-family : "IPA明朝","IPAMincho", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ",
		Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック",
		sans-serif;
	font-size   : 15px;
	color       : #5A5A5A;
	background-color: #FFFFFF;
}
h1 {
	margin      : 0;
	padding-top : 10px;
	text-align  : center;
}
h3 {
	margin      : 0 0 20px 0;
	padding     : 0 0 0 10px;
	font-size   : 24px;
	border-left : 4px solid #4D9DD0;
}
h4 {
	margin      : 0 0 5px 0;
	padding     : 0 0 0 5px;
	font-size   : 16px;
}
a {
	margin      : 0px 2px;
	color       : #157191;
	text-decoration : underline;
}
.dummylink {   /* aタグと同じデザインにする */
	margin      : 0px 2px;
	color       : #157191;
	text-decoration : underline;
}
a:hover {
	font-weight : bold;
}
.not-external-link {
	background-image: none !important;
}
/*------------------------------------------------------------------------------
 * 共通Class属性
 *----------------------------------------------------------------------------*/
.main-box {
	margin      : auto;
	padding     : 20px;
	max-width   : 768px;
	min-height  : 320px;
}
.mt20{
	margin-top  : 20px;
}
.mb10 {
	margin-bottom   : 10px;
}
.mb20 {
	margin-bottom   : 20px;
}
.mb30 {
	margin-bottom   : 30px;
}
.mb50 {
	margin-bottom   : 50px;
}
.red {
	color       : crimson;
}
.brue {
	color       : #28549D;
}
.green {
	color       : #55C072
}
.form-control {
	display     : inline;
	height      : 31px !important;  /* !important → bootstrapの設定を上書きし、selectボックスにも適用 */
	font-size   : 15px;
}
.display-none {
	display     : none;
}
.font13{
	font-size   : 13px
}
/*------------------------------------------------------------------------------
 * 共通 - Remodalプラグイン カスタマイズ
 *----------------------------------------------------------------------------*/
.remodal-close {
	left        : auto;
	right       : 15px;
	top         : 15px;
}
.remodal-close:before {
	font-size   : 50px;
}
/*------------------------------------------------------------------------------
 * 共通 display-table - divに付与することで子要素含めてtableレイアウトにする
 *----------------------------------------------------------------------------*/
.display-table {
	display     : table;
	margin      : auto;
}
.display-table > div,
.display-table > span {
	display     : table-cell;
	vertical-align  : middle;
}
/*------------------------------------------------------------------------------
 * 共通 table-detail - tableに付与してフレキシブルレイアウトに対応させる
 *----------------------------------------------------------------------------*/
.table-detail {
	width       : 100%;
	table-layout: fixed;
}
.table-detail th {
	background-color: #EFEFEF;
	font-weight : normal;
}
.table-detail th,
.table-detail td {
	padding     : 4px 20px;
	word-wrap: break-word;
}

.table-detail th,
.table-detail td {
	width   : 100%;
	display : block !important;  /* !important → bootstrapの設定を上書きし、1行表示させる */
}

.flexible-table-580 th,
.flexible-table-580 td {
	width   : 100%;
	display : block !important;  /* !important → bootstrapの設定を上書きし、1行表示させる */
}

/*------------------------------------------------------------------------------
 * 共通 - 注意メッセージ
 *----------------------------------------------------------------------------*/
.attention-msg {
	margin      : 0 0 20px 0;
	padding     : 20px;
	border      : 3px solid #FF0000;
}
/*------------------------------------------------------------------------------
 * 共通 - 確認メッセージ
 *----------------------------------------------------------------------------*/
.confirm-msg {
	margin      : 0 0 20px 0;
	padding     : 20px;
	border      : 1px solid #000000;
	border-radius   : 10px;
}
/*------------------------------------------------------------------------------
 * 共通 - 必須/任意アイコン
 *----------------------------------------------------------------------------*/
.required {
	padding     : 2px 8px;
	margin      : 0 5px 0 0;
	color       : #FFFFFF;
	font-size   : 0.8em;
	background-color : #E62320;
	border-radius    : 3px;
}

.required_astr{
	color       : #E62320;
}


.optional {
	padding     : 2px 8px;
	margin      : 0 5px 0 0;
	color       : #FFFFFF;
	font-size   : 0.8em;
	background-color : #595757;
	border-radius    : 3px;
}

/*------------------------------------------------------------------------------
 * 共通 - ヘッダロゴ
 *----------------------------------------------------------------------------*/
 /* ヘッダロゴのエリア定義 */
 .logoarea{
	border-bottom : 1px solid #EBECED;
 }
 
 /* ロゴ下の会社英訳表示定義 */
.hd_logo{
	padding-right : 10px;
	text-align  : right;
}

/*------------------------------------------------------------------------------
 * 共通 - フッタボタン
 *----------------------------------------------------------------------------*/
 /* ボタンのエリア定義 */
.button-next {
	position    : fixed;
	left        : 0px;
	bottom      : 0px;
	width       : 100%;
	height      : 100px;
	text-align  : center;
	z-index     : 999;
	background-color: rgba(0, 0, 0, 0.3);
}
.button-next-margin {
	margin-top  : 120px;
}
.button-back {
	margin      : 40px auto;
	width       : 180px;
	text-align  : center;
}
.button-cancel {
	margin      : 20px auto;
	width       : 180px;
	text-align  : center;
}
/* ボタンのデザイン定義 */
.btn-footer {
	height      : 60px;
	line-height : 1em;
	font-size   : 16px;
	font-weight : 700;
	cursor      : pointer;
	border      : none;
	border-radius   : 35px;
}

.btn-footer div{
	font-size   : 12px;
}

.btn-footer:disabled {
	opacity     : 0.5;
}
.btn-next {
	color       : #FFFFFF;
	background-color: #0073BD; /* 青 */
	width       : 80%;
	max-width   : calc(768px * 0.8);
	margin      : 20px 0 0 0;
}
.btn-next:hover {
	color       : #FFFFFF;
	background-color: #005789; /* 濃い青 */
	width       : 80%;
	max-width   : calc(768px * 0.8);
	margin      : 20px 0 0 0;
}
.btn-back {
	color       : #808080;
	background-color: #EFEFEF;
	width       : 100%;
}
.btn-cancel {
	color       : #FFFFFF;
	background-color: #E62320; /* 赤 */
	width       : 100%;
}
.btn-cancel:hover {
	background-color: #CC1F1C; /* 濃い赤 */
}

/*------------------------------------------------------------------------------
 * 共通 - 英語文言
 *----------------------------------------------------------------------------*/
 .en-msg {
	font-size   : 12px;
 }
 
/*------------------------------------------------------------------------------
 * 1.認証画面 - お知らせ表示
 *----------------------------------------------------------------------------*/
.notice-area {
	margin      : 0 0 10px 0;
	padding     : 6px 8px;
	position    : relative;
	background-color: #EFEFEF;
}
.notice-area ul {
	padding     : 0 5px;
	list-style-type : none;
}
.notice-title {
	color       : #E62320;
	font-weight : bold;
	font-size   : 17px;
	margin      : 0 0 10px 0;
}
.notice-hidden {
	height      : 4.2em;
	overflow-y  : hidden;
}
.notice-readmore {
	position    : absolute;
	right       : 5px;
	bottom      : 1px;
	z-index     : 999;
	padding     : 2px 2px 2px 10px;
	background-color: #EFEFEF;
}
/*------------------------------------------------------------------------------
 * 1.認証画面 - 心当たりのない方へ
 *----------------------------------------------------------------------------*/
.unrelated {
	/*background-color: #FDFFB4;*/
	border-width: 2px;
	border-style: solid;
	border-color: #ff8040;
}
.unrelated-title {
	padding     : 5px;
	text-align  : center;
}
.unrelated-message {
	padding     : 5px 10px;
	display     : none;
}
/*------------------------------------------------------------------------------
 * 1.認証画面 - 通知停止ボタン
 *----------------------------------------------------------------------------*/
.stop-notification-box {
	width       : 100%;
	text-align  : right;
}
.stop-notification label {
	margin      : 0;
	padding-left: 10px;
}
.btn-stop-notification {
	display: block;
	margin-top: 5px;
	margin-right:auto;
	margin-left: auto;
	color       : #FFFFFF;
	background-color: #ff8040;
	width       : 90%;
	max-width   : 100px;
	height      : 30px;
	box-shadow  : 2px 4px 4px #8A9BA6;
	border-radius   : 35px;
	border      : none;
}
/*------------------------------------------------------------------------------
 * 1.認証画面 - 案内メッセージ
 *----------------------------------------------------------------------------*/
.auth-guide {
	margin      : 0 0 10px 0;
	padding     : 0;
	width       : 100%;
}
/*------------------------------------------------------------------------------
 * 1.認証画面 - 同意ボタン
 *----------------------------------------------------------------------------*/
.agree-box {
	margin      : 10px auto 10px auto;
	width       : 90%;
	text-align  : center;
}
.agree-box label {
	margin      : 0;
	padding-left: 10px;
}
.btn-agree {
	color       : #FFFFFF;
	background-color: #0073BD;
	width       : 90%;
	max-width   : 420px;
	height      : 75px;
	font-size   : 20px;
	box-shadow  : 2px 4px 4px #8A9BA6;
}
.btn-agree:hover {
	box-shadow  : 2px 4px 4px #8A9BA6;
	color       : #FFFFFF;
	background-color: #005789; /* 濃い青 */
}
/*------------------------------------------------------------------------------
 * 2.通知停止確認画面 - ボタン
 *----------------------------------------------------------------------------*/
.button-area {
	display     : flex;
}
 
.button-yes {
	margin      : 40px auto;
	width       : 160px;
	text-align  : center;
}
.button-no {
	margin      : 40px auto;
	width       : 160px;
	text-align  : center;
}
.btn-yes {
	color       : #FFFFFF;
	background-color: #0073BD;
	width       : 100%;
	font-size   : 20px;
	box-shadow  : 2px 4px 4px #8A9BA6;
}
.btn-no {
	color       : #808080;
	background-color: #EFEFEF;
	font-size   : 20px;
	width       : 100%;
}
/*------------------------------------------------------------------------------
 * 3.支払方法選択画面 4.各決済選択画面 - 支払方法
 *----------------------------------------------------------------------------*/
.pay-type-width {
	max-width   : calc(768px * 0.8);
}
.btn-paytype {
	color       : #FFFFFF;
	background-color: #0073BD; /* 青 */
	width       : 100%;
	text-align  : center;
	margin      : 10px 0 10px 0;
	padding     : 0 0 0 0;
	font-size   : 1.0em;
}
.btn-paytype:hover {
	color       : #FFFFFF;
	background-color: #005789; /* 濃い青 */
	width       : 100%;
	margin      : 10px 0 10px 0;
}
.pay-type {
	margin      : 0 0 20px 0;
	padding     : 0;
	border-top  : 1px solid #E6E6E6;
}
.pay-type > div {
	padding     : 20px 15px;
	text-align  : center;
	border-bottom   : 1px solid #E6E6E6;
}
.pay-type > li {
	padding     : 20px 15px;
	list-style  : none;
	border-bottom   : 1px solid #E6E6E6;
}
.pay-type-name {
	display     : block;
	float       : left;
	font-size   : 18px;
	clear       :  left;
}
.pay-type-image {
	display     : block;
	text-align  : right;
}
.pay-type-only-name {
	display     : block;
	text-align  : left;
	font-size   : 18px;
}
.pay-tooltips {
	margin      : 10px 0 0 0;
	max-width   : calc(768px * 0.8);
}
/*------------------------------------------------------------------------------
 * 3.支払方法選択画面 4.各決済選択画面 - 支払方法のアイコン
 *----------------------------------------------------------------------------*/
.btn-icon-credit:before {
	content     : "";
	display     : inline-block;
	width       : 40px;
	height      : 30px;
	margin      : 0 5px 0 0;
	background  : url("/images/icon_credit-916bf3b1aea258d688f2424560fb9ba3.png") no-repeat;
	background-size : contain;
	vertical-align  : middle;
}
.btn-icon-mypayment:before {
	content     : "";
	display     : inline-block;
	width       : 40px;
	height      : 30px;
	margin      : 0 5px 0 0;
	background  : url("/images/icon_mypayment-68c0fe977efc5c599fcd7a383d9142b8.png") no-repeat;
	background-size : contain;
	vertical-align  : middle;
}
.btn-icon-linktypeplus:before {
	content     : "";
	display     : inline-block;
	width       : 40px;
	height      : 30px;
	margin      : 0 5px 0 0;
	background  : url("/images/icon_linktypeplus-48325e0046b5cb22566ff4a266bd381f.png") no-repeat;
	background-size : contain;
	vertical-align  : middle;
}
/*------------------------------------------------------------------------------
 * 3.支払方法選択画面 - 決済アプリの案内
 *----------------------------------------------------------------------------*/
.tooltips {
	margin-top  : 10px;
	text-align  : left;
}
.payment-introduction {
	display     : none;
	margin      : 20px 0 0 0;
	padding     : 20px;
	border      : 1px solid #E6E6E6;
	border-radius   : 10px;
}
.payment-introduction-linkplus {
	display     : none;
	margin      : 20px 0 0 0;
	padding     : 0px;
	border      : 1px solid #E6E6E6;
	border-radius   : 10px;
}
ul.linkplus-ul {
	list-style  : none;
	padding     : 8px;
	text-align  : center;
}

li.linkplus-logo-li {
	display     : inline-block;
	width       : 120px;
	height      : 60px;
	position    : relative;
}
.payment-introduction-linkplus .logo-img {
	max-width   : 100%;
	max-height  : 100%;
	position    : absolute;
	top         : 0;
	left        : 0;
	right       : 0;
	bottom      : 0;
	margin      : auto;
}
.download {
	text-align  : center;
}
.download img {
	width       : 150px;
	margin      : 15px;
}
@media (max-width:470px) {
	.download img {
		width   : 100px;
		margin  : 10px
	}
	li.linkplus-logo-li {
		width   : 110px;
		height  : 55px;
	}
}
@media (max-width:430px) {
	li.linkplus-logo-li {
		width   : 100px;
		height  : 50px;
	}
}
@media (max-width:400px) {
	li.linkplus-logo-li {
		width   : 90px;
		height  : 45px;
	}
}
@media (max-width:370px) {
	li.linkplus-logo-li {
		width   : 80px;
		height  : 40px;
	}
}
@media (max-width:340px) {
	li.linkplus-logo-li {
		width   : 70px;
		height  : 30px;
	}
}
/*------------------------------------------------------------------------------
 * 4.クレジットカード選択画面 - カード番号入力ボックス
 *----------------------------------------------------------------------------*/
.creditNo {
	width       : 68px;
	padding     : 6px 10px;
}
.recurring-payment-introduction {
	height      : 120px;
	overflow    : scroll;
	border      : 1px solid #E6E6E6;
	border-radius : 10px;
	padding     : 15px 0;
	margin      : 15px 0;
}

.recurring-payment-introduction ul {
	padding-left: 30px;
}

.recurring-payment-check-box input[type="checkbox"] {
	width       : 30px;
	height      : 30px;
}

.recurring-payment-check-box label {
	padding-left: 10px;
	margin      : 0px;
}

/*------------------------------------------------------------------------------
 * 5.詳細情報画面 - 表示項目
 *----------------------------------------------------------------------------*/
.title-box {
	margin: 0 -5px;
	width: calc(100% + 10px);
}

.title-content {
	margin: 0 -5px 10px -5px;
	width: calc(100% + 10px);
    display: block;
    padding: 12px 10px;
    word-wrap: break-word;
    background-color: #EFEFEF;
    font-weight: normal;
    border: 1px solid #ddd;
    border-spacing: 0;
    border-collapse: collapse;
}

.accordion-open {
    open: open;
}

.accordion {
    max-width: 500px;
    margin-bottom: 7px;
}

.accordion summary {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: #333333;
    cursor: pointer;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary::after {
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 13px solid black;
    content: '';
    position: absolute;
    right: 10px;       
}

.accordion[open] summary::after {
    transform:rotateX(180deg);     
}


.title-header{
	margin-right: 16px;
    display: block;
}

.btn-blue {
	line-height : 1em;
	font-size   : 20px;
	font-weight : 700;
	cursor      : pointer;
	border      : none;
	border-radius   : 35px;
	color       : #FFFFFF;
	background-color: #0073BD;
	width       : 90%;
	min-height  : 60px;
	max-width   : 420px;
	box-shadow  : 2px 4px 4px #8A9BA6;
	padding     : 10px
}

.btn-orange {
	line-height : 1em;
	font-size   : 20px;
	font-weight : 700;
	cursor      : pointer;
	border      : none;
	border-radius   : 35px;
	color       : #FFFFFF;
	background-color: #ff8040;
	width       : 90%;
	min-height  : 60px;
	max-width   : 420px;
	box-shadow  : 2px 4px 4px #8A9BA6;
	padding     : 10px
}
/*------------------------------------------------------------------------------
 * 6.PAYSLE決済完了画面 - 支払未完了メッセージ
 *----------------------------------------------------------------------------*/
.unpaid-msg {
	margin-top  : 10px;
	font-weight : bold;
	text-decoration : underline;
}
/*------------------------------------------------------------------------------
 * 7.PDF出力
 *----------------------------------------------------------------------------*/

#header {
  position: fixed;
  top: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 9998;
  width: 100%;
  display: inline-block;
  background: -webkit-gradient(linear, left top, right top, from(#1C70A2), to(#1F4384)) 0% 0% no-repeat padding-box;
  background: linear-gradient(90deg, #1C70A2 0%, #1F4384 100%) 0% 0% no-repeat padding-box;
  color: #ffffff;
  height: 70px;
  vertical-align: middle;
}

.header {
  max-width: 500px;
  margin: 0 auto;
  font-size: 1.7rem;
  font-weight: bold;
  text-align: left;
  padding: 20px 70px 20px 20px;
}