@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: 60px 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;
}
main section{
padding: 45px 0 48px;
}
.inner900,
.inner1000,
.inner1100,
.inner1200,
.inner1300,
.inner1400{
width: 90%;
margin-right: auto;
margin-left: auto;
}
.txtImgBox .txts + figure,
.txtImgBox figure + .txts{
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 {
font-size: 2.8rem;
line-height: 1.4;
}
/*
テキスト
========================================== */
.leadTxt{
font-size: 1.4rem;
margin: 20px auto 0;
text-align: left;
width: 90%;
}
.note{
font-size: 1.0rem;
}
/*ボタン
========================================== */
.btn{
width: 90%;
max-width: 300px;
height: 45px;
font-size: 1.4rem;
}
.txtLink{
padding-right: 22px;
}
.txtLink::before{
width: 18px;
height: 18px;
}
.txtLink::after{
right: 5px;
width: 5px;
height: 5px;
}
/* =======================================
ページャー
========================================== */
/*-- pageNavi --*/
.pageNavi{
gap:0 3%;
margin-bottom: 40px;
}
.pageNavi .current,
.pageNavi .inactive,
.pageNavi a{
width: 40px;
height: 40px;
}
/*-- pager --*/
.pager{
margin-top: 50px;
}
.pager a{
font-size: 1.6rem;
width: 200px;
}
/* =======================================
タブ
========================================== */
.btnTab{
width: 90%;
margin:40px auto 0;
}
.btnTab li {
width: calc((100% - 20px)/2)
}
.btnTab li a{
height: 50px;
font-size: 16px;
}
.tabNavi{
margin: 20px 0;
}
/* =======================================
header
========================================== */
header {
}
header .inner1200{
display: flex;
align-items: center;
width: 100%;
height: 60px;
padding: 0 0 0 5vw;
}
header #logo img{
width: 36px;
height: 36px;
}
header #logo span{
font-size: 2rem;
}
/* =======================================
.menu
========================================== */
.menu {
position: absolute;
right: 0;
top: 0;
width: 60px;
height: 60px;
cursor: pointer;
z-index: 101;
background: var(--grd)
}
.menu span {
position: absolute;
left: 18px;
width: 24px;
height: 2px;
background-color: #fefefe;
transition: all 0.6s;
border-radius: 50em;
}
.menu span.menuLine01 {
top: 21px;
}
.menu span.menuLine02{
top: 28px;
}
.menu span.menuLine03{
top: 35px;
}
.menu.active span.menuLine01{
transform: rotate(45deg);
top: 30px;
}
.menu.active span.menuLine02{
width: 0;
left: 50%;
}
.menu.active span.menuLine03 {
transform: rotate(-45deg);
top: 30px;
}
.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.8;
visibility: visible;
}
/* =======================================
gnavi
========================================== */
.gnavi{
position: fixed;
right: -100vw;
top: 0;
width: 100vw;
height: 100vh;
padding-bottom: 140px;
transition: all 0.6s;
z-index: 100;
overflow-y: auto;
background: var(--Lgreen);
}
.gnavi.active{
right: 0;
}
#gnaviList{
padding: 60px 0 0 0;
width: 100vw;
}
#gnaviList li:not(:last-child){
border-bottom: 1px solid #fff;
}
#gnaviList li a{
display: block;
padding: 0.8em 4%;
font-size: 16px;
color: #fff;
}
#gnaviList .sub {
border-top: 1px solid #fff;
}
#gnaviList .sub li {
border-bottom: none;
margin-left: calc(6vw + 1em);
}
#gnaviList .sub li:not(:first-of-type) {
border-top: 1px dotted #fff;
}
.gnavi .headerLinks{
flex-flow: row wrap;
border-bottom: 1px var(--Lgreen) solid;
background: #fff;
margin: 0;
padding: 0;
}
.gnavi .headerLinks li{
width: 50%;
font-size: 12px;
}
.gnavi .headerLinks li+ li{
border-left: 1px var(--Lgreen) solid;
}
.gnavi .headerLinks li a{
display: block;
padding: 0.8em 4%;
}
.gnavi .headerLinks li a::before{
right: 4px;
}
.gnavi .headerLinks li a::after{
right: 9px;
}
#top > header > div > nav > ul.headerLinks.flex.flexEnd > a > img{
display: none;
}
#top > header > div > nav > div > div > a > img{
margin:0 auto;
}
.headerContact .headTel{
background: var(--wh);
padding: 4%;
}
.headerContact .headTel dl{
flex-wrap: wrap;
}
.headerContact .headTel dl dt{
margin-bottom: 20px;
width: 20%;
}
.headerContact .headTel dl dd{
margin-bottom: 20px;
padding-left: 6px;
width: 80%;
}
.headerContact .headTel .time{
display: inline-block;
}
.headerContact .headTel .time:first-child{
border-right: 1px dotted var(--brown);
margin-right: 5px;
width: 50%;
}
.headerContact .headTel .time span{
display: block;
}
.headerContact .headTel p{
text-align: center;
}
.headerContact .headTel .tel{
background: url("../images/ic_tel_green.png") no-repeat calc(50% - 3em) center /15px 21px;
}
.headerContact .headWeb{
border-radius: 0px;
height: 40px;
font-size: 16px;
}
.headerContact .headWeb .web{
padding-left: 20px;
line-height: 1.2;
}
.headerContact .headWeb .web::before{
left: -20px;
top: 0;
bottom: 0;
margin: auto;
}
.headerContact .headWeb .today{
right: 8vw;
top: -14px;
}
.headerContact ul.sp{
margin: 20px auto;
}
.headerContact ul.sp .recruit a {
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
border: 1px #f8f4eb solid;
background: linear-gradient(to bottom, rgba(253,246,230,1) 0%,rgba(243,231,204,1) 100%);
width: 125px;
height: 45px;
gap: 0 5px;
color: var(--brown);
font-weight: 500;
margin: auto;
}
.headerContact ul.sp .recruit a::before {
content: "";
display: block;
background: url("../images/ic_recruit.png") no-repeat left top/100% auto;
width: 28px;
height: 28px;
}
/* =======================================
footContact
========================================== */
#footContact{
padding: 40px 0 ;
}
#footContact .titleBox{
align-items: center;
padding: 15px 2%;
}
#footContact .titleBox h2{
font-size: 2.4rem;
margin-bottom: 5px;
text-align: center;
}
#footContact .titleBox h2 span{
display: inline-block;
margin-bottom: 15px;
padding: 10px 15px;
}
#footContact .titleBox h2 span::after{
width:10px;
height:12px;
clip-path: polygon(0 0, 100% 100%, 100% 0);
top: 100%;
left: 38px;
}
#footContact .titleBox .note{
font-size: 1.2rem;
text-align: center;
}
#footContact ul{
padding: 20px 15px;
gap:10px 0;
}
#footContact ul .telBox{
padding: 15px 3% 15px;
}
#footContact .telBox .tel{
gap:0 10px;
font-size: 3.8rem;
}
#footContact .telBox .tel::before{
width:20px;
height: 28px;
}
#footContact .telBox dl dd{
padding: 2px 5%;
}
#footContact .telBox .time{
line-height: 1.5;
}
#footContact .telBox .time span{
display: block;
font-size: 1.5rem;
}
#footContact li .btn{
height: 100px;
margin:10px auto 0;
}
#footContact li .btn > span{
padding-right: 40px;
font-size: 1.4rem;
}
#footContact li .btn > span::before{
width: 22px;
height: 22px;
}
#footContact li .btn > span::after{
width: 7px;
height: 8px;
right: 8px;
}
#footContact li .btn .web{
background: url("../images/ic_web.png") no-repeat left .25em/39px auto;
padding: 0 0 10px 54px;
font-size: 3rem;
}
/* =======================================
footer
========================================== */
.footerBox{
padding: 40px 0 40px;
}
#footerLogo{
margin-bottom: 20px;
}
.footerNavi li:not(.recruit){
display: none;
}
.footerNavi .recruit a{
margin: 0 auto;
}
footer copy,
footer .copy p{
display: block;
line-height: 30px;
text-align: center;
}
#pageTop{
position: fixed;
right: 4vw;
bottom: 20px ;
}
#pageTop a{
width: 50px;
height: 50px;
padding: 7px 0 0;
font-size: 10px;
}
/* =======================================
pgs common
========================================== */
main{
padding-top: 60px;
}
/*-- mainTitle --*/
.mainTitle{
height: 100px;
}
.mainTitle h2{
font-size: 2.1rem;
}
/*-- title --*/
.h3Tit {
font-size: 2rem;
padding: 10px 20px;
margin-bottom: 12px;
}
.h3Tit span{
font-size: 14px;
}
.pgs .h3Tit{
padding: 0.5em 3.2% !important;
}
.h4Tit {
font-size: 1.6rem;
margin-bottom: 20px;
}
.h5Tit {
font-size: 1.3rem;
margin-bottom: 20px;
}
.h6Tit{
font-size: 1.1rem;
margin-bottom: 10px;
}
/**/
.slash{
font-size: 1.5em;
}
/* list*/
.checkList li{
padding-bottom: 0.2em !important;
}
/*-- table --*/
.basicTable{
border-bottom: none;
}
.basicTable dt{
border-bottom: none;
font-weight: 700;
padding: 3px 2.6%;
width: 100%;
}
.basicTable dd{
padding: 10px 2.6%;
width: calc(100% - 20%);
width: 100%;
}
.dataTable thead th,
.dataTable tbody td{
padding: 2px 2.5%;
}
.tablePrice thead th:first-child,
.tablePrice tbody th{
width: 46%;
}
/*-- 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;
}
/*-- txt-img box --*/
.flexBox .img{
margin-bottom: 20px;
}
/* anchorLink
-----------------------------*/
.pgs .anchorLink li{
width: calc((100% - 30px) / 2);
}
.pgs .anchorLink li a{
font-size: 1.2rem;
padding: 1.5em 4%;
}
/* faq
-----------------------------*/
#faq dl dd{
padding-top: 10px;
}
/* =======================================
top
========================================== */
/* #mv
-----------------------------*/
#mv {
height: auto;
padding: 10px 0 10px;
}
.mvItems{
}
.mvTxt01{
padding: 0 0 30px;
}
.mvTitle{
margin-bottom: 15px;
font-size: min(8.5vw,53px);
}
.mvTitle span{
font-size: min(11vw,70px);
}
.mvTitle span span{
font-size: min(9vw,60px);
}
.mvTxt01 .catch{
font-size: min(5.5vw,28px);
}
.mvTxt02 ul{
gap:0 20px;
}
.mvTxt02 ul li{
border: 2px #81d82a solid;
width: calc((100% - 20px)/2);
padding: 20px 15px 15px;
margin-left: 10px;
color: var(--brown);
font-size: min(2.8vw,16px);
}
.mvTxt02 ul li::after{
width: 40px;
height: 40px;
top: -20px;
right: -18px;
}
.mvTxt02 ul li .Lgreen{
font-size: min(4.5vw,30px);
line-height: 1;
}
.mvTxt02 ul li .txtL{
font-size: min(6vw,40px);
}
.mvTxt02 ul li .txtS{
font-size: min(4.0vw,24px);
}
.mvTxt02 ul li .txtSS{
font-size: min(3vw,18px);
}
.mvTxt02 ul li p{
margin-top:15px;
font-size: min(2.8vw,16px);
}
.mvTxt02 ul li.box02{
font-size: min(3.2vw,20px);
}
.mvTxt02 ul li.box02 p{
margin-top: 12px;
padding-top: 10px;
font-size: min(3.0vw,20px);
}
.mvCampaign{
margin-top: 30px;
height: 70px;
font-size: min(4.2vw,22px);
line-height: 1.2;
}
.mvCampaign span{
font-size: min(4.6vw,24px);
line-height: 1.4;
}
/* #topNews
-----------------------------*/
#topNews .titleBox{
background: var(--green);
padding:10px 5px;
}
#topNews h2{
margin-bottom: 15px;
}
#topNews .titleBox .btn{
margin: 0 auto;
}
#topNews ul li .date{
font-size: 13px;
}
#topNews ul li h3{
margin-bottom: 10px;
font-size: 15px;
}
/* #topGreetings
-----------------------------*/
#topGreetings{
background:url("../images/top_lead_bg01.png") no-repeat right top /38vw auto,url("../images/top_lead_bg02.png") no-repeat left top 30vw /45vw auto, url("../images/top_lead_bg03.jpg") no-repeat center bottom/100% 80%;
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}
#topGreetings h2{
margin-bottom: 30px;
text-align: center;
}
#topGreetings h2 span{
padding: 20px 20px 16px 25px;
}
/* #topMenu
-----------------------------*/
#topMenu{
padding: 40px 0;
}
#topMenu .note{
font-size: 13px;
}
#topMenu .note + .menuBox{
margin-top: 30px;
}
#topMenu .menuBox +.menuBox{
margin-top: 40px;
}
#topMenu h3{
margin-bottom: 10px;
}
#topMenu figure{
margin: 0 0 10px;
}
#topMenu .menuBox .txts{
padding: 15px 10px 15px;
}
#topMenu .menuBox .right{
text-align: left !important;
}
#topMenu .menuBox .btn{
margin: 0 auto 10px;
}
/* #topReason
-----------------------------*/
#topReason{
position: relative;
background: linear-gradient(to bottom, rgba(211,241,225,1) 85%,rgba(255,255,255,1) 100%);
padding:40px 0 50px;
}
#topReason::before{
width: 138.7vw;
height: 63.78vw;
top: -30vw;
}
#topReason .inner{
position: relative;
}
#topReason .inner::before{
width: min(31vw,338px);
height: min(31vw,323px);
top: -15px;
right: -5vw;
left: auto;
transform: translate(0%, 0);
}
#topReason .inner::after{
width: min(15vw,159px);
height: min(16.8vw,142px);
right:85%;
top: 20px;
}
#topReason h2{
position: relative;
font-size:1.8rem;
text-align: center;
z-index:1;
}
#topReason h2 span{
font-size:2.8rem;
}
#topReason .btnWrap .btn{
margin: 0 auto;
}
#topReason ul li{
width: 226px;
height: 226px;
font-size: 20px;
margin: 0 auto 10px;
}
#topReason figure img + img{
margin-top: 10px;
}
/* #topInsurance
-----------------------------*/
#topInsurance{
background: url("../images/top_insurance_bg01.jpg") no-repeat right bottom/100vw auto;
padding: 40px 0 40px;
}
#topInsurance .txts::before{
width: 90px;
height: 90px;
top: -25px;
left: -3vw;
}
#topInsurance h2{
margin-bottom: 0;
margin-left: 0.5em;
font-size: 2.8rem;
}
#topInsurance .leadTxt{
margin-top: 10px !important;
margin-bottom: 10px;
font-size: 18px;
}
#topInsurance ul{
position: relative;
margin-top: 30px;
}
#topInsurance ul li{
margin-bottom: 10px;
}
#topInsurance ul li a{
display: grid;
background-size: 100% auto;
padding: 2% 4.3% 50px;
}
#topInsurance ul li figure{
margin: 0 auto;
padding: 15px 0 10px;
height:auto;
}
/* #topAccess
-----------------------------*/
#topAccess h2{
margin-bottom: 15px;
font-size: 28px;
}
#topAccess h2 span{
margin-bottom: 5px;
font-size: 18px;
}
#topAccess iframe{
margin: 30px 0 0;
width: 100%;
height: 60vw;
}
/* =======================================
========================================== */
/* =======================================
reason
========================================== */
.reasonBox .img{
margin-bottom: 20px;
}
.reasonBox .txts .btnWrap.pcFlex.flexWrap{
gap: 20px;
}
.reasonBox .txts h3{
font-size: 1.6rem;
}
/* =======================================
relaxation
========================================== */
.relaxationFeaturesBox .img{
margin-bottom: 20px;
}
.recommendList li{
font-size: 1.4rem;
}
.relaxationFeaturesBox .txts h4,
.beautyCourseBox .txts h4,
.mobileservicesFeaturesBox .txts h4,
.mobileservicesAreaBox .txts h4,
#area .txts h4{
font-size: 1.6rem;
}
.baloonBox.flex{
align-items: flex-start;
}
/* =======================================
beauty
========================================== */
.beautyCourseBox .img{
margin-bottom: 20px;
}
.beautyReasonWrap{
background: url("../images/beauty_reason_img01_sp.jpg") no-repeat center top / 100% auto;
padding: 20px 4.8%;
}
.beautyReasonList li{
padding: 20px 7%;
}
.beautyReasonList li:not(:first-child){
margin-top: 20px;
}
.beautyReasonList h4{
font-size: 1.8rem;
}
/* =======================================
mobileservices
========================================== */
#mobileservices .telBoxMobile{
display: grid;
}
#mobileservices .telBoxMobile span{
display: inline-block;
margin: 0 auto;
text-align: center;
width: 65%;
}
#mobileservices .telBoxMobile .tel{
flex-flow: column;
padding-left: 25px;
}
#mobileservices .telBoxMobile .tel::before{
width:22px;
height: 32px;
left: 0;
top: 16px;
}
#mobileservices .reservationWrap ul li{
width: 100%;
}
#mobileservices .reservationWrap ul .time span{
display: block;
}
#mobileservices .serviceList li{
margin-top: 35px;
padding: 15px 24px 10px;
}
#mobileservices .serviceList li::after{
right: -15px;
}
#mobileservices .serviceList li dl dd{
text-align: center;
}
.mobileservicesFeaturesBox .img,
.mobileservicesAreaBox .img{
margin-bottom: 20px;
}
#area div.pcFlex{
margin-top: 0;
}
#area .img{
margin-top: 20px;
}
/* =======================================
insurance
========================================== */
#insurance .anchorLink li{
width:calc((100% - 10px)/2);
}
#insurance #about p{
font-size: 16px;
}
.radiusBox + h4{
margin-top: 40px;
}
.radiusBox .termsBox + .termsBox{
margin-top: 30px;
}
.termsBox dt{
font-size: 16px;
}
.blockList{
gap:10px 10px;
}
.blockList.flex li{
width: calc((100% - 10px)/2);
}
.termsBox ol li{
margin-bottom: 8px;
}
#visit .points{
margin-bottom: 30px;
}
#visit .points li{
width: 200px;
height: 200px;
margin: 10px auto 0;
font-size: 24px;
}
#visit h4{
margin-top: 50px;
margin-bottom: 20px;
}
#visit h4 span{
padding: 0 5px 5px;
font-size: 20px;
}
.insuranceBox figure{
margin: 0 0 15px;
}
.insuranceBox .txts{
line-height: 1.7;
}
.faqList dt{
padding: 10px 10px 10px 38px;
font-size: 16px;
}
.faqList dt::before,
.faqList dd::before{
left: 8px;
top: 12px;
font-size: 20px;
}
.faqList dd{
position: relative;
padding: 10px 10px 40px 38px;
}
/* =======================================
accident
========================================== */
#accident #lead h3{
font-size: 22px;
}
#industrial .pcFlex .radiusBox + .radiusBox{
margin-top: 20px;
}
#industrial .radiusBox h4{
margin-bottom: 15px;
font-size: 16px;
}
#industrial .h4Tit{
margin-top: 40px;
}
.flowList li figure{
margin: 0 0 15px;
}
.flowList li + li{
margin-top: 60px;
}
.flowList li + li::before{
width:50px;
height:20px;
margin: 0 auto 20px;
}
.flowList li img{
margin: 0 auto;
width: 50%;
}
.flowList li img.imgNote{
height: 110px;
width: auto;
}
.flowList li .txts h5{
font-size: 1.5rem;
}
/* =======================================
stores
========================================== */
#storeInformation figure{
margin: 0 0 20px;
}
#storeInformation figure img{
margin-top: 20px;
}
#storeAccess iframe{
height: 56vw;
margin-bottom: 15px;
}
#storeParking ul li{
margin:30px 0 0;
}
#storeGallery ul li + li{
margin-top: 20px;
}
/* =======================================
company
========================================== */
#companyGreetings figure{
margin:20px 0 0;
}
#companyProfile{}
#companyHistory{}
#companyHistory .pcFlex{
padding: 15px ;
margin-top:30px;
}
#companyHistory .pcFlex figure{
margin: 0 0 20px;
}
.bnrEsg{}
/* =======================================
esg
========================================== */
.esgSdgs{
padding: 15px 3%;
}
.esgSdgs h3{
font-size: 1.8rem;
}
#esgActivities .h3Tit{
margin-bottom: 0 !important;
}
#esgActivities h4 .icBox{
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
gap: 5px;
margin-top: 10px;
}
#esgActivities h4 .icBox img{
width: calc((100% - 15px) / 4);
}
/* #esgActivities h4 .icBox img:first-child{
margin-left: 0;
} */
#esgActivities h4 .en{
font-size: 2rem;
}
#esgActivities h4 .en span{
font-size: 1.6em;
}
#esgActivities h5{
font-size: 1.6rem;
}
#esgActivities .pcFlex .img{
margin: 10px 0 30px;
}
/* =======================================
recruit
========================================== */
#recruiting{
padding-bottom: 50px;
}
.noRecruit{
padding: 50px 0;
}
#charm{
}
#charm p{
margin: 20px 0;
text-align: left;
line-height: 2;
}
#charm .checkList{
padding:20px 6% 20px;
width: 100%;
}
#charm .checkList li{
font-size: min(4vw, 1.6rem);
line-height: 1.4;
padding-bottom: 0.1em;
}
#charm .checkList li + li{
margin-top: 15px;
}
.trainingList li + li{
margin-top: 30px;
}
.trainingList figure{
margin: 0 0 10px;
}
.trainingList h4{
margin-bottom: 10px;
text-align: left;
}
#benefits ul{
margin-top: 20px;
}
#benefits li{
width: calc((100% - 20px)/2);
height:80px;
font-size: min(4vw, 1.6rem);
}
.bnrRecruit a{
width: 100%;
height: auto;
padding:15px 10px;
font-size: 18px;
font-weight: 500;
}
.bnrRecruit a span span{
font-size: 13px;
}
#recruitment .basicTable:not(:last-child){
margin-bottom: 30px;
}
/* =======================================
news
========================================== */
/* 一覧
-----------------------------*/
#newsList{
padding: 40px 0;
}
#newsList dt{
flex-flow: column;
gap:5px 0;
margin-bottom: 15px;
}
#newsList dt .category{
margin-left: 10px;
}
#newsList dt .title{
font-size: 18px;
line-height: 1.5;
}
#newsList dd{
padding: 0 0 20px;
margin: 0 0 15px;
}
#newsList dd figure{
margin: 0 0 10px;
}
/* single
-----------------------------*/
#newsDetail figure{
margin-bottom: 30px;
text-align: center;
}
/* =======================================
contact
========================================== */
#contact .leadTxt{
font-size: 14px;
}
.contactTelBox .icTel{
font-size: 28px;
line-height: 1.5;
}
.contactTelBox p + p{
margin-top: 5px;
}
.contactLineBox{
margin-top: 20px;
}
.lineStep li{
padding: 15px 10px;
}
.lineStep li + li{
margin-top: 15px;
}
.lineStep li dt{
border-bottom: 2px var(--beige) solid;
padding: 0 0 10px;
margin-bottom: 10px;
font-size: 18px;
}
.lineStep li dt .stepNum{
padding: 2px 0 10px;
font-size: 30px;
}
.stepTxt{
font-size: 20px;
white-space: nowrap;
}
.lineStep li dd .btnWrap{
margin: 15px auto 0;
}
.lineStep li dd figure{
padding: 20px 10% 0;
}
.spBlock,
.spBlock tr,
.spBlock th,
.spBlock td,
.spBlock thead,
.spBlock tbody{
display: block;
width: 100% !important;
}
.tbForm{
margin-top: 30px;
border-top: 1px solid var(--base);
border-bottom: 1px solid var(--base);
width: 100%;
}
.tbForm th{
border-bottom: 1px dotted var(--base);
color: var(--base);
padding: 10px 8px 5px;
vertical-align: middle;
font-weight: bold;
}
.tbForm td{
border-bottom: 1px solid var(--base);
padding: 10px 8px 15px;
vertical-align: middle;
}
.tbForm td label{
display: block;
}
.tbForm td input{
padding: 0.5em;
}
.tbForm td textarea{
width: 100% !important;
height: 160px !important;
padding: 0.5em;
}
.tbForm td .w100{
width: 100%;
}
#contact02 .confirm + p a{
color: var(--base);
text-decoration: underline;
}
#contact02 .hissu{
}
.footForm{
margin: 40px auto 160px;
}
.contactPrivacy span{
display: block;
}
.contactPrivacy span a{
text-decoration: underline;
}
.confirm {
margin-top: 40px;
}
.confirm .submit {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: var(--grd);
box-shadow: 0px 2px 0 0 rgba(0, 0, 0, .15);
border: none;
margin: 0 auto;
padding-right: 30px;
padding-left: 30px;
width: 80%;
max-width: 340px;
height: 60px;
border-radius: 3px;
color: #fff;
font-size: 1.6rem;
cursor: pointer;
}
.confirm .submit:hover {
opacity: 0.7;
}
/* =======================================
contact thanks
========================================== */
#thanks .miniTextBox{
margin: 0 auto;
padding: 50px 0;
width: 90%;
}
/* =======================================
form
========================================== */
.tb_cont{
border-bottom: 1px solid var(--base);
}
.tb_cont th,
.tb_cont td{
display: block;
padding: 5px 10px;
width: 100%;
}
.tb_cont td{
padding: 15px 10px 15px;
}
.tb_cont td input:not([type=checkbox]):not([type=radio]){
padding: 4px;
width: 100%;
}
.tb_cont td textarea{
padding: 4px;
width: 100%;
height: 100px;
}
.tb_cont .hissu{
font-size: 1rem;
padding: 3px 1.5%;
}
.tb_cont .zip{
margin-right: 10px;
width: 40%;
}
.tb_cont .zipBtn{
font-size: 1.1rem;
padding: 8px;
}
.confirm {
margin-top: 20px;
}
#mailformpro input.btn{
width: 100%;
}
/* =======================================
privacypolicy
========================================== */
#privacyMain > div{
padding: 20px 6.4%;
}
#privacyMain h4{
margin-top: 20px;
}
#privacyMain p:not(:last-child){
margin-bottom: 5px !important;
}
/* =======================================
error404
========================================== */
.error404 #error ul.point{
width: 100%;
}