@charset "utf-8";

/***************************************************************************
Media Queries
****************************************************************************/

/*iPad 以下 w767px*/
@media only screen and (max-width: 767px) {
}

/***************************************************************************
pool_attention
****************************************************************************/

.pool_attention {
	font-size: 12px;
	background-color: green;
	color: #FFFFFF;
	padding: 10px;
	border-radius: 5px;
}

/***************************************************************************
contents
****************************************************************************/

@media only screen and (max-width: 767px) {
#form .contents {
	/*max-width: 94% !important;*/
}
}

/***************************************************************************
readonly
****************************************************************************/

input[readonly] {
	/*background-color:#DDDDDD;*/
	border: none !important;
}

/***************************************************************************
placeholder/Required
****************************************************************************/
   
::-webkit-input-placeholder {
	font-size: 13px !important;
	color: #BBBBBB;
}
::-moz-placeholder {
	font-size: 13px !important;
	color: #AAAAAA;
}
:-ms-input-placeholder {
	font-size: 13px !important;
	color: #BBBBBB;
}

@media only screen and (max-width: 767px) {
::-webkit-input-placeholder {
	line-height: 1.7;
}
::-moz-placeholder {
	line-height: 1.7;
}
}

#form .required {
	background-color: #FFF;
/*	//	2018-11-06 ichijo 修正
	background-color: #FFDFDF;
*/
}

/***************************************************************************
top_inner
****************************************************************************/

#top_inner {
    max-width: 840px;
    margin: 40px auto 0px auto;
}

@media only screen and (max-width: 767px) {
#top_inner {
    margin: 20px auto 0px auto;
}
}

/***************************************************************************
table
****************************************************************************/

#form table {
    margin-bottom: 20px;
}
#form th,#form td {
    vertical-align: middle;
}
#form th {
    font-size: 13px;
    width: 220px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
}
#form th .inner {
	/*display: flex;
	justify-content: space-between;*/
	position: relative;
	/*width: 100%;*/
	display: block;
}
#form th .red, 
#form .antisocial .red {
	/*align-self: center;*/
    font-size: 10px;
	background-color: #D93600;
	color: #FFFFFF !important;
	padding: 5px 5px 5px 5px;
	border-radius: 3px;
	line-height: 1;
	position: absolute;
	right: 0;
    top: 0;
    display: inline-block;
}
#form .antisocial .red {
	right: inherit;
    left: 0;
}
@media only screen and (max-width: 767px) {
#form th .red {
	position: relative;
	right: auto;
	padding: 3px 5px 3px 5px;
    margin-left: 8px;
}
}
div.form_td_attention,span.form_td_attention {
    font-size: 13px;
    color: gray;
    padding-top: 5px;
}
.attention_txt {
    padding-top: 5px;
}
.error_message {
    font-size: 13px;
	font-weight: bold;
	color: #D93600;
    background-image: url(../../image/form/common/bg-icon_error_message.gif);
    background-repeat: no-repeat;
    background-position: left top 12px;
    background-size: 15px auto;
	padding: 10px 0px 0px 20px;
}
.antisocial .error_message {
    display: inline-block;
}
@media only screen and (max-width: 767px) {
#form th {
    font-size: 15px;
    width: 100%;
}
#form th,#form td {
    padding-left: 10px;
    padding-right: 10px;
}
table.display_l th {
    height: auto;
}
div.form_td_attention,span.form_td_attention {
    padding-top: 10px;
    margin-left: 0px;
    display: block;
}
}

/***************************************************************************
form_ttl
****************************************************************************/

#form_head_ttl {
    font-size: 26px;
    text-align: center;
    line-height: 1.25;
    margin-bottom: 10px;
}
#form_head_ttl:after {
    content: '';
    display: block;
    margin-top: 10px;
	height: 3px;
	background: -moz-linear-gradient(left,  #67bb3c 0%, #06aad6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #67bb3c 0%,#06aad6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #67bb3c 0%,#06aad6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#form_head_ttl .icon {
    display: inline-block;
    border-radius: 30px;
    color: #FFFFFF;
    padding: 8px 1em 7px 1em;
    font-size: 18px;
    vertical-align: middle;
    margin-right: 15px;
}
#form_head_ttl .personal {
    background-color: #009916;
}
#form_head_ttl .corporation {
    background-color: #27669A;
}

@media only screen and (max-width: 767px) {
#form_head_ttl {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
#form_head_ttl .icon {
    display: table;
    margin: 0px auto 10px auto;
}
}

#another_type {
    text-align: right;
}
#another_type a {
    background-image: url(../../image/form/common/bg-another_type.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 12px;
    font-size: 14px;
    font-weight: bold;
}
#another_type a:hover {
	color: #0085B2 !important;
}

@media only screen and (max-width: 767px) {
#another_type {
    margin-bottom: 15px;
}
#another_type a {
    font-size: 13px;
}
}

#form_main_ttl {
    color: #527292;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 25px;
    line-height: 1.4;
}

#form_main_ttl {
    color: #527292;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 25px;
    line-height: 1.4;
}

@media only screen and (max-width: 767px) {
#form_main_ttl {
    font-size: 16px;
    margin-bottom: 10px;
}
}

.form_sub_ttl {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

/***************************************************************************
step
****************************************************************************/

#step {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
#step {
    margin-top: 15px;
    margin-bottom: 20px;
}
}

/***************************************************************************
p.exp
****************************************************************************/

p.exp {
    font-size: 16px;
    font-weight: bold;
	margin-left: 1.7em;		/* ブロック全体を 1em 右に */
	text-indent: -1.7em;		/* 先頭の1文字のみ 1em 左に */
}
p.exp:before {
    content: "●";
    color: #FFBF00;
    margin-right: 5px;
    margin-left: 5px;
}

@media only screen and (max-width: 767px) {
p.exp {
    font-size: 15px;
}
}

/***************************************************************************
customer_type
****************************************************************************/

#customer_type {
    padding: 30px 45px 30px 45px;
    margin-bottom: 40px;
    border: 1px solid #DDDDDD;
    background-color: #F6F6F6;
    border-radius: 8px;
}
#customer_type.cancell {
    padding-bottom: 15px;
}
#customer_type strong {        /*解約ページCSS*/
    font-size: 18px;
    display: block;
    margin-bottom: 5px;
}
#customer_type strong .icon {  /*解約ページCSS*/
    display: inline-block;
    background-color: #FF9933;
    color: #FFFFFF;
    padding: 2px 2em 2px 2em;
    border-radius: 30px;
    margin-right: 10px;
    font-size: 14px;
}
#customer_type ul {
    display: flex;
    justify-content: space-between;
}
#customer_type ul a:hover {
    opacity: 1;
}

@media only screen and (max-width: 1250px) {
#customer_type .pc {
    display: none !important;
}
#customer_type .sp {
    display: block !important;
}
#customer_type ul li {
    width: 49%;
}
}

@media only screen and (max-width: 767px) {
#customer_type {
    padding: 20px 20px 10px 20px;
    margin-bottom: 30px;
}
#customer_type ul {
    display: block;
    width: 100%;
}
#customer_type ul li {
    margin-bottom: 15px;
    width: 100%;
}

#customer_type strong {        /*解約ページCSS*/
    text-align: center;
}
#customer_type strong .icon {  /*解約ページCSS*/
    display: table;
    margin: 0px auto 10px auto;
}
}

/***************************************************************************
required_attention
****************************************************************************/

#required_attention {
    color: #B20000;
    font-size: 13px;
    margin-bottom: 10px;
}

/***************************************************************************
input
****************************************************************************/

#form button {
    border: none;
    cursor: pointer;
}
#form input[type*="file"] {
    cursor: pointer;
}
#form button,#form input[type*="submit"] {
    font-family: "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", sans-serif;
}

@media only screen and (min-width: 769px) {
#form button,#form input[type*="submit"] {
	transition: 0.2s;
}
#form button:hover,#form input[type*="submit"]:hover {
	opacity: 0.8;
}
}

#form input[type*="text"],#form input[type*="tel"],#form input[type*="number"],#form input[type*="email"],#form textarea,#form select {
	vertical-align: middle;
	font-size: 14px;
    line-height: 1em;
    font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese', sans-serif;
	border: 1px solid #CCCCCC;
	padding: 5px 3px 5px 3px;
	border-radius: 3px;			/*iPhoneで角丸になるのを防ぐ*/
    width: 300px;
}

#form input[type="radio"] {
    width: auto;
}
#form input,#form textarea {
	outline: none;
	-webkit-appearance: none;
}
#form select {
	cursor: pointer;
	width: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	background-image: url(../../image/form/common/bg-arrow_selectbox.png);
	background-repeat: no-repeat;
	background-position: 96% center;
	padding-right: 20px;
	background-size: 10px auto;
	height: 33px;
}
#form select::-ms-expand {	/*IE11*/
	display: none;
}
#form textarea {
	width: 100%;
	height: 200px;
	resize: vertical;
}

@media only screen and (max-width: 767px) {
#form input[type*="text"],#form input[type*="tel"],#form input[type*="number"],#form input[type*="email"],#form select,#form textarea {
    width: 100%;
	font-size: 16px;
}
}

/***************************************************************************
w_
****************************************************************************/

#form .w_200 {
    width: 200px !important;
}
#form .w_150 {
    width: 150px !important;
}
#form .w_100 {
    width: 100px !important;
}
#form .w_100per {
    width: 100% !important;
    max-width: 100% !important;
}
#form .w_75 {
    width: 75px !important;
}
#form .w_75per {
    width: 75% !important;
    max-width: 75% !important;
}
#form .w_72 {
    width: 72px !important;
}
#form .w_70 {
    width: 70px !important;
}
#form .w_70per {
    width: 70% !important;
    max-width: 70% !important;
}
#form .w_50 {
    width: 50px !important;
}
#form .w_50per {
    width: 50% !important;
    max-width: 50% !important;
}
#form .w_40per {
    width: 40% !important;
    max-width: 40% !important;
}

@media only screen and (max-width: 767px) {
#form .leng {
    width: 100% !important;
    max-width: 100% !important;
}
}

 /***************************************************************************
長さ
****************************************************************************/

.em_4,.em_5,.em_6 {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px; 
}
.em_4 {
    width: 4em;
}
.em_5 {
    width: 5em;
}
.em_6 {
    width: 6em;
}

/***************************************************************************
zip ボタン
****************************************************************************/

@media only screen and (max-width: 767px) {
.address a img {
    width: 80px;
}
}

/***************************************************************************
zip ボタン
****************************************************************************/

.address .search_zip {
	display: inline-block;
	font-size: 12px;
	padding-left: 10px;
}

@media only screen and (max-width: 767px) {
.address .search_zip {
	font-size: 10px;
	padding-left: 10px;
}
.address a {
	display: block;
	margin-top: 5px;
    width: 80px;
}
}

/***************************************************************************
横並び
****************************************************************************/

.flex_box {
    display: flex;
    align-items: center;
}
@media only screen and (max-width: 767px) {
.tochi_address .flex_box {
    display: block;
}
}

/***************************************************************************
ラジオボタンをオリジナルに
****************************************************************************/

.radio_outline li {
	position: relative;
	margin-right: 15px;
	display: inline-block;
}
.radio_outline input {
	position: absolute;
	opacity: 0 !important;
	width: 100% !important;
	height: 100% !important;
	cursor: pointer;
}
.radio_outline input[type="radio"] + label {
	display: block;
	background-image: url(../../image/form/common/bg-radio_button.png);
	background-repeat: no-repeat;
	background-position: 0px 4px;
	background-size: 14px 100px;
	padding-left: 20px;
}
.radio_outline input[type="radio"]:checked + label {
	background-position: 0px -82px;
	background-size: 14px 100px;
}

/***************************************************************************
チェックボックスをオリジナルに
****************************************************************************/

.check_outline li {
	position: relative;
	margin-right: 20px;
	display: inline-block;
}
.check_outline input {
	position: absolute;
    top: 0;
    left: 0;
	opacity: 0 !important;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.check_outline input[type="checkbox"] + label {
	background-image: url(../../image/form/common/bg-check_box.png);
	background-repeat: no-repeat;
	background-position: 0px 2px;
	background-size: 17px 120px;
	padding-left: 24px;
	display: block;				/* テスト的に */
	cursor: pointer;
    position: relative;
}
.check_outline input[type="checkbox"]:checked + label {
	background-position: 0px -101px;
}




/***************************************************************************
SUBMIT（ボタン1個/ボタン2個）ブロック共通
****************************************************************************/

.submit {
	max-width: 300px;
	margin: 0px auto 0px auto;
	padding: 30px 0px 60px 0px;
}
.double_btn {
	max-width: 700px;
	margin: 0px auto 0px auto;
}
.double_btn ul {
	text-align: center;
    font-size: 0;
}
.double_btn li {
	width: 47.5%;
	display: inline-block;
	margin: 0px 1% 0px 1%;
}

#form .submit .btn a,#form .submit .btn input {
	display: block;
	border-radius: 5px;
	text-decoration: none;
	padding: 20px;
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	line-height: 1em;
	text-align: center;
	cursor: pointer;
	color: #FFFFFF;
	background-color: #0085B2;
	border: 1px solid #0085B2;
}
#form .submit .btn a {
	background-color: #555555;
	border: 1px solid #555555;
}

@media only screen and (max-width: 767px) {
.submit {
	padding: 10px 0px 30px 0px;
	max-width: inherit !important;
	width: 100%;
}
.double_btn ul {
}
.double_btn li {
	width: 100%;
	margin: 0px 0px 15px 0px;
}
.double_btn li:last-child {
    margin-bottom: 0px;
}
#form .submit .btn a,#form .submit .btn input {
	padding: 18px;
	font-size: 17px;
}
}

/***************************************************************************
ssl_txt
****************************************************************************/

#ssl_txt {
    background-color: #F1F9FE;
    border: 1px solid #A9C4E4;
    padding: 8px 0px 8px 0px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 15px;
}
#ssl_txt span {
    display: inline-block;
    background-image: url(../../image/form/common/bg-icon_key.png);
    background-repeat: no-repeat;
    background-position: left top 2px;
    padding-left: 20px;
    font-size: 13px;
    font-weight: bold;
    color: #003366;
}

@media only screen and (max-width: 413px) {
#ssl_txt span {
    font-size: 12px;
    background-position: left top 0px;
}
}

/***************************************************************************
pribacy_box
****************************************************************************/

#pribacy_box {
    padding: 15px 30px 15px 30px;
    border-radius: 5px;
    font-size: 13px;
    border: 1px solid #CCCCCC;
    line-height: 1.4;
}
#pribacy_box strong {
    display: block;
    margin-bottom: 7px;
}


@media only screen and (max-width: 767px) {
#pribacy_box {
    padding: 15px;
}
}

/***************************************************************************
entry_thanks
****************************************************************************/

#thanks_txt {
    max-width: 530px;
    margin: 0px auto 0px auto;
}
#thanks_txt p {
    margin-bottom: 25px;
}

#thanks_top {
    padding-top: 20px;
}
#thanks_top a {
	display: block;
	max-width: 300px;
	margin: 0px auto 40px auto;
	text-align: center;
	background-color: #73AED2;
	color: #FFFFFF;
	padding: 15px 0px 15px 0px;
	border-radius: 6px;
	text-decoration: none;
}
#thanks_top a:hover {
	color: #FFFFFF !important;
}

@media only screen and (max-width: 767px) {
#thanks_txt {
    width: 100%;
}
}


/***************************************************************************
一條追加 2019-01-09
****************************************************************************/
.btn button {
	display: block;
    border-radius: 5px;
    text-decoration: none;
    padding: 20px;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    line-height: 1em;
    text-align: center;
    cursor: pointer;
    color: #FFFFFF;
    background-color: #0085B2;
    border: 1px solid #0085B2;
}
.btn .disabled {
	background-color: #ccc;
}