@charset "utf-8";
.wp-pagenavi {
clear: both;
}
.wp-pagenavi a,
.wp-pagenavi span {
border: 1px solid var(--wp-pagenavi-border-color, #bfbfbf);
margin: 2px;
padding: 3px 5px;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
.wp-pagenavi a,
.wp-pagenavi span {
border-color: var(--wp-pagenavi-border-color, #4f4f4f);
}
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
border-color: var(--wp-pagenavi-border-color-current, currentColor);
}
.wp-pagenavi span.current {
font-weight: bold;
}

html {
font-size: 62.5%;
}
body {
-webkit-text-size-adjust: 100%;
line-height: 2;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
table {
font-size: 100%;
line-height: 1.5;
border-collapse: collapse;
border-spacing: 0;
}
th {
font-weight: normal;
text-align: left;
}
figure{margin: 0;}
img {
border: 0;
vertical-align: bottom;
max-width: 100%;
height: auto;
}
ul li {
list-style: none;
}
ol {
}
input, textarea {
vertical-align: middle;
}
address, em {
font-style: normal;
} a:link, a:visited, a:hover {
color: #000;
text-decoration: none;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
} a:hover {
text-decoration: none !important;
opacity: 0.7;
}
a:hover img, a:hover p {
text-decoration: none !important;
} .op1 {
opacity: 1.0 !important;
}
.op1 * {
opacity: 1.0 !important;
}  .left_area {
}
.center_area {
}
.right_area {
}
.bg_top {
}
.bg_mdl {
}
.bg_btm {
}
.first {
}
.last {
}
.left {
float: left;
}
.right {
float: right;
} .position,.relative {
position: relative;
}
.vam{vertical-align: middle;} .flt_left {
float: left;
}
.flt_right {
float: right;
}
.flt_none {
float: none !important;
} .w_auto {
width: auto !important;
}
.w_max {
width: 100% !important;
}
.w_half {
width: 50% !important;
}
.w_third {
width: 33% !important;
}
.w_quarter {
width: 25% !important;
}
.w_fifth {
width: 20% !important;
}
.m_auto {
margin: 0 auto;
} .mt00 {
margin-top: 0px !important;
}
.mt05 {
margin-top: 5px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mt15 {
margin-top: 15px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mt25 {
margin-top: 25px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mt35 {
margin-top: 35px !important;
}
.mt40 {
margin-top: 40px !important;
}
.mt45 {
margin-top: 45px !important;
}
.mt50 {
margin-top: 50px !important;
}
.mt55 {
margin-top: 55px !important;
}
.mt60 {
margin-top: 60px !important;
}
.mt65 {
margin-top: 65px !important;
}
.mt70 {
margin-top: 70px !important;
}
.mt75 {
margin-top: 75px !important;
}
.mt80 {
margin-top: 80px !important;
}
.mt85 {
margin-top: 85px !important;
}
.mt90 {
margin-top: 90px !important;
}
.mt95 {
margin-top: 95px !important;
}
.mt100 {
margin-top: 100px !important;
}
.mt150 {
margin-top: 150px !important;
}
@media screen and (max-width : 960px ) {
.mt15 {
margin-bottom: 15px !important;
}
.mt20 {
margin-bottom: 15px !important;
}
.mt25 {
margin-bottom: 20px !important;
}
.mt30 {
margin-bottom: 20px !important;
}
.mt35 {
margin-bottom: 25px !important;
}
.mt40 {
margin-bottom: 25px !important;
}
.mt45 {
margin-bottom: 30px !important;
}
.mt50 {
margin-bottom: 35px !important;
}
.mt55 {
margin-bottom: 40px !important;
}
.mt60 {
margin-bottom: 40px !important;
}
.mt65 {
margin-bottom: 45px !important;
}
.mt70 {
margin-bottom: 50px !important;
}
.mt75 {
margin-bottom: 55px !important;
}
.mt80 {
margin-bottom: 55px !important;
}
.mt85 {
margin-bottom: 60px !important;
}
.mt90 {
margin-bottom: 60px !important;
}
.mt95 {
margin-bottom: 60px !important;
}
.mt100 {
margin-bottom: 65px !important;
}
.mt150 {
margin-bottom: 100px !important;
}
} .mr00 {
margin-right: 0px !important;
}
.mr05 {
margin-right: 5px !important;
}
.mr10 {
margin-right: 10px !important;
}
.mr15 {
margin-right: 15px !important;
}
.mr20 {
margin-right: 20px !important;
}
.mr25 {
margin-right: 25px !important;
}
.mr30 {
margin-right: 30px !important;
}
.mr35 {
margin-right: 35px !important;
}
.mr40 {
margin-right: 40px !important;
}
.mr45 {
margin-right: 45px !important;
}
.mr50 {
margin-right: 50px !important;
}
.mr55 {
margin-right: 55px !important;
}
.mr60 {
margin-right: 60px !important;
}
.mr65 {
margin-right: 65px !important;
}
.mr70 {
margin-right: 70px !important;
}
.mr75 {
margin-right: 75px !important;
}
.mr80 {
margin-right: 80px !important;
}
.mr85 {
margin-right: 85px !important;
}
.mr90 {
margin-right: 90px !important;
}
.mr95 {
margin-right: 95px !important;
}
.mr100 {
margin-right: 100px !important;
}
@media screen and (max-width : 960px ) {
.mr15 {
margin-bottom: 15px !important;
}
.mr20 {
margin-bottom: 15px !important;
}
.mr25 {
margin-bottom: 20px !important;
}
.mr30 {
margin-bottom: 20px !important;
}
.mr35 {
margin-bottom: 25px !important;
}
.mr40 {
margin-bottom: 25px !important;
}
.mr45 {
margin-bottom: 30px !important;
}
.mr50 {
margin-bottom: 35px !important;
}
.mr55 {
margin-bottom: 40px !important;
}
.mr60 {
margin-bottom: 40px !important;
}
.mr65 {
margin-bottom: 45px !important;
}
.mr70 {
margin-bottom: 50px !important;
}
.mr75 {
margin-bottom: 55px !important;
}
.mr80 {
margin-bottom: 55px !important;
}
.mr85 {
margin-bottom: 60px !important;
}
.mr90 {
margin-bottom: 60px !important;
}
.mr95 {
margin-bottom: 60px !important;
}
.mr100 {
margin-bottom: 65px !important;
}
.mr150 {
margin-bottom: 100px !important;
}
} .mb00 {
margin-bottom: 0 !important;
}
.mb05 {
margin-bottom: 5px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mb15 {
margin-bottom: 15px !important;
}
.mb20 {
margin-bottom: 20px !important;
}
.mb25 {
margin-bottom: 25px !important;
}
.mb30 {
margin-bottom: 30px !important;
}
.mb35 {
margin-bottom: 35px !important;
}
.mb40 {
margin-bottom: 40px !important;
}
.mb45 {
margin-bottom: 45px !important;
}
.mb50 {
margin-bottom: 50px !important;
}
.mb55 {
margin-bottom: 55px !important;
}
.mb60 {
margin-bottom: 60px !important;
}
.mb65 {
margin-bottom: 65px !important;
}
.mb70 {
margin-bottom: 70px !important;
}
.mb75 {
margin-bottom: 75px !important;
}
.mb80 {
margin-bottom: 80px !important;
}
.mb85 {
margin-bottom: 85px !important;
}
.mb90 {
margin-bottom: 90px !important;
}
.mb95 {
margin-bottom: 95px !important;
}
.mb100 {
margin-bottom: 100px !important;
}
.mb150 {
margin-bottom: 150px !important;
}
@media screen and (max-width : 960px ) {
.mb15 {
margin-bottom: 10px !important;
}
.mb20 {
margin-bottom: 15px !important;
}
.mb25 {
margin-bottom: 20px !important;
}
.mb30 {
margin-bottom: 20px !important;
}
.mb35 {
margin-bottom: 25px !important;
}
.mb40 {
margin-bottom: 25px !important;
}
.mb45 {
margin-bottom: 30px !important;
}
.mb50 {
margin-bottom: 35px !important;
}
.mb55 {
margin-bottom: 40px !important;
}
.mb60 {
margin-bottom: 40px !important;
}
.mb65 {
margin-bottom: 45px !important;
}
.mb70 {
margin-bottom: 50px !important;
}
.mb75 {
margin-bottom: 55px !important;
}
.mb80 {
margin-bottom: 55px !important;
}
.mb85 {
margin-bottom: 60px !important;
}
.mb90 {
margin-bottom: 60px !important;
}
.mb95 {
margin-bottom: 60px !important;
}
.mb100 {
margin-bottom: 65px !important;
}
.mb150 {
margin-bottom: 100px !important;
}
}
.sp_mb10{}
@media screen and (max-width : 960px ) {
.sp_mb10{
margin-bottom: 10px !important;
}
}
.sp_mb15 {
}
@media screen and (max-width : 960px ) {
.sp_mb15 {
margin-bottom: 15px!important;
}
}
.sp_mb20{}
@media screen and (max-width : 960px ) {
.sp_mb20{
margin-bottom: 20px !important;
}
}
.sp_mb30{}
@media screen and (max-width : 960px ) {
.sp_mb30{
margin-bottom: 30px !important;
}
}
.sp_mb40{}
@media screen and (max-width : 960px ) {
.sp_mb40{
margin-bottom: 40px !important;
}
}
.sp_mb50{}
@media screen and (max-width : 960px ) {
.sp_mb50{
margin-bottom: 50px !important;
}
}
.sp_mb60{}
@media screen and (max-width : 960px ) {
.sp_mb60{
margin-bottom: 50px !important;
}
} .ml00 {
margin-left: 0px !important;
}
.ml05 {
margin-left: 5px !important;
}
.ml10 {
margin-left: 10px !important;
}
.ml15 {
margin-left: 15px !important;
}
.ml20 {
margin-left: 20px !important;
}
.ml25 {
margin-left: 25px !important;
}
.ml30 {
margin-left: 30px !important;
}
.ml35 {
margin-left: 35px !important;
}
.ml40 {
margin-left: 40px !important;
}
.ml45 {
margin-left: 45px !important;
}
.ml50 {
margin-left: 50px !important;
}
.ml55 {
margin-left: 55px !important;
}
.ml60 {
margin-left: 60px !important;
}
.ml65 {
margin-left: 65px !important;
}
.ml70 {
margin-left: 70px !important;
}
.ml75 {
margin-left: 75px !important;
}
.ml80 {
margin-left: 80px !important;
}
.ml85 {
margin-left: 85px !important;
}
.ml90 {
margin-left: 90px !important;
}
.ml95 {
margin-left: 95px !important;
}
.ml100 {
margin-left: 100px !important;
}
.ml150 {
margin-left: 150px !important;
}
@media screen and (max-width : 960px ) {
.ml15 {
margin-bottom: 15px !important;
}
.ml20 {
margin-bottom: 15px !important;
}
.ml25 {
margin-bottom: 20px !important;
}
.ml30 {
margin-bottom: 20px !important;
}
.ml35 {
margin-bottom: 25px !important;
}
.ml40 {
margin-bottom: 25px !important;
}
.ml45 {
margin-bottom: 30px !important;
}
.ml50 {
margin-bottom: 35px !important;
}
.ml55 {
margin-bottom: 40px !important;
}
.ml60 {
margin-bottom: 40px !important;
}
.ml65 {
margin-bottom: 45px !important;
}
.ml70 {
margin-bottom: 50px !important;
}
.ml75 {
margin-bottom: 55px !important;
}
.ml80 {
margin-bottom: 55px !important;
}
.ml85 {
margin-bottom: 60px !important;
}
.ml90 {
margin-bottom: 60px !important;
}
.ml95 {
margin-bottom: 60px !important;
}
.ml100 {
margin-bottom: 65px !important;
}
.ml150 {
margin-bottom: 100px !important;
}
} .p10{padding: 10px;}
.p15{padding: 15px;}
.p20{padding: 20px;}
.p30{padding: 30px;}
.p40{padding: 40px;}
.p50{padding: 50px;}
.p60{padding: 60px;}
.p80{padding: 80px;}
.p90{padding: 90px;}
.p100{padding: 100px;}
@media screen and (max-width : 960px ) {
.p10{padding: 10px;}
.p15{padding: 15px;}
.p20{padding: 15px;}
.p30{padding: 20px;}
.p40{padding: 25px;}
.p50{padding: 35px;}
.p60{padding: 40px;}
.p80{padding: 55px;}
.p90{padding: 60px;}
.p100{padding: 65px;}
}
.pt00 {
padding-top: 0px !important;
}
.pt05 {
padding-top: 5px !important;
}
.pt10 {
padding-top: 10px !important;
}
.pt15 {
padding-top: 15px !important;
}
.pt20 {
padding-top: 20px !important;
}
.pt25 {
padding-top: 25px !important;
}
.pt30 {
padding-top: 30px !important;
}
.pt35 {
padding-top: 35px !important;
}
.pt40 {
padding-top: 40px !important;
}
.pt45 {
padding-top: 45px !important;
}
.pt50 {
padding-top: 50px !important;
}
.pt60 {
padding-top: 60px !important;
}
.pt80 {
padding-top: 80px !important;
}
.pt100 {
padding-top: 100px !important;
}
.pt150 {
padding-top: 150px !important;
}
@media screen and (max-width : 960px ) {
.pt15 {
margin-bottom: 15px !important;
}
.pt20 {
margin-bottom: 15px !important;
}
.pt25 {
margin-bottom: 20px !important;
}
.pt30 {
margin-bottom: 20px !important;
}
.pt35 {
margin-bottom: 25px !important;
}
.pt40 {
margin-bottom: 25px !important;
}
.pt45 {
margin-bottom: 30px !important;
}
.pt50 {
margin-bottom: 35px !important;
}
.pt55 {
margin-bottom: 40px !important;
}
.pt60 {
margin-bottom: 40px !important;
}
.pt80 {
margin-bottom: 55px !important;
}
.pt100 {
margin-bottom: 65px !important;
}
.pt150 {
margin-bottom: 100px !important;
}
} .pr00 {
padding-right: 0px !important;
}
.pr05 {
padding-right: 5px !important;
}
.pr10 {
padding-right: 10px !important;
}
.pr15 {
padding-right: 15px !important;
}
.pr20 {
padding-right: 20px !important;
}
.pr25 {
padding-right: 25px !important;
}
.pr30 {
padding-right: 30px !important;
}
.pr35 {
padding-right: 35px !important;
}
.pr40 {
padding-right: 40px !important;
}
.pr45 {
padding-right: 45px !important;
}
.pr50 {
padding-right: 50px !important;
}
.pr60 {
padding-right: 60px !important;
}
.pr80 {
padding-right: 80px !important;
}
.pr100 {
padding-right: 100px !important;
}
.pr150 {
padding-right: 150px !important;
}
@media screen and (max-width : 960px ) {
.pr15 {
margin-bottom: 15px !important;
}
.pr20 {
margin-bottom: 15px !important;
}
.pr25 {
margin-bottom: 20px !important;
}
.pr30 {
margin-bottom: 20px !important;
}
.pr35 {
margin-bottom: 25px !important;
}
.pr40 {
margin-bottom: 25px !important;
}
.pr45 {
margin-bottom: 30px !important;
}
.pr50 {
margin-bottom: 35px !important;
}
.pr55 {
margin-bottom: 40px !important;
}
.pr60 {
margin-bottom: 40px !important;
}
.pr80 {
margin-bottom: 55px !important;
}
.pr100 {
margin-bottom: 65px !important;
}
.pr150 {
margin-bottom: 100px !important;
}
} .pb00 {
padding-bottom: 0 !important;
}
.pb05 {
padding-bottom: 5px !important;
}
.pb10 {
padding-bottom: 10px !important;
}
.pb15 {
padding-bottom: 15px !important;
}
.pb20 {
padding-bottom: 20px !important;
}
.pb25 {
padding-bottom: 25px !important;
}
.pb30 {
padding-bottom: 30px !important;
}
.pb35 {
padding-bottom: 35px !important;
}
.pb40 {
padding-bottom: 40px !important;
}
.pb45 {
padding-bottom: 45px !important;
}
.pb50 {
padding-bottom: 50px !important;
}
.pb60 {
padding-bottom: 60px !important;
}
.pb80 {
padding-bottom: 80px !important;
}
.pb100 {
padding-bottom: 100px !important;
}
.pb150 {
padding-bottom: 150px !important;
}
@media screen and (max-width : 960px ) {
.pb15 {
margin-bottom: 15px !important;
}
.pb20 {
margin-bottom: 15px !important;
}
.pb25 {
margin-bottom: 20px !important;
}
.pb30 {
margin-bottom: 20px !important;
}
.pb35 {
margin-bottom: 25px !important;
}
.pb40 {
margin-bottom: 25px !important;
}
.pb45 {
margin-bottom: 30px !important;
}
.pb50 {
margin-bottom: 35px !important;
}
.pb55 {
margin-bottom: 40px !important;
}
.pb60 {
margin-bottom: 40px !important;
}
.pb80 {
margin-bottom: 55px !important;
}
.pb100 {
margin-bottom: 65px !important;
}
.pb150 {
margin-bottom: 100px !important;
}
} .pl00 {
padding-left: 0px !important;
}
.pl05 {
padding-left: 5px !important;
}
.pl10 {
padding-left: 10px !important;
}
.pl15 {
padding-left: 15px !important;
}
.pl20 {
padding-left: 20px !important;
}
.pl25 {
padding-left: 25px !important;
}
.pl30 {
padding-left: 30px !important;
}
.pl35 {
padding-left: 35px !important;
}
.pl40 {
padding-left: 40px !important;
}
.pl45 {
padding-left: 45px !important;
}
.pl50 {
padding-left: 50px !important;
}
.pl60 {
padding-left: 60px !important;
}
.pl80 {
padding-left: 80px !important;
}
.pl100 {
padding-left: 100px !important;
}
.pl150 {
padding-left: 150px !important;
}
@media screen and (max-width : 960px ) {
.pl15 {
margin-bottom: 15px !important;
}
.pl20 {
margin-bottom: 15px !important;
}
.pl25 {
margin-bottom: 20px !important;
}
.pl30 {
margin-bottom: 20px !important;
}
.pl35 {
margin-bottom: 25px !important;
}
.pl40 {
margin-bottom: 25px !important;
}
.pl45 {
margin-bottom: 30px !important;
}
.pl50 {
margin-bottom: 35px !important;
}
.pl55 {
margin-bottom: 40px !important;
}
.pl60 {
margin-bottom: 40px !important;
}
.pl80 {
margin-bottom: 55px !important;
}
.pl100 {
margin-bottom: 65px !important;
}
.pl150 {
margin-bottom: 100px !important;
}
} .indent05 {
padding: 5px !important;
}
.indent10 {
padding: 10px !important;
}
.indent15 {
padding: 15px !important;
}
.indent20 {
padding: 20px !important;
}
.indent25 {
padding: 25px !important;
}
.indent30 {
padding: 30px !important;
}
@media screen and (max-width : 960px ) {
.indent30 {
padding: 20px !important;
}	
}
.indent35 {
padding: 35px !important;
}
.indent40 {
padding: 40px !important;
}
@media screen and (max-width : 960px ) {
.indent40 {
padding: 25px !important;
}	
}
.indent45 {
padding: 45px !important;
}
.indent50 {
padding: 50px !important;
}
@media screen and (max-width : 960px ) {
.indent50 {
padding: 35px !important;
}	
}
.indent60 {
padding: 60px !important;
}
@media screen and (max-width : 960px ) {
.indent60 {
padding:40px !important;
}	
} .indent05_lr {
padding: 0 5px !important;
}
.indent10_lr {
padding: 0 10px !important;
}
.indent15_lr {
padding: 0 15px !important;
}
.indent20_lr {
padding: 0 20px !important;
}
.indent25_lr {
padding: 0 25px !important;
}
.indent30_lr {
padding: 0 30px !important;
}
.indent35_lr {
padding: 0 35px !important;
}
.indent40_lr {
padding: 0 40px !important;
}
.indent45_lr {
padding: 0 45px !important;
}
.indent50_lr {
padding: 0 50px !important;
} .indent05_tb {
padding: 5px 0 !important;
}
.indent10_tb {
padding: 10px 0 !important;
}
.indent15_tb {
padding: 15px 0 !important;
}
.indent20_tb {
padding: 20px 0 !important;
}
.indent25_tb {
padding: 25px 0 !important;
}
.indent30_tb {
padding: 30px 0 !important;
}
@media screen and (max-width : 960px ) {
.indent30_tb {
padding: 20px 0 !important;
}
}
.indent35_tb {
padding: 35px 0 !important;
}
.indent40_tb {
padding: 40px 0 !important;
}
.indent45_tb {
padding: 45px 0 !important;
}
.indent50_tb {
padding: 50px 0 !important;
}
.w_60{
width: 60%;
margin: 0 auto;
}
.w_50{
width: 50%;
margin: 0 auto;
}
.w_40{
width: 40%;
margin: 0 auto;
}
@media screen and (max-width : 960px ) {
.w_60{
width: 100%;
margin: 0 auto;
}
.w_50{
width: 100%;
margin: 0 auto;
}
.w_40{
width: 100%;
margin: 0 auto;
}
} .f_200 {
font-weight: 200;
}
.f_300 {
font-weight: 300;
}
.f_400 {
font-weight: 400;
}
.f_500 {
font-weight: 500;
}
.f_600 {
font-weight: 600;
}
.f_700 {
font-weight: 700;
}
.f_800 {
font-weight: 800;
}
.f_900 {
font-weight: 900;
}
.f_bold {
font-weight: bold !important;
}
.f_normal {
font-weight: normal !important;
}
.f_08 {
font-size: 0.8rem !important;
}
.f_10 {
font-size: 1.0rem !important;
}
.f_12 {
font-size: 1.2rem !important;
}
.f_14 {
font-size: 1.4rem !important;
}
.f_16 {
font-size: 1.6rem !important;
}
.f_18 {
font-size: 1.8rem !important;
}
.f_20 {
font-size: 2.0rem !important;
}
.f_22 {
font-size: 2.2rem !important;
}
.f_23 {
font-size: 2.3rem !important;
}
.f_24 {
font-size: 2.4rem !important;
}
.f_25 {
font-size: 2.5rem !important;
}
.f_26 {
font-size: 2.6rem !important;
}
.f_27 {
font-size: 2.7rem !important;
}
.f_28 {
font-size: 2.8rem !important;
}
.f_29 {
font-size: 2.9rem !important;
}
.f_30 {
font-size: 3.0rem !important;
}
.f_32 {
font-size: 3.2rem !important;
}
.f_34 {
font-size: 3.4rem !important;
}
.f_36 {
font-size: 3.6rem !important;
}
.f_38 {
font-size: 3.8rem !important;
}
.f_40 {
font-size: 4.0rem !important;
}
.f_42 {
font-size: 4.2rem !important;
}
.f_44 {
font-size: 4.4rem;
}
.f_46 {
font-size:4.6rem;
}
.f_48 {
font-size:4.8rem;
}
@media screen and (max-width : 960px ) {
.f_12 {
font-size: 1.0rem !important;
}
.f_14 {
font-size: 1.4rem !important;
}
.f_16 {
font-size: 1.4rem !important;
}
.f_18 {
font-size: 1.6rem !important;
}
.f_20 {
font-size: 1.6rem !important;
}
.f_22 {
font-size: 1.8rem !important;
}
.f_23 {
font-size: 1.8rem !important;
}
.f_24 {
font-size: 1.8rem !important;
}
.f_25 {
font-size: 2.0rem !important;
}
.f_26 {
font-size: 2.0rem !important;
}
.f_27 {
font-size: 2.0rem !important;
}
.f_28 {
font-size: 2.0rem !important;
}
.f_29 {
font-size: 2.2rem !important;
}
.f_30 {
font-size: 2.2rem !important;
}
.f_32 {
font-size: 2.2rem !important;
}
.f_34 {
font-size: 2.4rem !important;
}
.f_36 {
font-size: 2.4rem !important;
}
.f_38 {
font-size: 3.0rem !important;
}
.f_40 {
font-size: 3.0rem !important;
}
.f_42 {
font-size: 3.2rem !important;
}
.f_44 {
font-size: 3.2rem !important;
}
.f_46 {
font-size:3.4rem;
}
.f_48 {
font-size:3.6rem;
}
} .t_left {
text-align: left !important;
}
.t_center {
text-align: center !important;
}
.t_right {
text-align: right !important;
}
.v_top {
vertical-align: top !important;
}
.v_mdl {
vertical-align: middle !important;
}
.v_btm {
vertical-align: text-bottom !important;
} img {
max-width: 100%;
height: auto;
} .bdrs05{border-radius: 5px;}
.bdrs10{border-radius: 10px;}
.bdrs15{border-radius: 15px;}
.bdrs20{border-radius: 20px;}
.bdrs25{border-radius: 25px;}
.bdrs30{border-radius: 30px;}
.bdrs35{border-radius: 35px;}
.bdrs40{border-radius: 40px;}
.bdrs45{border-radius: 45px;}
.bdrs50{border-radius: 50px;}
.bdrs50p{border-radius: 50%;}   .btn {
} .tabNav {
} .fixpng {
} dl:after,.fix:after {
content: "";
display: block;
clear: both;
} 
dl:before,.fix:before {
content: "";
display: block;
clear: both;
} 
dl,.fix {
display: block;
}* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
figure{margin: 0;} :root {
--bg_main: #fff;
--txt_color: #000;
--color_01: #F2662B;
--color_02: #EB4000;
--color_03: #0572E9;
--color_04: #FAF1E6; --gray: #f8f8f8;
--gray_02: #A3A3A3;
--white: #fff;
--dur:.9s;
--ease:cubic-bezier(0.25, 1, 0.5, 1);
--stagger:70ms; --rise:1.1em; } html {
scroll-behavior: smooth;
scroll-padding-top: 110px;
}
body {
background: var(--bg_main);
color: var(--txt_color);
font-family: 'Noto Sans JP', "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
font-size: 2rem;
font-weight: 500;
line-height: 1.8;
-webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 960px) {
html {
scroll-padding-top: 110px;
}
body {
font-size: 1.6rem;
}
}
#wrapper_all {
position: relative;
z-index: 1;
overflow-x: clip; }
@media screen and (max-width: 960px) {
#wrapper_all {
min-width: 100%;
}
} .f_m {
font-family: "M PLUS 1p", sans-serif;
} .f_white {
color: var(--white_color) !important;
} .btn{
margin-top: 50px;
text-align: center;
}
@media screen and (max-width: 960px){
.btn{
margin-top: 30px;
}
}
.btn_orange a{
--btn-orange: #F2662B;
--btn-orange-dark: #D8511A;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 310px;
max-width: 100%;
padding: 20px 80px 20px 50px; background: var(--btn-orange);
color: #fff;
font-size: clamp(1.6rem, 2.7vw, 2.6rem); font-weight: 900;
letter-spacing: .06em;
border: 3px solid #fff;
border-radius: 60px; overflow: hidden;
isolation: isolate; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
} .btn_orange a::after{
content: "";
position: absolute;
right: 22px;
top: 50%;
width: 34px;
height: 34px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,0A15,15,0,1,1,0,15,15,15,0,0,1,15,0Z' fill='%23fff'/%3E%3Cpath d='M5,10,8.572,6.429H0V3.572H8.572L5,0h5l5,5h0l-5,5Z' transform='translate(8 10)' fill='%23f2662b'/%3E%3C/svg%3E") center / contain no-repeat;
transform: translateY(-50%);
transition: transform .35s var(--ease);
} .btn_orange a:hover{
transform: scale(1.05);
opacity: 1;
}
@media screen and (max-width: 960px){
.btn_orange a{
min-width: 0;
width: 85%;
padding: 18px 45px 18px 24px;
}
.btn_orange a::after{ right: 16px; width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce){
.btn_orange a,
.btn_orange a::before,
.btn_orange a::after{ transition: none; }
} .btn_white a{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 310px;
max-width: 100%;
padding: 20px 80px 20px 20px;
background: var(--white);
color: var(--color_01);
font-size: clamp(1.8rem, 2.7vw, 2.6rem); font-weight: 900;
letter-spacing: .06em;
border: 3px solid var(--color_01);
border-radius: 60px;
box-shadow: 0 6px 16px rgba(242,102,43,.28);
overflow: hidden;
isolation: isolate;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
} .btn_white a::after{
content: "";
position: absolute;
right: 22px;
top: 50%;
width: 34px;
height: 34px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,0A15,15,0,1,1,0,15,15,15,0,0,1,15,0Z' fill='%23F2662B'/%3E%3Cpath d='M5,10,8.572,6.429H0V3.572H8.572L5,0h5l5,5h0l-5,5Z' transform='translate(8 10)' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
transform: translateY(-50%);
transition: transform .35s var(--ease);
}
.btn_white a:hover{
transform: scale(1.05);
opacity: 1;
}
@media screen and (max-width: 960px){
.btn_white a{
min-width: 0;
width: 100%;
padding: 18px 62px 18px 24px;
}
.btn_white a::after{ right: 16px; width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce){
.btn_white a,
.btn_white a::after{ transition: none; }
} .header {
position:fixed;
top:10px;
left:0;
right:0;
margin:0 auto;
width:90%;
padding:10px 3%;
z-index:999;
background:var(--white);
border-radius: 50px;
box-shadow: 0 0 20px rgba(0,0,0,.15);
display:flex;
justify-content:space-between;
align-items: center;
} @media screen and (max-width: 960px){
.header.hdr-scroll{
position: absolute; top: 40px;
left: 0;
right: 0;
width: 100%;
margin: 0;
padding: 0 20px;
background: none;
border-radius: 0;
box-shadow: none;
}
body.is-recruit-page .header,
body.is-recruit-page .header.hdr-scroll{
top: 50px;
} .header.hdr-scroll.is-fixed{
position: fixed;
top: 30px;
padding: 10px 3%; background: var(--white);
border-radius: 0;
box-shadow: none;
animation: hdr-fadein .4s ease both;
}
}
@media screen and (max-width: 960px){
body.is-recruit-page .recruit_01{
padding-top: 120px;
}
} @keyframes hdr-fadein{
from{ opacity: 0; top: -10px; }
to  { opacity: 1; top: 30px; }
} [id^="content_"]{ scroll-margin-top: 110px; }
@media screen and (max-width: 960px){
[id^="content_"]{ scroll-margin-top: 100px; }
}
.header > p {
width: 35%;
}
@media screen and (max-width: 960px){
.header > p {
width: 50%;
}
}
.header > div {
display:flex;
align-items: center;
gap:10px;
}
.header > div > p > a{
color: var(--white);
padding: 10px 20px;
border-radius: 50px;
font-weight: bold;
font-size: 1.8rem;
}
.header > div > p:nth-child(1) > a{
display:block;
background: var(--color_03);
}
.header > div > p:nth-child(2) > a{
display:block;
background: var(--color_02);
} .header > div > p:nth-child(1) > a,
.header > div > p:nth-child(2) > a{
display: inline-flex;
align-items: center;
gap: 10px;
}
.header > div > p > a::after{
content: "";
flex: 0 0 auto;
width: 24px;
height: 24px;
background: center / contain no-repeat;
} .header > div > p:nth-child(1) > a::after{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,0A15,15,0,1,1,0,15,15,15,0,0,1,15,0Z' fill='%23fff'/%3E%3Cpath d='M5,10,8.572,6.429H0V3.572H8.572L5,0h5l5,5h0l-5,5Z' transform='translate(8 10)' fill='%230572E9'/%3E%3C/svg%3E");
} .header > div > p:nth-child(2) > a::after{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,0A15,15,0,1,1,0,15,15,15,0,0,1,15,0Z' fill='%23fff'/%3E%3Cpath d='M5,10,8.572,6.429H0V3.572H8.572L5,0h5l5,5h0l-5,5Z' transform='translate(8 10)' fill='%23EB4000'/%3E%3C/svg%3E");
} .br-sp{ display: none; }
.ico-sp-mail{ display: none; } @media screen and (max-width: 960px){
.header > p img{ width: auto; height: 34px; }  .header > div{ gap: 5px; }
.header > div > p > a{
width: 50px;
height: 50px;
padding: 0;
border-radius: 50%;
justify-content: center;
gap: 0;
font-size: 1.1rem;
line-height: 1.05;
text-align: center;
}
.header > div > p > a::after{ display: none; }  .br-sp{ display: inline; } .txt-pc{ display: none; }
.ico-sp-mail{ display: inline-block; width: auto; height: 17px; }
} .hamburger{
position: relative;
flex: 0 0 auto;
width: 56px;
height: 56px;
padding: 0;
border: 2px solid var(--color_02);
background: var(--white); border-radius: 50%;
cursor: pointer;
z-index: 1001; transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
@media screen and (max-width: 960px){
.hamburger{ width: 50px; height: 50px; }
}
.hamburger span{
position: absolute;
left: 50%;
top: 50%;
width: 24px;
height: 2px;
border-radius: 2px;
background: var(--color_02);
transform: translate(-50%, -50%);
transition: transform .3s var(--ease), opacity .2s ease, margin-top .3s var(--ease);
}
@media screen and (max-width: 960px){
.hamburger span{ width: 16px; }
}
.hamburger span:nth-child(1){ margin-top: -7px; }
.hamburger span:nth-child(3){ margin-top: 8px; }
@media screen and (max-width: 960px){
.hamburger span:nth-child(1){ margin-top: -4px; }
.hamburger span:nth-child(3){ margin-top: 4px; }
} .hamburger.is-active{
background: var(--color_02);
border-color: var(--white);
}
.hamburger.is-active span{ background: var(--white); }
.hamburger.is-active span:nth-child(1){ margin-top: 0; transform: translate(-50%,-50%) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity: 0; }
.hamburger.is-active span:nth-child(3){ margin-top: 0; transform: translate(-50%,-50%) rotate(-45deg); } .l-nav{
position: fixed;
inset: 0;
z-index: 998;
background: var(--color_02); overflow-y: auto;
display: flex; padding: 110px 5% 60px;  clip-path: circle(0% at var(--nav-cx, calc(100% - 7.7vw - 28px)) var(--nav-cy, 48px));
visibility: hidden;
pointer-events: none;
transition: clip-path .7s cubic-bezier(.4,0,.2,1), visibility 0s linear .7s;
}
.l-nav.is-open{
clip-path: circle(150% at var(--nav-cx, calc(100% - 7.7vw - 28px)) var(--nav-cy, 48px));
visibility: visible;
pointer-events: auto;
transition: clip-path .7s cubic-bezier(.4,0,.2,1), visibility 0s;
} .l-nav__logo{
position: absolute;
top: 5%;
left: 5%;
width: min(340px, 55vw);
z-index: 2;
}
@media screen and (max-width: 960px){
.l-nav__logo{
top: 8%;
}
}
.l-nav__logo img{
display: block;
width: 100%;
height: auto;
filter: brightness(0) invert(1); } body.is-nav-open .header{ background: transparent; box-shadow: none; }
body.is-nav-open .header > p,
body.is-nav-open .header > div > p{ visibility: hidden; } .gnav__list{
width: 100%;
max-width: 1400px;
margin: auto; display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 56px 4%;
text-align: left;
align-items: start; } .gnav__item{
opacity: 0;
transform: translateY(30px);
transition: opacity .4s ease, transform .4s ease;
}
.l-nav.is-open .gnav__item{ opacity: 1; transform: translateY(0); }
.l-nav.is-open .gnav__item:nth-child(1){ transition-delay: .35s; }
.l-nav.is-open .gnav__item:nth-child(2){ transition-delay: .42s; }
.l-nav.is-open .gnav__item:nth-child(3){ transition-delay: .49s; }
.l-nav.is-open .gnav__item:nth-child(4){ transition-delay: .56s; }
.l-nav.is-open .gnav__item:nth-child(5){ transition-delay: .63s; }
.l-nav.is-open .gnav__item:nth-child(6){ transition-delay: .70s; }
.l-nav.is-open .gnav__item:nth-child(7){ transition-delay: .77s; }
.gnav__link{ display: block; }
.gnav__en{
display: block;
color: var(--white);
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: clamp(2.2rem, 2.6vw, 3.4rem);
line-height: 1.15;
}
.gnav__ja{
display: block;
margin-top: 8px;
color: var(--white);
font-size: clamp(1.2rem, 1.3vw, 1.4rem);
opacity: .92;
}
@media screen and (max-width: 960px){
.l-nav{ padding: 120px 6% 60px; }
.gnav__list{ grid-template-columns: repeat(2, 1fr); gap: 40px 5%; }
} body.is-nav-open{ overflow: hidden; }
.head_bd {
display:flex;
justify-content:space-around;
align-items: center;
}
.head_bd div:nth-child(2) {
width:60%;
}
@media screen and (max-width: 960px) {
.head_bd div:nth-child(2) {
width:auto;
}
}
.g_nav {
display:flex;
justify-content: space-between;
}
.g_nav a{
color:#fff;
} nav.NavMenu {
position: fixed;
z-index: 12;
top: 0;
left: 0;
background: var(--color_01);
text-align: center;
width: 100%;
height: 100%;
display: none;
}
nav.NavMenu ul {
width: 100%;
margin: 0 auto;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
nav.NavMenu ul li {
font-size: 24px;
list-style-type: none;
width: 100%;
padding-bottom: 0px;
}
nav.NavMenu ul li:last-child {
padding-bottom: 0;
}
nav.NavMenu ul li a {
display: block;
color: var(--white);
padding: 15px 0;
font-weight: bold;
font-size: 18px;
} .Toggle {
position: relative;
width: 30px;
height: 28px;
cursor: pointer;
z-index: 13;
display: block;
}
.Toggle span {
display: block;
position: absolute;
width: 30px;
border-bottom: solid 4px var(--txt_color);
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
left: 0;
}
.Toggle span:nth-child(1) {
top: 0px;
}
.Toggle span:nth-child(2) {
top: 11px;
}
.Toggle span:nth-child(3) {
top: 22px;
}
.Toggle.active span:nth-child(1) {
top: 18px;
left: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
border-bottom: solid 3px var(--white);
}
.Toggle.active span:nth-child(2), .Toggle.active span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
border-bottom: solid 3px var(--white);
} footer{ 
width: calc(100% - 80px);
margin: 0 auto;
}
@media screen and (max-width: 960px){
footer{
width: 100%;
padding-bottom: 30px;
}
}
.footer {
background: var(--white);
position:relative;
}
.footer_box{
width: 1200px;
margin: 80px auto 50px;
}
@media screen and (max-width: 1200px){
.footer_box{
width: 100%;
}
}
@media screen and (max-width: 960px){
.footer_box{
margin: 40px auto 25px;
padding:0 20px;
}
} .footer_box .ft_nav{
display: flex;
gap: 30px;
border-bottom: var(--color_01) 1px dotted;
padding-bottom: 40px;
margin-bottom: 40px;
}
.footer_box .ft_col{
flex: 1;
}
.footer_box .ft_col > ul{
margin: 0;
padding: 0;
}
.footer_box .ft_col > ul + ul{
margin-top: 40px; } .footer_box .ft_nav p{
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color_01);
}
.footer_box .ft_nav p a{
color: var(--color_01);
font-weight: bold;
} .footer_box .ft_nav li ul{
margin: 0;
padding: 0;
}
.footer_box .ft_nav li ul li{
margin-bottom: 5px;
font-size: 1.6rem;
}
.footer_box .ft_nav li ul a{
font-size: 1.6rem;
}
@media screen and (max-width: 960px){
.footer_box .ft_nav li ul a{
font-size: 1.4rem;
}
}
@media screen and (max-width: 960px){
.footer_box .ft_nav{ flex-direction: column; gap: 30px; }
} .tel_number{
text-align: center;
}
.tel_number > a{
display: inline-flex;
align-items: center;
gap: 0.15em;
color: #000;
font-family: 'Poppins', sans-serif;
font-size: clamp(3rem, 5vw, 5rem); font-weight: bold;
font-style: italic;
letter-spacing: -0.02em;
} .tel_number > a::before{
content: "";
flex: none;
width: 0.8em;
height: 0.8em;
background: var(--color_01);
-webkit-mask: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/tel.svg) center / contain no-repeat;
mask: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/tel.svg) center / contain no-repeat;
} .footer_box .ft_btn_box{
background: var(--color_01);
padding: 4.17%; color: var(--white); } .footer_box .ft_btn_box > h2{
text-align: center;
font-size: clamp(1.8rem, 2vw, 2.4rem);
font-weight: bold;
} .footer_box .ft_btn_box > p{
text-align: center;
font-size: clamp(2.2rem, 2.5vw, 3rem);
font-weight: 900;
} .footer_box .ft_btns{
background: var(--white);
padding: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
}
@media screen and (max-width: 960px){
.footer_box .ft_btns{
padding: 15px;
}}
.footer_box .tel_number{
margin: 0;
flex: 1 1 auto; }
.footer_box .ft_btn{
margin: 0;
flex: 1 1 240px; max-width: 300px;
}
.footer_box .ft_btn a{
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 40px;
border: 2px solid var(--color_01);
border-radius: 60px;
font-size: clamp(1.4rem, 1.9vw, 1.8rem); font-weight: bold;
transition: opacity .3s var(--ease);
} .footer_box .ft_btn--entry a{
background: var(--color_03);
border-color: var(--color_03); color: var(--white);
} .footer_box .ft_btn--contact a{
background: var(--white);
color: var(--color_01);
}
.footer_box .ft_btn a:hover{ opacity: .85; } .footer_box .ft_btn a::after{
content: "";
position: absolute;
right: 8%;
top: 50%;
width: 20px;
height: 20px;
transform: translateY(-50%);
transition: transform .3s var(--ease);
-webkit-mask: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/arrow_s.svg) center / contain no-repeat;
mask: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/arrow_s.svg) center / contain no-repeat;
}
.footer_box .ft_btn--entry a::after{ background: var(--white); } .footer_box .ft_btn--contact a::after{ background: var(--color_01); } .footer_box .ft_btn a:hover::after{ transform: translate(6px, -50%); }
@media (prefers-reduced-motion: reduce){
.footer_box .ft_btn a::after{ transition: none; }
} @media screen and (max-width: 1200px){
.footer_box .tel_number{ flex: 0 0 100%; } }
@media screen and (max-width: 960px){
.footer_box .tel_number > a{ font-size: clamp(2.6rem, 6vw, 3.6rem); }
.footer_box .ft_btn a{ padding: 10px; }
.footer_box .ft_btn a::after{ width: 14px; height: 14px; } } .footer_box .ft_company{
text-align: center;
margin-top: 40px;
}
.footer_box .ft_address{
color: var(--color_01);
font-size: 1.6rem;
}
@media screen and (max-width: 960px){
.footer_box .ft_address{
font-size: 1.4rem;
}
}
.bg_f1{
position: relative; background: var(--color_01);
color: var(--white);
padding: 12px 40px;
}
.bg_f1 .t_center{ margin: 0; }  .bg_f1 .policy{
position: absolute;
right: 10%;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
.bg_f1 .policy a{
color: var(--white);
font-size: 1.2rem;
cursor: pointer;
}
.bg_f1 .policy a:hover{ text-decoration: underline; }
@media screen and (max-width: 960px){
.bg_f1{
padding: 12px 15px;
display: flex;
flex-direction: column;
align-items: center;
} .bg_f1 .policy{
position: static;
transform: none;
order: -1; text-align: center;
margin: 0 0 8px;
}
} .ttl_01 {
font-size: clamp(2.4rem, 8vw, 8rem); font-family: 'M PLUS 1p', sans-serif;
font-weight: 900;
text-align: center;
display: inline-block;
max-width: 100%; margin-bottom: 80px;
letter-spacing: -0.05em;
line-height: 1.2;
}
@media screen and (max-width: 960px) {
.ttl_01 {
margin-bottom: 40px;
}
} @media screen and (max-width: 960px) {
.content_02 .ttl_01 { margin-bottom: 80px;}
.content_02 .ttl_01 .l{ transform-origin: center; } }
@media screen and (max-width: 767px) {
.content_02 .ttl_01 { font-size: 5rem; margin-bottom: 60px;}
} .ttl_01 .l{
display: inline-block;
transform: skewX(-15deg);
transform-origin: left bottom;
white-space: nowrap; } .ttl_01 span:not(.l):not(.cm){
color: var(--color_01);
} .ttl_01 .cm{
margin-right: -0.6em;
}
.ttl_01.white{
background: none; text-align: left;
position: relative;
isolation: isolate; padding: 0 .5em 0 0; z-index: 2; margin-bottom: 0; margin-left:2%;
transform: translateY(-4vw); } .ttl_01.white::before{
content: "";
position: absolute;
inset: 0;
background: var(--white);
z-index: -1; } .btn_more.right {
text-align: right;
}
.btn_more.center {
text-align: center;
}
.btn_more a {
border-bottom: 1px solid;
font-size: 1.6rem;
font-weight: bold;
letter-spacing: 1px;
padding-bottom: 5px;
}
@media screen and (max-width: 960px) {
.btn_more a {
font-size: 1.4rem;
}
}
.btn_01 a {
display: block;
width: 400px;
max-width: 100%;
background:var(--color_01);
border: var(--color_01) 1px solid;
padding: 15px;
box-sizing: border-box;
text-align: center;
color: #fff;
font-size: 1.6rem;
position:relative;
}
.btn_01 a::before {
position:absolute;
content:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/arrow_s_w.png);
width:20px;
height:20px;
right:20px;
}
@media screen and (max-width : 960px) {
.btn_01 a {
width: 100%;
font-size: 1.5rem;
}
}
.btn_01.center a {
margin: 0 auto;
}
.btn_01 a:hover {
background: var(--white);
opacity: 1;
color: var(--color_01);
}
.btn_01 a:hover::before {
position:absolute;
content:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/arrow_s.png);
width:20px;
height:20px;
right:20px;
}
.btn_01.mini a {
width: 260px;
padding: 10px;
font-size: 1.3rem;
}
@media screen and (max-width : 960px) {
.btn_01.mini a {
width: 100%;
margin: 0 auto;
}
}
.btn_02 a {
display: block;
width: 400px;
max-width: 100%;
margin: 0 auto;
border: var(--color_01) 2px solid;
background: var(--white);
color: var(--color_01);
font-size: 1.6rem;
font-weight: bold;
text-align: center;
padding: 15px;
border-radius: 50px;
}
@media screen and (max-width : 960px) {
.btn_02 a {
width: 100%;
font-size: 1.5rem;
}
}
.btn_02 a:hover {
border: var(--color_01) 2px solid;
background: var(--color_01);
color: var(--white);
}
.btn_r {
position: absolute;
top: 0;
right: 0;
}
@media screen and (max-width : 960px) {
.btn_r {
position: static;
margin-top: 20px;
}
} .post-categories {
display: inline-block;
}
.icon_list li, .post-categories li, .news_ico {
display: inline-block;
text-align: center;
}
.icon_list li a, .post-categories li a {
min-width: 50px;
display: inline-block;
padding: 5px 10px;
border-radius: 50px;
font-size: 1.2rem;
color: var(--white);
background-color: var(--color_01);
line-height: 1;
} .flex_box01 {
display: flex;
align-items: center;
}
.flex_box01 div, .flex_box01 li {
margin-right: 10px;
} .relative {
position: relative;
}
.indent_content {
padding: 150px 0;
}
@media screen and (max-width: 960px) {
.indent_content {
padding: 50px 15px;
}
}
.indent_content_b {
padding: 0 0 150px;
}
@media screen and (max-width: 960px) {
.indent_content_b {
padding:0 15px 50px;
}
}
.sp_center {}
@media screen and (max-width : 960px) {
.sp_center {
text-align: center;
}
} .sp_none {}
@media screen and (max-width : 960px) {
.sp_none {
display: none;
}
}
.pc_none {
display: none;
}
@media screen and (max-width : 960px) {
.pc_none {
display: inherit;
}
}
.sp_indent15_lr {}
@media screen and (max-width : 960px) {
.sp_indent15_lr {
padding: 0 15px;
}
}
@media screen and (max-width : 960px) {
figure {
text-align: center;
}
}
.lh_2 {
line-height: 2;
}
@media screen and (max-width: 960px) {
.lh_2 {
line-height: 1.6;
}
}
.sp_mb10, .sp_mb15, .sp_mb20, .sp_mb30 {
margin-bottom: 0;
}
@media screen and (max-width: 960px) {
.sp_mb10 {
margin-bottom: 10px;
}
.sp_mb15 {
margin-bottom: 10px;
}
.sp_mb20 {
margin-bottom: 20px;
}
.sp_mb30 {
margin-bottom: 30px;
}
}
.loop-wrap {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
height: 100%; width: 40px;
background: #fff;
z-index: 100000; }
@media screen and (max-width: 960px){ .loop-wrap { position: fixed;
top: 0;
bottom: auto;
left: 0;
width: 100%; height: 30px; border-bottom: var(--color_01) 1px solid;
}
.loop-wrap.right { position: fixed;
top: auto;
bottom: 0;
left: 0;
right: auto;
width: 100%;
height: 30px;
border-top: var(--color_01) 1px solid;
}
}
.loop-wrap.right {
left: auto;
right: 0;
} .loop-wrap::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: calc(100% + 298px); background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/loop_yamato_txt.webp) center top / 24px auto repeat-y;
animation: loop-up 3s linear infinite;
will-change: transform;
}
.loop-wrap.right::before {
top: -298px; animation-name: loop-down;
}
@media screen and (max-width: 960px){ .loop-wrap::before {
left: -133px; right: auto;
top: 0;
bottom: 0;
width: calc(100% + 133px); height: 100%;
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/sp_loop_yamato_txt.webp) left center / 133px 11px repeat-x;
animation-name: sp-loop-right;
} .loop-wrap.right::before {
left: 0; right: auto;
top: 0;
bottom: 0;
width: calc(100% + 133px);
height: 100%;
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/sp_loop_yamato_txt.webp) left center / 133px 11px repeat-x;
animation-name: sp-loop-left;
}
}
@keyframes loop-up { from { transform: translateY(0); }
to   { transform: translateY(-298px); }
}
@keyframes loop-down { from { transform: translateY(0); }
to   { transform: translateY(298px); }
}
@keyframes sp-loop-right { from { transform: translateX(0); }
to   { transform: translateX(133px); }
}
@keyframes sp-loop-left { from { transform: translateX(0); }
to   { transform: translateX(-133px); }
}
@media (prefers-reduced-motion: reduce){
.loop-wrap::before{ animation: none; }
}
.bg_orange{
background:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/bg_main.webp) left top repeat;
width:calc(100% - 80px);
margin:0 auto;
padding-bottom: 25%; }
@media screen and (max-width: 960px){
.bg_orange{
width:100%;
}
} .ggmap iframe {
border: none;
}
@media screen and (max-width: 960px) {
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe, .ggmap object, .ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
margin-bottom: 30px;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
} .plate_box{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/plate.webp) center top no-repeat;
background-size: cover;
padding: 230px 0;
}
@media screen and (max-width: 960px){
.plate_box{
padding: 110px 0;
}
}
.plate_box > div{
position: relative;
isolation: isolate; width: 1200px;
margin: 0 auto;
}
@media screen and (max-width: 1200px){
.plate_box > div{
width: 100%;
}
}
.plate_box > div::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 55%; aspect-ratio: 968 / 2015; background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/idome.webp) right top / contain no-repeat;
z-index: -1; pointer-events: none;
}
@media screen and (max-width: 1200px){
.plate_box > div::before{
right: 20px;
}
} .veg-reveal{
overflow: hidden; }
.veg-reveal img{
display: block;
width: 100%;
height: auto;
transform: translateY(100%);
transition: transform 1s cubic-bezier(.22,1,.36,1);
will-change: transform;
}
.veg-reveal.is-shown img{
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
.veg-reveal img{ transform: none; transition: none; }
} .kv__name{
font-weight:900;
line-height:1.02;
letter-spacing:.01em;
font-family: "M PLUS 1p", sans-serif;
}
.kvName{
display:block; font-size:clamp(3rem, 16vw, 20rem);
white-space:nowrap;
}
@media screen and (max-width: 960px){
.kvName{
padding: 0 20px;
}
}
.kvName .char-mask{
display:inline-block;
overflow:hidden;
vertical-align:bottom;
padding-top:.1em;
margin-top:-.1em;
}
.kvName .char{
display:inline-block;
transform:translateY(100%);
transition:transform var(--dur) var(--ease);
}
.kvName.is-animated .char{ transform:translateY(0); }
.en_kv{font-family: "Poppins", sans-serif;font-weight:bold;line-height:1.4;margin:0; text-transform: uppercase; font-style: italic; letter-spacing: 0.2em; margin-top: 60px;}
@media screen and (max-width: 960px){
.en_kv{letter-spacing: 0; margin-top: 15px;}
}
@media screen and (max-width: 960px){
.en_kv{
padding: 0 20px;
}
}
.en_kv>span{display:block;font-size:clamp(1.4rem,5vw,5rem);white-space:nowrap}
.en_kv .m{display:inline-block;overflow:hidden;vertical-align:bottom;padding-top:.1em;margin-top:-.1em}
.en_kv .c{display:inline-block;transform:translateY(100%);transition:transform .9s cubic-bezier(.25,1,.5,1)}
.en_kv .on .c{transform:translateY(0)}
@media(prefers-reduced-motion){.en_kv .c{transition:none;transform:none}}
.content_01{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/bg_logo.webp) right center no-repeat;
font-size: clamp(1.8rem, 3.3vw, 4rem); font-weight:900;
color: var(--white);
background-size: 50%;
padding: 50px 20px;
}
.content_01 > div{
width: 1200px;
margin: 0 auto;
}
@media screen and (max-width: 1200px){
.content_01 > div{
width: 100%;
}
}
.content_02{
background: var(--color_04); padding-top: 40px;
position: relative;
width: calc(100% - 80px);
margin: 0 auto;
z-index: 1; }
@media screen and (max-width: 960px){
.content_02{
width: 100%;
}
} .content_02::before{
content:"";
position:absolute;
left:0;
bottom:100%; width:100%;
aspect-ratio: 1920 / 460; background:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/arch.svg) center bottom / 100% 100% no-repeat;
pointer-events:none;
} .bg_beige{
margin-top:-15%;
text-align: center;
}
@media screen and (max-width: 960px) {
.bg_beige{
padding: 0 20px;
}
}
.content_02 > .bg_white{
position: relative;
z-index: 2; margin-top: 0; padding: 0 0 60px; overflow-x: clip;
overflow-y: visible;
}
@media screen and (max-width: 960px) {
.content_02 > .bg_white{
padding: 0;
}
} .content_02 > .bg_white::before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:-40px;
background:#fff;
transform: skewY(-3deg); transform-origin: center;
z-index:-1; } .ttl_hukidashi{
max-width: 965px;
margin: 0 auto; aspect-ratio: 965 / 206.026;
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/ttl_hukidashi01.svg) center / contain no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
position: relative;
margin-bottom: 80px;
}
@media screen and (max-width: 960px) {
.ttl_hukidashi{
margin-bottom: 40px;
}
}
.ttl_hukidashi > h3{
color: var(--color_01, #f2662b);
font-weight: 900;
font-size: clamp(3rem, 6.2vw, 6rem); }
.ttl_hukidashi_in{
background: var(--color_01);
font-size: clamp(1.8rem, 3.8vw, 3.6rem); color: var(--white);
line-height: 1;
padding: 15px 30px;
border-radius: 50px;
position: absolute;
top: -30px;
left:0;
right:0;
margin: 0 auto;
width:415px;
font-weight: 900;
}
@media screen and (max-width: 960px) {
.ttl_hukidashi_in{
width: 60%;
padding: 10px 20px;
top: -20px;
}
} .slider_loop{
margin-top: 60px;
overflow: hidden; width: 108%; position: relative;
left: 50%;
transform: translateX(-50%);
}
.slider_loop + .slider_loop{
margin-top: 24px;
} .slider_loop_01{
transform: translateX(-50%) rotate(-3deg);
z-index: 2 !important;
} .slider_loop_02{
transform: translateX(-50%) rotate(3deg);
z-index: 1 !important;
margin-top: -30px !important; }
@media screen and (max-width: 960px) {
.slider_loop_02{
margin-top: -5px !important; }
} .marquee__track{
display: flex;
width: max-content;
will-change: transform;
}
.marquee__item{
flex: 0 0 auto;
margin-right: 20px; line-height: 0;
}
.marquee__item img{ display: block; width: 100%; height: auto; } .slider_loop_01 .marquee__item,
.slider_loop_02 .marquee__item{ width: 33vw; }
.slider_loop_03 .marquee__item{ width: 33vw; }
.slider_loop_01 .marquee__track{ animation: marquee-x 30s linear infinite; } .slider_loop_02 .marquee__track{ animation: marquee-x 30s linear infinite reverse; } .slider_loop_03 .marquee__track{ animation: marquee-x 40s linear infinite; } @keyframes marquee-x{
from{ transform: translateX(0); }
to  { transform: translateX(-33.333%); }
}
@media (prefers-reduced-motion: reduce){
.marquee__track{ animation: none; }
}
@media screen and (max-width: 960px) {
.slider_loop{ margin-top: 0; } .slider_loop_01 .marquee__item,
.slider_loop_02 .marquee__item{ width: 24vw; margin-right: 10px; }
.slider_loop_03 .marquee__item{ width: 48vw; }
} .cards_pop{
position: relative;
z-index: 0; display: flex;
justify-content: center; align-items: center;
gap:90px;
margin-bottom: -11%;
}
@media screen and (max-width: 960px){
.cards_pop{
gap:10px;
margin-bottom: -11%; }
}
.card_pop{ line-height: 0; }
.card_pop--01{ z-index: 1; } .card_pop--02{ z-index: 2; margin-left: -70px; }  .card_pop img{ box-shadow: 0 -5px 10px rgba(0,0,0,.15); } .card_pop--01 img{ transform: rotate(-10deg);width: 560px; }
.card_pop--02 img{ transform: rotate(10deg);width: 560px; } @media screen and (max-width: 960px){
.card_pop--01 img,
.card_pop--02 img{ width: 45vw; }
.card_pop--02{ margin-left: -18px; }
} .js-pop{
opacity: 0;
transform: translateY(190px);
transition: transform .7s cubic-bezier(.22,1.4,.4,1), opacity .45s ease;
will-change: transform;
}
.js-pop.is-shown{
opacity: 1;
transform: translateY(0);
}
.card_pop--02.js-pop{ transition-delay: .35s; } @media (prefers-reduced-motion: reduce){
.js-pop{ transition: opacity .3s ease; transform: none; }
}
.content_03{
padding: 40px 0 200px;
width: calc(100% - 80px);
margin: 0 auto;
}
@media screen and (max-width: 960px){
.content_03{
width: 100%;
padding: 40px 0 80px;
}
}
.img_80th{
width: 80%;
} .img_80th.is-spun {
animation: rotation-y 1.2s ease both;
} @keyframes rotation-y {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.content_03 p{
font-size: clamp(2rem, 5vw, 4rem); font-weight: 900;
text-align: center;
}
.content_04{
width: calc(100% - 80px);
margin: 0 auto;
text-align: left;
}
@media screen and (max-width: 960px){
.content_04{
width: 100%;
}
}
.capacity_box{
display: flex;
position: relative;
z-index: 1;  margin-top: -8vw;
}
.capacity_box > div{
width: 50%;
padding: 220px 0 0;
box-sizing: border-box;
position: relative; display: flex;
flex-direction: column;
justify-content: flex-end; }
@media screen and (max-width: 960px){
.capacity_box > div{
padding: 60px 0 0;
}
}
.capacity_box > div:nth-child(1){
background:var(--color_01);
}
.capacity_box > div:nth-child(2){
background:var(--color_02);
}
.content_04 .ttl_01_02{}
.capacity_box > div > figure{
max-width :560px;
width: 100%;
} .js-fly{
opacity: 0;
transition: transform .8s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
transition-delay: .35s; will-change: transform;
}
.js-fly.fly-left{ margin-left: auto; margin-right: 0;
transform-origin: right center;
transform: scale(0);
}
.js-fly.fly-right{ margin-right: auto; margin-left: 0;
transform-origin: left center;
transform: scale(0);
}
.js-fly.is-shown{ opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce){
.js-fly{ transition: opacity .4s ease; transform: none; }
} .js-donn{
position: absolute;
top: 50%;
left: 50%;
z-index: 3; width: min(687px, 55%); margin: 0;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%) scale(1.5); transition: transform .55s cubic-bezier(.2,.9,.25,1), opacity .3s ease;
transition-delay: 1.1s; will-change: transform;
}
.js-donn img{ width: 100%; height: auto; display: block; }
.js-donn.is-shown{
opacity: 1;
transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce){
.js-donn{ transition: opacity .3s ease; transform: translate(-50%, -50%); }
}
.content_05{
width: 100%; overflow-x: clip;
overflow-y: visible;
}
.content_05 > div{
width: calc(100% - 80px);
margin: 0 auto;
padding: 100px 0 280px;
position: relative; }
@media screen and (max-width: 960px){
.content_05 > div{
width: 100%;
padding: 50px 0 250px; }
}
@media screen and (max-width: 767px){
.content_05 > div{
padding: 50px 0 180px; }
} .content_05 > div > .ship{
position: absolute;
right: -45px;
bottom: 12%;
width: 45%;
margin: 0;
z-index: 4;
opacity: 0;
transform: translateX(130%); transition: transform 1.2s cubic-bezier(.2,.85,.25,1), opacity .5s ease;
will-change: transform;
z-index: 100;
}
@media screen and (max-width: 960px){
.content_05 > div > .ship{
right: 15px;
bottom: 15%; width: 45%;
}
}
@media screen and (max-width: 767px){
.content_05 > div > .ship{
bottom: 20%; }
}
.content_05 > div > .ship img{ width: 100%; height: auto; display: block; }
.content_05 > div > .ship.is-shown{ opacity: 1; transform: translateX(0); } .content_05 > div > .truck{
position: absolute;
left: 2%;
bottom: -50px;
width: 45%;
margin: 0;
z-index: 4;
opacity: 0;
transform: translateX(-130%); transition: transform 1.2s cubic-bezier(.2,.85,.25,1), opacity .5s ease;
will-change: transform;
}
@media screen and (max-width: 960px){
.content_05 > div > .truck{
left: 20px;
bottom: 5%; }
}
@media screen and (max-width: 767px){
.content_05 > div > .truck{
bottom: 10%; }
}
.content_05 > div > .truck img{ width: 100%; height: auto; display: block; }
.content_05 > div > .truck.is-shown{ opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce){
.content_05 > div > .ship,
.content_05 > div > .truck{ transition: opacity .4s ease; transform: none; }
}
.txt_box{
display: flex;
justify-content: space-between;
text-align: left;
padding: 0 2%;
align-items: center;
position: relative;
z-index: 2;
}
@media screen and (max-width: 960px){
.txt_box{
flex-wrap: wrap;
gap:30px;
}
}
.txt_box .ttl_01{
text-align: left;
margin-bottom: 0;
}
.txt_box > p{
font-size: clamp(2rem, 2.6vw, 4rem); font-weight:900;
} .map_wrap{
position: relative;
display: block;
line-height: 0;
margin-top:-100px;
width: 100%; }
@media screen and (max-width: 960px){
.map_wrap{
margin-top:-10px;
}
}
@media screen and (max-width: 767px){
.map_wrap{ width: 130%;
}
}
.map_wrap .map{
display: block;
width: 100%;
height: auto;
}
.map_lines{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden; pointer-events: none;
} .map_lines .routes{
filter: drop-shadow(0 3px 5px rgba(0,0,0,.2));
} .map_lines .routes path{
fill: none;
stroke: var(--color_01);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 3200; stroke-dashoffset: 3200; }
.js-map.is-shown .routes path{
animation: mapdraw 1s cubic-bezier(.4,0,.2,1) forwards;
animation-delay: var(--d, 0s);
} .js-map.is-shown .routes path:not(.dom){
animation-delay: calc(var(--d, 0s) + 0.3s);
}
@keyframes mapdraw{ to { stroke-dashoffset: 0; } } .map_lines .dots circle{
opacity: 0;
transform: scale(0);
transform-box: fill-box; transform-origin: center;
}
.map_lines .dots .dot{ fill: var(--color_01); } .map_lines .dots .ring{ fill: #fff; r: 10px; } .map_lines .dots .core{ fill: var(--color_01); r: 5px; } .map_lines .dots circle.hub{ opacity: 1; transform: scale(1); } .js-map.is-shown .dots circle{
animation: mapdot .45s cubic-bezier(.34,1.56,.64,1) forwards;
animation-delay: var(--d, 0s);
} .js-map.is-shown .dots .dot{
animation-delay: calc(var(--d, 0s) + 1.0s);
}
@keyframes mapdot{ to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce){
.map_lines .routes path{ stroke-dashoffset: 0; animation: none; }
.map_lines .dots circle{ opacity: 1; transform: scale(1); animation: none; }
}
.capacity_box > div > p:first-child{
font-size: clamp(3.6rem, 10vw, 16rem); font-weight:bold;
color: var(--white);
font-family: "Poppins", 'Noto Sans JP' , sans-serif;
letter-spacing: -0.05em;
} .capacity_box > div > .js-num{
position: absolute;
top: calc(220px + 100px); left: 0;
right: 0;
text-align: center; z-index: 2; margin: 0; opacity: 0;
transform: translateY(16px) scale(.7);
transform-origin: center bottom;
transition: transform .55s cubic-bezier(.34,1.7,.64,1), opacity .3s ease;
will-change: transform;
}
@media screen and (max-width: 960px){
.capacity_box > div > .js-num{
top: calc(60px + 50px); }
}
.capacity_box > div > .js-num.is-shown{
opacity: 1;
transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
.capacity_box > div > .js-num{ transition: opacity .3s ease; transform: none; }
}
.capacity_box > div > p:first-child > span{
font-size: clamp(2.6rem, 5.7vw, 7rem); }
.capacity_box > div > p:last-child{
width:60%;
margin:0 auto;
}
@media screen and (max-width: 960px){
.capacity_box > div > p:last-child{
width:90%;
}
}
.content_06{
width: calc(100% - 80px);
margin: 0 auto;
padding: 200px 2% 150px;
background:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/bg_main.webp) left top repeat;
position: relative;
}
@media screen and (max-width: 960px){
.content_06{
padding: 150px 20px 100px; width: 100%;
}
}
@media screen and (max-width: 767px){
.content_06{
padding: 15% 20px 50px; }
}
.content_06 .ttl_01{
position:absolute;
top:-50px;
right:2%;
}
@media screen and (max-width: 960px){
.content_06 .ttl_01{
top:-25px;
right:20px;
}
} .tab_label{
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 30px; } .tab_btn{
position: relative; margin: 0; width: 590px;
max-width: 100%;
padding: 20px;
text-align: center;
font-size: clamp(1.8rem, 3.3vw, 4rem); font-weight: 900;
cursor: pointer;
background: var(--white);
color: var(--color_01);
border-radius: 10px;
opacity: .6;
transition: opacity .25s ease;
} .tab_btn.is-active::after{
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
border: 14px solid transparent;
border-bottom: 0;
border-top-color: var(--white);
transform: translateX(-50%);
}
@media screen and (max-width: 960px){
.tab_label{ margin-bottom: 20px; }
.tab_btn{
padding: 10px;
}
.tab_btn.is-active::after{ border-width: 10px; border-bottom: 0; }
} .tab_btn.is-active{
opacity: 1;
} .tab_label--btm{
margin-top: 30px;
margin-bottom: 0;
}
.tab_label--btm .tab_btn.is-active::after{ content: none; } .tab_box > .tab_panel{ display: none; }
.tab_box > .tab_panel.is-active{ display: block; }
.tab_box > div{
background: var(--white);
padding:60px 10%;
}
@media screen and (max-width: 960px){
.tab_box > div{
padding:30px 20px;
}
}
.tab_box > div ul > li{
margin-bottom:20px;
}
.tab_box > div ul > li:last-child{
margin-bottom:0;
}
.tab_box > div ul > li > a{
display: block;
text-align: left;
background-size: cover !important;
padding: 50px 50px 200px;
position: relative;
}
@media screen and (max-width: 960px){
.tab_box > div ul > li > a{
padding: 10px 10px 135px;
}
}
.tab_box > div:first-child ul > li:nth-child(1) > a{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/bnr_01_01.webp) center top no-repeat;
}
.tab_box > div:first-child ul > li:nth-child(2) > a{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/bnr_01_02.webp) center top no-repeat;
}
.tab_box > div:first-child ul > li:nth-child(3) > a{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/bnr_01_03.webp) center top no-repeat;
}
.tab_box > div:first-child ul > li:nth-child(4) > a{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/bnr_01_04.webp) center top no-repeat;
}
.tab_box > div:last-child ul > li:nth-child(1) > a{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/bnr_02_01.webp) center top no-repeat;
}
.tab_box > div:last-child ul > li:nth-child(2) > a{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/bnr_02_02.webp) center top no-repeat;
}
.tab_box > div:last-child ul > li:nth-child(3) > a{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/bnr_02_03.webp) center top no-repeat;
}
.tab_box > div > h3{
color: var(--color_01);
font-size: clamp(2.6rem, 5vw, 6rem); font-weight: 900;
text-align: center;
margin-bottom: 60px;
}
@media screen and (max-width: 960px){
.tab_box > div > h3{
margin-bottom: 30px;
}
}
.tab_box > div ul > li h4{
background: var(--color_01);
color: var(--white);
font-size: clamp(2.4rem, 5vw, 5rem); font-weight: 900;
padding:0 10px;
display: inline-block;
}
.tab_box > div ul > li p:nth-child(2){
font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 900;
line-height: 1.4;
padding: 0 5px; }
.tab_box > div ul > li p:nth-child(2) span{
background: var(--white);
padding: 0 5px;
margin: 0 -4px; } .tab_box ul > li p:nth-child(3){
position: absolute;
right: 30px;
bottom: 30px;
margin: 0;
z-index: 2;
width: min(170px, 30%);
}
@media screen and (max-width: 960px){
.tab_box ul > li p:nth-child(3){
right: 10px;
bottom: 10px;
}
}
.tab_box ul > li p:nth-child(3) img{
display: block;
width: 100%;
height: auto;
}
.content_07{
width: calc(100% - 80px);
margin: 0 auto;
padding: 150px 2%;
background:var(--color_04);
text-align: left;
}
@media screen and (max-width: 960px){
.content_07{
width: 100%;
padding: 50px 20px;
}
}
.content_07 .ttl_01{
text-align: left !important;
} .content_07 .ttl_01 .br_sp{ display: none; }
@media screen and (max-width: 1300px){
.content_07 .ttl_01 .br_sp{ display: inline; }
}
.shop_box{
display: flex;
gap:20px;
flex-wrap: wrap;
}
.shop_box > div{
width: calc(50% - 10px);
background: #fff;
position: relative; padding: 60px 5%;
box-sizing: border-box;
position: relative;
text-align: center;
}
@media screen and (max-width: 960px) {
.shop_box > div{
width: 100%;
padding: 30px 20px;
}
} .shop_box > div::before{
content: "";
position: absolute;
inset: 10px; border: 3px solid var(--color_01);
pointer-events: none; }
@media screen and (max-width: 960px) {
.shop_box > div::before{
inset: 5px; border: 2px solid var(--color_01);
}
}
.shop_box > div > h3{
color: var(--color_01);
font-size: clamp(2.4rem, 5vw, 5rem); font-weight: 900;
}
.shop_box > div> p:nth-child(2){
font-weight: bold;
margin: 30px 0 60px;
}
@media screen and (max-width: 960px) {
.shop_box > div> p:nth-child(2){
margin: 15px 0 30px;
}
}
.shop_box > div:first-child .more_btn{
position:absolute;
width: 30%;
bottom: 20px;
right: 20px;
}
@media screen and (max-width: 960px) {
.shop_box > div:first-child .more_btn{
width: 30%;
bottom: 10px;
right: 10px;
} 
} .shop_box > div:first-child figure img{
display: block;
width: 100%;
height: 380px; object-fit: cover; }
@media screen and (max-width: 960px){
.shop_box > div:first-child figure img{
height: 280px;
}
}
@media screen and (max-width: 767px){
.shop_box > div:first-child figure img{
height: 180px;
}
}
.shop_box > div:last-child > p:nth-child(3) > a,
.shop_box > div:last-child > p:nth-child(4) > a{
display: block;
position: relative; text-align: center; font-size: clamp(2rem, 2.4vw, 4rem); font-weight: bold;
padding: 60px 6%; width: 100%;
box-sizing: border-box;
border-radius: 10px;
}
@media screen and (max-width: 960px) {
.shop_box > div:last-child > p:nth-child(3) > a,
.shop_box > div:last-child > p:nth-child(4) > a{
padding: 30px 5%; }
} .shop_box > div:last-child > p > a::after{
content: "";
position: absolute;
right: 6%;
top: 50%;
width: 48px;
height: 48px;
transform: translateY(-50%);
background: center / contain no-repeat;
transition: transform .3s var(--ease);
}
.shop_box > div:last-child > p > a:hover::after{
transform: translateY(-50%) translateX(8px);
} @media screen and (max-width: 960px){
.shop_box > div:last-child > p > a::after{
right: 5%;
width: 24px;
height: 24px;
}
}
.shop_box > div:last-child > p:nth-child(3) > a{
background: var(--color_01);
color: var(--white);
margin-bottom: 10px;
} .shop_box > div:last-child > p:nth-child(3) > a::after{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,0A15,15,0,1,1,0,15,15,15,0,0,1,15,0Z' fill='%23fff'/%3E%3Cpath d='M5,10,8.572,6.429H0V3.572H8.572L5,0h5l5,5h0l-5,5Z' transform='translate(8 10)' fill='%23F2662B'/%3E%3C/svg%3E");
}
.shop_box > div:last-child > p:nth-child(4) > a{
background: var(--white);
color: var(--color_01);
border: var(--color_01) 5px solid;
}
@media screen and (max-width: 960px) {
.shop_box > div:last-child > p:nth-child(4) > a{
border: var(--color_01) 3px solid;
}
} .shop_box > div:last-child > p:nth-child(4) > a::after{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,0A15,15,0,1,1,0,15,15,15,0,0,1,15,0Z' fill='%23F2662B'/%3E%3Cpath d='M5,10,8.572,6.429H0V3.572H8.572L5,0h5l5,5h0l-5,5Z' transform='translate(8 10)' fill='%23fff'/%3E%3C/svg%3E");
}
.content_08{
width: calc(100% - 80px);
margin: 0 auto;
padding: 150px 2% 250px;
text-align: left;
}
@media screen and (max-width: 960px){
.content_08{
width: 100%;
padding: 50px 20px 150px;
} .slider_loop_03{
width: calc(100% + 40px); margin-left: -20px; margin-right: 0;
left: auto;
transform: none;
}
}
@media screen and (max-width: 767px){
.content_08{
padding: 50px 20px 100px;
}
}
.content_08 .ttl_01{
text-align: left;
} .content_08_head{
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
margin-bottom: 60px;
} @media screen and (max-width: 960px){
.content_08_head{
flex-direction: column;
align-items: flex-start;
gap: 24px;
} .content_08 .btn_orange{
width: 90%;
margin: 0 auto;
}
}
.content_08_head .btn{
margin-top: 0; flex: 0 0 auto;
}
.content_08_head .btn > a{
box-shadow: none;
}
.content_08_head > p:first-child{
font-weight: bold;
}
.content_09{
width: calc(100% - 80px);
margin: 0 auto;
padding: 150px 2%;
text-align: left;
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/bg_main.webp) left top repeat;
position: relative;
}
@media screen and (max-width: 960px){
.content_09{
width: 100%;
padding: 15% 20px 150px;
}
}
.content_09 .ttl_01{
position:absolute;
top: -50px;
left: 0;
}
@media screen and (max-width: 767px){
.content_09 .ttl_01{
top: -25px;
}
}
.content_09 > p{
color: var(--white);
font-weight: bold;
text-align: left;
} .content_09 > div{
position: absolute;
right: 0;
bottom:-10%;
width: 50%;
margin: 0;
z-index: 2; }
@media screen and (max-width: 960px){
.content_09 > div{
position: relative; right: auto;
bottom: auto;
width: calc(100% - 40px);
margin: 15% auto -200px;
}
}
.content_09 figure img{
display: block;
width: 100%;
height: auto;
} .content_09 .deco{
position: absolute;
z-index: -1; height: auto;
opacity: 0;
transform: translateY(90px); transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .4s ease;
will-change: transform;
}
.content_09 .deco.is-shown{ opacity: 1; transform: translateY(0); } .content_09 .deco--02.is-shown{ transition-delay: .18s; }
.content_09 .deco--03.is-shown{ transition-delay: .36s; } .content_09 .deco--01{ right: 15%;  top: -38%;    width: 15%; }
.content_09 .deco--02{ right: 57%; top: 6%;    width: 15%; }
.content_09 .deco--03{ left: 4%;   bottom: 33%; width: 19%; }
@media (prefers-reduced-motion: reduce){
.content_09 .deco{ transition: opacity .3s ease; transform: none; }
} .content_10{
width: calc(100% - 80px);
margin: 0 auto;
padding: 100px 0;
text-align: center;
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/noren.webp) center bottom no-repeat;
background-size: 110%;
position: relative; z-index: 1;
}
@media screen and (max-width: 960px){
.content_10{
width: 100%;
padding: 80px 20px 120px;
} .content_10 .morph_slider{
width: calc(100% + 40px);
margin-left: -20px;
}
}
@media screen and (max-width: 767px){
.content_10{
padding: 80px 20px;
}
} .content_10 .btn_orange a{
border: none;
box-shadow: none;
}
.content_10 .btn_orange a:hover{
box-shadow: none;
} .bg_food.is-front{
position: relative;
z-index: 0; margin-top: -15%; }
.morph_slider{
--morph-d: clamp(200px, 26vw, 350px); position: relative;
width: 100%;
height: calc(var(--morph-d) + 20px); margin-top: 60px;
overflow: hidden;
}
@media screen and (max-width: 960px){
.morph_slider{
margin-top: 30px;
}
} .morph_layer{
position: absolute;
inset: 0;
}
.morph_track{
position: absolute;
top: 50%; left: calc(50% - var(--morph-d) * 3.5);
width: max-content; display: flex;
align-items: center;
transform: translate(0, -50%);
animation: morph-scroll 24s linear infinite; animation-play-state: paused; will-change: transform;
} .morph_slider.is-shown .morph_track{ animation-play-state: running; }
.morph_item{
flex: 0 0 auto;
width: var(--morph-d); display: flex;
align-items: center;
justify-content: center;
}
.morph_item img{
display: block;
width: auto;
height: auto;
max-width: calc(var(--morph-d) * 0.72); max-height: calc(var(--morph-d) * 0.72);
} .morph_kako{
clip-path: circle(calc(var(--morph-d) / 2) at 50% 50%); background:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/top/face.webp) center center no-repeat, var(--color_01); background-size: calc(var(--morph-d) * 0.5) auto, auto; } @keyframes morph-scroll{
from{ transform: translate(0, -50%); }
to{   transform: translate(calc(var(--morph-d) * -3), -50%); }
} .morph_ring{
position: absolute;
top: 50%;
left: 50%;
width: var(--morph-d); height: var(--morph-d);
transform: translate(-50%, -50%);
border: 10px solid var(--color_01);
border-radius: 50%;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
.morph_track{ animation: none; }
} .box_contact{
background: var(--color_01); position: relative; text-align: center;
color: var(--white);
padding: 60px 2%;
width: calc(100% - 80px);
margin: 0 auto;
overflow-x: clip; overflow-y: visible; }
@media screen and (max-width: 960px){
.box_contact{
padding: 60px 20px;
width:100%;
}
} .box_contact::before{
content:"";
position:absolute;
left:0;
bottom:100%; width:100%;
aspect-ratio: 1840 / 407; background:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/arch_orange.svg) center bottom / 100% 100% no-repeat;
pointer-events:none;
}
.box_contact > div{
margin-top: -150px;
position: relative;
}
@media screen and (max-width: 1200px){
.box_contact::before{bottom: calc(100% - 1px);}
}
@media screen and (max-width: 960px){
.box_contact > div{
margin-top: -20%;
}
}
.box_contact > div > p:first-child{
color: var(--color_01);
background: var(--white);
border-radius: 30px;
line-height: 1.2;
font-weight: 900;
font-size: clamp(1.6rem, 2.4vw, 3rem); display: inline-block;
padding: 10px 30px;
}
.box_contact > div > h2{
font-weight: 900;
font-size: clamp(2.2rem, 4vw, 5rem); line-height: 1.4;
margin: 30px 0 80px;
}
@media screen and (max-width: 960px){
.box_contact > div > h2{
margin: 15px 0 30px;
}
}
.box_contact .tel_number > a{
display: inline-flex;
align-items: center;
gap: 0.15em;
font-size: clamp(4rem, 8vw, 10rem); font-style: italic;
font-weight: bold;
font-family: 'Poppins', sans-serif;
letter-spacing: -0.1em;
color: var(--white);
}
@media screen and (max-width: 960px){
.box_contact .tel_number > a{
margin-bottom: 30px;
}
} .box_contact .tel_number > a::before{
content: "";
flex: none;
width: 0.8em;
height: 0.8em;
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/tel.svg) center / contain no-repeat;
} .btn_contact{
--band: calc(10% + 10px); width: min(600px, 100%); aspect-ratio: 1 / 1; margin: 0 auto; position: relative;
} .contact_disc{
position: absolute;
inset: var(--band); background: var(--white);
border-radius: 50%;
transform: scale(var(--contact-scale, 1));
transform-origin: 50% 50%;
will-change: transform;
z-index: 0; pointer-events: none;
} .btn_contact > a{
position: absolute;
inset: var(--band); display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
z-index: 2; }
.btn_contact > a:hover{
opacity: 1 !important;
} .contact_ring{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
animation: contact-spin 30s linear infinite;
pointer-events: none;
z-index: 1; }
.contact_ring text{
font-family: 'Poppins', sans-serif;
font-size: 13px; font-weight: 700;
fill: var(--color_01); stroke: var(--white); stroke-width: 0.5px; paint-order: stroke; stroke-linejoin: round;
}
@keyframes contact-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
.contact_ring{ animation: none; }
}
.btn_contact a > figure:first-child{
width: 23%;
}
.btn_contact a > p{
color: var(--color_01);
font-size: clamp(2.6rem, 4.6vw, 6rem); font-weight: 900;
line-height: 1.2;
margin: 0 0 30px;
}
.btn_contact a > p > span{
font-size: clamp(1.4rem, 2.1vw, 2.6rem); } .btn_contact a > figure:last-child{
transition: transform .3s var(--ease);
}
.btn_contact a:hover > figure:last-child{
transform: scale(1.15);
}
@media (prefers-reduced-motion: reduce){
.btn_contact a > figure:last-child{ transition: none; }
}
.box_recruit{
position: relative;
overflow: hidden; container-type: inline-size; z-index: 1;
background:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/bg_contact_img02.webp) left top 20% no-repeat, var(--color_03);
width: calc(100% - 80px);
margin: 0 auto;
padding: 100px 2%;
color:var(--white);
background-size: 35%;
}
@media screen and (max-width: 960px){
.box_recruit{
background:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/bg_contact_img02.webp) left 20px top 50px no-repeat, var(--color_03);
width:100%;
padding: 120px 20px 75%;
background-size: 45%;
}
}
.box_recruit::before{
content:"";
position:absolute;
inset:0;  background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/motomu.webp) right 2% center / auto 95% no-repeat;
pointer-events:none;
}
@media screen and (max-width: 960px){
.box_recruit::before{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/common/motomu.webp) right 2% top 2% / auto 55% no-repeat;
}
}
.box_recruit > h2{
position: relative; z-index: 2; font-family: "M PLUS 1p", sans-serif;
font-weight: 900;
line-height: 1.02;
letter-spacing: .01em;
margin: 0 0 80px;
text-shadow: 3px 3px 10px rgba(0,0,0,.2);
}
.box_recruit > p:nth-child(2),.box_recruit > p:nth-child(3){
position: relative; z-index: 2;  font-size: clamp(1.6rem, 5.2vw, 4rem); font-size: clamp(1.6rem, 5.4cqw, 4rem);
font-weight: 900;
line-height: 1.4;
} .box_recruit > p:nth-child(2) span,
.box_recruit > p:nth-child(3) span{
background: var(--color_03);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
} .box_recruit .btn{
text-align: left;
}
.box_recruit .btn_white a{
color: var(--color_03);
border: none;
} .box_recruit .btn_white a::after{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,0A15,15,0,1,1,0,15,15,15,0,0,1,15,0Z' fill='%230572E9'/%3E%3Cpath d='M5,10,8.572,6.429H0V3.572H8.572L5,0h5l5,5h0l-5,5Z' transform='translate(8 10)' fill='%23fff'/%3E%3C/svg%3E");
}
.recruitName{
display: block; font-size: clamp(1.4rem, 11vw, 20rem); font-size: clamp(1.4rem, 11.4cqw, 20rem);
white-space: nowrap;
}
.recruitName .char-mask{
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding-top: .1em;
margin-top: -.1em;
}
.recruitName .char{
display: inline-block;
transform: translateY(100%);
transition: transform var(--dur) var(--ease);
}
.recruitName.is-animated .char{ transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
.recruitName .char{ transform: none; transition: none; }
} .box_recruit .recruit_fig{
position: absolute;
z-index: 1; margin: 0;
line-height: 0;
transition: transform .9s cubic-bezier(.22,1,.36,1);
will-change: transform;
pointer-events: none;
}
.box_recruit .recruit_fig img{ width: 100%; height: auto; display: block; } .box_recruit .recruit_woman{
top: 5%;
right: 5%;
width: 14%;
transform: translateX(200%); } .box_recruit .recruit_man{
bottom: 0;
right: 10%;
width: 45%;
transform: translateY(100%);
transition-delay: .7s; }
@media screen and (max-width: 960px){
.box_recruit .recruit_man{
right: 10%;
width: 80%;
}
}
.box_recruit .recruit_fig.is-shown{
transform: translate(0, 0);
}
@media (prefers-reduced-motion: reduce){
.box_recruit .recruit_fig{ transition: none; transform: none; }
}
@media screen and (max-width: 960px){
.box_recruit > h2{ margin-bottom: 30px; }
} .bg_ttl{
text-align: center;
padding: 300px 0 200px;
box-sizing: border-box;
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/about/bg_ttl.webp) center center no-repeat;
background-size: cover !important;
}
@media screen and (max-width: 960px){
.bg_ttl{
padding: 120px 20px 50px;
} 
}
.bg_ttl > h1{
font-size: clamp(2.6rem, 6.2vw, 6rem); font-weight: 900;
color: #fff;
}
.bg_ttl_about > h1{
font-size: clamp(2.0rem, 5vw, 6rem); }
.bg_ttl_about{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/about/bg_ttl.webp) center center no-repeat;
}
.bg_ttl_contact{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/contact/bg_ttl.webp) center center no-repeat;
}
.bg_ttl_factory{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/factory/bg_ttl.webp) center center no-repeat;
}
.bg_ttl_business{
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/business/bg_ttl.webp) center center no-repeat;
}
.article_box{
position: relative;
}
#breadcrumbs{
position: absolute;
top: 20px;
left:calc(2% + 40px);
}
@media screen and (max-width: 960px){
#breadcrumbs{
left:20px;
}
}
nav#breadcrumbs > ol > li {
display: inline;
list-style-type: none;
font-size: 1.4rem;
}
@media screen and (max-width: 960px){
nav#breadcrumbs > ol > li {
font-size: 1.2rem;
}
}
nav#breadcrumbs > ol > li:before {
content: "　>　";
}
nav#breadcrumbs > ol > li:first-child:before {
content: "";
}
#about #breadcrumbs > ol > li,
#about #breadcrumbs > ol > li > a{
color: #fff;
}
.ttl_02{
margin-bottom: 80px;
}
@media screen and (max-width: 960px){
.ttl_02{
margin-bottom: 40px;
}
}
.ttl_02 > h2{
font-family: "Poppins", sans-serif;
font-size: clamp(3.6rem, 6.2vw, 6rem); font-weight: bold;
line-height: 1.2;
text-transform: uppercase;
color: var(--color_01);
}
.ttl_02 > p{
font-size: clamp(1.8rem, 2.5vw, 2.4rem); font-weight: bold;
}
.ttl_03{
font-size: clamp(2.8rem, 7vw, 8rem); font-weight: 900;
line-height: 1.2;
margin-bottom: 60px;
}
@media screen and (max-width: 960px){
.ttl_03{
margin-bottom: 30px;
}
}
.ttl_03 span{
color: var(--color_01);
} .about_01,.about_02,.about_03,.about_04,.about_05,.about_06{
width:calc(100% - 80px);
margin: 0 auto; 
}
@media screen and (max-width: 960px){
.about_01,.about_02,.about_03,.about_04,.about_05,.about_06{
width:100%;
}
}
.about_01{
background-color: var(--color_01);
padding:180px 0 0 2%;
}
@media screen and (max-width: 960px){
.about_01{
padding:100px 20px 50px;
}
}
.about_01 .ttl_02 > h2{
color: var(--white);
}
.about_box_01{
display: flex;
gap:50px;
justify-content: space-between;
align-items: flex-end;
}
@media screen and (max-width: 1200px){
.about_box_01{
align-items: center;
}
}
@media screen and (max-width: 960px){
.about_box_01{
flex-wrap: wrap;
gap:40px;
}
}
.about_box_01 > div:first-child{
width:50%;
color: #fff;
padding-bottom: 100px;
}
@media screen and (max-width: 960px){
.about_box_01 > div:first-child{
width:100%;
padding-bottom: 0;
}
}
.about_box_01 > div:first-child h3{
font-size: clamp(3.2rem, 5.3vw, 8rem); font-weight: 900;
line-height: 1.2;
margin-bottom: 60px;
}
@media screen and (max-width: 960px){
.about_box_01 > div:first-child h3{
margin-bottom: 30px;
}
}
.about_box_01 > div:last-child{
width:calc(45%);
}
@media screen and (max-width: 960px){
.about_box_01 > div:last-child{
width:100%;
}
}
.about_box_01 > div:last-child img{
height:880px;
width:auto;
object-fit: cover;
}
@media screen and (max-width: 1200px){
.about_box_01 > div:last-child img{
height:auto;
width:100%;
}
}
.about_02{
background-color:var(--color_04);
padding:100px 2%;
}
@media screen and (max-width: 1200px){
.about_02{
padding:50px 20px;
}
} .history__head{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 40px;
}
.history__head .ttl_02{ margin-bottom: 0; }
.history__arrows{ display: flex; gap: 12px; flex: 0 0 auto; }
.history__arrow{
width: 80px;
height: 80px;
padding: 0;
border: none;
background: none;
line-height: 0;
cursor: pointer;
transition: transform .3s var(--ease), opacity .3s;
}
.history__arrow img{ width: 100%; height: 100%; display: block; }
.history__arrow--next img{ transform: scaleX(-1); } .history__arrow:hover{ opacity: .8; }
.history__arrow:disabled{ opacity: .3; cursor: default; }
.history__arrow:disabled:hover{ opacity: .3; } .history__viewport{
margin-left: -2%;
margin-right: -2%;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
cursor: grab;
touch-action: pan-x pan-y; }
.history__viewport.is-dragging{
cursor: grabbing;
user-select: none;
-webkit-user-select: none;
}
.history__viewport.is-dragging img{ pointer-events: none; }
.history__viewport::-webkit-scrollbar{ display: none; }
.history__track{ display: flex; }
.history__item{
flex: 0 0 calc(100% / 4.2); box-sizing: border-box;
} .history__year-s{
display: block;
padding-left: 38px;
font-family: "Poppins", sans-serif;
font-weight: bold;
font-size: clamp(1.6rem, 2.1vw, 2.4rem); margin-bottom: 20px;
} .history__line{
position: relative;
height: 3px;
background: var(--color_01);
z-index: 1; } .history__line::before{
content: "";
position: absolute;
top: 50%;
left: 68px; transform: translate(-50%, -50%);
width: 25px;
height: 25px;
border-radius: 50%;
background: #fff;
z-index: -1; }
.history__dot{
position: absolute;
top: 50%;
left: 68px;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--color_01);
z-index: 2; } .history__card{
position: relative;
margin: 100px 0 0 20px;
background: #fff;
padding: 20px;
min-height: 210px;
box-sizing: border-box;
} .history__card::before{
content: "";
position: absolute;
left: 48px; bottom: 100%; height: 100px; border-left: 3px dotted var(--color_01);
transform: translateX(-50%);
}
.history__year-l{
font-family: "Poppins", sans-serif;
font-weight: bold;
color: var(--color_01);
font-size: clamp(3rem, 5vw, 9rem); line-height: 1;
margin-bottom: 16px;
}
.history__list{ list-style: none; margin: 0; padding: 0; }
.history__list li{
position: relative;
padding-left: 10px;
margin-bottom: 10px;
font-size: clamp(1.2rem, 1.5vw, 2rem); font-weight: bold;
line-height: 1.4;
border-left: var(--color_01) 3px solid;
}
.history__list li:last-child{ margin-bottom: 0; }
@media screen and (max-width: 960px){
.history__head{ margin-bottom: 24px; }
.history__arrow{ width: 56px; height: 56px; }
.history__item{ flex-basis: calc(100% / 3.5); } .history__card{ min-height: 0; }
.history__viewport{ margin-left: -20px; margin-right: -20px; } }
@media screen and (max-width: 767px){
.history__arrow{ width: 40px; height: 40px; }
.history__item{ flex-basis: calc(100% / 1.2); } }
.about_03{
padding: 100px 2%;
}
@media screen and (max-width: 960px){
.about_03{
padding: 50px 20px;
}
}
.figure_box{
display: flex;
width: calc(100% + 4%);
margin-left: -2%;
}
@media screen and (max-width: 960px){
.figure_box{
width: calc(100% + 40px);
margin-left: -20px;
}
}
.figure_box > figure{
width: 25%;
}
.about_box_02{
display: flex;
gap:80px;
flex-wrap: wrap;
}
@media screen and (max-width: 960px){
.about_box_02{
gap:20px;
}
}
.about_box_02 > div{
width: calc(60% - 80px);
border-top: var(--color_01) 5px solid;
padding:60px 0 0;
box-sizing: border-box;
}
@media screen and (max-width: 960px){
.about_box_02 > div{
width: 100%;
padding:30px 0 0;
}
}
.about_box_02 > div > h3{
font-weight: 900;
font-size: clamp(2.4rem, 5.2vw, 5rem); line-height: 1.2;
margin-bottom: 30px;;
}
.about_box_02 > div > h3 > span{
color: var(--color_01);
}
.about_box_02 > figure{
width: 40%;
}
@media screen and (max-width: 960px){
.about_box_02 > figure{
width: 100%;
}
}
.about_04{
padding:0 2% 100px;
}
@media screen and (max-width: 960px){
.about_04{
padding:0 20px 50px;
}
}
.about_box_03{
display: flex;
flex-wrap: wrap;
gap:80px;
}
@media screen and (max-width: 960px){
.about_box_03{
gap:20px;
}
}
.about_box_03 > div{
width: calc(50% - 40px);
background: var(--color_01);
padding: 40px;
box-sizing: border-box;
}
@media screen and (max-width: 960px){
.about_box_03 > div{
width: 100%;
padding: 20px;
}
}
.about_box_03 > div > h4{
color: #fff;
font-weight: 900;
font-size: clamp(2.4rem, 5.2vw, 5rem); margin:30px 0 20px;
}
@media screen and (max-width: 960px){
.about_box_03 > div > h4{
margin:15px 0 10px;
}
}
.about_box_03 > div > p{
color: #fff;
}
.about_05{
background: var(--color_04);
padding:100px 2%;
}
@media screen and (max-width: 960px){
.about_05{
padding:50px 20px;
}}
.company_box{
background: var(--white);
padding: 100px;
}
@media screen and (max-width: 960px){
.company_box{
padding: 40px;
}}
.company_box > dl{
display: flex;
flex-wrap: wrap;
max-width: 1200px;
width: 100%;
margin: 0 auto;
border-bottom: #ccc 1px solid;
padding-bottom: 30px;
margin-bottom: 30px;
}
@media screen and (max-width: 960px){
.company_box > dl{
padding-bottom: 15px;
margin-bottom: 15px;
}
}
.company_box > dl:last-child{
margin-bottom: 0;
}
.company_box > dl > dt{
width: 25%;
color: var(--color_01);
}
@media screen and (max-width: 960px){
.company_box > dl > dt{
width: 100%;
margin-bottom: 10px;
}
}
.company_box > dl > dd{
width: 75%;
}
@media screen and (max-width: 960px){
.company_box > dl > dd{
width: 100%;
}
}
.company_box > dl > dd > ul > li{
text-indent: -1em;
padding-left: 1em;
}
.about_06{
padding:100px 2%;
}
@media screen and (max-width: 960px){
.about_06{
padding:50px 20px;
}
}
.about_06 > h3{
text-align: center;
margin-bottom: 60px;;
}
@media screen and (max-width: 960px){
.about_06 > h3{
width: 80%;
margin:0 auto 40px;
}}
.about_06 > p{
text-align: center;
line-height: 2;
}
.name{
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 960px){
.name img{
width: 25%;
}
}  #factory_01{
padding: 180px 0 100px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 26.04vw 1fr 27.08vw; grid-template-rows: auto auto;
column-gap: 3vw;
row-gap: 30px;
}
#factory_01 h2{
font-size: clamp(3.2rem, 4vw, 8rem); font-weight: 900;
color: var(--color_01);
margin-bottom: 50px;
line-height: 1.2;
text-align: center;
}
#factory_01 p{
text-align: center;
}
@media screen and (max-width: 960px){
#factory_01 p{
text-align: left;
}
} @media screen and (max-width: 1450px){
#factory_01 .br_wide{ display: none; } }
@media screen and (max-width: 960px){
#factory_01 .br_wide{ display: inline; } }
@media screen and (max-width: 767px){
#factory_01 .br_wide{ display: none; } } .factory_01_txt{
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
}
.factory_01_img{ margin: 0; }
.factory_01_img img{
display: block;
width: 100%;
height: auto; }
.factory_01_img--01{ grid-column: 1; grid-row: 1; }  .factory_01_img--02{
grid-column: 1;
grid-row: 2;
width: 70%;
justify-self: center;
} .factory_01_img--03{
grid-column: 3;
grid-row: 1 / 3;
align-self: end;
} @media screen and (max-width: 960px){
#factory_01{
padding: 100px 0 0;
grid-template-columns: 1fr 1fr;
column-gap: 15px;
row-gap: 15px;
}
.factory_01_txt{
grid-column: 1 / 3;
grid-row: 1;
padding: 0 20px;
margin-bottom: 30px;
}
.factory_01_img--01{ grid-column: 1; grid-row: 2; }
.factory_01_img--02{ grid-column: 1; grid-row: 3; }
.factory_01_img--03{ grid-column: 2; grid-row: 2 / 4; align-self: start; }
}
#factory_02{
width: calc(100% - 80px);
padding: 150px 2%;
margin: 0 auto;
}
@media screen and (max-width: 960px){
#factory_02{
width: 100%;
padding: 50px 20px;
}
}
#factory_02 > ul{
display: flex;
flex-wrap: wrap;
gap: 20px;
}
@media screen and (max-width: 960px){
#factory_02 > ul{
gap: 10px;
} 
}
#factory_02 > ul > li{
width: calc(50% - 10px);
height:560px;
background-size: cover !important;
padding: 30px;
box-sizing: border-box;
}
@media screen and (max-width: 960px){
#factory_02 > ul > li{
width: 100%;
height:200px;
padding: 15px;
} 
}
#factory_02 > ul > li:nth-child(1){
background:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/factory/img_02_01.webp) center center no-repeat;
}
#factory_02 > ul > li:nth-child(2){
background:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/factory/img_02_02.webp) center center no-repeat;
}
#factory_02 > ul > li:nth-child(3){
background:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/factory/img_02_03.webp) center center no-repeat;
}
#factory_02 > ul > li:nth-child(4){
background:url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/factory/img_02_04.webp) center center no-repeat;
}
#factory_02 > ul > li > h3{
background: var(--color_01);
color: #fff;
font-size: clamp(2.0rem, 3vw, 5rem); font-weight: 900;
padding: 10px;
line-height: 1.2;
display: inline-block;
}
#factory_02 > ul > li > p{
font-size: clamp(1.3rem, 1.6vw, 3rem); font-weight:bold;
line-height: 1.8;
}
#factory_02 > ul > li > p > span{
background: var(--white);
padding:5px; 
}
.haccp_box{
background: var(--color_01);
padding:30px;
}
@media screen and (max-width: 960px){
.haccp_box{
padding:15px;
}
}
.haccp_box > h4{
color: #fff;
font-size: clamp(2rem, 3.33vw, 4rem); font-weight: bold;
text-align: center;
}
.haccp_box > p{
color: #fff; 
text-align: center;
margin-bottom: 20px;
}
.haccp_box > ul{
background: var(--white);
padding:20px;
display:flex;
flex-wrap: wrap;
}
.haccp_box > ul > li{
width:25%;
padding:20px 0;
position: relative;
text-align: center;
}
@media screen and (max-width: 960px){
.haccp_box > ul > li{
width:100%;
padding:10px 0;
}
}
.haccp_box > ul > li::after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: var(--color_01);
}
@media screen and (max-width: 960px){
.haccp_box > ul > li::after{
top: auto;
right: 0;
bottom: 0;
width: 100%;
height: 1px;
}
}
.haccp_box > ul > li:last-child::after{
content: none;
}
.haccp_box > ul > li > figure{
width:100px;
margin:0 auto 20px;
}
@media screen and (max-width: 960px){
.haccp_box > ul > li > figure{
width:80px;
margin:0 auto 10px;
}
}
@media screen and (max-width: 767px){
.haccp_box > ul > li > figure{
width:60px;
margin:0 auto;
}
}
.haccp_box > ul > li > p:nth-child(2){
font-size: clamp(2rem, 2.17vw, 2.6rem); font-weight: bold;
}
.haccp_box > ul > li > p:nth-child(3){
font-size: clamp(1.4rem, 1.33vw, 1.6rem); }
#factory_03{
width: calc(100% - 80px);
margin: 0 auto;
padding:0 2%;
}
@media screen and (max-width: 960px){
#factory_03{
width:100%;
padding:0 20px;
} 
}
#factory_03 > p:nth-child(2){
font-size: clamp(2rem, 3.33vw, 4rem); margin-bottom: 30px;
font-weight: 900;
line-height: 1.4;
}
#factory_03 > figure{
margin-top: -35%;
}
@media screen and (max-width: 960px){
#factory_03 > figure{
margin-top: -5%;
}
}
#factory_04{
background: var(--color_01);
padding: 80px 2%;
width:calc(100% - 80px);
margin: 0 auto;
}
@media screen and (max-width: 960px){
#factory_04{
padding: 40px 20px;
width:100%;
} 
}
.factory_04_inbox{
display: flex;
gap: 5%;
margin-bottom: 40px;
}
@media screen and (max-width: 960px){
.factory_04_inbox{
flex-wrap: wrap;
gap:15px;
margin-bottom: 20px;
}
}
.factory_04_inbox > div{
width: 56.25%; }
@media screen and (max-width: 960px){
.factory_04_inbox > div{
width:100%;
}
}
.factory_04_inbox > figure{
width: 38.75%; }
@media screen and (max-width: 960px){
.factory_04_inbox > figure{
width:100%;
}
}
.factory_04_inbox > figure img{
display: block;
width: 100%;
}
#factory_04 > ul > li{
background: var(--white);
border:#FFC7AF 10px solid;
border-radius: 30px;
padding: 60px;
margin-bottom: 30px;
}
@media screen and (max-width: 1200px){
#factory_04 > ul > li{
border:#FFC7AF 5px solid;
border-radius: 20px;
padding: 30px;
}
}
@media screen and (max-width: 960px){
#factory_04 > ul > li{
border-radius: 15px;
padding: 15px;
}
}
#factory_04 > ul > li:last-child{
margin-bottom: 0;
}
#factory_04 > ul > li h3{
color: var(--color_01);
font-size: clamp(3rem, 5.2vw, 5rem); font-weight: 900;
margin-bottom: 30px;
line-height: 1.2;
}
@media screen and (max-width: 960px){
#factory_04 > ul > li h3{
margin-bottom: 15px;
}
}
#factory_04 > ul > li h3 > span{
font-size: clamp(1.5rem, 2.5vw, 3rem); }
#factory_04 > ul > li p.txt_01{
font-size: clamp(2rem, 3.33vw, 4rem); font-weight:bold;
line-height: 1.4;
margin-bottom: 30px;
}
@media screen and (max-width: 960px){
#factory_04 > ul > li p.txt_01{
margin-bottom: 15px;
}
}
#factory_04 > ul > li p.txt_02{
background:var(--color_01);
color: #fff;
font-size: clamp(1.6rem, 2.5vw, 2.4rem); font-weight:bold;
line-height: 1.4;
padding:10px; 
display: inline-block;
margin-bottom: 20px;
}
#factory_04 .flow{
--flow-gap: clamp(20px, 3vw, 80px); --flow-bd: 5px; display: flex;
gap: var(--flow-gap);
align-items: center;
}
@media screen and (max-width: 960px){
#factory_04 .flow{
--flow-bd: 2px; }
}
#factory_04 .flow > li{
position: relative; flex: 0 1 200px; min-width: 105px; aspect-ratio: 1; border:var(--color_01) var(--flow-bd) solid;
background: var(--white);
border-radius: 50%;
color: var(--color_01); font-size: clamp(1.2rem, calc(5.4vw - 8.4px), 3.6rem);
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
} #factory_04 .flow > li:not(:last-child)::after{
content: "";
position: absolute;
left: calc(100% + var(--flow-bd));
top: 50%;
width: var(--flow-gap);
height: var(--flow-gap);
transform: translateY(-50%);
background: url(//www.yamato29.jp/wordpress/wp-content/themes/02design/img/factory/arrow.svg) center / 50% no-repeat;
} @media screen and (max-width: 1210px){
#factory_04 .flow{
flex-wrap: wrap;
justify-content: center;
row-gap: calc(var(--flow-gap) / 2); }
#factory_04 .flow > li{
flex: 0 1 calc((100% - var(--flow-gap) * 2) / 3);
max-width: 200px;
min-width: 0; }
} @media screen and (max-width: 960px){
#factory_04 .flow{
justify-content: flex-start; }
#factory_04 .flow > li{
flex: 0 1 calc((100% - var(--flow-gap) * 3) / 3);
}
}
#factory_04 .flow > li:nth-child(3),
#factory_04 .flow > li:nth-child(4),
#factory_04 .flow > li:nth-child(5){
background: var(--color_01);
color: var(--white);
}
.factory_04_inbox_02{
display: flex;
gap: 20px;
flex-wrap:wrap;
}
@media screen and (max-width: 1200px){
.factory_04_inbox_02{
gap: 10px;
}
}
.factory_04_inbox_02 > li{
width: calc(33.333% - 14px);
border:#FFE3D6 10px solid;
background: var(--white);
padding: 30px;
box-sizing: border-box;
border-radius: 20px;
}
@media screen and (max-width: 1200px){
.factory_04_inbox_02 > li{
width: calc(33.333% - 6.666px);
border:#FFE3D6 5px solid;
padding: 15px;
}
}
@media screen and (max-width: 960px){
.factory_04_inbox_02 > li{
width: 100%;
}
}
.factory_04_inbox_02 > li > h4{
font-size: clamp(1.8rem, 1.2vw, 2.4rem); font-weight:bold;
color: var(--white);
line-height:2;
margin:30px 0 20px;
}
.factory_04_inbox_02 > li > h4 span{
background: var(--color_01);
padding:5px 10px;
} .factory_04_inbox_02 > li > h4.join_pc br{ display: none; }
.factory_04_inbox_02 > li > h4.join_pc span:first-child{ padding-right: 0; }
.factory_04_inbox_02 > li > h4.join_pc span:last-child{ padding-left: 0; }
@media screen and (max-width: 960px){
.factory_04_inbox_02 > li > h4.join_pc br{ display: inline; }
.factory_04_inbox_02 > li > h4.join_pc span:first-child{ padding-right: 10px; }
.factory_04_inbox_02 > li > h4.join_pc span:last-child{ padding-left: 10px; }
}
.factory_04_inbox_02 > li > p{
font-size: clamp(1.4rem, 1.2vw, 1.6rem); }
#factory_05{
width:calc(100% - 80px);
margin: 0 auto;
padding:150px 2%;
}
@media screen and (max-width: 960px){
#factory_05{
width:100%;
padding:50px 20px;
}
}
.factory_05_box{
display: flex; 
gap:40px 20px;
flex-wrap: wrap;
}
@media screen and (max-width: 960px){
.factory_05_box{
gap:20px 10px;
}}
.factory_05_box > li{
width:calc(33.333% - 13.33333px);
text-align:center;
}
@media screen and (max-width: 960px){
.factory_05_box > li{
width:calc(50% - 5px);
}
}
.factory_05_box > li > h3{
font-size: clamp(1.6rem, 2vw, 2.4rem); font-weight: bold;
margin: 15px 0 10px;
color: var(--color_01);
}
.factory_05_box > li > p{
font-size: clamp(1.4rem, 1.5vw, 1.8rem); }
@media screen and (max-width: 960px){
.factory_05_box > li > p{
text-align: left;
}
}
.pc_center{
text-align: center;
}
@media screen and (max-width: 960px){
.pc_center{
text-align: left;
}
} #business_01{
width: calc(100% - 80px);
margin: 0 auto;
padding: 150px 2% 50px;
display: flex;
gap: clamp(20px, 4.17vw, 80px); justify-content: flex-start;
align-items: center;
}
@media screen and (max-width: 960px){
#business_01{
width: 100%;
padding: 100px 20px 0;
gap:30px; }
} #business_01 > div{
flex: 1 1 900px;
max-width: 900px;
min-width: 0; }
#business_01 > figure{
flex: 0 0 515px; }
#business_01 > figure img{
display: block;
width: 100%;
} @media screen and (max-width: 960px){
#business_01{
flex-direction: column;
}
#business_01 > div{
flex: 0 0 auto; max-width: 100%; 
}
#business_01 > figure{
flex: 0 0 auto; width: 515px;
max-width: 100%; margin: 0 auto;
}
}
#business_02{
width: calc(100% - 80px);
margin: 0 auto;
padding: 150px 2%;
background: var(--color_01);
}
@media screen and (max-width: 960px){
#business_02{
width:100%;
padding: 50px 20px;
}
}
#business_02 > ul > li{
background: var(--white);
border:#FFC7AF 10px solid;
border-radius: 30px;
padding: 30px;
max-width: 1200px;
width: 100%;
margin: 0 auto 30px; display: flex;
justify-content: space-between;
position:relative;
z-index: 0; gap:60px;
}
@media screen and (max-width: 1200px){
#business_02 > ul > li{
border:#FFC7AF 5px solid;
border-radius: 20px;
padding: 15px;
}
}
@media screen and (max-width: 960px){
#business_02 > ul > li{
border-radius: 15px;
}
}
#business_02 > ul > li::after{
content:"Business 01";
position: absolute;
font-family: "Poppins", sans-serif;
font-size: clamp(1.6rem, 2.5vw, 3rem); color: #FFE3D6;
top: 40px;
right: 40px;
line-height: 1;
z-index: -1; }
@media screen and (max-width: 960px){
#business_02 > ul > li::after{
top: 15px;
right: 15px;
} 
}
#business_02 > ul > li:nth-child(2):after{
content:"Business 02";
}
#business_02 > ul > li:nth-child(3):after{
content:"Business 03";
}
#business_02 > ul > li:nth-child(4):after{
content:"Business 04";
}
#business_02 > ul > li:nth-child(5):after{
content:"Business 05";
}
#business_02 > ul > li:nth-child(6):after{
content:"Business 06";
}
#business_02 > ul > li:nth-child(7):after{
content:"Business 07";
}
#business_02 > ul > li:last-child{
margin-bottom: 0;
} #business_02 > ul > li > figure{
flex: 0 1 500px;
min-width: 0; aspect-ratio: 500 / 680; border-radius: 15px;
}
#business_02 > ul > li > figure > img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
#business_02 > ul > li > div{
flex: 0 1 550px;
min-width: 0;
padding-top: 40px;
} @media screen and (max-width: 960px){
#business_02 > ul > li{
flex-direction: column-reverse;
gap: 30px;
}
#business_02 > ul > li > figure{
flex: 0 0 auto; width: 100%;
aspect-ratio: 1; min-height: 0; overflow: hidden;
}
#business_02 > ul > li > div{
flex: 0 0 auto;
width: 100%;
padding-top: 20px;
}
#business_02 > ul > li > figure > img{
border-radius: 10px;
} 
}
#business_02 > ul > li > div > h3{
color: var(--color_01);
font-size: clamp(2.4rem, 4.17vw, 5rem); font-weight: 900;
margin-bottom: 30px;
}
@media screen and (max-width: 960px){
#business_02 > ul > li > div > h3{
margin-bottom: 20px;
}
} #business_02 .point_box{
border:#FFE3D6 10px solid;
border-radius: 5px;
padding: 10px;
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 30px;
flex-wrap: wrap;
align-items: center;
}
@media screen and (max-width: 960px){
#business_02 .point_box{
border:#FFE3D6 5px solid;
margin-bottom: 15px;
gap:10px;
}
}
#business_02 .hukidashi{
position: absolute;
top:-40px;
left: -40px;
width: 100px;
}
@media screen and (max-width: 960px){
#business_02 .hukidashi{
top:-10px;
left: -10px;
width: 60px;
}}
#business_02 .point_box > figure{
width: 35%;
}
@media screen and (max-width: 767px){
#business_02 .point_box > figure{
width: 100%;
}
}
#business_02 .point_txt{
width: 62%;
}
@media screen and (max-width: 767px){
#business_02 .point_txt{
width: 100%;
}
}
#business_02 .point_txt dl dt{
color: var(--color_01);
font-size: 1.8rem;
font-weight: bold;
}
@media screen and (max-width: 767px){
#business_02 .point_txt dl dt{
font-size: 1.4rem;
}
}
#business_02 .point_txt dl dt span{
color: #000;
font-size: 1.2rem;
}
#business_02 .point_txt dl dd{
font-size: 1.6rem;
}
@media screen and (max-width: 767px){
#business_02 .point_txt dl dd{
font-size: 1.4rem;
}}
#business_02 .point_txt > p{
font-size: 1.6rem; 
}
@media screen and (max-width: 767px){
#business_02 .point_txt > p{
font-size: 1.4rem; 
}} #business_02 .btn{
text-align: left;
} #business_02 .btn_row{
display: flex;
gap: 10px;
margin-top: 50px; }
#business_02 .btn_row .btn{
flex: 1 1 0; margin-top: 0;
}
#business_02 .btn_row .btn a{
min-width: 0; width: 100%;
padding: 20px 60px 20px 20px;
font-size: clamp(1.6rem, 2.2vw, 2.6rem);
font-weight: 900;
box-shadow: none; }
@media screen and (max-width: 767px){
#business_02 .btn_row{
flex-direction: column; margin-top: 30px;
}
}
@media screen and (max-width: 960px){
#business_02 .btn{
text-align: center;
}
#business_02 .btn_row .btn a{
width: 85%;
padding: 18px 45px 18px 20px;
}
} .contact_box{
width: calc(100% - 80px);
margin: 0 auto;
padding:180px 2% 100px;
background: var(--color_04);
}
@media screen and (max-width: 960px){
.contact_box{
width: 100%;
margin: 0 auto;
padding:100px 20px 50px;
}
}
.contact_box > p{
text-align: center;
}
@media screen and (max-width: 767px){
.contact_box > p{
text-align: left;
}
} .contact_box .tel_txt,
.contact_box .tel_number{
text-align: center;
}
.tel_txt span{
background: var(--white);
border-radius: 50px;
color: var(--color_01);
font-size: clamp(1.8rem, 3.1vw, 3rem); font-weight:900;
line-height: 1;
padding: 10px 20px;
}
@media screen and (max-width: 960px){
.tel_txt span{
line-height: 2;
}  
}
.f_orange{
color: var(--color_01);
}
.contact_box .tel_number > a {
font-size: clamp(4rem, 8.3vw, 8rem); }
.form_box > dl{
border-bottom: #D9D9D9 1px solid;
padding-bottom: 30px;
max-width: 1200px;
width: 100%;
margin: 0 auto 30px;
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 767px){
.form_box > dl{
padding-bottom: 15px;
margin: 0 auto 15px;
gap:10px;
}
}
.form_box > dl > dt{
width: 25%;
}
@media screen and (max-width: 767px){
.form_box > dl > dt{
width: 100%;
} 
}
.form_box > dl > dt span,form .hissu{
color: var(--color_01);
font-size: 1.4rem;
}
@media screen and (max-width: 767px){
.form_box > dl > dt span{
font-size: 1.2rem;
}}
.form_box > dl > dd{
width: 75%;
}
@media screen and (max-width: 767px){
.form_box > dl > dd{
width: 100%;
}
}
.form_box input[type="text"],
.form_box input[type="email"],
.form_box input[type="tel"],
.form_box textarea{
width: 100%;
padding: 15px;
box-sizing: border-box;
border: none;
}
.form_box textarea{
height:250px ;
} .wpcf7-submit{
-webkit-appearance: none;
appearance: none;
display: block;
margin: 40px auto 0;
min-width: 310px;
max-width: 100%;
padding: 20px 60px 20px 50px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,0A15,15,0,1,1,0,15,15,15,0,0,1,15,0Z' fill='%23fff'/%3E%3Cpath d='M5,10,8.572,6.429H0V3.572H8.572L5,0h5l5,5h0l-5,5Z' transform='translate(8 10)' fill='%23f2662b'/%3E%3C/svg%3E") right 22px center / 34px 34px no-repeat,
var(--color_01);
color: #fff;
font-size: clamp(1.6rem, 2.7vw, 2.6rem);
font-weight: 900;
letter-spacing: .06em;
text-align: center;
border: 3px solid #fff;
border-radius: 60px;
box-shadow: 0 6px 16px rgba(242,102,43,.28);
cursor: pointer;
transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s;
}
.wpcf7-submit:hover{
transform: scale(1.05);
opacity: 1;
} .wpcf7-submit:disabled{
opacity: .45;
cursor: not-allowed;
box-shadow: none;
}
.wpcf7-submit:disabled:hover{ transform: none; }
@media screen and (max-width: 960px){
.wpcf7-submit{
min-width: 0;
width: 85%;
padding: 18px 30px;
background-position: right 16px center, 0 0;
background-size: 30px 30px, auto;
}
}
@media (prefers-reduced-motion: reduce){
.wpcf7-submit{ transition: none; }
}
.wpcf7-checkbox{
display: flex;
flex-wrap:wrap;
gap:5px;
}
.wpcf7-list-item{
width: 100%;
display:block;
margin:0;
} .acceptance p a{
color: var(--color_01);
text-decoration: underline;
text-underline-offset: .25em;
text-decoration-thickness: 1px;
transition: opacity .3s var(--ease);
} .grecaptcha-badge { visibility: hidden; }
.recaptcha_chu{margin: 30px 0;font-size: 1.2rem;}
.recaptcha_chu a{border-bottom: 1px solid #000;} .box_outer{
width: calc(100% - 80px);
margin: 0 auto;
padding:180px 2% 100px;
}
@media screen and (max-width: 960px){
.box_outer{
width:100%;
padding: 100px 20px 50px;
}
}
.ttl_privacy{
color: var(--color_01);
font-size: clamp(2rem, 4.2vw, 4rem); font-weight: 900;
}
.ttl_sub_privacy{
font-size: clamp(1.8rem, 3.1vw, 3rem);
font-weight: bold;
}
.li_indent{
text-indent: -1em;
padding-left: 1em;
} #wysi h1 {
font-size: 3rem;
font-weight: bold;
}
#wysi h2 {
font-size: 2.5rem;
font-weight: bold;
}
#wysi h3 {
font-size: 2rem;
font-weight: bold;
}
#wysi h4 {
font-size: 1.6rem;
font-weight: bold;
}
#wysi h5 {
font-weight: bold;
}
#wysi p {
margin-bottom: 10px;
}
.blog_img {
text-align: center;
padding: 1% 0 4%;
overflow: hidden;
clear: both;
}
.blog_img img {
max-width: 100%;
height: auto;
width: 480px;
} .recruit_01{
background: var(--color_03);
padding: 50px 20px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--white);
font-size: clamp(2rem, 1.5vw + 0.8rem, 3rem);
font-weight: bold;
box-sizing: border-box;
}
.recruit_01 > p {
margin: 0;
}
.recruit_01 > p:nth-child(1){
width: min(100%, 1000px);
margin: 0 auto 40px;
}
.recruit_01 > p:nth-child(1) img {
display: block;
width: 100%;
max-width: 1000px;
height: auto;
margin: 0 auto;
}
@media screen and (max-width: 960px){
.recruit_01{
padding-top: 120px;
min-height: 100vh;
}
}  .js-zoom{
position: relative;
cursor: zoom-in;
}
.js-zoom::after{
content: "タップで拡大";
position: absolute;
right: 10px;
bottom: 10px;
padding: 7px 14px 7px 32px;
border-radius: 999px;
background: rgba(0,0,0,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") 11px center / 15px 15px no-repeat;
color: #fff;
font-size: 1.2rem;
font-weight: bold;
line-height: 1;
white-space: nowrap;
pointer-events: none; }
.js-zoom:focus-visible{
outline: 3px solid var(--color_01);
outline-offset: 3px;
} .imgzoom{
position: fixed;
inset: 0;
z-index: 100001; display: none;
background: rgba(0,0,0,.92);
}
.imgzoom.is-open{ display: block; } .imgzoom__body{
position: absolute;
inset: 0;
padding: 60px 12px;
overflow: auto;
display: flex;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain; }
.imgzoom__img{
margin: auto; max-width: 100%;
max-height: 100%;
cursor: zoom-in;
}
.imgzoom__img.is-zoomed{
max-width: none; max-height: none;
cursor: grab; }
.imgzoom__body.is-panning,
.imgzoom__body.is-panning .imgzoom__img{ cursor: grabbing; } .imgzoom__close{
position: absolute;
top: 12px;
right: 12px;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.18);
cursor: pointer;
z-index: 2;
}
.imgzoom__close:hover{ background: rgba(255,255,255,.32); }
.imgzoom__close::before,
.imgzoom__close::after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
margin: -1px 0 0 -10px;
background: #fff;
}
.imgzoom__close::before{ transform: rotate(45deg); }
.imgzoom__close::after{ transform: rotate(-45deg); }
.imgzoom__hint{
position: absolute;
left: 0;
bottom: 16px;
width: 100%;
text-align: center;
color: rgba(255,255,255,.85);
font-size: 1.2rem;
line-height: 1.4;
pointer-events: none;
} html.is-imgzoom-open,
html.is-imgzoom-open body{ overflow: hidden; }