@charset "UTF-8";
/* ---------------------------------------------------------------------------
★共通
--------------------------------------------------------------------------- */
:root{
scroll-padding-top: 60px;
}
html {font-size: 62.5%;scroll-behavior: smooth;}
body {
font-size: 1.3rem;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 1.8;
font-weight: normal;
max-width: 100%;
}
object {pointer-events: none;}
.pc {display: none !important;}
a {
text-decoration: none;
-webkit-transition: 0.3s;
transition: 0.3s;
}
section{
padding: 50px 0
}
section p:not(:last-child){
margin-bottom: 15px;
}
p,li,dt,dd,th,td,input{
font-size: 1.3rem;
}
h1,h2,h3,h4,h5,h6 {
font-size: 1.3rem;
}
.inner900,
.inner1000,
.inner1100,
.inner1200,
.inner1300,
.inner1400{
width: 90%;
margin-right: auto;
margin-left: auto;
}
.txtImgBox .txts + figure,
.txtImgBox figure + .txts{
margin-top: 30px;
}
.pcFlex.half > * + *{
margin-top:30px;
}
/* =======================================
margin / padding
========================================== */
.mA0 { margin: 0% !important; }
.mA5 { margin: 2.5% !important; }
.mA10 { margin: 2.5% !important; }
.mA15 { margin: 2.5% !important; }
.mA20 { margin: 5% !important; }
.mA25 { margin: 5% !important; }
.mA30 { margin: 5% !important; }
.mA35 { margin: 7.5% !important; }
.mA40 { margin: 7.5% !important; }
.mA45 { margin: 7.5% !important; }
.mA50 { margin: 10% !important; }
.mA55 { margin: 10% !important; }
.mA60 { margin: 10% !important; }
.mA65 { margin: 12.5% !important; }
.mA70 { margin: 12.5% !important; }
.mA75 { margin: 12.5% !important; }
.mA80 { margin: 15% !important; }
.mA85 { margin: 15% !important; }
.mA90 { margin: 15% !important; }
.mA95 { margin: 17.5% !important; }
.mA100 { margin: 17.5% !important; }
.mA105 { margin: 17.5% !important; }
.mA110 { margin: 20% !important; }
.mA115 { margin: 20% !important; }
.mA120 { margin: 20% !important; }
.mA125 { margin: 22.5% !important; }
.mA130 { margin: 22.5% !important; }
.mA135 { margin: 22.5% !important; }
.mA140 { margin: 25% !important; }
.mA145 { margin: 25% !important; }
.mA150 { margin: 25% !important; }
.mT10 { margin-top: 2.5% !important; }
.mT15 { margin-top: 2.5% !important; }
.mT20 { margin-top: 5% !important; }
.mT25 { margin-top: 5% !important; }
.mT30 { margin-top: 5% !important; }
.mT35 { margin-top: 7.5% !important; }
.mT40 { margin-top: 7.5% !important; }
.mT45 { margin-top: 7.5% !important; }
.mT50 { margin-top: 12% !important; }
.mT55 { margin-top: 10% !important; }
.mT60 { margin-top: 10% !important; }
.mT65 { margin-top: 12.5% !important; }
.mT70 { margin-top: 12.5% !important; }
.mT75 { margin-top: 12.5% !important; }
.mT80 { margin-top: 15% !important; }
.mT85 { margin-top: 15% !important; }
.mT90 { margin-top: 15% !important; }
.mT95 { margin-top: 17.5% !important; }
.mT100 { margin-top: 17.5% !important; }
.mT105 { margin-top: 17.5% !important; }
.mT110 { margin-top: 20% !important; }
.mT115 { margin-top: 20% !important; }
.mT120 { margin-top: 20% !important; }
.mT125 { margin-top: 22.5% !important; }
.mT130 { margin-top: 22.5% !important; }
.mT135 { margin-top: 22.5% !important; }
.mT140 { margin-top: 25% !important; }
.mT145 { margin-top: 25% !important; }
.mT150 { margin-top: 25% !important; }
.mB0 { margin-bottom: 0% !important; }
.mB5 { margin-bottom: 2.5% !important; }
.mB10 { margin-bottom: 2.5% !important; }
.mB15 { margin-bottom: 2.5% !important; }
.mB20 { margin-bottom: 5% !important; }
.mB25 { margin-bottom: 5% !important; }
.mB30 { margin-bottom: 5% !important; }
.mB35 { margin-bottom: 7.5% !important; }
.mB40 { margin-bottom: 7.5% !important; }
.mB45 { margin-bottom: 7.5% !important; }
.mB50 { margin-bottom: 10% !important; }
.mB55 { margin-bottom: 10% !important; }
.mB60 { margin-bottom: 10% !important; }
.mB65 { margin-bottom: 12.5% !important; }
.mB70 { margin-bottom: 12.5% !important; }
.mB75 { margin-bottom: 12.5% !important; }
.mB80 { margin-bottom: 15% !important; }
.mB85 { margin-bottom: 15% !important; }
.mB90 { margin-bottom: 15% !important; }
.mB95 { margin-bottom: 17.5% !important; }
.mB100 { margin-bottom: 17.5% !important; }
.mB105 { margin-bottom: 17.5% !important; }
.mB110 { margin-bottom: 20% !important; }
.mB115 { margin-bottom: 20% !important; }
.mB120 { margin-bottom: 20% !important; }
.mB125 { margin-bottom: 22.5% !important; }
.mB130 { margin-bottom: 22.5% !important; }
.mB135 { margin-bottom: 22.5% !important; }
.mB140 { margin-bottom: 25% !important; }
.mB145 { margin-bottom: 25% !important; }
.mB150 { margin-bottom: 15% !important; }
.mL0 { margin-left: 0% !important; }
.mL5 { margin-left: 2.5% !important; }
.mL10 { margin-left: 2.5% !important; }
.mL15 { margin-left: 2.5% !important; }
.mL20 { margin-left: 5% !important; }
.mL25 { margin-left: 5% !important; }
.mL30 { margin-left: 5% !important; }
.mL35 { margin-left: 7.5% !important; }
.mL40 { margin-left: 7.5% !important; }
.mL45 { margin-left: 7.5% !important; }
.mL50 { margin-left: 10% !important; }
.mL55 { margin-left: 10% !important; }
.mL60 { margin-left: 10% !important; }
.mL65 { margin-left: 12.5% !important; }
.mL70 { margin-left: 12.5% !important; }
.mL75 { margin-left: 12.5% !important; }
.mL80 { margin-left: 15% !important; }
.mL85 { margin-left: 15% !important; }
.mL90 { margin-left: 15% !important; }
.mL95 { margin-left: 17.5% !important; }
.mL100 { margin-left: 17.5% !important; }
.mL105 { margin-left: 17.5% !important; }
.mL110 { margin-left: 20% !important; }
.mL115 { margin-left: 20% !important; }
.mL120 { margin-left: 20% !important; }
.mL125 { margin-left: 22.5% !important; }
.mL130 { margin-left: 22.5% !important; }
.mL135 { margin-left: 22.5% !important; }
.mL140 { margin-left: 25% !important; }
.mL145 { margin-left: 25% !important; }
.mL150 { margin-left: 25% !important; }
.mR0 { margin-right: 0% !important; }
.mR5 { margin-right: 2.5% !important; }
.mR10 { margin-right: 2.5% !important; }
.mR15 { margin-right: 2.5% !important; }
.mR20 { margin-right: 5% !important; }
.mR25 { margin-right: 5% !important; }
.mR30 { margin-right: 5% !important; }
.mR35 { margin-right: 7.5% !important; }
.mR40 { margin-right: 7.5% !important; }
.mR45 { margin-right: 7.5% !important; }
.mR50 { margin-right: 10% !important; }
.mR55 { margin-right: 10% !important; }
.mR60 { margin-right: 10% !important; }
.mR65 { margin-right: 12.5% !important; }
.mR70 { margin-right: 12.5% !important; }
.mR75 { margin-right: 12.5% !important; }
.mR80 { margin-right: 15% !important; }
.mR85 { margin-right: 15% !important; }
.mR90 { margin-right: 15% !important; }
.mR95 { margin-right: 17.5% !important; }
.mR100 { margin-right: 17.5% !important; }
.mR105 { margin-right: 17.5% !important; }
.mR110 { margin-right: 20% !important; }
.mR115 { margin-right: 20% !important; }
.mR120 { margin-right: 20% !important; }
.mR125 { margin-right: 22.5% !important; }
.mR130 { margin-right: 22.5% !important; }
.mR135 { margin-right: 22.5% !important; }
.mR140 { margin-right: 25% !important; }
.mR145 { margin-right: 25% !important; }
.mR150 { margin-right: 25% !important; }
.pT0 { padding-top: 0% !important; }
.pT5 { padding-top: 2.5% !important; }
.pT10 { padding-top: 2.5% !important; }
.pT15 { padding-top: 2.5% !important; }
.pT20 { padding-top: 5% !important; }
.pT25 { padding-top: 5% !important; }
.pT30 { padding-top: 5% !important; }
.pT35 { padding-top: 7.5% !important; }
.pT40 { padding-top: 7.5% !important; }
.pT45 { padding-top: 7.5% !important; }
.pT50 { padding-top: 10% !important; }
.pT55 { padding-top: 10% !important; }
.pT60 { padding-top: 10% !important; }
.pT65 { padding-top: 12.5% !important; }
.pT70 { padding-top: 12.5% !important; }
.pT75 { padding-top: 12.5% !important; }
.pT80 { padding-top: 15% !important; }
.pT85 { padding-top: 15% !important; }
.pT90 { padding-top: 15% !important; }
.pT95 { padding-top: 17.5% !important; }
.pT100 { padding-top: 17.5% !important; }
.pT105 { padding-top: 17.5% !important; }
.pT110 { padding-top: 20% !important; }
.pT115 { padding-top: 20% !important; }
.pT120 { padding-top: 20% !important; }
.pT125 { padding-top: 22.5% !important; }
.pT130 { padding-top: 22.5% !important; }
.pT135 { padding-top: 22.5% !important; }
.pT140 { padding-top: 25% !important; }
.pT145 { padding-top: 25% !important; }
.pT150 { padding-top: 25% !important; }
.pB0 { padding-bottom: 0% !important; }
.pB5 { padding-bottom: 2.5% !important; }
.pB10 { padding-bottom: 2.5% !important; }
.pB15 { padding-bottom: 2.5% !important; }
.pB20 { padding-bottom: 5% !important; }
.pB25 { padding-bottom: 5% !important; }
.pB30 { padding-bottom: 5% !important; }
.pB35 { padding-bottom: 7.5% !important; }
.pB40 { padding-bottom: 7.5% !important; }
.pB45 { padding-bottom: 7.5% !important; }
.pB50 { padding-bottom: 10% !important; }
.pB55 { padding-bottom: 10% !important; }
.pB60 { padding-bottom: 10% !important; }
.pB65 { padding-bottom: 12.5% !important; }
.pB70 { padding-bottom: 12.5% !important; }
.pB75 { padding-bottom: 12.5% !important; }
.pB80 { padding-bottom: 15% !important; }
.pB85 { padding-bottom: 15% !important; }
.pB90 { padding-bottom: 15% !important; }
.pB95 { padding-bottom: 17.5% !important; }
.pB100 { padding-bottom: 17.5% !important; }
.pB105 { padding-bottom: 17.5% !important; }
.pB110 { padding-bottom: 20% !important; }
.pB115 { padding-bottom: 20% !important; }
.pB120 { padding-bottom: 20% !important; }
.pB125 { padding-bottom: 22.5% !important; }
.pB130 { padding-bottom: 22.5% !important; }
.pB135 { padding-bottom: 22.5% !important; }
.pB140 { padding-bottom: 25% !important; }
.pB145 { padding-bottom: 25% !important; }
.pB150 { padding-bottom: 25% !important; }
.pL0 { padding-left: 0% !important; }
.pL5 { padding-left: 2.5% !important; }
.pL10 { padding-left: 2.5% !important; }
.pL15 { padding-left: 2.5% !important; }
.pL20 { padding-left: 5% !important; }
.pL25 { padding-left: 5% !important; }
.pL30 { padding-left: 5% !important; }
.pL35 { padding-left: 7.5% !important; }
.pL40 { padding-left: 7.5% !important; }
.pL45 { padding-left: 7.5% !important; }
.pL50 { padding-left: 10% !important; }
.pL55 { padding-left: 10% !important; }
.pL60 { padding-left: 10% !important; }
.pL65 { padding-left: 12.5% !important; }
.pL70 { padding-left: 12.5% !important; }
.pL75 { padding-left: 12.5% !important; }
.pL80 { padding-left: 15% !important; }
.pL85 { padding-left: 15% !important; }
.pL90 { padding-left: 15% !important; }
.pL95 { padding-left: 17.5% !important; }
.pL100 { padding-left: 17.5% !important; }
.pL105 { padding-left: 17.5% !important; }
.pL110 { padding-left: 20% !important; }
.pL115 { padding-left: 20% !important; }
.pL120 { padding-left: 20% !important; }
.pL125 { padding-left: 22.5% !important; }
.pL130 { padding-left: 22.5% !important; }
.pL135 { padding-left: 22.5% !important; }
.pL140 { padding-left: 25% !important; }
.pL145 { padding-left: 25% !important; }
.pL150 { padding-left: 25% !important; }
.pR0 { padding-right: 0% !important; }
.pR5 { padding-right: 2.5% !important; }
.pR10 { padding-right: 2.5% !important; }
.pR15 { padding-right: 2.5% !important; }
.pR20 { padding-right: 5% !important; }
.pR25 { padding-right: 5% !important; }
.pR30 { padding-right: 5% !important; }
.pR35 { padding-right: 7.5% !important; }
.pR40 { padding-right: 7.5% !important; }
.pR45 { padding-right: 7.5% !important; }
.pR50 { padding-right: 10% !important; }
.pR55 { padding-right: 10% !important; }
.pR60 { padding-right: 10% !important; }
.pR65 { padding-right: 12.5% !important; }
.pR70 { padding-right: 12.5% !important; }
.pR75 { padding-right: 12.5% !important; }
.pR80 { padding-right: 15% !important; }
.pR85 { padding-right: 15% !important; }
.pR90 { padding-right: 15% !important; }
.pR95 { padding-right: 17.5% !important; }
.pR100 { padding-right: 17.5% !important; }
.pR105 { padding-right: 17.5% !important; }
.pR110 { padding-right: 20% !important; }
.pR115 { padding-right: 20% !important; }
.pR120 { padding-right: 20% !important; }
.pR125 { padding-right: 22.5% !important; }
.pR130 { padding-right: 22.5% !important; }
.pR135 { padding-right: 22.5% !important; }
.pR140 { padding-right: 25% !important; }
.pR145 { padding-right: 25% !important; }
.pR150 { padding-right: 25% !important; }
.pA0 { padding: 0% !important; }
.pA5 { padding: 2.5% !important; }
.pA10 { padding: 2.5% !important; }
.pA15 { padding: 2.5% !important; }
.pA20 { padding: 5% !important; }
.pA25 { padding: 5% !important; }
.pA30 { padding: 5% !important; }
.pA35 { padding: 7.5% !important; }
.pA40 { padding: 7.5% !important; }
.pA45 { padding: 7.5% !important; }
.pA50 { padding: 10% !important; }
.pA55 { padding: 10% !important; }
.pA60 { padding: 10% !important; }
.pA65 { padding: 12.5% !important; }
.pA70 { padding: 12.5% !important; }
.pA75 { padding: 12.5% !important; }
.pA80 { padding: 15% !important; }
.pA85 { padding: 15% !important; }
.pA90 { padding: 15% !important; }
.pA95 { padding: 17.5% !important; }
.pA100 { padding: 17.5% !important; }
.pA105 { padding: 17.5% !important; }
.pA110 { padding: 20% !important; }
.pA115 { padding: 20% !important; }
.pA120 { padding: 20% !important; }
.pA125 { padding: 22.5% !important; }
.pA130 { padding: 22.5% !important; }
.pA135 { padding: 22.5% !important; }
.pA140 { padding: 25% !important; }
.pA145 { padding: 25% !important; }
.pA150 { padding: 25% !important; }
/*タイトル
========================================== */
.h2Tit {
}
.h2Tit,
.h3Tit{
font-size: min(6vw,2.2rem);
}
.h2Tit .en,
.h3Tit .en{
font-size: min(8vw,5rem);
}
.h2Tit .ja,
.h3Tit .ja{
font-size: min(4vw,2rem);
}
.h3Tit {
margin-bottom: 15px;
}
.h4Tit {
font-size: 1.8rem;
margin-bottom: 10px;
}
.h5Tit {
font-size: 1.6rem;
margin-bottom: 10px;
}
.h6Tit{
font-size: 1.5rem;
margin-bottom: 10px;
}
/*
テキスト
========================================== */
.leadTxt{
font-size: min(4.3vw, 1.6rem);
}
.note,
.note li{
font-size: 1.1rem;
}
/*ボタン,リンク
========================================== */
.btnWrap{
margin-top: 20px;
}
.btn{
font-size: 1.5rem;
margin: 0 auto;
max-width:300px;
height:70px;
}
.arrow{
background-size:38px auto;
min-height: 40px;
padding:9px 0 0 36px;
font-size: 15px;
}
/* =======================================
ページャー
========================================== */
/*-- pageNavi --*/
.pageNavi{
gap:0 3%;
margin-top: 40px;
}
.pageNavi .current,
.pageNavi .inactive,
.pageNavi a{
width: 35px;
height: 35px;
}
/*-- pager --*/
.pager{
margin-top: 50px;
}
.pager a{
font-size: 1.6rem;
width: 200px;
}
/* =======================================
header
========================================== */
header {
height: 60px;
}
header #logo{
width: calc(100% - 60px);
}
header #logo span{
padding-top:4px;
padding-bottom:min(2vw,5px) ;
font-size: min(3.0vw,13px);
}
header #logo img{
width: auto;
max-height: 60px;
}
/* =======================================
.menu
========================================== */
.menu {
position: absolute;
right: -5vw;
top: 0;
width: 60px;
height: 60px;
cursor: pointer;
z-index: 101;
background: var(--blue);
}
.menu span {
position: absolute;
left: 17px;
width: 26px;
height: 2px;
background-color: #fefefe;
transition: all 0.6s;
border-radius: calc(infinity * 1px);
}
.menu span.menuLine01 {
top: 21px;
}
.menu span.menuLine02{
top: 28px;
}
.menu span.menuLine03{
top: 35px;
}
.menu.active span.menuLine01{
transform: rotate(45deg);
top: 28px;
}
.menu.active span.menuLine02{
width: 0;
left: 50%;
}
.menu.active span.menuLine03 {
transform: rotate(-45deg);
top: 28px;
}
.menuBg {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 99;
background-color: #000;
opacity: 0;
visibility: hidden;
transition: all 0.6s;
cursor: pointer;
}
.menuBg.active {
opacity: 0.9;
visibility: visible;
}
/* =======================================
gnavi SP
========================================== */
.gnavi.active{
right: 0;
}
.gnavi{
position: fixed;
right: -100vw;
top: 0;
width: 100vw;
height: 100vh;
padding: 0 0 40px;
padding: 0 0 80px;
transition: all 0.6s;
z-index: 100;
overflow-y: auto;
}
#gnaviList{
display: block;
padding: 60px 0 0 0;
width: 100vw;
}
#gnaviList li{
border-bottom: 1px solid var(--wh);
color: var(--wh);
font-size: 16px;
}
#gnaviList li:not(.recruit) a{
display: block;
padding: 0.8em 4%;
color: var(--wh);
font-size: 16px;
}
#gnaviList li.hasSub{
padding: 0.8em 4vw 0;
}
#gnaviList li.hasSub > a{
margin: -0.8em -4vw;
}
#gnaviList .sub {
border-top: 1px solid #fff;
margin: 0.8em -4vw 0;
}
#gnaviList .sub li {
border-bottom: none;
margin-left: calc(6vw + 1em);
}
#gnaviList .sub li:not(:first-of-type) {
border-top: 1px dotted #fff;
}
#gnaviList .recruit >a{
border-radius: 0;
padding:0.8em 4%;
width: auto;
height: auto;
}
#headLinks li{
text-align: center;
}
#headLinks .tel{
padding: 10px 0;
}
#headLinks .tel a{
display: inline-block;
background: url("../images/head_ic_tel.svg") no-repeat left center/15px auto;
padding: 0 0 0 20px;
font-size: 26px;
text-align: center;
}
#headLinks img{
margin: auto;
}
/* =======================================
main
========================================== */
body:not(#top) main{
margin-top: 60px;
}
/* =======================================
footContact SP
========================================== */
#footContact{
top: 0;
background:url("../images/txt_contact.svg") repeat-x left top 50% /auto 60px #fff;
padding: 30px 5%;
}
#footContact h2{
margin-bottom: 10px;
}
#footContact ul{
margin-top: 30px;
}
#footContact ul li + li{
margin-top: 20px;
}
/* =======================================
footer SP
========================================== */
footer{
padding-top: 30px;
}
#contact footer{
background-size: 140% 95%;
padding-top: 10vw;
}
#footBottom{
padding-top: 26.14vw;
}
#contact #footBottom{
padding-top: 0;
}
#footerLogo{
margin: 0 auto 15px;
text-align: center;
}
#footerLogo img{
margin: 0 auto;
}
.footerLeft .address{
margin-bottom:20px;
font-size: 15px;
line-height: 1.6;
}
.footerLeft p{
font-size: 13px;
letter-spacing: 0.14em;
line-height: 1.85;
}
.footerLeft p.flex{
justify-content: center;
}
footer .copy{
margin-top: 30px;
font-size: min(3.2vw,1.1rem);
}
footer .copy p{
margin-bottom: 20px;
}
/* =======================================
pgs common
========================================== */
.pgs main .pcFlex.half > * + *{
margin-top: 20px;
}
/*-- mainTitle --*/
.mainTitle{
height: min(35vw,325px);
}
.mainTitle{
background:url("../images/bg_maintitle.svg") no-repeat left bottom /100% 50%, url("../images/txt_nanbu.svg") no-repeat right top 15vw/auto 14vw;
}
.mainTitle h2{
padding: 4vw 0;
gap:3px 0;
height: auto;
font-size: min(6vw,4rem);
}
.mainTitle h2 span,
.mainTitle h2 a{
font-size: min(3.4vw,1.6rem);
}
.secLead p{
font-size: 16px;
text-align: left;
line-height: 2;
}
/* =======================================
breadcrumb
========================================== */
#breadcrumb{
height: auto;
}
#breadcrumb li{
margin-right: 10px;
font-size: 12px;
}
#breadcrumb li a::after{
width: 4px;
height: 4px;
margin-left: 10px;
}
/*-- table --*/
.basicTable{
border-bottom: none;
}
.basicTable >div{
display: block;
}
.basicTable > dt,
.basicTable >div>dt{
border-bottom: none;
font-weight: 700;
padding: 3px 2.6%;
width: 100%;
}
.basicTable > dd,
.basicTable >div>dd{
padding: 10px 2.6%;
width: calc(100% - 20%);
width: 100%;
}
table.basicTable thead th,
.basicTable.data tbody th,
.basicTable.data tbody td{
font-size: min(3vw,1.6rem);
}
table.basicTable th,
table.basicTable td{
padding: 5px 2px;
}
.spScroll{
overflow-x: auto;
padding: 10px 0 ;
}
.spScroll table{
min-width: 1000px;
}
/*-- pgsMenu --*/
.pgsMenu > ul.flex{
justify-content: center;
flex-wrap: wrap;
}
.pgsMenu li{
width: 48%;
height: 60px;
padding: 5px;
text-align: center;
}
.pgsMenu a{
display: grid;
place-content: center;
margin: auto;
width: 100%;
height: 100%;
padding: 10px 5px;
background: var(--base);
color: #fff;
text-align: center;
line-height: 1.2em;
}
.pgsMenu a:hover{
opacity: 0.7;
}
.pgsMenu > ul{
margin-top: 10px;
}
/* anchorLink
-----------------------------*/
.anchorLink{
flex-flow: row wrap;
gap:10px 10px;
padding: 15px 0;
}
.anchorLink ul{
flex-flow: row wrap;
gap:10px 15px;
}
.pageLinks{
padding: 15px 0;
gap:10px 10px;
}
.anchorLink li,
.pageLinks li{
width: calc((100% - 10px) / 2);
}
.anchorLink a,
.pageLinks li a{
height: 5.5rem;
font-size: 1.3rem;
line-height: 1.6;
padding: 5px 12% 5px 2%
}
.pageLinks li a span{
font-size: 1.1rem;
}
.anchorLink a::after{
right: 4%;
}
/*----*/
.anchorLink .btn2{
width: 100%;
}
/* =======================================
top
========================================== */
/* #mv SP
-----------------------------*/
#mv{
}
#mv .mvImg{
width: 100%;
height: 60svh;
}
#mv .mvImg::after{
top: 100%;
transform: translateY(-63.6%);
}
#mv .mvTxts{
bottom: 10vw;
}
#mv .mvTxts h2{
font-size: min(6.1vw,62px);
letter-spacing: 0.18em;
}
#mv .mvTxts h2 span {
font-size: min(7.3vw,73px);
}
#mv .mvTxts h2 .sub{
margin-bottom: 5px;
font-size: min(4.2vw,28px);
letter-spacing: 0.11em;
}
/* #topNews SP
-----------------------------*/
#topNews{
padding-bottom: 20px;
}
#topNews ul li a{
align-items: center;
}
#topNews .date{
font-size: 16px;
}
.cat{
font-size: 13px;
margin: 0 15px ;
padding: 2px 10px;
}
#topNews li a p{
margin-top: 5px;
width: 100%;
}
/* #topAbout SP
-----------------------------*/
#topAbout{
padding-bottom: 100px;
}
#topAbout::after{
height: 100px;
bottom: -10px;
}
#topAbout figure{
max-width: 400px;
margin: 30px auto 0;
padding-left: min(20vw,97px);
}
#topAbout figure img + img {
width: min(90%,317px);
position: relative;
top: -20px;
left: max(-20vw,-97px);
}
/* #topService SP
-----------------------------*/
#topService {
padding-block: 40px;
}
#topService ol{
gap:20px 2%;
}
#topService ol li{
padding: 2vw 0 0;
font-size:min(4.8vw, 20px);
letter-spacing: 0.02em;
line-height: 1.5;
width:min(44%,172px);
}
#topService ol .num{
background: url("../images/symbol.svg") no-repeat center bottom/80px auto;
padding: 0 0 15px;
margin-bottom: 2vw;
font-size: 30px;
}
#topService ol li span:not(.num){
font-size:min(5vw, 24px);
}
#topService ul{
margin-top: 30px;
}
#topService ul li {
margin-top: 30px;
}
#topService ul li figure{
padding: 5px;
}
#topService ul li p{
width: 200px;
font-size: 18px;
line-height: 44px;
left: 16px;
bottom: -10px;
}
/* #topWorks SP
-----------------------------*/
#topWorks h2{
margin-bottom: 20px;
}
#topWorks p{
font-size: min(3.2vw,13px);
}
#topWorks .slider figure{
padding-inline: 8px;
}
#topWorks .slider figure figcaption{
margin-top: 5px;
font-size: 16px;
}
/* #topRecruit SP
-----------------------------*/
#topRecruit{
border-radius: min(10vw,77px) min(10vw,77px) 0 0;
}
#topRecruit h2{
margin-bottom: 20px;
}
#topRecruit .txts p{
line-height: 2.5;
}
#topRecruit figure{
margin-top: 30px;
}
#topRecruit figure img{
border-radius: 0 0 20px 20px;
}
/* =======================================
service SP
========================================== */
#serviceLead figure{
margin-top: 30px;
}
#serviceReason{}
#serviceReason li{
margin-top: 30px;
}
#serviceReason li h4{
width: 90%;
padding: 8px 15px;
margin: 0 0 -40px -10px;
}
#serviceReason li figure{
margin: 0 0 10px;
}
#serviceInfo {
}
.serviceInfoBox + .serviceInfoBox{
margin-top: 50px;
}
.serviceInfoBox .pcFlex figure{
margin-top: 30px;
}
.serviceInfoBox h5{
padding: 0 0 5px;
margin: 30px 0 10px;
}
.serviceInfoBox ul{
gap:20px 4%;
}
.serviceInfoBox ul li{
width: min(48%,262px);
height:50px;
font-size: 16px;
}
/* =======================================
company SP
========================================== */
#companyMessage .txts .pcFlex .bold{
display: block;
}
#companyMessage figure{
margin-top: 30px;
}
#companyMessage .secLead + figure{
margin-block: 0 30px;
}
/* =======================================
history SP
========================================== */
#historyLead .balloon{
}
#historyLead .balloon figure{
margin: 0 0 40px;
}
#historyLead .balloon .txts{
margin-top: -70px;
padding: 20px;
}
#historyLead .balloon .txts::before,
#historyLead .balloon .txts::after{
background-color: var(--Lblue);
width:30px;
height: 24px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
bottom: 99.9%;
left: 0;right: 0;
margin: auto;
}
#historyLead .balloon .txts::after{
background-color: #fff;
width: 28px;
height: 22px;
margin-top: 1px;
}
.historyBox h3{
font-size: min(7.5vw,2.8rem);
}
.historyBox h3::after{
width: 25px;
height: 13px;
bottom: 13px;
}
.historyBox h3 .txt_s{
font-size: 0.6em;
padding-left: 35px;
}
.historyBox .pcFlex figure{
margin: 30px 0 0;
}
#philosophy .pcFlex dl{
padding: 20px min(5vw,20px);
}
#philosophy .pcFlex dl + dl{
margin-top: 40px;
}
#philosophy dl + dl dd{
padding: 5px 10%;
}
#philosophy .pcFlex dt{
border-bottom: 4px double var(--wh);
margin-bottom: 20px;
font-size: 2.0rem;
}
#philosophy dd .center{
font-size: min(4vw,1.5rem);
}
.historyMessage{
padding: 50px 0 100px;
}
.historyMessage p{
margin-bottom: 40px;
font-size: min(5vw,2.4rem);
line-height: 2;
}
/* =======================================
esg SP
========================================== */
.esgLeadList{
flex-wrap: wrap;
margin-top:30px;
}
.esgLeadList li{
font-size:min(4.3vw,1.6rem);
line-height: 1.4;
padding-top: 20px;
width: 42.5%;
max-width: 15em;
}
.esgLeadList li:nth-child(1)::before{
width: 34px;
height: 45px;
top: 10px;
left: calc(50% - 18px);
}
.esgLeadList li:nth-child(2)::before{
width: 60px;
height: 33px;
top: 20px;
left: calc(50% - 30px);
}
.esgLeadList li:nth-child(3)::before{
width: 32px;
height: 36px;
top: 18px;
left: calc(50% - 16px);
}
.esgList{
margin-bottom: 40px;
}
.esgList li{
margin-bottom: 30px;
}
.esgList li figure{
margin: 0 0 15px;
}
.esgOthers li{
width: 80%;
max-width: 400px;
margin-inline: auto;
}
.esgOthers li + li{
margin-top: 30px;
}
.esgOthers li figcaption{
display: block;
margin: 10px 0 0;
font-size: 16px;
}
/* =======================================
recruit SP
========================================== */
.contentsMenu{
padding: 0;
}
.contentsMenu h3{
display: flex;
align-items: center;
gap:0 min(2vw,30px);
font-size: min(5vw,4rem);
}
.contentsMenu h3::after{
width: 2px;
height: 24px;
}
.contentsMenu ul{
gap:10px 5%;
}
.contentsMenu ul li a{
padding-left: 30px;
font-size: min(3.4vw,15px);
}
#recruitLead .pcFlex + .pcFlex{
margin-top:40px;
}
#recruitLead .pcFlex figure{
margin: 30px 0 0;
}
#recruitNewstep .pcFlex + h3{
margin-top: 40px;
}
#recruitNewstep .pcFlex figure{
margin: 30px 0 0;
}
#recruitType li{
margin-top: 30px;
}
#recruitType li figure{
margin: 0 0 10px;
}
#recruitType li figure img{object-fit: cover;
width: 100%;
height: 100%;
aspect-ratio:333/236;
}
#recruitType li .btn{
max-width: none;
height: 50px;
}
.recruitMenu{
padding: 15px 0;
}
.recruitMenu li{
border-top: 1px solid var(--Lblue);
padding: 15px 3%;
width: 100%;
}
.recruitMenu ul li:first-child{
border-top: none;
}
.recruitMenu li a{
font-size: min(4.5vw,1.5rem);
padding-left: 30px;
}
/* =======================================
job SP
========================================== */
.jobFlow{
margin-top: 30px;
}
.jobFlow li{
max-width: 240px;
margin:40px auto 0;
}
.jobFlow li+li::before{
content: "";
display: block;
background: url('data:image/svg+xml;utf8,') no-repeat left top/100% auto;
width: 30px;
height:30px;
position: absolute;
bottom: calc(100% + 5px);
right: 0;left: 0;
margin: auto;
}
.jobFlow li h4{
margin-bottom:5px;
white-space: nowrap;
}
.jobFlow li figure{
margin: 0 0 10px;
}
.jobFlow li p{
font-size: min(3.6vw,16px);
text-align: center;
}
#jobType {}
.slash{
gap: 0 6px;
}
.jobTypeBox{
margin-top: 40px;
}
.jobTypeBox.bgLgray{
padding-block: 40px;
}
.jobTypeBox .slash{
font-size:min(4vw,18px) ;
}
.jobTypeInfo{
margin-top: 30px;
}
.jobTypeInfo dt{
margin-bottom: 15px;
font-size: 18px;
}
.jobTypeInfo dd ul{
gap:10px 5px;
}
.jobTypeInfo dd ul li{
padding: 4px 10px 6px;
}
.jobTypeBox h5{
margin-top: 40px;
}
.jobfaq figure{
margin: 0 0 10px;
}
.jobfaq dt{
margin-bottom: 10px;
font-size: 16px;
}
.jobfaq dd{
padding: 20px;
}
.timeline{
flex-flow: column;
justify-content:flex-start;
gap:10px 0;
margin-left: 5vw;
}
.timeline::before{
width: 1.5px;
height: 100%;
top: 0;
left: 5.6em;
}
.timeline li{
display: flex;
gap:0 20px;
}
.timeline li time{
display: flex;
align-items: center;
justify-content: space-between;
gap:0 10px;
width: 4.5em;
}
.timeline li time::after{
width: 16px;
height: 16px;
margin:3px 0 0;
}
.timeline li p{
font-size: 18px;
text-align: left;
}
#recruitBnr{
margin-bottom: 50px;
padding: 4px;
}
#recruitBnr a{
background: url("../images/arrow_circle_wh.svg") no-repeat right 4.4% center / 35px auto, var(--Lblue);
height: 100px;
font-size: min(5vw,2rem);
padding-right: 8%;
}
#recruitBnr a span{
padding-left: 25px;
}
#recruitBnr a span::before{
width: 20px;
height: 30px;
top: 0.3em;
left: 0;
}
/* =======================================
benefits SP
========================================== */
.benefitsBox{
}
.benefitsList{}
.benefitsList li{
margin-top: 30px;
}
.benefitsList li h4{
width: 90%;
padding: 8px 15px;
margin: 0 0 -40px -10px;
}
.benefitsList li figure{
margin: 0 0 10px;
}
.benefitsList li .btnWrap{
margin-top: 10px;
}
.benefitsList li .btn{
height:50px;
}
.benefitsList + h4{
margin-top: 40px;
}
.benefitsOthers{
display: flex;
flex-flow: row wrap;
gap:10px 1.5%;
}
.benefitsOthers li{
background: #DCF5FF;
padding: 6px 20px 8px;
line-height: 1.5;
font-size: 16px;
}
#benefitsGallery{}
.galleryList figure {
margin-top: 30px;
}
.modalConts {
height:max(300px,50%);
padding: 40px 5%;
}
.modalConts .discList li{
font-size: 16px;
}
/* =======================================
numbers SP
========================================== */
#numbersLead{
padding-top: 50px;
}
#numbers01 ul {
flex-flow: column;
gap:30px 0px;
}
#numbers01 ul li{
width: auto;
padding: 30px 0;
}
#numbers02,
#numbers03{
padding-block: 30px 40px;
}
.baloonBox{
padding:0 5%;
gap:30px 40px;
justify-content: space-around;
align-items: center;
}
.baloonBox li{
min-width: 100px;
padding: 15px;
}
#numbers03{
margin-top: 50px;
margin-bottom: 50px;
}
/* =======================================
works SP
========================================== */
.workList li {
margin-top: 30px;
}
.workList li .workCat{
padding: 2px 8px 4px;
}
.workList li h4{
margin: 5px 0;
font-size: 18px;
}
/* =======================================
news SP
========================================== */
/* 一覧
-----------------------------*/
.newsBox{
display: block;
}
.newsBox .newsInfo{
margin-bottom: 5px;
}
.newsBox figure{
margin: 0 0 20px;
}
.newsInfo .date{
font-size: 14px;
letter-spacing: 0.06em;
}
.newsBox h4{
font-size: 18px;
margin-bottom: 10px;
}
/* single
-----------------------------*/
article{
padding: 50px 0;
}
/* =======================================
entry SP
========================================== */
#entryRequirements{}
#entryFlow{}
#entryFlow ol{}
#entryFlow li{
max-width: 300px;
margin: 40px auto;
}
#entryFlow li + li::before{
content: "";
display: block;
background: url('data:image/svg+xml;utf8,') no-repeat left top/100% auto;
width: 30px;
height:30px;
position: absolute;
bottom: calc(100% + 5px);
right: 0;left: 0;
margin: auto;
}
#entryFlow li .num{
width: 80px;
height:80px;
font-size: 28px;
}
#entryFlow li .num span{
font-size: 18px;
}
#entryFlow ol li figure{
width:min(75%,242px) ;
margin: 0 auto 10px;
}
#entryFlow ol li h4{
font-size: 18px;
}
#entryForm{}
/* =======================================
contact SP
========================================== */
#contactLead{
padding: 50px 0;
}
#contactLead .leadTxt{
text-align: center;
}
/* =======================================
form SP
========================================== */
.formArea .basicTable{
display: block;
}
.formArea .basicTable input:not([type=checkbox]):not([type=radio]){
padding: 4px;
width: 100%;
}
.formArea .basicTable textarea{
padding: 4px;
width: 100% !important;
height: 100px;
}
.formArea .basicTable .hissu{
font-size: 1rem;
padding: 3px 1.5% 4px;
}
.formArea #fRecruit dt{
flex-flow: column;
align-items: flex-start;
}
.formFoot{
margin:20px 0 0;
}
.contactPrivacy{
font-size: 13px;
}