@charset "utf-8";

body {
font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

#container{
width: 1280px;
margin: 0 auto;

}

#left_nav {
position: fixed;
top: 119;
width: 261px;
text-align: center;
float: left;
background-color:#DDE7F4;
padding: 48px 19px 1500px 20px
}

#l_select {
position: static;
width: 260px;
height: 700px;
text-align: center;
border: 1px solid #1D5EB4;
border-radius: 6px 6px 4px 4px;
}

#l_select > img {
position: relative;
top: -2px;
left: -2px;
}

#l_new {
width: 75px;
float: left;
padding: 18px 30px 21px 22px

}

#l_keizoku {
width: 75px;
float: right;
padding: 18px 22px 21px 30px

}

#left_nav > img {
margin:0 auto 5px;
}

#left_nav > img.yajirushi {
margin:2px auto 6px;
}

#l_new img , #l_keizoku img {
margin-bottom: 17px;
}

#l_new img , #l_keizoku img {
margin-bottom: 18px;
}

#right_contents{
font-size: 14px;
line-height: 28px;
width: 880px;
float: right;
margin: 50px 48px 82px;
}

#l_line {
margin-top: 24px;
}

img#bg {
display: none;
}

.display-none {
display: none;
}


#hyouji-ichi2 , #hyouji-ichi3 , #hyouji-ichi4 {
display: none;
}


#shisan {
font-size: 16px;
text-align:center;
margin: 28px auto 25px;
}

#shisan span {
font-size: 12px;
position: absolute;
margin-left: 20px;
}

#kakekin_hyouji{
text-align:center;
width: 320px;
margin: 20px auto 10px;
border-bottom: 2px solid #D11C24;
}

#fuusuisetugai{
text-align:center;
margin: 28px auto 22px;
}

#hosyou {
border-radius: 10px;
border: 1px solid #0082D2;
margin: 30px auto;

}
.sub_text1{
position:relative;
background-color:#D2DFF0;
margin: -32px 0 32px;
padding:14px 45px;
}

.syousai {
position: absolute;
top:5px;
right:14px;
}

#ill_zousan {
position: relative;
top:-140px;
right:0;
margin-bottom: -120px;
}

h2 {
font-size: 35px;
text-align:center;
width: 1254px;
color:#FFFFFF;
background-color:#1D5EB4;
margin: 50px 0 0;
padding:13px;
}

h3{
font-size: 30px;
text-align:center;
color:#FFFFFF;
background-color:#1D5EB4;
margin: 0;
border-radius: 10px;
padding:20px;
margin-bottom: 24px;
}

#nyuryoku , #settei {
border: 1px solid #1D5EB4;
border-radius: 10px;
margin: 24px 0;
padding: 0;
}
.padding {
padding: 0 20px 34px;
}

h4{
font-size: 24px;
text-align:center;
color:#FFFFFF;
background-color:#4A7EC3;
margin: 0 0 32px;
border-radius: 10px 10px 0 0;
padding:10px;
}

.under_h4 {
text-align:center;
background-color:#D2DFF0;
border-radius: 0 0 10px 10px;
margin: -32px 0 34px;
padding:14px 45px;
}

h5{
font-size: 22px;
text-align:center;
color:#4A7EC3;
background-color:#D2DFF0;
margin:0;
border-radius: 10px 10px 0px 0px;
padding:10px;
}

h5.tab,h5.tab_on{
font-size: 16px;
text-align:center;
width: 242px;
margin: 0 16px 0 0 ;
border-radius: 10px 10px 0px 0px;
border: 1px solid #4A7EC3;
padding:10px;
float: left;
}

h5.tab_on{
color:#FFFFFF;
background-color:#4A7EC3;
}

h5.tab{
color:#4A7EC3;
background-color:#D2DFF0;
}

#kakekin {
text-align:center;
background-color:#E8EFF7;
border: 1px solid #1D5EB4;
border-radius: 0 0 10px 10px;
margin: 0 0 27px;
padding:32px 32px 32px;
}


h6{
font-size: 18px;
font-weight: normal;
width: 800px;
background-color:#C6D7EC;
margin: 20px 20px 10px;
border-radius: 10px;
border: 0 solid #C6D7E3;
padding:10px 20px;
float: left;
}

/* 扉 */

#tobira ul {
margin: 2px auto 150px;
width: 1100px;
}


#tobira li {
float: left;
list-style-type: none;
margin: 0 49px 150px;
}


/* 掛金の内訳表 */

table#kakekin_tanka {
width: 810px;
background-color:#fff;
border: 1px solid #1D5EB4;
border-collapse: separate;
border-spacing: 0;
border-radius: 5px;
overflow: hidden;
}

table#kakekin_tanka th{
font-size: 14px;
color:#FFFFFF;
background-color:#618ECA;
padding: 10px;
}

table#kakekin_tanka td{
font-size: 14px;
padding: 6px;
}

table#kakekin_tanka td.bg_blue1{
background-color:#D2DFF0;
}

table#kakekin_tanka td.bg_blue2{
text-align:center;
background-color:#A5BFE1;
padding: 10px;
}

table#kakekin_tanka td .red{
font-size: 16px;
padding: 5px;
}


table#kakekin_tanka td.padding15 {
padding: 15px;
}

/* 補償の内訳表 */

table.uchiwake{
width: 692px;
margin: 20px 20px 10px;
}

table.uchiwake td{
font-size: 14px;
line-height: 18px;
height: 18px;
margin: 0;
padding: 0 0 2px 0;
}

table.uchiwake td.font12{
font-size: 12px;
line-height: 12px;
padding-top: 1px;
}


table.uchiwake td.w39{
padding-right: 12px;
}


/* 説明ボタンのマージン */
td.setsumei , td > span.setsumei {
padding: 18px 30px 18px 24px;

}
#fusuiRadio .setsumei{
padding: 18px 18px 18px 9px;

}

td > span.setsumei , #fusuiRadio .setsumei {
position: relative;
top: 7px;
left: 0;

}

/* ラジオボタン */
label ~ label {
margin-left: 20px;
}

input[type=radio] {
display: none;
}

input[type=radio] + label {
position: relative;
display: inline-block;
padding-left: 40px;
}

input[type=radio] + label::before {
position: absolute;
content: '';
width: 26px;
height: 26px;
border-radius: 50%;
background: #DDE7F4;
border: 2px solid #1D5EB4;
top: -3px;
left: 0;
}


input[type=radio] + label::after {
position: absolute;
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: #DDE7F4;
border: 8px solid #1D5EB4;
top: -2px;
left: 1px;
opacity: 0;
}


input.radio-red[type=radio] + label::before {
position: absolute;
content: '';
width: 26px;
height: 26px;
border-radius: 50%;
background: #FEE5E9;
border: 2px solid #FA506E;
top: -7px;
left: 0;
}


input.radio-red[type=radio] + label::after {
position: absolute;
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: #FEE5E9;
border: 8px solid #FA506E;
top: -6px;
left: 1px;
opacity: 0;
}

input.radio-red2[type=radio] + label::before {
position: absolute;
content: '';
width: 26px;
height: 26px;
border-radius: 50%;
background: #FEE5E9;
border: 2px solid #FA506E;
top: -4px;
left: 0;
}


input.radio-red2[type=radio] + label::after {
position: absolute;
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: #FEE5E9;
border: 8px solid #FA506E;
top: -3px;
left: 1px;
opacity: 0;
}


input[type=radio]:checked + label::after {
opacity: 1;
}


/* sabmit ボタン */
.submit1 {
border: 0px;
width:181px;
height:56px;
background: url(img/b_sakusei_off.png) left top no-repeat;
margin-top: 40px;
}

.submit1:hover {
cursor: pointer;
background: url(img/b_sakusei_on.png) left top no-repeat;
}

.button {
border: 0px;
width:101px;
height:51px;
border-radius: 5px;
margin-top: 40px;
}

.button:hover {
cursor: pointer;
}


.submit2 {
border: 0px;
width:101px;
height:51px;
background: url(img/b_next_off.png) left top no-repeat;
margin-top: 20px;
margin-left: 56px;
}

.submit2:hover {
cursor: pointer;
background: url(img/b_next_on.png) left top no-repeat;
}

/* 風水雪害特約の囲み */
#fusuiRadio {
width: 425px;
height: 34px;
border: 1px solid #1D5EB4;
border-radius: 5px;
padding:13px 18px 13px 16px;
margin: 0 auto;
}


/* 赤い枠のテーブル */

table.red_table {
width: 880px;
margin: 25px 0 0;
border: 1px solid #FA506E;
border-collapse: separate;
border-spacing: 0;
border-radius: 10px;
}

table.red_table th {
font-size: 24px;
text-align:left;
color:#FF3C82;
background-color:#FEEAEC;
padding:10px;
}

table.red_table th.text_small {
font-size: 12px;
font-weight: normal;
color:#D11C24;
}


table.red_table td {
font-size: 14px;
line-height: 16px;
padding:20px;
}

.tl-r {
border-radius: 10px 0 0 0;

}

.tr-r {
border-radius: 0 10px 0 0;

}

table.red_table td.padding_b0 {
padding:20px 20px 0;
}

table.red_table td.padding_t0 {
padding:0 20px 20px;
}


table.red_table td.setsumei {
padding:20px 0;
}

/* テキスト入力 */
input {
font-size: 14px;
border: 1px solid #FA506E;
padding:8px 13px;
border-radius: 5px;
}

.kyousaikakekin {
font-size: 20px;
}

input::placeholder {
color:#CACACA;
}

/* 透明度 */
.opacity20,.lOpacity20 .opacity {
opacity: 0.2;
}

.opacity100,.lOpacity100 .opacity {
opacity: 1.0;
}

/* 出力する申込書等を選択 */
#select {
text-align:center;
border: 1px solid #1D5EB4;
border-radius: 10px;
margin: 24px 0 60px;
padding:0 0 20px;
}

#select h4{
margin: 0;
}

#new {
text-align:left;
float: left;
width: 335px;
height:120px;
border: 1px solid #FF3C82;
border-radius: 10px;
margin: 28px 12px 18px 24px;
padding: 28px;
}

#continuation {
text-align:left;
float: right;
width: 335px;
height:120px;
border: 1px solid #0082D2;
border-radius: 10px;
margin: 28px 24px 18px 12px;
padding: 28px;
}

/* 「１．基本情報の入力」のテキスト入力 */
#nyuryoku input {
border: 1px solid #1D5EB4;
}


.houshin {
padding:20px;

}

#err_message {
text-align:center;
color:#D11C24;
background-color:#F9E4E5;
border: 1px solid #D11C24;
border-radius: 10px;
margin: 16px auto;
padding: 17px 44px;
}

/* 「火災共済契約申込書」出力 */

#output {
margin-top: 24px;
border-radius: 10px;
border: 1px solid #0082D2;
}

#output h4 {
color:#0082D2;
background-color:#D9F1FC;
margin: 0;
padding: 10px;
}

#output h5 {
color:#000;
}

img#printrei {
margin: 18px 28px 32px 32px;
}

#output .bg_yellow {
    background-color: #FFFF78;
}


#output .bg_blue {
    background-color: #339BDB;
}

#output .bg_light_blue {
    background-color: #DDE7F4;
}


#output .naiyou table {
margin: 20px auto;
border: 1px solid #1D5EB4;
border-collapse: separate;
border-spacing: 0;
border-radius: 5px;
}

#output .hosyou , #output .naiyou , #output .kakekin{
width: 820px;
border-radius: 10px;
border: 1px solid #0082D2;
margin: 20px auto 30px;
}

#output h5{
background-color:#D9F1FC;
}

#output .hosyou h6{
margin: 35px 33px 3px;
width: 710px;
background-color:#D2DFF0;
}

/* 変更届記載例出力内容 */

.kakekin {
text-align:center;
}

#output .kakekin table#keiyaku_syurui {
width: 750px;
border-collapse: separate;
border-spacing: 0;
border-radius: 5px;
border: 1px solid #000000;
margin: 32px 34px 0;
}


#output .kakekin table#keiyaku_syurui th {
font-size: 14px;
font-weight: normal;
text-align:center;
background-color:#CCE6F6;
padding: 8px 22px;
}


#output .kakekin table#kakekin_tanka {
width: 750px;
border: 1px solid #000000;
margin: 9px 34px 34px;
}


#output .kakekin ttable#kakekin_tanka th{
background-color:#339BDB;
padding: 9px;
}

/*
/* 共通 */
/**/

.right
{
text-align:right;
}

.center
{
text-align:center;
}

.v-align-m {
vertical-align: middle;
}


.font12 {
font-size:12px;
line-height: 14px;
}

span.font12 {
display: inline-block;
margin-top:15px;
}


.font16{
font-size:16px;
}

.font20{
font-size:20px;
}

.font20 .red {
font-size:26px;
}

.padding-r34 {
padding-right: 34px;
}

.padding-b28 {
padding-bottom: 28px;
}

.underline {
border-bottom: 1px solid #1D5EB4;
padding-bottom: 5px;
}


.w571 {
width: 571px;
}

.w561 {
width: 561px;
}

.w551 {
width: 551px;
}

.w231 {
width: 231px;
}

.w211 {
width: 211px;
}

.w200 {
width: 200px;
}

.w170 {
width: 170px;
}

.w160 {
width: 160px;
}

.w140 {
width: 140px;
}

.w130 {
width: 130px;
}


.w120 {
width: 120px;
}

.w100 {
width: 100px;
}

.w80 {
width: 80px;
}

.w60 {
width: 60px;
}

.w50 {
width: 50px;
}

.w40 {
width: 40px;
}


.w39 {
width: 39px;
}

.w30 {
width: 30px;
}

.w20 {
width: 20px;
}

.margin0 {
margin: 0;
}

.margin-t32 {
margin-top: 32px;
}

.setsumei{
position:relative;
}


.pop_off{
display: none;
z-index:2;
}

.pop_on{
position: absolute;
top:23px;
left:-2px;
z-index:2;
}

.pop_on2{
position: absolute;
top:38px;
left:-2px;
z-index:2;
}


.pop_on3 {
position: absolute;
top: 5px;
left:-7px;
z-index:2;
}

.pop_on4 {
position: absolute;
top: 7px;
left:-7px;
z-index:2;
}

.pop_on5{
position: absolute;
top:7px;
right: -17px;
z-index:2;
}

.pop_base2 {
position: absolute;
top:23px;
left:-2px;
width:620px;
height:555px;
z-index:2;
}

.scroll {
position: absolute;
top:39px;
left:33px;
z-index:3;
width:562px;
height:496px;
overflow-y:scroll;
/* overflow-x:hidden;*/
}

.pop_base11 {
position: absolute;
top:29px;
right:0;
width:621px;
height:555px;
    z-index:2;
}

.scroll11 {
position: absolute;
top:39px;
left:33px;
z-index:3;
width:551px;
height:496px;
overflow:scroll;
/* overflow-x:hidden;*/
}

.scroll2 {
position: absolute;
top:29px;
right:0;
z-index:;
width:101px;
height:400px;
overflow:scroll;
/* overflow-x:hidden;*/
}

.pop_base8 {
position: absolute;
top:20px;
left:-50px;
width:610px;
height:555px;
z-index:2;
}



.bold {
font-size: 16px;
font-weight:bold;
}


.bold14 {
    font-size: 14px;
    font-weight:bold;    
}

#setsumei .{
margin: 32px 0;
}


#setsumei .bold{
margin: 0 45px;

}

#setsumei > ul ,#setsumei .red > ul{
margin: 0 45px 10px 76px;
padding: 14px;
}

ul.maru {
list-style-position: outside;
list-style-image: url('./img/maru.png');
margin: 0;
padding: 0;
}

.red ul.maru {
list-style-image: url('./img/maru_red.png');
}



ul li {
line-height:18px
margin: 16px 0;
}

ul.maru li ul {
list-style:  none;
margin: 0;
padding: 0;
}


li ul li {
margin: 0;
line-height:22px
}


.red{
color:#D11C24;
}

#fusuiRadio .red {
font-size: 20px;
position: relative;
top: 3px;
left: 0;
}

.err_mes {
font-size: 12px;
line-height: 19px;
color:#D11C24;
}

.example,small_text {
font-size: 10px;
margin: 6px 14px;
}

#back {
margin-right: 60px;
}

@media only screen and (max-width: 1279px){

#container {
width: 880px;
}
#left_nav {
display: none;
}

#right_contents{
margin: 50px auto 82px;
}


h2 {
width: 854px;
}

}