/* CSS Document */ #headLine2 { background-color: #e8e2da;} #headLine2 h1 { color: #444;} #headLine2 h1 span[class^='icon'] { background-color: #b79f83; } /*--------------------------------------------------- simpleHeader ---------------------------------------------------*/ #simpleHeader { background-color: #f2efeb; padding: 6px 0 7px;} #simpleHeader .container { height: auto;} #simpleHeader #logo { width: 220px; height: auto;} #simpleHeader #logo img {} /*--------------------------------------------------- flowNav ---------------------------------------------------*/ #flowNav { border: 1px solid #b79f83; margin-bottom: 20px; overflow: hidden;} #flowNav li { font-size: 1.6rem; width: 25%; height: 36px; line-height: 36px; padding: 0 10px; position: relative; background-color: #fff; } #flowNav li:last-child { border-right: none; } #flowNav li.arrow:before { content: ''; position: absolute; border: 10px solid #fff; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-right: 1px solid transparent; top: -4px; right: 0px; z-index: 1;} #flowNav li.arrow:after { content: ''; position: absolute; border: 10px solid #b79f83; border-top: 22px solid #fff; border-bottom: 22px solid #fff; border-right: 1px solid #fff; top: -4px; right: -1px; } #flowNav li.active { background-color: #f5650a; color: #fff; border-right: none;} #flowNav li.active:after { content: ''; position: absolute; border: 10px solid #f5650a; border-top: 18px solid #fff; border-bottom: 18px solid #fff; border-right: 1px solid #fff; top: 0px; right: -1px; } @media (max-width: 768px) { } @media (max-width: 480px) { #flowNav li { font-size: 1.2rem; height: auto; min-height: 40px; line-height: 1; padding: 7px 5px 0px 0px; text-align: center; } #flowNav li:first-child { width: 30%;} #flowNav li:nth-child(2) { width: 30%; } #flowNav li:nth-child(3) { width: 20%; } #flowNav li:last-child { width: 20%; } #flowNav li.arrow:before { content: ''; border-top: 20px solid transparent; border-bottom: 20px solid transparent; top: 0; height: 100%; } #flowNav li.arrow:after { content: ''; border-top: 20px solid #fff; border-bottom: 20px solid #fff; top: 0; height: 100%; } #flowNav li.active:after { content: ''; border-top: 20px solid #fff; border-bottom: 20px solid #fff; height: 100%; } } /*--------------------------------------------------- index ---------------------------------------------------*/ #index {} #index .contentsInner { padding-top: 50px;} #index .contentsInner .title { text-align: center; font-size: 2.4rem; line-height: 1.; color: #f5650a; margin-bottom: 40px;} #indexList { padding: 30px; background: url(common/images/bgLine01.png) left top; margin-bottom: 20px; justify-content: flex-start; -webkit-justify-content: flex-start; line-height: 1.2; } #indexList li { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 1px solid #f5650a; text-align: center; overflow: hidden; position: relative; /*height: 160px;*/} #indexList li:after { content: ''; width: 100%; height: 1px; background-color: #ee6815; position: absolute; bottom: 33px; left: 0;} #indexList li a { color: #333; font-size: 2.8rem; display: block; height: 100%; background-color: #fff; position: relative; } #indexList li a::before { content: ''; position: absolute; width: 16px; height: 16px; -webkit-border-radius: 50%; border-radius: 50%; background: #ee6815; right: 8px; bottom: 9px; } #indexList li a::after { content: ''; position: absolute; right: 13px; bottom: 13px; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #indexList li a small { font-size: 70%;} .coutionList { border: 2px solid #f5650a; padding: 20px; } @media (min-width: 769px) { #indexList li { width: 300px; margin-bottom: 20px; } #indexList li:nth-child(3n+2) { margin-left: -webkit-calc((99.9% - (300px * 3)) / 2); margin-left: calc((99.9% - (300px * 3)) / 2); margin-right: -webkit-calc((99.9% - (300px * 3)) / 2); margin-right: calc((99.9% - (300px * 3)) / 2); } /* #indexList li:nth-child(-n+3) { margin-bottom: 20px;}*/ #indexList li a { padding: 50px 10px 80px; } #indexList li a:hover { background-color: #ee6815; color: #fff; text-decoration: none; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); } #indexList li a:hover::before { background-color: #fff; } #indexList li a:hover::after { border-color: #ee6815; } #indexList li:hover::after { background-color: #fff; } #indexList li:nth-child(4) a { padding: 18px 10px 46px;} #indexList li:nth-child(5) a { padding: 36px 10px 0;} #indexList li:nth-child(6) a { padding: 36px 10px 0;} } @media (max-width: 768px) { #indexList { padding: 30px 15px 10px; } #indexList li { /*width: -webkit-calc( 100% / 3 - 5px ); width: calc( 100% / 3 - 5px );*/width: -webkit-calc( 50% - 10px ); width: calc( 50% - 10px ); margin-bottom: 20px;} #indexList li:nth-child(2n+2) { margin-left: 20px;} #indexList li a { padding: 30px 10px 60px; } .coutionList {} } @media (max-width: 480px) { #indexList li { width: 100%; /*height: 120px;*/ } #indexList li:nth-child(2n+2) { margin-left: 0;} #indexList li a {} #indexList li:not(:last-child) { margin-bottom: 20px;} } /*--------------------------------------------------- form ---------------------------------------------------*/ form input[type='text'] , form textarea , form select { background: transparent; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-box-shadow: none; box-shadow: none; width: 100%; border: 1px solid #cdcdcd; padding: 6px 5px; font-size: 1.6rem; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-color: #b79f83; height: 32px; } form .selectInner { overflow: hidden; display: inline-block; width: 100%; vertical-align: top; /*position: relative;*/} /*form select { width: calc(100% + 32px); height: 32px; line-height: 32px; padding: 0 5px; }*/ form select { background: url(images/selectArrow.svg) no-repeat right+31px top -1px; width: calc(100% + 32px); height: 32px; line-height: 32px; padding: 0 5px; } form textarea { height: 160px;} /*form .selectInner::after { content: ''; position: absolute; width: 32px; height: 32px; top: 0; right: 0; background: url(images/selectArrow.svg) no-repeat right top; }*/ @media (max-width: 480px) { form .selectInner { margin-bottom: 10px; } } /* error */ .err_style , form input.err , form textarea.err { border: 2px solid #f00; background-color: #ffe9e9; padding: 2px 5px 2px 5px; } .selectInner.err_style { padding: 0;} .err_style { display: inline-block;} .err_message { border: 1px solid #f00; color: #f00; margin-bottom: 20px; padding: 5px; } form .title { font-size: 2.4rem; font-weight: bold; margin-bottom: 15px;} form .title span { display: inline-block; width: 40px; height: 40px; color: #fff; background-color: #f5650a; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; text-align: center; line-height: 40px; margin-right: 8px;} form .sub-title { font-size: 1.8rem; font-weight: bold; height: 50px; line-height: 50px; background: url(common/images/bgLine01.png) left top; padding: 0 20px;} form .note { font-size: 1.6rem; line-height: 1.6; color: #c1272d; display: inline-block; margin: 6px 0; } form .note.indent { margin-top: 0;} /* caution */ form .caution.type2 { background-color: #fff1cf;} form .caution.type2 .text { color: #ed1c24; font-size: 1.8rem; padding-left: 0; text-indent: 0;} form .indent { padding-left: 1em !important; text-indent: -1em !important; display: block;} #caution1 , #caution2 , #caution3 { margin-top: 20px; display: none; } form dl { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; } form dt { font-size: 1.8rem; border-left: 4px solid #e8e2da; padding: 7px 8px;} form dd { font-size: 1.8rem;} form dd span { font-size: 1.8rem; vertical-align: middle; padding: 0 5px; line-height: 32px; } form dt.required:after , form .required:after { content: '必須'; color: #fff; background-color: #c43345; font-weight: normal; font-size: 1.4rem; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; width: 50px; text-align: center; height: 24px; line-height: 24px; margin-left: 5px; vertical-align: 2px;} form table { width: 100%;} form table th { text-align: left; vertical-align: middle; width: 90px;} form table th.required { position: relative; width: 130px;} form table th.required::after { position: relative !important; top: 0 !important;} form table th.valign-top { vertical-align: baseline;} form table td { padding: 3px 0;} form table td .note { vertical-align: -6px;} .formInner01 { border: 2px solid #e8e2da; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; overflow: hidden; /*margin-bottom: 30px;*/ } .formInner01 .body { padding: 20px;} .formInner01 .formInner01 .sub-title { background: none; background-color: rgba(232,226,218,0.35); height: auto; min-height: 40px; line-height: 40px; } .formInner02 { border: 2px solid #e8e2da; padding: 10px 15px; /*margin-bottom: 20px;*/ } .formInner02.type2 { padding: 0; border: none; } .formInner02 dt { margin-bottom: 4px;} .formInner03 { margin-bottom: 6px; } .formInner03 dt { width: 240px; position: relative;} .formInner03 dd { width: -webkit-calc( 100% - (240px + 10px)); width: calc( 100% - (240px + 10px));} /* 入力画面 */ #formInput #flowNav li:nth-child(1).arrow:before { content: ''; border-top: 22px solid #f5650a; border-bottom: 22px solid #f5650a; border-right: 1px solid #f5650a; right: -1px; } #formInput .btnWrap { text-align: center; margin-top: 60px;} #formInput .btnWrap .btn04 { max-width: 345px;} /* 確認画面 */ #formConfirm {} #formConfirm form dd { line-height: 32px;} #formConfirm form table td .note { vertical-align: baseline;} #formConfirm form dd span { padding: 0; vertical-align: baseline;} #formConfirm #flowNav li:nth-child(2).arrow:before { content: ''; border-top: 22px solid #f5650a; border-bottom: 22px solid #f5650a; border-right: 1px solid #f5650a; right: -1px; } #formConfirm .btnWrap { text-align: center; margin-top: 80px;} #formConfirm .btnWrap .btn02 { max-width: 200px; display: block; margin: 20px auto auto; } #formConfirm .btnWrap .btn04 { max-width: 345px;} /* サンクス */ #thanks .title { font-size: 2.4rem; text-align: center; font-weight: bold; color: #f5650a; margin-bottom: 30px; } #thanks {} #thanks #flowNav li:nth-child(3).arrow:before { content: ''; border-top: 22px solid #f5650a; border-bottom: 22px solid #f5650a; border-right: 1px solid #f5650a; right: -1px; } #thanks #flowNav li.active:after { content: ''; border: none;} #thanks .btn02 { display: block; max-width: 200px; margin: 0 auto; } /* 離婚 */ #formInput #rikonMore { display: none;} /* 事故 */ #formInput #jikoMore1 , #formInput #jikoMore2 , #formInput #jikoMore3 { display: none;} @media (min-width: 769px) { .formInner03 dt.required::after , .formInner03 .required::after { position: absolute; right: 0; top: 4px;} #thanks .contentsInner .text { font-size: 1.8rem; max-width: 520px; margin: auto;} } @media (max-width: 768px) { form .title { text-align: center; line-height: 1.2;} form .title span { display: block; margin: auto auto 10px; } form .sub-title { height: auto; line-height: 1.4; padding: 12px 20px; min-height: 50px; } .formInner03 { margin-bottom: 15px;} .formInner03 dt { margin-bottom: 8px; width: 100%; } .formInner03 dd { width: 100%; } .formInner03 dd input.w320 { max-width: none; } } @media (max-width: 480px) { form .title { font-size: 2.2rem; margin-bottom: 30px; } #formInput .contentsInner , #formConfirm .contentsInner { padding: 20px 10px;} form .note { font-size: 1.4rem; /*text-decoration: underline;*/} /*form .sub-title { height: auto; line-height: 1.4; padding: 12px 20px; min-height: 50px; }*/ form dt { line-height: 1.4; padding: 4px 8px; } form table { list-style-type: none; } form table th { display: list-item; font-size: 1.6rem; } form table td { display: list-item; } form table td .note { vertical-align: middle;} form dd span { line-height: 1.6; } form .caution.type2 .text { font-size: 1.6rem;} .formInner01 .body { padding: 20px 10px;} .formInner03 dd { padding-left: 10px; } } /* radio */ .radio-button__input { position: absolute; overflow: hidden; right: 0px; top: 0px; left: 0px; bottom: 0px; padding: 0; border: 0; opacity: 0.001; z-index: 1; vertical-align: top; outline: none; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; } .radio-button__input:active, .radio-button__input:focus { outline: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); } .radio-button__input:checked + .radio-button__checkmark:after { opacity: 1; } .radio-button__input:checked + .radio-button__checkmark:before { background: transparent; border: none; } .radio-button { position: relative; display: inline-block; vertical-align: top; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; overflow: hidden; line-height: 24px; text-align: left; margin-right: 24px; } .radio-button__checkmark:before { content: ''; position: absolute; -webkit-border-radius: 100%; border-radius: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; width: 24px; height: 24px; background: transparent; border: none; -webkit-border-radius: 16px; border-radius: 16px; left: 0; } .radio-button__checkmark { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; position: relative; display: inline-block; vertical-align: -3px; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 16px; position: relative; overflow: hidden; position: relative; width: 24px; height: 24px; background: transparent; pointer-events: none; } .radio-button__input:checked + .radio-button__checkmark { background: rgba(0,0,0,0); } .radio-button__checkmark:after { content: ''; position: absolute; -webkit-border-radius: 100%; border-radius: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 6px; left: 5px; opacity: 0; width: 12px; height: 6px; background: transparent; border: 3px solid #b79f83; border-width: 2px; border-top: none; border-right: none; -webkit-border-radius: 0px; border-radius: 0px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .radio-button--material { line-height: 32px; -webkit-font-smoothing: antialiased; } .radio-button--material__checkmark { width: 20px; height: 20px; overflow: visible; margin-right: 5px; } .radio-button--material__checkmark:before { background-color: #fff; border: 1px solid #b79f83; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; border-radius: 50%; width: 20px; height: 20px; } .radio-button--material__checkmark:after { top: 4px; left: 4px; width: 12px; height: 12px; border: none; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .radio-button--material__input:checked + .radio-button__checkmark:before { background-color: #fff; border: 1px solid #b79f83; } .radio-button--material__input + .radio-button__checkmark:after { background: #b79f83; opacity: 1; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .radio-button--material__input:checked + .radio-button__checkmark:after { opacity: 1; background: #b79f83; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .radio-button.disabled { color: #ccc;} .radio-button.disabled .radio-button__input {} .radio-button.disabled .radio-button--material__checkmark:before { border-color: #ccc;} @media (max-width: 480px) { .radio-button--material { display: block; margin-bottom: 5px;} } /* ラジオボックス　縦 */ dd.vertical .radio-button { display: block;} /* mendanDay */ @media (min-width: 769px) { #mendanDay { table-layout: fixed;} } @media (max-width: 768px) { #mendanDay td { display: block;} #mendanDay .selectInner { max-width: none;} #mendanDay td span { display: block; } } @media (max-width: 480px) { #mendanDay th { padding-top: 20px; padding-bottom: 10px;} #mendanDay td span { font-size: 1.5rem;} #mendanDay .selectInner { margin-bottom: 0;} } /* 事務所選択部分 20.02.14 */ #office_address ul { padding: 10px; background-color: #fff7e3; font-size: 1.6rem; } #office_address li { text-align: left; } #soudan1 , #soudan2, #soudan3 { display: none;}