@font-face {
    font-family: Yumin;
    src: url('./fonts/yumin.ttf');
}

@font-face {
    font-family: NotoSans;
    src: url('./fonts/NotoSansJP-Regular.otf') format("truetype");
}

@font-face {
    font-family: NotoSansBold;
    src: url('./fonts/NotoSansJP-Bold.otf') format("truetype");
}
root{
    --background-main: #AE928A;
    --color-title: #3C3C3C;
    --color-text: #777777;
    --margin-top-about: -60px;
    --margin-index-mobile: 70px;
    --color-green: #159DD9 ;
}
/* defautl */
*{margin: 0; padding: 0;}
*,*::before, *::after{box-sizing: border-box;}

.table td, .table th{vertical-align: middle}
p{margin-bottom: 0;}
a{color:var(--color-text); transition: all .4s;}
a:hover{text-decoration: none; color: var(--background-main); transition: all .4s;}
ul{list-style: none;margin-bottom: 0}
img{max-width: 100%; width: 100%}
body{
    /* font-size: 14px; */
    font-size: 16px;
    font-family: "NotoSans";
    /* color: #5E5E5E; */
    color: #5e5e5e;
    /*background-color: #f7f7f7;*/
    scroll-behavior: smooth;
}
.line{width: 100%; height: 5px; background-color: #159DD9; margin: 40px auto;}
h1,h2,h3,h4,h5{font-family: NotoSansBold}
.padding-content{padding: 40px 0}
.title{text-align: center; font-weight: bold; font-size: 30px; margin-bottom: 35px}
.sub-title{text-align: center; font-size: 16px; line-height: 30px}
.cursor-pointer{cursor: pointer}
.cursor-pointer a{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px}
.font-large{font-size: 34px !important;}

.table-info tr td:last-child{font-family: NotoSansBold; }
.table-info tr td{padding: 10px 0}

img.img-banner{max-height: 70vh; object-fit: cover; width: auto; margin: 0 auto; display: block}
p.info{line-height: 40px; font-size: 20px}
.font-bold{font-family: NotoSansBold}
.item-quick-contact{display: flex; justify-content: space-around; width: 80%; margin:  0 auto}



header#header{padding: 20px 0; position: sticky; top: 0; left: 0; background-color: white; z-index: 99; -webkit-box-shadow: 0px 6px 24px -6px rgba(66,72,77,1);
    -moz-box-shadow: 0px 6px 24px -6px rgba(66,72,77,1);
    box-shadow: 0px 6px 24px -6px rgba(66,72,77,1);}
header#header .container{display: flex; align-items: center; justify-content: center}
header#header .logo{max-width: 250px; margin-right: 20px}
header#header .right .logo-text{width: fit-content; }
header#header .right .logo-text img{height: 60px}
header#header .right .menu-header{display: flex; justify-content: end; margin-bottom: 10px}
header#header .right .menu-header li a{border: 1px solid #159DD9; border-radius: 30px; padding: 10px; display: block; transition: all 0.5s}
header#header .right .menu-header li a:hover{color: #159DD9; font-family: NotoSansBold; }
header#header .right .menu-header li:nth-child(n+2){margin-left: 20px}
header#header .mob{display: none}

.group-block-content .item-content{ width: 20%}
.group-block-content .block-content{background-color: #e62b3926; text-align: center; border-radius: 10px; height: 100%}
.group-block-content .block-content span.title{margin-bottom: 0 !important}
.group-block-content .block-content .sub-content{padding: 25px; font-size: 20px}
 .group-block-content .block-content a{ position: relative; overflow: hidden; text-align: center; background-color: #159DD9; color: white; height: 120px; font-size: 22px; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 10px}
.group-block-content .block-content a:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #E52138;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    box-sizing: border-box;
    transition: 0.3s ease-in-out;
    border-radius: 10px;
}
 .group-block-content .block-content a:hover{transition: all .4s; color: white !important;}
.group-block-content .block-content a:hover:before{transform: translateX(0)}

section#company .group-flyers .flyers{display: flex; align-items: center; font-size: 20px}
section#company .group-flyers .flyers:nth-child(n+1){margin-bottom: 30px}
section#company .group-flyers .block{max-width: 120px; display: block; width: 120px; margin-right: 100px}
section#company .group-flyers .rectangle{background-color: #159DD9; display: flex; color: white; height: 60px; flex-direction: column; align-items: center; justify-content: center }
section#company .group-flyers .rectangle::before{content: ""; position: absolute; left: 100%;  border-top: solid 30px transparent; width: 40px;
    height: 60px;
    border-left: solid 50px #159DD9;
    border-bottom: solid 30px transparent;
    border-top: solid 30px transparent;
}
section#company .group-flyers .flyers .content{font-family: NotoSansBold}
section#greeting .signature{text-align: end; margin-top: 30px}
section#greeting .signature img{max-width: 600px}

section#business .layout{display: flex}
section#business .layout .start, section#business .layout .end{width: 20%;}
section#business .layout .center{width: 60%}
section#business .layout .start{display: flex; flex-direction: column; justify-content: space-between}
section#business .layout .end{display: flex; flex-direction: column; justify-content: end}
section#flow-diagram .col-refund{position: relative; font-size: 33px; font-family: NotoSansBold; color: #aa5500}
section#flow-diagram .col-refund span{position: absolute; top: 5px; left: 5px; font-size: 14px; font-family: NotoSans; color: black}

section#flow-diagram .flow .text-fixed{width: 110px; margin-right: 40px}
section#flow-diagram .flow{display: flex; align-items: center}
section#flow-diagram .flow .content .flow1{max-width: 700px; margin: 0 auto; display: block}
section#flow-diagram .flow .content p{font-size: 26px; line-height: 45px}
section#flow-diagram .flow .content p.info{margin-left: 50px; font-size: 18px; margin-top: 50px}

section#flow-diagram .content-item{margin-bottom: 100px}
section#flow-diagram .content-item:last-child{margin-bottom: 0}
section#flow-diagram .content-item img{max-width: 320px; margin: 0 auto; display: block; max-height: 320px}
section#flow-diagram .content-item h2{background-color: #159DD9; min-width: 320px ; color: white; display: inline-block; margin: 30px auto; padding: 15px 20px }
section#flow-diagram .content-item p{ text-align: center; font-size: 20px}
section#qa .group-qa{margin-bottom: 80px; text-align: center}
section#qa .row .col-qa{margin:  0 auto}
section#qa .group-qa .item-qa:nth-child(n+2){margin-top: 100px}
section#qa .group-qa .item-qa img{max-width: 120px}
section#qa .group-qa .item-qa > div{display: flex; align-items: center}
section#qa .group-qa .item-qa p{text-align: center ; background-color: #159dd9ba ; padding: 20px 25px; border-radius: 15px; margin-bottom: 20px; width: fit-content }
section#qa .group-qa .item-qa p.answer{padding:20px;text-align: left ; margin-left: 20px; background-color: #159dd95e; background-image: none; width: fit-content}
section#qa .row .col-qa:first-child{padding-right: 30px}
section#qa .row .col-qa:last-child{padding-left: 30px}
section#qa .group-qa .item-qa .reverse{flex-direction: row-reverse}
section#qa .group-qa .item-qa .question-user{margin-right: 30px}
section#qa .group-qa .item-qa .reverse .question-user{margin-left: 30px}

/*section#qa .group-qa .item-qa .question-user.left{position: absolute; top: -20px; left: -150px}*/
/*section#qa .group-qa .item-qa .answer-user.right{position: absolute; top: -80px; right: -40px}*/

/*section#qa .group-qa .item-qa .question-user.right{position: absolute; top: -110px; right: -30px}*/
/*section#qa .group-qa .item-qa .answer-user.left{position: absolute; bottom: -100px; left: -150px}*/


.p-banner{margin-top: 40px !important;}
section#qa .group-qa .item-qa p.question:before{
    content: attr(data-order);
    font-size: 15px;
    position: absolute;
    height: 40px;
    width: 40px;
    left: -20px;
    border-radius: 50%;
    top: calc(50% - 20px);
    background-color: white;
    border: 1px solid #E52138;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5e5e5e;
}
section#qa .row{font-size: 22px}
section#qa .group-qa .item-qa p.question.first:after{
    content: attr(data-group);
    position: absolute;
    left: 20px;
    top: -25px;
    min-width: 300px;
    background-color: red;
    padding: 7px 0 ;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: white;
}

section#contact .form-contact{max-width: 650px; margin: 30px auto;}
section#contact .form-contact .btn{background-color: #159DD9; color: white; width: 100%; margin-top: 20px}

.name{position: relative; display: inline-block}
.name::before{
    content: attr(data-subtitle);
    font-size: 16px;
    display: block;
    position: absolute;
    bottom: 100%;
}

footer{background-color: black; color: white; padding: 30px 0; text-align: center }

footer .copyright{margin-top: 20px; font-size: 14px}

footer .menu-footer{display: flex; justify-content: center; margin-bottom: 10px}
footer .menu-footer li a{border: 1px solid #159DD9; border-radius: 30px; padding: 10px; display: block; transition: all 0.5s}
footer .menu-footer li a:hover{color: #159DD9; font-family: NotoSansBold; }
footer .menu-footer li:nth-child(n+2){margin-left: 20px}

#back-to-top {
    position: fixed;
    z-index: 1000;
    bottom: 20px;
    right: 20px;
    display: none;
}
#back-to-top a {
    display: flex;
    width: 40px;
    height: 40px;
    background: #1997d2;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-transition: 0.2s all linear;
    -moz-transition: 0.2s all linear;
    -o-transition: 0.2s all linear;
    transition: 0.2s all linear;
    color: #fff;
    line-height: 1.8;
    font-size: 20px;
    justify-content: center;
    align-items: center;
}
#back-to-top a:hover {
    background-color: #222222;
}