@charset "utf-8";
/*@import "common.css";*/

/*-----------------------------------------------
 ## index
-----------------------------------------------*/

.service .secMaintit .maintit {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    padding-top: 5px;
    text-shadow: 0 0 15px #fff;
}
.service .secMaintit .maintit span {
    font-size: 10px;
    letter-spacing: 0.1em;
    margin-left: 1em;
}


/*-----------------------------------------------
 ## reason
-----------------------------------------------*/

.reasonTtl {
    background-color: #a34b1b;
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
    padding: 0.25em 1em;
    margin-top: 50px;
    margin-bottom: 1em;
}
.reasonTxt {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
}
.reasonTxt strong {
    font-size: 1.1em;
    color: #fa6901;
}
.reasonTxt2 {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.25;
    color: #5c3308;
    margin-top: 1em;
}
.reasonTxt2 strong {
    font-size: 2em;
    background: linear-gradient(to bottom, #FF9600, #FD6901);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.reasonList {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    counter-reset: num;
    margin-top: 50px;
}
.reasonList > li {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}
.reasonBadge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #FF9B07, #F93400);
    color: #fff;
    line-height: 1;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 0.5em;
    width: 64px;
    counter-increment: num;
}
.reasonBadge::before {
    content: '理由';
    font-size: 18px;
    font-weight: bold;
}
.reasonBadge::after {
    content: counter(num);
    font-size: 40px;
}
.reasonList p {
    font-size: 32px;
    font-weight: bold;
}
.reasonList span {
    font-size: 20px;
}
.reasonList p strong {
    color: #FD3400;
    font-size: 40px;
}
.reasonList span strong {
    font-size: 1em;
}
.reasonLink {
    text-align: right;
    margin-top: 30px;
}
.moreLink {
    color: #000;
    text-decoration: underline;
}
.moreLink:hover {
    text-decoration: none;
}

/*-----------------------------------------------
 ## method
-----------------------------------------------*/
.service .secMethod {
    padding: 50px 0;
}
.methodTtl {
    background-color: #a34b1b;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 1em;
    padding: 0.25em 1em;
}
.methodTxt {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
}
.methodTxt strong {
    font-size: 1.1em;
    color: #fa6901;
}
.methodFigures {
    display: flex;
    column-gap: 20px;
    margin-top: 50px;
}
.methodFigure div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(50% - 10px);
}
.methodFigure dt {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
}
.methodFigure dd {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
}

.compare {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 40px;
    font-weight: bold;
    color: #663100;
    text-align: center;
    margin-top: 50px;
}
.compareTop {
    font-size: 16px;
}
.compareL {
    color: #333;
    font-size: 24px;
    line-height: 1;
}
.compareL strong {
    color: #f60;
    font-size: 40px;
}
.compareR {
    color: #333;
    font-size: 24px;
    line-height: 1;
}
.compareR strong {
    color: #8ab800;
    font-size: 40px;
}
.compareBottom {
    font-size: 14px;
    line-height: 1;
    margin-right: 2em;
}


.methodTable {
    width: 100%;
    border-spacing: 1px;
    border: 1px solid #fff;
    margin-top: 50px;
}
.methodTable th,
.methodTable td {
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.methodTable thead th {
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    padding: 0.25em;
}
.methodTable thead th:first-child {
    background-color: #ff6600;
}
.methodTable thead th:last-child {
    background-color: #8ab800;
    border-right-width: 0;
}
.methodTable tbody th,
.methodTable tbody td {
    font-size: 14px;
    font-weight: bold;
    padding: 1em;
}
.methodTable tbody th {
    background-color: #663100;
    color: #fff;
    font-weight: bold;
}
.methodTable tbody td:first-child {
    background-color: #ffdfc1;
    color: #fc6a09;
}
.methodTable tbody td:last-child {
    background-color: #d0e8a9;
    color: #608625;
}
.methodTable tbody tr:last-child td {
    background-color: #fff;
    border-bottom-width: 0;
}
.methodTable tbody td span {
    font-size: 12px;
}
.methodTable tbody td ul {
    display: grid;
    place-content: center;
    line-height: 1.5;
    text-align: left;
}
.methodTable tfoot {
    border-top: 2px dotted #000;
}
.methodTable tfoot td {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    padding: 1em;
}
.methodTable tfoot td:first-child span {
    color: #fc6a09;
}
.methodTable tfoot td:first-child strong {
    font-size: 1.5em;
    color: #fc6a09;
}
.methodTable tfoot td:last-child span {
    color: #608625;
}
.methodTable tfoot td:last-child strong {
    font-size: 1.5em;
    color: #608625;
}

.methodTips {
    background-color: #630;
    color: #fff;
    line-height: 1.5;
    text-align: center;
    padding: 1em;
    border-radius: 4px;
}
.methodTips dt {
    font-size: 18px;
    font-weight: bold;
}
.methodTips dd {
    font-size: 12px;
}

.figureL {
    width: 100%;
}
.figureLTtl {
    background-color: #FF6600;
    color: #fff;
    text-align: center;
    font-size: 24px;
    padding: 0.5em;
}
.figureL dd {
    display: grid;
    grid-template-columns: 20% 15% 30% 15% 20%;
    align-items: center;
    border-width: 0 8px 8px;
    border-style: solid;
    border-color: #FF6600;
    padding: 4%;
}
.figureL .circle,
.figureL .circleL,
.figureL .circleR {
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-content: center;
}
.figureL .circle p,
.figureL .circle span {
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
}
.figureL .circle.blue {
    background-color: #4199D7;
}
.figureL .circle.green {
    background-color: #78BC08;
}
.figureL .circle.yellow {
    background-color: #F1A00D;
}
.figureL .arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.figureL .arrowL,
.figureL .arrowR {
    aspect-ratio: 200 / 147;
    display: inline-block;
    width: 70%;
    background: #000000;
    clip-path: polygon(0 50%, 36.8% 0, 36.8% 31%, 100% 31%, 100% 69%, 36.8% 69%, 36.8% 100%);
}
.figureL .arrowR {
    transform: rotate(180deg);
}
.figureL .arrowL.blue,
.figureL .arrowR.blue {
    background-color: #4199D7;
}
.figureL .arrowL.green,
.figureL .arrowR.green {
    background-color: #78BC08;
}
.figureL .arrowL.yellow,
.figureL .arrowR.yellow {
    background-color: #F1A00D;
}

.figureR {
    width: 100%;
}
.figureRTtl {
    background-color: #8AB800;
    color: #fff;
    text-align: center;
    font-size: 24px;
    padding: 0.5em;
}
.figureR dd {
    display: grid;
    grid-template-columns: 20% 50% 30%;
    align-items: center;
    border-width: 0 8px 8px;
    border-style: solid;
    border-color: #8AB800;
    padding: 4%;
}
.figureR .circle,
.figureR .circleL,
.figureR .circleR {
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-content: center;
}
.figureR .circle p,
.figureR .circle span {
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
}
.figureR .circle.blue {
    background-color: #4199D7;
}
.figureR .circle.green {
    background-color: #78BC08;
}
.figureR .circle.yellow {
    background-color: #F1A00D;
}
.figureR .arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.figureR .arrowL,
.figureR .arrowR {
    aspect-ratio: 666 / 147;
    display: inline-block;
    width: 75%;
    background: #000000;
    clip-path: polygon(0 31%, 87% 31%, 87% 0, 100% 50%, 87% 100%, 87% 69%, 0 69%);
}
.figureR .arrowR {
    transform: rotate(180deg);
}
.figureR .arrowL.blue,
.figureR .arrowR.blue {
    background-color: #4199D7;
}
.figureR .arrowL.green,
.figureR .arrowR.green {
    background-color: #78BC08;
}
.figureR .arrowL.yellow,
.figureR .arrowR.yellow {
    background-color: #F1A00D;
}

/*-----------------------------------------------
 ## flow
-----------------------------------------------*/

.service .secFlow {
    padding: 50px 0;
}

.flowTtl {
    background-color: #a34b1b;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 1em;
    padding: 0.25em 1em;
}

.flow-list {
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    list-style-position: inside;
}
.flow-list li{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: calc(90%/3);
    margin-bottom: 30px;
    padding: 20px;
    text-align: center;
    background: #d0e8a9;
    box-sizing: border-box;
}
.flow-list li:not(:nth-child(3n)){
    margin-right: 5%;
}
.step-icon {
    position: absolute;
    top: -15px;
    left: -15px;
    width: 50px;
    height: 50px;
    background: #fc6a09;
    color: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
}
.step-icon .step-icon-num{
    font-size: 18px;
    line-height: 1;
}

/*-----------------------------------------------
 ## faq
-----------------------------------------------*/

.secFaq {
    width: 700px;
    margin: 0 auto;
    padding-top: 50px;
}

.secFaq .inside {
    border:solid 10px #ebebeb;
    padding:0 5px;
}
.secFaq .line01{
    background:url(../img/common/line01.jpg) left bottom repeat-x;
}
.secFaq .line02{
    background:url(../img/common/line01.jpg) #F7F7F7 left bottom repeat-x;
}
.secFaq .boxQ{
    width:325px;
    float:left;
    background:url(../img/common/imgQ.gif) 11px 17px no-repeat;
    font-size:14px;
    font-weight:bold;
    line-height:145%;
}
.secFaq .left{
    float:left;
}
.secFaq .right{
    float:right;
}
.secFaq .boxQ a{
    display:block;
    height:59px;
    padding:0 0 0 49px;
    color:#64350B;
    text-decoration:underline;
}
.secFaq .boxQ a:hover{
    color:#835D3C;
}
.secFaq .boxQ .txt{
    display:table-cell;
    height:59px;
    vertical-align:middle;
}

.faqTtlWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faqTtl {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
}
.faqTtlQ {
    display: inline-block;
    margin: 0 0.1em;
    background: linear-gradient(to bottom, #005FBE, #003F7F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.5em;
}
.faqTtlA {
    display: inline-block;
    margin-left: 0.1em;
    background: linear-gradient(to bottom, #F62A00, #D80C00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.5em;
    
}

.btn {
    background: linear-gradient(to bottom, #7B410E, #65350E);
    color: #fff;
    /* font-size: 14px; */
    font-weight: bold;
    padding: 0.5em 1.5em;
    border-radius: 4px;
}
.btn:hover {
    opacity: 0.7;
}

/*-----------------------------------------------
 ## info
-----------------------------------------------*/

.secInfo {
    width:760px;
    margin:0 auto;
    padding-top: 100px;
}

.infoTtl {
    background: linear-gradient(to bottom, #FF9D5F, #FE6500);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    padding: 0.5em 1em;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.infoTable {
    padding:18px 0 34px;
    border:solid 1px #E4E4E4;
    border-top:none;
    background:#FAFAFA;
}
.infoTable table {
    width:700px;
    margin:0 auto;
    border-top:dotted 1px #999;
}
.infoTable tr {
    border-bottom:dotted 1px #999;
}
.infoTable th {
    width: 120px;
    padding: 5px 0 5px 15px;
    color: #666;
    font-weight: bold;
    line-height: 20px;
    vertical-align: middle;
}
.infoTable td {
    line-height: 20px;
    vertical-align: middle;
}
.infoTable .boxIn {
    display: inline-block;
    margin:4px 0;
    padding: 5px 0 5px 11px;
    border-left:dotted 1px #999;
}

/*-----------------------------------------------
 ## access
-----------------------------------------------*/

.secAccess {
    padding-top: 50px;
    padding-bottom: 50px;
}

.access {
    display: flex;
    column-gap: 20px;
}

.accessImg,
.accessMap {
    width: calc(50% - 10px);
}
.accessImg > img {
    width: 100%;
}
.accessMap > iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
}