@charset "UTF-8";

.hide-text {
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

.pcNone,
.pcNone2,
.pcNone3{
	display:none;
}

/* color */
.cb{
    color: #145096;
}

.cdb{
    color: #16537b;
}

.cr{
    color: #aa283c;
}

.cbd{
    color: #952448;
}

.cw{
    color: #ffffff;
}

/* bg */

.bgb{
    background-color: #145096;
}

.bgdb{
    background-color: #282864;
}

/* font-family */
.ffnsan{
    font-family: "Noto Sans JP","HiraKakuProN-W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","HiraKakuProN-W6","ヒラギノ角ゴ ProN W6","HiraKakuPro-W6","ヒラギノ角ゴ Pro W6",Meiryo,"Yu Gothic",YuGothic,"游ゴシック体","メイリオ",Osaka,arial,helvetica,sans-serif;
}

.ffnser{
    font-family: 'Noto Serif JP', serif;
}

.ffnr{
    font-family: 'Newsreader', serif;
}

/* font-size */

.fs10{
    font-size: 1.0rem;
}
.fs12{
    font-size: 1.2rem;
}
.fs13{
    font-size: 1.3rem;
}
.fs14{
    font-size: 1.4rem;
}
.fs15{
    font-size: 1.5rem;
}
.fs16{
    font-size: 1.6rem;
}
.fs18{
    font-size: 1.8rem;
}
.fs20{
    font-size: 2.0rem;
}
.fs22{
    font-size: 2.2rem;
}
.fs24{
    font-size: 2.4rem;
}
.fs28{
    font-size: 2.8rem;
}
.fs30{
    font-size: 3.0rem;
    line-height: 1;
}
.fs32{
    font-size: 3.2rem;
    line-height: 1;
}
.fs34{
    font-size: 3.4rem;
    line-height: 1;
}
.fs36{
    font-size: 3.6rem;
    line-height: 1;
}
.fs38{
    font-size: 3.8rem;
    line-height: 1;
}
.fs40{
    font-size: 4.0rem;
    line-height: 1;
}
.fs42{
    font-size: 4.2rem;
    line-height: 1;
}
.fs44{
    font-size: 4.4rem;
    line-height: 1;
}
.fs45{
    font-size: 4.5rem;
    line-height: 1;
}
.fs48{
    font-size: 4.8rem;
    line-height: 1;
}
.fs60{
    font-size: 6.0rem;
    line-height: 1;
}
.fs80{
    font-size: 8.0rem;
    line-height: 1;
}


/* font-weight */

.fwl{
    font-weight: 300;
}
.fwr{
    font-weight: 400;
}
.fwm{
    font-weight: 500;
}
.fwsb{
    font-weight: 600;
}
.fwb{
    font-weight: 700;
}
.fweb{
    font-weight: 800;
}
.fwbk{
    font-weight: 900;
}

/* letter_spacing */

.ls0{
    letter-spacing: 0;
}
.ls50{
    letter-spacing: 0.05em;
}
.ls100{
    letter-spacing: 0.1em;
}

/* maxbox */

.cmn_maxbox_500 {
	width:100%; max-width: 500px; margin: 0 auto;
}
.cmn_maxbox_600 {
	width:100%; max-width: 600px; margin: 0 auto;
}
.cmn_maxbox_700 {
	width:100%; max-width: 700px; margin: 0 auto;
}
.cmn_maxbox_800 {
	width:100%; max-width: 800px; margin: 0 auto;
}
.cmn_maxbox {
	width:100%; max-width: 1000px; margin: 0 auto;
}
.cmn_maxbox_1200 {
	width:100%; max-width: 1200px; margin: 0 auto;
}
.cmn_maxbox_1300 {
	width:100%; max-width: 1300px; margin: 0 auto;
}
.cmn_maxbox_1400 {
	width:100%; max-width: 1400px; margin: 0 auto;
}

/* others */

.center{
    text-align: center;
    margin: 0 auto;
}

.fit img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* padding */

.pt30{
    padding-top: 30px;
}
.pt50{
    padding-top: 50px;
}
.pt80{
    padding-top: 80px;
}
.pt100{
    padding-top: 100px;
}

.pb30{
    padding-bottom: 30px;
}
.pb50{
    padding-bottom: 50px;
}
.pb80{
    padding-bottom: 80px;
}
.pb100{
    padding-bottom: 100px;
}

/* margin */

.mt5{
    margin-top: 5px;
}
.mt10{
    margin-top: 10px;
}
.mt15{
    margin-top: 15px;
}
.mt20{
    margin-top: 20px;
}
.mt30{
    margin-top: 30px;
}
.mt50{
    margin-top: 50px;
}
.mt80{
    margin-top: 80px;
}
.mt100{
    margin-top: 100px;
}

.mb5{
    margin-bottom: 5px;
}
.mb10{
    margin-bottom: 10px;
}
.mb15{
    margin-bottom: 15px;
}
.mb20{
    margin-bottom: 20px;
}
.mb30{
    margin-bottom: 30px;
}
.mb50{
    margin-bottom: 50px;
}
.mb80{
    margin-bottom: 80px;
}
.mb100{
    margin-bottom: 100px;
}

.ml10{
    margin-left: 20px;
}
.ml20{
    margin-left: 20px;
}
.ml30  {
    margin-left: 30px;
}

/* common /////////////////////////////////////////////////////////////////////////////////////////// */


#wrapper {
	overflow: hidden;
}


header {
	width:100%;
    position: relative;
    z-index: 2;
}

main {
    width:100%;
    position: relative;
    z-index: 0;
}

footer {
	width:100%;
    position: relative;
    z-index: 1;
}

/* modalmenu */
#header_modalmenu_check:checked ~ .header_infobar {
    /* box-shadow: 0 8px 20px 0 #e5e5e5; */
}

#header_modalmenu_check {
    /* position: absolute;
    right: 5%;
    top: 50px;
    transform: translate(50%, -50%);
    z-index: -99;
    display: inline-block;
    opacity: 0; */
    display: none;
}

.header_modalmenu_btn {
    flex-shrink: 0;
	display: none;
    /* display: inline-flex; */
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    cursor: pointer;
	z-index: 50;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #145096;
}

.header_modalmenu_btn .box {
    display: inline-block;
    width: 30px;
    height: 20px;
    position: absolute;
    top: 20px;
    left: 15px;
}

.header_modalmenu_btn .box span {
    position: absolute;
    left: 0;
    top: calc((100% - 1px)/2);
    display: block;
    width: 100%;
    height: 2px;
    transition: transform .15s,
                opacity .15s;
    background-color: #ffffff;
}

.header_modalmenu_btn .top {
    transform: translateY(-13px);
}

.header_modalmenu_btn .bottom {
    transform: translateY(13px);
}

#header_modalmenu_check:checked ~ .header_infobar .header_modalmenu_btn .top {
    transform: rotate(45deg);
}

#header_modalmenu_check:checked ~ .header_infobar .header_modalmenu_btn .center {
    opacity: 0;
}

#header_modalmenu_check:checked ~ .header_infobar .header_modalmenu_btn .bottom {
    transform: rotate(-45deg);
}

#header_modalmenu_close_bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.6);
	z-index: 30;
}

#header_modalmenu_check:checked ~ #header_modalmenu_close_bg {
    display: block;
}

#header_modalmenu_area {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity .15s;
    overflow: auto;
    pointer-events: none;
	z-index: 40;

    position: fixed;
    top: 0px;
    left: 0px;
}

#header_modalmenu_check:checked ~ #header_modalmenu_area {
    opacity: 1;
    pointer-events: all;
}

.header_modalmenu_areainner {
    overflow-y: auto;
}

.header_modalmenu_nav form input{
    width: calc(100% - 40px);
    margin: 0;
    padding: 0 0 0 10px;
    border: none;
    height: 40px;
    border-radius: 0;
}

.header_modalmenu_nav .subtmit_gsrh{
    width: 40px;
    height: 40px;
    border-radius: 0;
    margin: 0;
    padding: 0;
    border: none;
    background-color: #00a0dc;
    position: absolute;
}

.header_modalmenu_nav ul {
    background-color: #ffffff;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 50px;
}

.header_modalmenu_nav ul li{
    position: relative;

}

.header_modalmenu_nav a {
    display: block;
    padding: 14px;
    text-align: center;
    color: #145096;
}

.header_modalmenu_nav a span{
	display: block;
	font-size: 1.2rem;
	line-height: 1;
}

/* スライドアニメーション */

.scrollanime,
.scrollanime2{
    opacity: 0;
}

.fadein{
    animation: fadein 2s forwards;
}

@keyframes fadein{
    0%{opacity: 0;}
    100%{opacity: 1;transform: translate(0) scale(1);}
}

.toup{transform: translateY(30px);}
.todown{transform: translateY(-30px);}
.toright{transform: translate(-30px);}
.toleft{transform: translateX(30px);}
.expansion{transform: scale(.7);}
.shrink{transform: scale(1.2);}


/* .transparent,
.scrollanime {
    opacity: 0;
} 

.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}

.toup {transform: translateY(30px);}
.todown {transform: translateY(-30px);}
.toleft {transform: translateX(50px);}
.toright {transform: translateX(-50px);}

.delay2{animation-delay: .2s;}
.delay4{animation-delay: .4s;}
.delay5{animation-delay: .5s;}
.delay6{animation-delay: .6s;}
.delay8{animation-delay: .8s;}
.delay10{animation-delay: 1.0s;}
.delay12{animation-delay: 1.2s;}
.delay14{animation-delay: 1.4s;}
.delay16{animation-delay: 1,6s;}
.delay18{animation-delay: 1.8s;}
.delay20{animation-delay: 2.0s;} */

/* cmn ///////////////////////////////////// */

/* header */

.header_infobar{
    width: calc(100% - 100px);
    position: absolute;
    top: 0px;
    left: 50px;
    background: linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.9) 130px,transparent 130px,transparent 100%);
}

.header_logo{
    width: 100%;
    height: 100px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.header_contact{
    width: 180px;
    line-height: 1.2;
    text-align: right;

    position: absolute;
    top: 20px;
    right: 30px;
}

.header_contact a{
    display: inline-block;
    transform: translateY(2px);
}

.header_contact > p > a::before{
    content: "";
    display: inline-block;
    width: 12px;
    height: 16px;
    background-image: url(../img/cmn_ico_phone_blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.header_contact a:hover::before{
    background-image: url(../img/cmn_ico_phone_red.svg);
}

.header_nav ul{
    display: flex;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
}

.header_nav ul li a{
    display: block;
    width: 200px;
    height: 60px;
    padding-bottom: 10px;

    background: linear-gradient(180deg,#145096 0%,#145096 50px,#282864 50px,#282864 100%);
    color: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    overflow: hidden;
}

.header_nav ul li a::after{
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    background-color: #aa283c;

    position: absolute;
    left: 0px;
    bottom: -10px;
}

.header_nav ul li a:hover::after{
    bottom: 0px;
}


/* cmn_maintitle */

.cmn_mainimg{
    height: 500px;
    position: relative;

    background-image: url(../img/about_mainimg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.cmn_mainimg::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 calc((100vw + 500px)/7) calc(100vw + 500px);
    border-color: transparent transparent rgba(255,255,255,.6) transparent;

    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 2;
}

.cmn_mainimg::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 calc(100vw/7) 100vw;
    border-color: transparent transparent rgba(255,255,255,.8) transparent;

    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 3;
}

.cmn_maintitle{
    text-align: right;

    position: absolute;
    bottom: 45px;
    right: 195px;
    z-index: 4;
}

.cmn_maintitle > p{
    text-transform: capitalize;
}

/* footer */
footer{
    width: 100%;
    padding-top: 250px;
    background-color: #e6e6e6;

    position: relative;

    padding-top: 0;
    margin-top: -50px;
    background: linear-gradient(180deg,transparent 0%,transparent 50px,#e6e6e6 50px,#e6e6e6 100%);
}

main{
    position: relative;
    padding-bottom: 200px;
}

main::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 calc((100vw + 500px)/7) calc(100vw + 500px);
    border-color: transparent transparent #f3f3f3 transparent;

    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: -2;
}

main::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 calc(100vw/7) 100vw;
    border-color: transparent transparent #e6e6e6 transparent;

    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: -1;
}

.footer_top{
    position: relative;
    z-index: 1;
}

.footer_top > div > p > a::before{
    content: "";
    display: inline-block;
    width: 24px;
    height: 32px;
    margin-right: 10px;
    background-image: url(../img/cmn_ico_phone_red.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.footer_top > div > p > a:hover::before{
    background-image: url(../img/cmn_ico_phone_blue.svg);
}

.footer_middle{
    width: calc(100% - 100px);
    margin: 0 auto;
}

.footer_middle > div > div{
    display: flex;
    justify-content: space-between;
}

.footer_middle_left{
    display: flex;
}

.footer_middle_left > ul > li{
    margin-right: 40px;
    margin-bottom: 10px;
}

.footer_middle_left > ul > li:last-of-type{
    margin-bottom: 0;
}

.footer_middle_left > ul > li > a{
    color: #ffffff;
    padding-left: 15px;
    position: relative;
}

.footer_middle_left > ul > li > a::before{
    content: "";
    display: inline-block;
    width: 10px;
    height: 5px;

    background-color: #282864;
    position: absolute;
    top: 8px;
    left: 0px;

}

.footer_middle_left > ul > li > a:hover::before{
    animation: footer_nav .3s forwards;
}

@keyframes footer_nav{
    0%{
    }
    50%{
        background-color: #282864;
        transform: rotateX(90deg);
    }
    51%{
        background-color: #aa283c;
    }
    100%{
        transform: rotateX(0deg);
        background-color: #aa283c;
    }
}

.footer_middle_sp_bottom{
    display: flex;
    justify-content: center;
}

.footer_middle_center{
    width: 300px;
    text-align: center;
    border-left: solid 1px #ffffff;
    border-right: solid 1px #ffffff;
}

.footer_middle_right{
    max-width: 350px;
    padding-left: 50px;
    line-height: 20px;
}

.footer_bottom{
    width: calc(100% - 100px);
    margin: 0 auto;
}

.footer_bottom > div{
    padding: 15px 3%;
}

.footer_gotop {
    position: fixed;
    right: 0px;
    bottom: 0px;
    display: none;
    z-index: 30;
}

.footer_gotop a{
    display: block;
    width: 50px;
    height: 60px;
    background-color: transparent;
    background-image: url(../img/footer_gotop_icon.svg);
    background-repeat: no-repeat;
    background-position: center top;
    transform: translateY(10px);

    transition: all .2s;
}

.footer_gotop a:hover{
    opacity: 1;
    transform: translateY(0px);
}

/* cmn_btn */

.cmn_btn a,
.contact_form .contact_btn_area button{
    display: block;
    width: 200px;
    height: 60px;
    padding-bottom: 10px;
    background: linear-gradient(180deg,#145096 0%,#145096 50px,#282864 50px,#282864 100%);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;
}

.cmn_btn a::after,
.contact_form .contact_btn_area button::after{
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    background-color: #aa283c;
    position: absolute;
    left: 0;
    bottom: -10px;
    transition: all .2s;
}

.cmn_btn a:hover::after,
.contact_form .contact_btn_area button:hover::after{
    opacity: 1;
    bottom: 0;
}


/* cmn_dl */

.cmn_dl > div {
    display: flex;
    line-height: 20px;
}

.cmn_dl > div dt{
    width: 250px;
    flex-shrink: 0;
    border-bottom: solid 1px #952448;
    display: flex;
    align-items: center;
    padding: 20px 30px;
}

.cmn_dl > div dd{
    width: 100%;
    border-bottom: solid 1px #7296c0;
    display: flex;
    align-items: center;
    padding: 20px 30px;
}

/* cmn_tit */

.cmn_tit_1st{
    min-height: 45px;
    padding-left: 20px;
    background-image: url(../img/cmn_tit_1st_deco.svg);
    background-repeat: no-repeat;
    background-position: top left;
    line-height: 1.3;
}

/* cmn_section_mainimg */
.cmn_section_mainimg{
    position: relative;
}

.cmn_section_mainimg > div{
    width: 500px;
    padding: 50px;
    background-color: rgba(20,80,150,.9);
    
    position: absolute;
    top: -50px;
    left: 50px;
    z-index: 1;
}

.cmn_section_mainimg > div::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 60px 500px 0 0;
    border-color: rgba(20,80,150,.9) transparent transparent transparent;

    position: absolute;
    bottom: -60px;
    left: 0px;
}

.cmn_section_mainimg > figure{
    width: 100%;
    height: 500px;
}



/* home ///////////////////////////////////// */

/* mainimg */

.home_body .cmn_mainimg{
    height: 850px;
}

.home_body .cmn_mainimg::after{
    border-color: transparent transparent #ffffff transparent;
}


.home_body .swiper-slide{
    height: 850px;
}

.home_body .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes zoomUp {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.15);
    }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
    animation: zoomUp 15s linear 0s 1 normal both;  
}


/* home_mainimg_copy */

.home_mainimg_copy{
    position: absolute;
    top: 300px;
    left: 60%;
    z-index: 4;
}

.home_mainimg_copy > .fs42{
    line-height: 1.4;
    text-shadow: 5px 5px 3px #282864;
}

.home_mainimg_copy > p > span{
    opacity: 0;
}

.home_mainimg_copy > p >  span.loaded{
    animation:animation_twinkle 1s ease-out forwards;
}

.home_mainimg_copy > p >  span:nth-of-type(1){animation-delay: 0s;}
.home_mainimg_copy > p >  span:nth-of-type(2){animation-delay: 0.1s;}
.home_mainimg_copy > p >  span:nth-of-type(3){animation-delay: 0.2s;}
.home_mainimg_copy > p >  span:nth-of-type(4){animation-delay: 0.3s;}
.home_mainimg_copy > p >  span:nth-of-type(5){animation-delay: 0.4s;}
.home_mainimg_copy > p >  span:nth-of-type(6){animation-delay: 0.5s;}
.home_mainimg_copy > p >  span:nth-of-type(7){animation-delay: 0.6s;}
.home_mainimg_copy > p >  span:nth-of-type(8){animation-delay: 0.7s;}
.home_mainimg_copy > p >  span:nth-of-type(9){animation-delay: 0.8s;}
.home_mainimg_copy > p >  span:nth-of-type(10){animation-delay: 0.9s;}
.home_mainimg_copy > p >  span:nth-of-type(11){animation-delay: 1.0s;}
.home_mainimg_copy > p >  span:nth-of-type(12){animation-delay: 1.1s;}
.home_mainimg_copy > p >  span:nth-of-type(13){animation-delay: 1.2s;}
.home_mainimg_copy > p >  span:nth-of-type(14){animation-delay: 1.3s;}
.home_mainimg_copy > p >  span:nth-of-type(15){animation-delay: 1.4s;}
.home_mainimg_copy > p >  span:nth-of-type(16){animation-delay: 1.5s;}
.home_mainimg_copy > p >  span:nth-of-type(17){animation-delay: 1.6s;}
.home_mainimg_copy > p >  span:nth-of-type(18){animation-delay: 1.7s;}
.home_mainimg_copy > p >  span:nth-of-type(19){animation-delay: 1.8s;}
.home_mainimg_copy > p >  span:nth-of-type(20){animation-delay: 1.9s;}

@keyframes animation_twinkle{
    0% {
        opacity:0;
        /* text-shadow: 0 0 0 #fff,0 0 0 #fff; */
    }
    50% {
        opacity:1;
        /* text-shadow: 0 0 10px #fff,0 0 15px #fff; */
    }
    100% {
        opacity:1;
        /* text-shadow: 0 0 0 #fff,0 0 0 #fff; */
    }
}

/* home_section_01 */

.home_section_01{
    margin-top: -150px;
    position: relative;
    z-index: 5;
}


.home_section_01 > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home_section_01_left{
    max-width: 500px;
    padding-left: 100px;
}

.home_section_01_right > ul > li{
    width: 600px;
    height: 200px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
}

.home_section_01_right > ul > li > a{
    display: block;
    width: 100%;
    height: 100%;

    background-image: url(../img/home_about.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    position: relative;
}


.home_section_01_right > ul > li:nth-of-type(2) > a{
    background-image: url(../img/home_product.jpg);
}

.home_section_01_right > ul > li > a > strong{
    position: absolute;
    top: 30px;
    left: 10px;
    color: rgba(255,255,255,.5);
    z-index: 1;
}

.home_section_01_right > ul > li > a > h2{
    width: 200px;
    height: 200px;
    margin-left: auto;

    text-align: center;
    color: #ffffff;
    background: linear-gradient(180deg,rgba(20,80,150,.8) 0%,rgba(20,80,150,.8) 190px,#282864 190px,#282864 100%);

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    overflow: hidden;
}

.home_section_01_right > ul > li > a > h2::after{
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    background-color: #aa283c;

    position: absolute;
    left: 0px;
    bottom: -10px;

    transition: all .2s;
}

.home_section_01_right > ul > li > a:hover > h2::after{
    bottom: 0px;
}

/* home_parts_img */
.home_parts_img{
    margin-top: -20px;
}

/* sec02 */
.home_section_02{
    margin-top: -50px;
}

.home_section_02 ul{
    display: flex;
    justify-content: space-between;
}

.home_section_02 ul li {
    width: 45%;
    height: 350px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
}

.home_section_02 ul li a{
    display: block;
    width: 100%;
    height: 100%;

    position: relative;
}

.home_section_02 ul li a figure{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.home_section_02 ul li a:hover figure img{
    transform: scale(1.1);
}

.home_section_02 ul li a p{
    position: absolute;
    top: 50px;
    left: 50px;
}

.home_section_02 ul li a h2{
    width: 100%;
    height: 60px;
    padding-right: 50px;
    padding-bottom: 10px;
    
    background: linear-gradient(180deg,rgba(20,80,150,.8) 0%,rgba(20,80,150,.8) 50px,#282864 50px,#282864 100%);

    display: flex;
    justify-content: flex-end;
    align-items: center;

    position: absolute;
    bottom: 0px;
    left: 0px;

    overflow: hidden;
}

.home_section_02 ul li a h2::after{
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    background-color: #aa283c;

    position: absolute;
    left: 0px;
    bottom: -10px;

    transition: all .2s;
}

.home_section_02 ul li a:hover h2::after{
    bottom: 0px;
}

.home_section_02 ul li a strong{
    color: rgba(255,255,255,.5);

    position: absolute;
    bottom: 0px;
    left: 15px;
}

/* footer */
.home_body footer{
    margin-top: -50px;
}




/* about ///////////////////////////////////// */

.about_subimg{
    position: relative;
    z-index: 1;
}

.about_parts{
    margin-top: -50px;
}

.about_greeting{
    margin-top: -20px;
}

.about_greeting > div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.about_greeting_text{
    max-width: 400px;
}

.about_greeting_text .fs18{
    text-align: right;
}

.about_greeting_img{
    width: 50%;
    padding-top: 30px;
}

.about_concept_container{
    background-color: #e6e6e6;
    position: relative;
    z-index: -1;
}

.about_concept_container::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 calc((100vw + 500px)/7) calc(100vw + 500px);
    border-color: transparent transparent #f3f3f3 transparent;

    position: absolute;
    bottom: 0px;
    right: 0px;
}

.about_concept_container::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 calc(100vw/7) 100vw;
    border-color: transparent transparent #ffffff transparent;

    position: absolute;
    bottom: 0px;
    right: 0px;
}

.about_concept{
    padding-top: 240px;
    padding-bottom: 160px;

    position: relative;
    z-index: 1;

    /* background-image: url(../img/about_concept_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%; */
}

.about_concept::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc((100vw + 500px)/7) calc(100vw + 500px) 0 0;
    border-color: #f3f3f3 transparent transparent transparent;

    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -2;
}

.about_concept::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(100vw/7) 100vw 0 0;
    border-color: #ffffff transparent transparent transparent;

    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}

.about_concept > div > div{
    padding: 50px 50px 100px;
    position: relative;
}

.about_concept > div > div h2{
    color: rgba(255,255,255,.5);
    position: absolute;
    bottom: 0px;
    left: 10px;
}

.about_concept > div > div h2 span{
    margin-right: 30px;
}

.about_concept > div > div ul li{
    margin-bottom: 20px;

}

.about_motto ul li{
    margin-left: 5em;
    text-indent: -5em;
}

.about_policy ul li{
    margin-left: 2.0em;
    text-indent: -2.0em;
}

.about_profile{
    margin-top: -80px;
}

.about_access{
    display: flex;
    justify-content: space-between;
}

.about_access > div{
    width: 48%;
}

.about_access iframe{
    width: 100%;
    height: 300px;
}

/* product ///////////////////////////////////// */

.product_body .cmn_mainimg{
    background-image: url(../img/product_mainimg.jpg);
}

.product_technology .cmn_section_mainimg i{
    color: rgba(255,255,255,.7);

    position: absolute;
    bottom: -50px;
    left: 10px;
    z-index: 1;
}

.product_technology ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;

    margin-top: -100px;
    position: relative;
}

.product_flow > div > ul li{
    padding-left: 30px;
    position: relative;

    margin-bottom: 40px;
}

.product_flow > div > ul li:last-of-type{
    margin-bottom: 0;
}

.product_flow > div > ul li::before{
    content: "";
    display: inline-block;
    width: 1px;
    height: 100%;
    background-color: #145096;

    position: absolute;
    top: 15px;
    left: 10px;
}

.product_flow > div > ul li:last-of-type:before{
    content: none;
}

.product_flow > div > ul li i{
    position: absolute;
    top: -20px;
    left: 0px;
    z-index: 1;
}

.product_flow > div > ul li dl{
    display: flex;
    align-items: center;

    position: relative;
}

.product_flow > div > ul li dl::before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 60px 30px 0 0;
    border-color: rgba(255,255,255,.8) transparent transparent transparent;

    position: absolute;
    top: 0px;
    left: 0px;
}

.product_flow > div > ul li dl dt{
    width: 220px;
    flex-shrink: 0;
    padding-left: 70px;
}

.product_flow > div > ul li dl dd{
    width: 100%;
    line-height: 20px;
    padding: 20px 3% 20px 0;
}

/* recruit ///////////////////////////////////// */

.recruit_body .cmn_mainimg{
    background-image: url(../img/recruit_mainimg.jpg);
}

.recruit_copy{
    position: relative;
    z-index: 1;
}

.recruit_copy > div{
    position: relative;
}

.recruit_copy > div figure{
    width: 100%;
    height: 500px;
}

.recruit_copy > div > div{
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: rgba(20,80,150,.5);
    position: absolute;
    left: 0px;
    bottom: 0px;
}

.recruit_scenery{
    margin-top: -50px;
}

.rectuit_message .content > div{
    padding: 40px 50px;
    margin-bottom: 20px;

    position: relative;
}

.rectuit_message .content > div::before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 140px;
    border-color: transparent transparent rgba(255,255,255,.8) transparent;

    position: absolute;
    right: 0px;
    bottom: 0px;
}

.rectuit_message .content > div:last-of-type{
    margin-bottom: 0;
}

.rectuit_message .content > div p:last-of-type{
    text-align: right;
}

.recruit_requirements dd.split{
    display: flex;
    padding: 0;
}

.recruit_requirements dd.split span{
    display: block;
    width: 50%;
    padding: 20px 30px;
    border-right: solid 1px #7296c0;
}

.recruit_requirements dd.split span:last-of-type{
    border: none;
}



/* faq ///////////////////////////////////// */
.faq_body .cmn_mainimg{
    background-image: url(../img/faq_mainimg.jpg);
}

.faq_list ul li{
    padding: 50px 100px;
}

.faq_list ul li p{
    display: flex;
}

.faq_list ul li p span{
    display: block;
    margin-right: 15px;
    transform: translateY(-5px);
}


/* contact ///////////////////////////////////// */

.contact_body .cmn_mainimg{
    background-image: url(../img/contact_mainimg.jpg);
}

.contact_phone > div{
    padding: 50px 3%;
    background-image: url(../img/contact_phone.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    position: relative;
    z-index: 0;
}

.contact_phone > div::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;

    background-color: rgba(20,80,150,.8);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}



/* contact_form */

div.mfp_ok{
    display: none !important;
}

.contact_body .cmn_dl > div dt{
    width: 300px;
    flex-shrink: 0;
    position: relative;
}

.attention{
    color: #aa283c;
}

.required{
    display: inline-block;
    width: 40px;
    height: 20px;
    font-size: 1.2rem;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    color: #ffffff;
    background-color: #aa283c;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}

.reenter{
    display: inline-block;
    color: #aa283c;
    font-family: 'Noto Serif JP', serif;
    padding-left: 10px;
}

.contact_body .cmn_dl > div dd{
    display: block;
    width: 700px;
}

.contact_form .cmn_dl .select_box{
    width: 300px;
    position: relative;
}

.contact_form .cmn_dl .select_box select{
    width: 100%;
    height: 40px;
}

.contact_form .cmn_dl .select_box::after{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13.0px 7.5px 0 7.5px;
    border-color: #808080 transparent transparent transparent;
    content: "";
    display: inline-block;
    pointer-events: none;
    position: absolute;
    top: 14px;
    right: 10px;
}

.contact_form .cmn_dl select{
    width: 100%;
    height: 100%;
    padding: 0 20px;
    border: solid 1px #b3b3b3;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
}

.contact_form .cmn_dl input{
    width: 100%;
    height: 40px;
    padding: 0 20px;
    border: solid 1px #b3b3b3;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.contact_form .cmn_dl .input01{
    width: 300px
}

.contact_form .cmn_dl .input02{
    width: calc(100% - 70px);
    margin-bottom: 10px;
}

.contact_form .cmn_dl .input03{
    width: calc(100% - 70px);
}

.contact_form .cmn_dl .input04{
    width: 200px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.contact_form .cmn_dl textarea{
    width: 100% !important;
    height: 210px !important;
    padding: 10px 20px;
    border: solid 1px #b3b3b3;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
}

.contact_privacy > div{
    height: 200px;
    padding: 40px 30px;
    overflow-y: scroll;
    border: solid 1px #b3b3b3;
}

.contact_privacy_content > div{
    padding: 20px 30px;
}

.privacy_check{
    max-width: 500px;
    margin: 0 auto;
}

.contact_form .privacy_check input{
    width: 20px;
    height: 20px;
    border: none;
    margin-right: 10px;
}

.privacy_check label{
    width: 100%;
    height: 80px;
    background-color: #aa283c;
    color: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
}

.contact_form .contact_btn_area{
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.contact_form .contact_btn_area button{
    transition: all .2s;
}

.contact_form .contact_btn_area button:first-of-type{
    background: linear-gradient(180deg,#e6e6e6 0%,#e6e6e6 50px,#145096 50px,#145096 100%);
    color: #145096;
}

.contact_form .contact_btn_area button:nth-of-type(2) {
    margin-left: 20px;
}