@charset "utf-8";
/*--------------------------------------------------------
変数
--------------------------------------------------------*/
:root{
    --font-color: #222;
    --theme-color: #05446b;
    --rectangle-color: #05446b;
}
/*--------------------------------------------------------
共通事項
--------------------------------------------------------*/
html{
    scroll-behavior: smooth;
}
body{
    font-family: "Noto Sans JP", sans-serif;;
    font-size: 100%;
    color: var(--font-color);
}
li{
    list-style: none;
}
a{
    color: var(--font-color);
    text-decoration: none;
}
a:hover{
    opacity: .7;
}
img{
    width: 100%;
    vertical-align: bottom;
}
.wrapper{
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 40px;
}
.sp{
    display: none;
}
.blue{
    color: var(--theme-color);
}
.section-title{
    display: inline-block;
}
.section-title p{
    font-family: "Kaushan Script", cursive;
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: .5rem;
}
.section-title .sub-title-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.sub-title-wrapper .underline{
    flex-grow: 1;
    height: 2px;
    background-color: var(--theme-color);
}
.sub-title-wrapper .sub-title{
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}
.btn{
    width: 350px;
    display: inline-block;
    overflow: hidden;
    padding: 1.5rem 3rem;
    color: #fff;
    font-weight: 500;
    background: #000;
    position: relative;
}
.btn:hover{
    opacity: 1;
    color: var(--font-color);
}
.btn span{
    position: relative;
    z-index: 1;
}
.btn::before{
    content: '';
    position: absolute;
    top: 0;
    left: 30px;
    width: 150%;
    height: 500%;
    transition: all .5s ease-in-out;
    transform: translateX(-98%) translateY(-45%) rotate(135deg);
    background: #fff100;
}
.btn:hover::before{
    transform: translateX(-9%) translateY(-35%) rotate(135deg);
}
.fadein-r{
    opacity: 0;
}
.fadein-l{
    opacity: 0;
}
.fadein-b{
    opacity: 0;
}
/*--------------------------------------------------------
header
--------------------------------------------------------*/
#header{
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(5px);
    padding: 0 2rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9800;
    transition: all .4s ease;
}
#header.hover{
    background-color: #fff;
    backdrop-filter: none;
}
#header .logo{
    width: 250px;
}
#header .navi .menu{
    display: flex;
}
#header .navi .menu li{
    margin-left: 3rem;
}
#header .navi .menu li .ja{
    display: block;
    text-align: center;
    color: #fff;
    transition: color .4s ease;
}
#header .navi .menu li .ja.hover{
    color: var(--font-color);
}
#header .navi .menu li .en{
    font-size: .8rem;
    font-weight: 400;
    display: block;
    text-align: center;
    color: #fff;
    transition: color .4s ease;
}
#header .navi .menu li .en.hover{
    color: var(--theme-color);
}
/*--------------------------------------------------------
hero
--------------------------------------------------------*/
#hero{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100vh;
    background: url(../img/fv1.jpg) no-repeat center / cover;
    position: relative;
    margin-bottom: 10rem;
}
#hero .catchphrase{
    font-family: "Shippori Mincho B1", serif;
    font-size: 3rem;
    color: #fff;
    line-height: 1.2;
    text-shadow: 2px 2px 5px var(--font-color);
    margin-bottom: 1rem;
}
#hero .sub-catchphrase{
    color: #fff;
    line-height: 2;
    margin-bottom: 3rem;
}
/*--------------------------------------------------------
about
--------------------------------------------------------*/
#about{
    display: flex;
    align-items: center;
    margin-bottom: 10rem;
}
#about .img{
    width: 50%;
    position: relative;
    z-index: 0;
}
#about .img::after{
    content: "";
    width: 40%;
    height: 40%;
    background-color: var(--rectangle-color);
    position: absolute;
    bottom: -10%;
    right: -5%;
    z-index: -1;
}
#about .content{
    width: 50%;
    padding-left: 5rem;
}
#about .content .section-title{
    margin-bottom: 2rem;
}
#about .content .text{
    font-size: 2rem;
    margin-bottom: 2rem;
}
#about .content .description{
    line-height: 2;
}
/*--------------------------------------------------------
business
--------------------------------------------------------*/
#business{
    padding: 10rem 0;
    margin-bottom: 10rem;
    background-color: #f0f0f0;
}
#business .section-title-content{
    display: flex;
    align-items: center;
    margin-bottom: 5rem;
}
#business .section-title-content .description{
    padding-left: 5rem;
    line-height: 2;
}
#business .item{
    display: flex;
    align-items: flex-start;
}
#business .item1{
    margin-bottom: 5rem;
}
#business .item1 .content{
    width: 50%;
    padding-right: 5rem;
}
#business .item2 .content{
    width: 50%;
    padding-left: 5rem;
}
#business .item .content .title{
    font-size: 2rem;
    margin-bottom: 2rem;
}
#business .item .content .description{
    line-height: 2;
    margin-bottom: 2rem;
}
#business .item  .content .icon-area{
    width: 100%;
    display: flex;
}
#business .item  .content .icon-area img{
    width: 50%;
}
#business .item .img{
    width: 50%;
    position: relative;
    z-index: 0;
}
#business .item .img::after{
    content: "";
    width: 40%;
    height: 40%;
    background-color: var(--rectangle-color);
    position: absolute;
    bottom: -10%;
    z-index: -1;
}
#business .item1 .img::after{
    right: -5%;
}
#business .item2 .img::after{
    left: -5%;
}
/* 流れる文字 */
.marquee-wrapper{
    width: 100%;
    overflow: hidden;
    margin-bottom: 5rem;
}
.marquee{
    display: flex;
    width: max-content;
    animation: scroll-left 40s linear infinite;
}
.marquee span{
    display: block;
    padding-left: 1rem;
    font-size: 5rem;
    font-weight: 900;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px var(--font-color);
}

@keyframes scroll-left{
0%{
    transform: translateX(0);
}
100%{
    transform: translateX(-50%);
}
}
/*--------------------------------------------------------
recruit
--------------------------------------------------------*/
#recruit{
    background: url(../img/recruit_bg.jpg) no-repeat center / cover;
    background-color: var(--theme-color);
    padding: 5rem 0;
    margin-bottom: 10rem;
    position: relative;
}
#recruit::before{
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(36, 122, 192, .6);
    z-index: 1;
    pointer-events: none;
}
#recruit > *{
    position: relative;
    z-index: 2;
}
#recruit .content{
    background-color: #fff;
    padding: 5rem;
    text-align: center;
}
#recruit .content .section-title{
    margin-bottom: 2rem;
}
#recruit .content .text{
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--theme-color);
}
#recruit .content .description{
    max-width: 400px;
    margin: 0 auto 2rem;
    line-height: 2;
    text-align: start;
}
#recruit .btn{
    width: 250px;
    padding: 1.5rem 3rem;
}
#recruit .btn::before{
    transform: translateX(-110%) translateY(-55%) rotate(135deg);
}
#recruit .btn:hover::before{
    transform: translateX(5%) translateY(-30%) rotate(135deg);
}
/*--------------------------------------------------------
footer
--------------------------------------------------------*/
#footer{
    background-color: var(--theme-color);
    padding: 2rem 0;
}
#footer .content{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
}
#footer .logo{
    width: 350px;
}
#footer .menu li{
    margin-bottom: 1rem;
    border-bottom: solid 1px #fff;
}
#footer .menu li a{
    display: block;
    padding-bottom: .5rem;
    padding-right: 8rem;
    color: #fff;
}
#footer small{
    display: block;
    text-align: center;
    color: #fff;
}
/*--------------------------------------------------------
タブレット
--------------------------------------------------------*/
@media screen and (max-width: 800px) {
/* 共通 */
html{
    font-size: 13px;
}
.pc{
    display: none;
}
.sp{
    display: block;
}
.section-title p{
    font-size: 3rem;
}
.wrapper{
    padding: 0 20px;
}
/* header */
#header{
    height: 60px;
}
#header .logo{
    width: 200px;
}
#header .logo img{
    display: block;
    height: 40px;
}
#header .navi{
    position: fixed;
    top: 0;
    right: -100%;
    background-color: #fff;
    width: 60%;
    height: 100vh;
    padding: 5rem 2rem 2rem;
    box-shadow: 0 0 2rem var(--font-color);
    z-index: 10;
    transition: all .4s ease;
}
#header .navi .menu{
    flex-direction: column;
}
#header .navi .menu li{
    margin: 0 0 2rem;
}
/* ハンバーガーメニュー */
.hamburger{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    z-index: 20
}
.hamburger span{
    width: 40px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 5px;
    transition: all .4s ease;
}
.hamburger span.hover{
    background-color: var(--font-color);
}
.hamburger span:first-child{
    top: 9px;
}
.hamburger span:nth-of-type(2){
    top: 20px;
}
.hamburger span:nth-of-type(3){
    top: 31px;
}
.hamburger span.active:first-child{
    top: 20px;
    transform: rotate(35deg);
}
.hamburger span.active:nth-of-type(2){
    display: none;
}
.hamburger span.active:nth-of-type(3){
    top: 20px;
    transform: rotate(-35deg);
}
/* hero */
#hero{
    margin-bottom: 5rem;
}
#hero .catchphrase{
    font-size: 1.5rem;
}
#hero .sub-catchphrase{
    max-width: 300px;
}
#hero .btn{
    width: 240px;
    padding: 1.5rem 2rem;
}
#hero .btn::before{
    content: '';
    position: absolute;
    top: 0;
    left: 30px;
    width: 150%;
    height: 500%;
    transition: all .5s ease-in-out;
    transform: translateX(-98%) translateY(-60%) rotate(135deg);
    background: #fff100;
}
#hero .btn:hover::before{
    transform: translateX(-9%) translateY(-25%) rotate(135deg);
}
/* about */
#about{
    flex-direction: column-reverse;
    margin-bottom: 5rem;
}
#about .img{
    width: 100%;
}
#about .content{
    width: 100%;
    padding: 0;
}
#about .content .img{
    margin-bottom: 5rem;
}
/* business */
#business{
    padding: 5rem 0;
    margin-bottom: 5rem;
}
#business .section-title-content{
    flex-direction: column;
    align-items: 
    flex-start;
}
#business .section-title-content .section-title{
    margin-bottom: 2rem;
}
#business .section-title-content .description{
    padding: 0;
}
#business .item1{
    flex-direction: column-reverse;
}
#business .item2{
    flex-direction: column;
}
#business .item1 .content{
    width: 100%;
    padding-right: 0;
}
#business .item2 .content{
    width: 100%;
    padding-left: 0;
}
#business .item  .content .icon-area img{
    padding-left: 10%;
}
#business .item .img{
    width: 100%;
    margin-bottom: 5rem;
}
/* 流れる文字 */
.marquee span{
    font-size: 4rem;
}
/* recruit */
#recruit{
    margin-bottom: 5rem;
}
#recruit .content{
    padding: 2rem;
}
#recruit .content .text{
    font-size: 1.8rem;
}
#recruit .content .description{
    max-width: 300px;
}
#recruit .content .btn{
    width: 200px;
}
/* footer */
#footer .content{
    flex-direction: column;
}
#footer .logo{
    width: 100%;
    max-width: 250px;
    margin: 0 auto 2rem;
}
}