@charset "utf-8";

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

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

}


#tobira5{
width: 1280px;
height: 570px;
margin: 50px 0 0;
padding:0;
background-color:#E3F2EA;
}


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

#left_nav img {
margin-bottom: 18px;
}

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


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;
}

#kakekin_hyouji{
text-align:center;
margin: 20px auto;
}

#plan input{
display: none;
}

#fuusuisetugai{
text-align:center;
margin: 20px auto 10px;
}

#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;
}

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

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

#ill0 {
position: relative;
top:-103px;
right:0;
margin-bottom: -103px;
}


.waku_syasyu {
text-align:center;
width: 270px;
border: 1px solid #0087A5;
border-radius: 10px;
margin: 24px 32px 32px 0;
padding: 0;
float: left;
}

.waku {
text-align:center;
border: 1px solid #0087A5;
border-radius: 10px;
margin: 24px 0 24px;
padding: 0;
}

.waku_red {
text-align:center;
font-size: 20px;
line-height: 32px;
width: 730px;
color:#D11C24;
border: 1px solid #D11C24;
background-color: #f9e4e5;
border-radius: 10px;
margin: 20px auto 50px;
padding: 20px 35px;
}

.m_r0
{
margin-right: 0;
}

.padding-syasyu {
text-align:center;
padding: 34px 10px;
}

.padding {
text-align:center;
padding: 34px 20px;
}

.w270
{
text-align:center;
width: 270px;
float: left;
}

.w578
{
text-align:center;
width: 578px;
float: right;
}

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

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

h5{
font-size: 18px;
text-align:center;
color:#0087A5;
background-color:#B2DBE4;
margin:0;
border-radius: 10px 10px 0px 0px;
padding:10px;
}

h5.tab,h5.tab_on{
font-size: 16px;
text-align:center;
width: 242px;
margin: 34px 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;
}

.hyou
{
text-align:left;
width: 682px;
margin: 50px auto 48px;

}

#ill04 {
position: relative;
top:-22px;
left:-90px;
margin-bottom: -141px;
}


/* 扉 */

#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: 680px;
margin: 20px 20px 10px;
}

table.uchiwake td{
font-size: 14px;
padding: 1px 5px;
}

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

}
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: #D9EDF1;
border: 2px solid #0087A5;
top: -3px;
left: 0;
}


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

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


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


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


input.radio-orenge2[type=radio] + label::after {
position: absolute;
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: #FFE3D9;
border: 8px solid #FF4500;
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;
}

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

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

table.red_table th {
font-size: 24px;
text-align:left;
color:#FF4500;
background-color:#FFC7B2;
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 #4D4D4D;
}

table.red_table input {
border: 1px solid #FF4500;
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;
}

/* 「１．基本情報の入力」のテキスト入力 */



.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 #FF4500;
}

#output h4 {
color:#FF4500;
background-color:#FFC7B2;
margin: 0;
padding: 10px;
}

#output h5 {
color:#000;
background-color:#FFE3D9;

}

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 {
width: 820px;
border-radius: 10px;
border: 1px solid #FF4500;
margin: 20px auto 30px;
}


#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;
}

.left
{
text-align:left;
}

.center
{
text-align:center;
}

.font16{
font-size:16px;
}

.font20{
font-size:20px;
}

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


.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;
}

.scroll {
    position: absolute;
    top:23px;
    left:-2px;
    z-index:2;
height:400px;
overflow:scroll;
/* overflow-x:hidden;*/
}

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

.scroll3 {
    position: absolute;
    top:5px;
    left:-50px;
    z-index:2;
height:400px;
overflow:scroll;
/* overflow-x:hidden;*/
}


.bold {
font-size: 16px;
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 {
list-style-position: outside;
list-style-image: url('./img/maru_s.png');
}

ul li {
line-height:18px;
margin: 0 0 8px;
}
ul.sq {
list-style:  none;
margin: 0;
padding: 0;
}

ul.sq > li:before {
content: "■";
display:  inline-block;
}

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

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


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');
}

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

.red ul.maru > li ul {
list-style-image: url('./img/maru_s_red.png');
margin-left: -28px;
}


.red{
color:#D11C24;
}

.line-h21 {
line-height:21px
}

.margin-t3 {
margin-top: 3px;
}

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

.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;
}

}