@charset "UTF-8";
/*
    Template: swell
    Theme Name: YOU-R SWELL
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


@import url("./css/page.css");

@media screen and (min-width:641px){.smp{display: none!important;}}
@media screen and (max-width:640px){.pc{display: none!important;}}



.smp{display: none!important;} 
.tablet{display: none!important;}

@media screen and (max-width:641px){
	.pc{display: none!important;}
	.tablet{display: none!important;} 
}
@media screen and (min-width:641px) and (max-width:1024px){
	.pc{display: none!important;} 
	.smp{display: none!important;}
	
	.sp_{display: none;}
}


*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

.cf:before,.cf:after{content:"";display:block;overflow:hidden;}
.cf:after{clear:both;}
.cf{zoom:1;}

body{
    background-image: url(img/bg-body.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 70% auto;
}

.wrap {max-width: 1100px; margin: auto!important;}

/*    header
----------------------------------*/
.l-header__bar{display: none;}
.l-header .l-container, .l-fixHeader .l-container{
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
.l-header__logo, .l-fixHeader__logo{padding: 16px 0 16px 5%!important;}
.c-gnav .menu-item a{padding: 0 25px; color: #0D1A4F;}
.c-gnav .menu-item:last-child a{background: #0B3983; color: #fff; padding: 0 45px;}
.c-gnav .menu-item:last-child .ttl{line-height: 1.5em;}
.c-gnav .menu-item:last-child i{font-size: 20px;}

@media screen and (min-width:641px) and (max-width:1024px){
    .l-header__menuBtn {display: block; margin-right: 15px;}
    .c-iconBtn__icon {font-size: 35px; color: #0B3983;}
    .p-spMenu__closeBtn .c-iconBtn__icon{color: #fff;}
    .p-spMenu__inner {padding-top: 130px;}
    .p-spMenu__inner::before {background: #0B3983;}
    .p-spMenu__nav {color: #fff;}
    .c-widget__title{display: none;}
    .c-listMenu a {padding: 23px 10px 23px 31px;}
    .c-listMenu.c-listMenu li:last-child i{display: none;}
}
@media screen and (max-width:641px){
    .l-header__logo{padding: 5px 0 5px 4% !important;}
    .c-iconBtn__icon {font-size: 35px; color: #0B3983;}
    .p-spMenu__closeBtn .c-iconBtn__icon{color: #fff;}
    .p-spMenu__inner {padding-top: 130px;}
    .p-spMenu__inner::before {background: #0B3983;}
    .p-spMenu__nav {color: #fff;}
    .c-widget__title{display: none;}
    .c-listMenu a {padding: 23px 10px 23px 31px;}
    .c-listMenu.c-listMenu li:last-child i{display: none;}
}

/*    mainimg
----------------------------------*/
.p-mainVisual{background: #fff;}
.p-mainVisual__inner{width: 1200px; margin-left: auto; margin-right: 0; margin-top: -8em;}
.c-filterLayer__img{top: 84px;}
.catch{position: absolute; left: 10%; top: 10%;}
.catch .txt01, .catch .txt02{
    font-family: 'Noto Serif JP'; 
    font-size: clamp(40px, 4.0vw, 55px);
    color: #0B3983; 
    background: #fff; 
    padding: 14px 60px 14px 30px;
    position: relative;
    width: 100%;
}

.catch .txt02{margin: 37px 0 0 90px;}
.catch .circle{
    font-family: 'Noto Sans JP'; 
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #0B3983;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -35px;
    left: -13px;
}
.catch .txt03{
    font-family: 'Noto Serif JP'; 
    font-size: clamp(30px, 3.0vw, 40px);
    color: #0B3983;
    position: absolute;
    bottom: -106px;
    left: 90px;
}

@media screen and (min-width:641px) and (max-width:1024px){
     .p-mainVisual {
         background-image: url('https://you-r.co.jp/wp/wp-content/uploads/2025/09/mainimg_new-pc-2.jpg');
         background-size: 90%;
         background-position: top right;
         background-repeat: no-repeat;
         height: 565px;
    }
    .p-mainVisual__inner {width: 90%; margin-top: 0;}
    .p-mainVisual__imgLayer {visibility: hidden;}
    .catch .txt01, .catch .txt02{font-size: 30px;}
    .catch .txt02 {margin: 60px 0 0 90px;}
}
@media screen and (max-width:641px){
body{background-size: 100% auto;}    
    .p-mainVisual__inner {width: 90%; margin-top: 0;}
    .p-mainVisual__img{width: auto!important;}
    .c-filterLayer__img{top: 0;}
    .catch {top: 23%; left: 7%;}
    .catch .txt01, .catch .txt02 {padding: 14px 40px 14px 30px; font-size: 20px;}
    .catch .txt02 {margin: 51px 0 0 60px;}
    .catch .txt03 {left: 24px; width: 100%; font-size: 24px; bottom: -57px;}
}


/*   footer
----------------------------------*/
.l-footer .inner{
    background: #0b3983; 
    padding: 3em 0; 
    position: relative;
}
.l-footer .leftBox{float: left; width: 35%;}
.l-footer .rightBox{float: right; width: 63%;}
.l-footer .f-logo img{width: 250px;}
.l-footer .add{color: #fff; padding-top: 2em;}
.l-footer .fMenu, .l-footer .otherMenu{display: flex; justify-content: right;}
.l-footer .fMenu a, .l-footer .otherMenu a{color: #fff; font-size: 14px;}
.l-footer .fMenu li:last-child{margin-right: 0;}
.l-footer .fMenu a{border-right: 1px solid #fff; padding: 0 24px;}
.l-footer .fMenu li:last-child a{border-right: none;}
.l-footer .otherMenu{padding-top: 7em;}
.l-footer .otherMenu a{padding-right: 20px;}
.l-footer .otherMenu li:last-child a{padding-right: 0;}
.l-footer .otherMenu img{margin-right: 5px;}
.l-footer .copy{text-align: center; font-size: 12px; padding: 15px 0;}

@media screen and (min-width:641px) and (max-width:1024px){
    .l-footer .inner {padding: 2em 5%;}
    .l-footer .f-logo img {width: 195px;}
    .l-footer .add {font-size: 14px;}
    .l-footer .fMenu{display: none;}
    .l-footer .otherMenu {padding-top: 9em;}
    .l-footer .otherMenu a {font-size: 12px;}
    .l-footer .copy {font-size: 10px; padding: 10px 0;}
    
    #fix_bottom_menu .menu_list{padding: 0;	height: 55px;}
	#fix_bottom_menu .menu-item{border-top: 1px solid #fff;	border-right: 1px solid #fff;height: 100%;}
	#fix_bottom_menu .menu-item:last-child{border-right: none;}
	#fix_bottom_menu .menu-item a{height: 100%;	padding-top: 10px;}
}

@media screen and (max-width:641px){
     .l-footer .inner {padding: 2em 0;}
    .l-footer .leftBox {float: none; width: 100%; text-align: center;}
    .l-footer .f-logo img {width: 195px;}
    .l-footer .add {display: none;}
    .l-footer .rightBox{display: none;}
    .l-footer .copy {font-size: 10px; padding: 10px 0;}
    
    #fix_bottom_menu .menu_list{padding: 0;	height: 55px;}
	#fix_bottom_menu .menu-item{border-top: 1px solid #fff;	border-right: 1px solid #fff;height: 100%;}
	#fix_bottom_menu .menu-item:last-child{border-right: none;}
	#fix_bottom_menu .menu-item a{height: 100%;	padding-top: 10px;}
}


/*    button
----------------------------------*/
.recBtn{
    position: absolute;
    left: 16%;
    bottom: 14%;
}
.btnGrn{
    /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	background:#72C5C6;
	color:#fff;
    font-size: 18px;
    padding: 20px 10px;
    text-align: center;
    width: 330px;
    outline: none;
    /*アニメーションの指定*/
    transition: ease .2s;
}

.btnGrn:hover{background:#41A0A1;}

.btnBl{
    /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	background:#0B3983;
	color:#fff;
    font-size: 18px;
    padding: 20px 10px 20px 25px;
    width: 330px;
    outline: none;
    /*アニメーションの指定*/
    transition: ease .2s;
}

.btnBl:hover{background:rgba(11,57,131,0.70);}

.btnWt{
    /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	background:#fff;
	color:#0B3983;
    font-size: 18px;
    padding: 20px 10px 20px 25px;
    width: 330px;
    outline: none;
    /*アニメーションの指定*/
    transition: ease .2s;
}

.btnWt:hover{background:rgba(255,255,255,0.70);}



/* 矢印が右に移動 */

.arrow1::after{
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f08b";
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    top:54%;
    right: 18px;
    transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.arrow1:hover::after{right: 11px;}




@media screen and (min-width:641px) and (max-width:1024px){
    .recBtn{bottom: 5%;}
    .btnBl{font-size: 16px; padding: 15px 10px 15px 25px; width: 300px;}
    .btnWt{font-size: 16px; padding: 15px 10px 15px 25px; width: 300px;}
}

@media screen and (max-width:641px){
    .recBtn{left: 0; bottom: 20px;}
    .btnGrn {padding: 17px 10px; width: 280px; font-size: 16px;}
    .btnBl {
        font-size: 15px;
        padding: 15px 10px 15px 25px;
        width: 300px;
        position: relative;
        top: 40px;
        left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    }
    
    .btnWt{
        font-size: 15px;
        padding: 15px 10px 15px 25px;
        width: 300px;
        position: relative;
        top: 40px;
        left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    }
}


/*    共通
----------------------------------*/
.top .l-content {margin: 0 auto 2em;}
.h2-eg{
    font-family: 'M PLUS 1p', sans-serif; 
    font-weight: 700!important; 
    font-size: clamp(38px, 3.8vw, 50px)!important;
    letter-spacing: 2px !important;
    margin: 0 0 10px 0 !important;
}
.ttl-jp{font-size: 20px; letter-spacing: 1px; margin-bottom: 0em;}

.notoSans{font-family: 'Noto Sans JP';}

.fs18{font-size: 18px;}
.fs20{font-size: 20px;}
.fs22{font-size: 22px;}
.fs25{font-size: 25px;}
.lh20{line-height: 2.0em;}


@media screen and (min-width:641px) and (max-width:1024px){
    .top #content {padding-top: 0;}
}


/*    top - company
----------------------------------*/
.c-image{
    position: relative; 
    background-color: #72c5c6;   
}
.c-image img{
    position: relative;
    top: -20px;
    right: -20px;
}


/*    top - news
----------------------------------*/
.top-news{height: 420px;}
.top-news .l-article{
    max-width: none;
    padding: 0;    
}
.news-box{
    background: #fff;
    padding: 60px 40px 60px 65px;
    width: 90%;
    margin: 0 auto;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    top: -146px;
    left: 0;
    z-index: 2;
}
.news-box .p-postList{border-top: none;}
.news-box .p-postList__item{
    background-image: linear-gradient(90deg, rgba(172, 172, 172, 0.11), rgba(233, 233, 233, 0.11));
    margin: 10px 0;
}
.news-box .p-postList__link{
    border-bottom: none;
    padding: 1.2em 1.5em;
}
.p-postList__meta{display: inline-block; margin-right: 30px !important;}
.p-postList__title{display: inline-block!important;}


/*    top - recruit
----------------------------------*/
.rec-box{padding-top: 2em;}
.rec-box .photoBox{background: #fff; padding: 10px 10px; position: relative;}
.rec-box .boshu-ttl{
    background: #C40000;
    padding: 7px 10px;
    width: 80%;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    bottom: 139px;
}
.rec-box .boshu-txt{
    padding: 36px 10px 20px;
    font-size: 18px;
}
.rec-box .txtBox{padding-left: 50px;}
.rec-box .txtBox table{margin: 2em 0 3em;}
.rec-box .txtBox th, .rec-box .txtBox td{border-color: transparent!important;}


@media screen and (min-width:641px) and (max-width:1024px){
    .top-business .sp_only{text-align: left;}
    .top-business .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{flex-basis: 45% !important;}
    .top-business .btnBl{display: block!important;}
    .top-business .rightPhoto .btnBl{display: none!important;}
    
    .top-company{padding-bottom: 7em !important;}
    .top-company .sp_only{text-align: left;}
    .top-company .fs25 {font-size: 22px;}
    .top-company .fs18 {font-size: 15px;}
    .top-company .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{flex-basis: 45% !important;}
    
    .news-box {padding: 60px 40px 60px 42px; width: 95%;}
    
    .rec-box{display: block;}
    .rec-box .sp_only{text-align: left;}
    .rec-box .wp-block-column:first-child{display: inline-block; width: 45%;}
    .rec-box .txtBox {padding-left: 25px; display: inline-block; width: 54%;}
    .rec-box .boshu-ttl{width: 85%; font-size: 17px; bottom: 125px;}
    .rec-box .boshu-txt {padding: 25px 10px 20px; font-size: 15px;}
}

@media screen and (max-width:641px){
    .top-business{padding-top: 0!important;}
    .top-business .h2-eg {text-align: center !important; margin: 0 0 3px 0 !important;}
    .ttl-jp {font-size: 17px; text-align: center;}
    
    .top-company{padding-bottom: 9em !important;}
    .top-company .h2-eg {text-align: center !important; margin: 0 0 3px 0 !important;}
    .fc_yellow{text-align: center;}
    .top-company .fs18 {font-size: 16px; line-height: 2.0em;}
    .c-image{width: 94%;}
    
    .news-box{width: 97%; padding: 35px 18px 60px 18px;}
    .news-box .h2-eg{margin: 0 0 3px 0 !important;}
    .news-box .ttl-jp{text-align: left;}
    .news-box .p-postListWrap{margin: 2em 0!important;}
    .news-box .p-postList__link {padding: 1.0em 1.0em;}
    .news-box .p-postList__title {font-size: 15px;}
    
    .rec-box {padding-top: 1em;}
    .rec-box .boshu-ttl {width: 80%; font-size: 18px; bottom: 123px;}
    .rec-box .boshu-txt {padding: 19px 10px 20px; font-size: 15px;}
    .rec-box .txtBox {padding-left: 0; padding-top: 2em;}
    .rec-box .h2-eg {text-align: center !important; margin: 0 0 3px 0 !important;}
    .rec-box .txtBox table {margin: 2em 0 0;}
}