@import url('https://fonts.cdnfonts.com/css/butler');

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-size:20px;
text-align:left;
color:#111;
font-family: dnp-shuei-gothic-gin-std, 'Yu Gothic', '游ゴシック', 'YuGothic', '游ゴシック体', sans-serif;
}
@media screen and (max-width:768px){
html,body{ font-size:4vw; min-width:240px; max-width:768px; overflow-x: hidden;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important; vertical-align: bottom;}

/*txt*/
p{ line-height:2em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
.butler{ font-family: 'Butler', sans-serif;}
.mincho{ font-family: "A1 Mincho R JIS2004 AP", "A1 Mincho", dnp-shuei-mincho-pr6n, '游明朝', YuMincho, serif;}



/*header*/
header#company_head{ background: #fff; padding: 40px 0; text-align: center;}
header#company_head figure.logo{ margin-bottom: 20px;}
header#company_head figure.logo img{ height: 40px !important;}
header#company_head ul{ display: flex; align-items: center; justify-content: center; list-style: none; margin: 0 auto; padding: 0; letter-spacing: 0.1em; font-size: 14px;}
header#company_head ul li{ margin: 0 1em;}
header#company_head ul li a{ text-decoration: none; position: relative;}
header#company_head ul li a:after{ content: ""; width: 0; height: 1px; background: #333; position: absolute; left: 0; right: 0; bottom: -0.25em; margin: auto; transition: 0.3s;}
header#company_head ul li a:hover:after{ width: 100%;}
@media screen and (max-width: 768px){
header#company_head{ display: flex; align-items: center; width: 100%; height: 12.5vw; padding: 2.5vw; position: fixed; left: 0; top: 0;z-index: 99;}
header#company_head figure.logo{ margin-bottom: 0;}
header#company_head figure.logo img{ height: 7.5vw !important;}
header#company_head ul{ display: none;}
header#company_head ul{ position: fixed; left: 0; right: 0; top: 0; width: 100%; height: 100%; background: #fff; align-items: center; justify-content: center; flex-direction: column; margin: 0; padding: 12.5vw 5vw; letter-spacing: 0; font-size: 3.5vw; line-height: 1em;}
header#company_head ul li{ margin: 0; width: 100%; border-bottom: 1px solid #333;}
header#company_head ul li:first-child{ border-top: 1px solid #333;}
header#company_head ul li a{ display: block; font-size: 4vw; padding: 1.5em 0.75em;}
header#company_head ul li a:after{ display: none;}
header#company_head ul .corp_top{ width: 100%; margin-top: 10%;}
header#company_head ul .corp_top a{ display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1em; font-weight: bold; padding: 1em; border: 2px solid #333;}
}

body{ padding-top: 64px;}
@media screen and (max-width: 768px){
body{ padding-top: 13.75vw;}
}

#entry_btn{ position: fixed; right: 10px; top: 10px; z-index: 101;}
#entry_btn a{ display: flex; align-items: center; justify-content: center; width: 150px; height: 44px; border: 1px solid #333; border-radius: 60px; transition: 0.3s;}
#entry_btn a:hover{ background: #A59F98; color: #fff; border-color: #A59F98;}
#entry_btn a span{ font-size: 0.6rem; line-height: 1em; margin-right: 0.5em;}
#entry_btn a strong{ font-size: 0.9rem; font-style: italic;}
@media screen and (max-width: 768px){
#entry_btn{ right: 1.875vw; top: 1.875vw;}
#entry_btn a{ width: 30vw; height: 10vw; border-radius: 7.5vw;}
#entry_btn a span{ font-size: 0.6rem;}
#entry_btn a strong{ font-size: 0.9rem;}
}

#recruit_head{ position: fixed; left: 0; right: 0; top: 0; width: 100%; background: #fff; display: flex; align-items: center; padding: 10px; z-index: 99;}
#recruit_head figure.logo{ margin: 0; position: relative; z-index: 3;}
#recruit_head figure.logo a{ display: flex; flex-direction: column;  width: 240px;}
#recruit_head figure.logo a span{ display: block; font-size: 0.6rem; line-height: 1em;}
#recruit_head figure.logo a span:before{ content: "|"; margin: 0 0.5em;}
#recruit_head figure.logo a span:after{ content: "|"; margin: 0 0.5em;}

#recruit_head ul{ width: 450px; display: flex; align-items: center; margin-left: 2em; font-size: 0.7rem; position: relative;}
#recruit_head ul li{ margin-right: 2em;}
#recruit_head ul li a{ display: inline-block; padding: 0.1em 0; cursor: pointer; position: relative; transition: 0.3s;}
#recruit_head ul li a:after{ content: ""; width: 0; height: 1px; background: #111; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; transition: 0.3s;}
#recruit_head ul li a:hover:after{ width: 100%;}
#recruit_head ul .child{ /*display: none;*/ position: absolute; left: 0; top: -5em; padding: 1.5em 0 0; z-index: 1; opacity: 0; transition: 0.3s; pointer-events: none;}
#recruit_head ul .child ul{ border-top: 1px solid #aaa; margin-left: 0; font-weight: normal; background: #fff; padding: 1em 0 1.5em; transition: 0.3s; position: relative; z-index: 1;}
#recruit_head ul .child ul:before{ content: ""; width: 100vw; height: 100%; position: absolute; top: 0; left: -50vw; background: #fff; z-index: -1;}
#recruit_head ul .child ul:after{ content: ""; width: 100vw; height: 100%; position: absolute; top: 0; right: -50vw; background: #fff; z-index: -1;}
#recruit_head ul .child ul li a:hover{ color: #a49d95;}
#recruit_head ul .child ul li a:after{ display: none;}
@media print, screen and (min-width:768px){
#recruit_head ul.h_nav{ display: flex !important; opacity: 1.0 !important; height: auto !important;}
#recruit_head ul .child{ display: block !important; opacity: 0; height: auto !important;}
#recruit_head ul li.parent:hover .child{ top: 1.5em; opacity: 1.0; pointer-events: all;}
#smp_nav_btn{ display: none !important;}
}
@media screen and (max-width: 768px){
#recruit_head{ padding: 1.875vw;}
#recruit_head figure.logo img{ height: 7.5vw;}
#recruit_head ul.h_nav{ display: none;}
#recruit_head ul.h_nav{ background: #fff; padding-top: 10vw; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; min-height: 100dvh; flex-direction: column; margin: 0;}
#recruit_head ul.h_nav{ /*display: flex;*/ flex-direction: column; align-items: center; justify-content: center; width: 100%;}
#recruit_head ul{ width: 100%; display: block; padding: 7.5%; overflow: hidden;}
#recruit_head ul li{ width: 100%; padding: 1.25em 0.5em; margin: 0; text-align: left; font-size: 1rem; border-bottom: 1px solid #333; position: relative;}
#recruit_head ul li:first-child{ border-top: 1px solid #333;}
#recruit_head ul li a{ display: block; padding: 0;}
#recruit_head ul li a:after{ display: none;}
#recruit_head ul li.parent:before{ content: ""; width: 4vw; height: 2px; background: #111; position: absolute; left: auto; right: 0.5em; top: 2.125em; transition: 0.3s;}
#recruit_head ul li.parent:after{ content: ""; width: 4vw; height: 2px; background: #111; position: absolute; right: 0.5em; top: 2.125em; transform: rotate(90deg); transition: 0.3s;}
#recruit_head ul li.parent.active:before{ transform: rotate(45deg);}
#recruit_head ul li.parent.active:after{ transform: rotate(135deg);}
#recruit_head ul .child{ display: none; position: static; padding: 0.5em 0 0; opacity: 1.0; pointer-events: all;}
#recruit_head ul .child ul{ display: block; border-top: none; background: #efefef; padding: 1em; position: relative;}
#recruit_head ul .child ul:before{ background: #efefef;}
#recruit_head ul .child ul:after{ background: #efefef;}
#recruit_head ul .child ul li{ font-size: 1rem; padding: 0; border: none;}
#recruit_head ul .child ul li:first-child{ border: none;}
#recruit_head ul .child ul li a{ padding: 0.25em 0.5em;}
#recruit_head ul .child ul li a:hover{ color: inherit;}
#recruit_head ul .corp_top{ width: 100%; margin-top: 10%;}
#recruit_head ul .corp_top a{ display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1em; font-weight: bold; padding: 1em; border: 2px solid #333;}
}

@media screen and (max-width: 768px){
#smp_nav_btn{ display: flex; align-items: flex-end; justify-content: center; background: #C5A253; width: 12.5vw; height: 12.5vw; position: fixed; right:0; bottom:0; z-index:999; transition:0.3s; cursor:pointer;}
#smp_nav_btn span{ display:block; height:1px; width:7.5vw; background:#fff; position:absolute; left:0; right:0; top: 50%; transform: translateY(-50%); margin:auto; transition:0.3s;}
#smp_nav_btn span:before{ content: ""; display:block; height:1px; width:7.5vw; background:#fff; position:absolute; bottom:1.875vw; transition:0.3s;}
#smp_nav_btn span:after{ content: ""; display:block; height:1px; width:7.5vw; background:#fff; position:absolute; top:calc(1.875vw + 1px); transition:0.3s;}
#smp_nav_btn.active span{ background:rgba(255,255,255,0);}
#smp_nav_btn.active span:before{ bottom:0; transform: rotate(45deg);}
#smp_nav_btn.active span:after{ top:0; transform: rotate(-45deg);}
}



/*footer*/
footer#company_foot{ padding: 40px 0; margin: 0 auto; text-align: center;}
footer#company_foot ul{ display: flex; align-items: center; justify-content: center; list-style: none; margin: 0 auto; padding: 0; letter-spacing: 0.1em; font-size: 13px; line-height: 1em;}
footer#company_foot ul li{ margin: 0;}
footer#company_foot ul li:not(:last-child):after{ content: "|"; margin: 0 16px; font-size: 16px;}
footer#company_foot ul.blank{ margin-top: 20px; font-size: 11px;}
footer#company_foot ul.blank i{ margin-left: 0.5em;}
footer#company_foot ul li a{ text-decoration: none; padding: 0; position: relative;}
footer#company_foot ul li a:after{ content: ""; width: 0; height: 1px; background: #333; position: absolute; left: 0; right: 0; bottom: -0.25em; margin: auto; transition: 0.3s;}
footer#company_foot ul li a:hover:after{ width: 100%;}
@media screen and (max-width: 768px){
footer#company_foot{ padding: 5% 0;}
footer#company_foot ul{ flex-wrap: wrap; width: calc(100% + 1.5em); margin: -0.5em 0 -0.75em -0.5em;  letter-spacing: 0; font-size: 3.5vw; line-height: 1em;}
footer#company_foot ul li{ margin: 0;}
footer#company_foot ul li:not(:last-child):after{ content: "|"; margin: 0 1.25vw; font-size: 3.5vw;}
footer#company_foot ul.blank{ margin-top: 7.5%; font-size: 2.5vw; letter-spacing: 0;}
}

footer#footer{ text-align: center; border-top: 10px solid #a29d97; background: #f8f8f8; padding: 30px 0; font-size: 12px; position: relative;}
footer#footer figure.logo img{ width: 78px;}
#pagetop{ position: absolute; bottom: 20px; right: 20px; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #aaa; font-size: 48px;}
footer#footer .footer-social-links{ margin: 20px auto; font-size: 24px;}
footer#footer .footer-social-links a{ width: 36px; height: 36px; line-height: 36px; position: relative; margin: 0 8px; text-align: center; display: inline-block; color: #111; transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);}
footer#footer .footer-social-links a i, footer#footer .footer-social-links a span{ position: relative; top: 0; left: 0;}
footer#footer .footer-social-links a:before{ content: ""; display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px solid #111; border-radius: 2px; transform: rotate(45deg); transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);}
footer#footer .footer-social-links a:hover{ color: #fff;}
footer#footer .footer-social-links a:hover:before{ background: #111;}
footer#footer .footer-social-links .icon{ display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;}
footer#footer .footer-social-links .icon-x-twitter{
mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M389.2%2048h70.6L305.6%20224.2%20487%20464H345L233.7%20318.6%20106.5%20464H35.8L200.7%20275.5%2026.8%2048H172.4L272.9%20180.9%20389.2%2048zM364.4%20421.8h39.1L151.1%2088h-42L364.4%20421.8z%22%2F%3E%3C%2Fsvg%3E');
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
background-color: #111;
}
footer#footer .footer-social-links a:hover .icon {background: #fff;}
footer#footer .footer-text p{ color: #888; margin: 0 auto 1em; line-height: 1em;}
footer#footer .footer-text p a{ letter-spacing: 0.5em;}
footer#footer .footer-text p a:hover{ text-decoration: underline;}
@media screen and (max-width: 768px){
footer#footer{ border-top: 1.25vw solid #a29d97; padding: 5% 0; font-size: 2.5vw;}
footer#footer figure.logo img{ width: 15vw;}
#pagetop{ bottom: 3.75vw; right: 3.75vw; width: 10vw; height: 10vw; line-height: 10vw; font-size: 10vw;}
footer#footer .footer-social-links{ margin: 5% auto; font-size: 5vw;}
footer#footer .footer-social-links a{ width: 7.5vw; height: 7.5vw; line-height: 7.5vw; margin: 0 1.875vw;}
}



/*cta*/
.cta{ padding: 60px 0; text-align: center; color: #fff;}
.cta h3{ font-size: 18px; font-weight: 300; letter-spacing: 0.3em; margin-bottom: 1em;}
.cta a{ padding: 1em 3em; font-size: 12px; letter-spacing: 0.1em; background: #fff; color: #111;}
@media screen and (max-width: 768px){
.cta{ padding: 10%;}
.cta h3{ font-size: 3.5vw;}
.cta a{ font-size: 2.5vw;}
}



/*common*/
.bg-dark{ background-color: #A59F98;}
.container{ width: 1180px; margin: 0 auto; padding: 0 20px;}
h1, h2, h3, h4, h5, h6{ line-height: 1.5; font-weight: 400; font-family: 'Suranna', dnp-shuei-mincho-pr6n, '游明朝', YuMincho, serif;}
@media screen and (max-width: 1180px){
.container{ width: 100%;}
}
@media screen and (max-width: 768px){
.container{ padding: 0 5%;}
}



/*btn*/
figure.btn{ margin-top: 80px;}
figure.btn a{ font-family: "A1 Mincho R JIS2004 AP", "A1 Mincho", dnp-shuei-mincho-pr6n, '游明朝', YuMincho, serif;}
.btn_style1 a{ border:1px solid #333; color:#333; font-size:16px; letter-spacing:0.1em; display:inline-block; margin: 0 auto; padding:1em 3em; position: relative; transition: 0.3s;}
.btn_style1 a:before{ content:""; position:absolute; right:1em; top:calc(50% - 4px); width:8px; height:8px; border-top:1px solid #333; border-right:1px solid #333; transform: rotate(45deg); transition: 0.3s;}
.btn_style1 a:hover{ background: #161616; color: #fff;}
.btn_style1 a:hover:before{ border-color: #fff;}
@media screen and (max-width: 768px) {
figure.btn{ margin-top: 15%;}
.btn_style1 a{ font-size:3.5vw;}
}





/*home*/
#index_wrap{ background: #FAFAFA; overflow: hidden;}
#index_wrap_in{ background: #fff; padding: 0 0 1px; width: 100%; max-width: 1180px; margin: 0 auto;}
#index_wrap_in .new-index_cont{ padding: 0 80px;}
@media screen and (max-width: 1180px){
#index_wrap_in .new-index_cont{ padding: 0 calc((80/1180)*100vw);}
}
@media screen and (max-width: 768px){
#index_wrap_in .new-index_cont{ padding: 0;}
}

/*index*/
.index_cont{ margin: 80px auto; overflow: hidden;}
.index_cont figure{ text-align: center; margin: 40px auto;}
.index_cont ul{ display: flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; font-size: 16px; margin: -0.5em 0;}
.index_cont ul li{ padding-left: 1em; position: relative; margin: 0.5em 1em;}
@media screen and (max-width: 768px){
.index_cont{ margin: 15% auto;}
.index_cont figure{ margin: 7.5% auto;}
.index_cont ul{ font-size: 3.2vw; justify-content: flex-start;}
}

/*タイトル*/
h2.index_cont_h2{ text-align: center; font-size: 36px; line-height: 1.2em; letter-spacing: 0.1em; color: #111; font-weight: 400; margin-bottom: 1em;}
h2.index_cont_h2 span{ display: block; font-size: 40%; line-height: 1.2em; }
h2.index_cont_h2 a{ display: inline-block; font-size: 40%; line-height: 1.2em;}
@media screen and (max-width: 768px){
h2.index_cont_h2{ font-size:7.5vw; letter-spacing:0em;}
}

/*横並び*/
.index_cont_col2 ul{ display: flex; align-items: center; justify-content: center; margin: 0 !important; padding: 0; list-style: none !important;}
.index_cont_col2 ul li{ width: calc(50% - 20px); list-style: none !important; margin: 0; padding: 0;}
.index_cont_col2 ul li:nth-child(2n+1){ margin-right: 20px;}
.index_cont_col2 ul li:nth-child(2n){ margin-left: 20px;}
@media screen and (max-width: 768px){
.index_cont_col2 ul{ display:block;}
.index_cont_col2 ul li{ width:100%;}
.index_cont_col2 ul li:nth-child(2n+1){ margin:2.5% auto;}
.index_cont_col2 ul li:nth-child(2n){ margin:2.5% auto;}
}
.index_cont_col3 ul{ width: calc(100% + 20px); margin-left: -10px; display: flex; justify-content: center; margin: 0 !important; padding: 0; list-style: none !important;}
.index_cont_col3 ul li{ width: calc(33.33% - 20px); list-style: none !important; margin: 0 10px; padding: 0;}
@media screen and (max-width: 768px){
.index_cont_col3 ul{ display:block; width: 100%;}
.index_cont_col3 ul li{ width:100%; margin:2.5% auto;}
}

#index_fv{ background: url("../images/top/fv.jpg") center center; background-size: cover; width: calc(100% + 740px); margin-left: -370px; height: calc(100vh - 170px);}
@media screen and (max-width:768px){
#index_fv{ background: url("../images/top/fv_smp.jpg") center center; background-size: cover; width: 100%; margin: 0; height: calc(100vh - 12.5vw);}
}

/*news*/
.index_cont_news{ max-width: 900px; margin: 0 auto;}
h2.index_cont_h2.butler{ font-weight: 100;}
.ratio{ position: relative; width: 100%;}
.ratio > *{ border: none; padding: 0; margin: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.ratio-news{ padding-top: 150px;}

.new-index_cont{ width: 100%; max-width: 1180px; padding: 1px 20px; margin: 0 auto; position: relative; z-index: 1;}
@media screen and (max-width: 1180px){
.new-index_cont{ padding: 1px calc((20/1180)*100vw);}
}
@media screen and (max-width: 768px){
.new-index_cont{ width: 92.5%; padding: 1.25% 0;}
}

h2.new-index_cont_h2{ display: flex; margin-bottom: 80px;}
h2.new-index_cont_h2 a{ display: flex; flex-direction: column; width: 260px; padding-bottom: 40px; position: relative;}
h2.new-index_cont_h2 a:before{ content: ""; width: 240px; height: 1px; background: #111; position: absolute; left: 0; bottom: 0; transition: 0.3s;}
h2.new-index_cont_h2 a:after{ content: ""; width: 20px; height: 1px; background: #111; position: absolute; left: 220px; bottom: 0; transform: rotate(45deg); transform-origin: right bottom; transition: 0.3s;}
h2.new-index_cont_h2 a:hover:before{ width: 260px;}
h2.new-index_cont_h2 a:hover:after{ left: 240px;}
h2.new-index_cont_h2 strong{ font-size: 32px; line-height: 1em; letter-spacing: 0.1em; font-family: 'Butler', sans-serif; font-weight: 100; margin-bottom: 1em;}
h2.new-index_cont_h2 span{ font-size: 20px; line-height: 1em; letter-spacing: 0.1em; font-family: "A1 Mincho R JIS2004 AP", "A1 Mincho", dnp-shuei-mincho-pr6n, '游明朝', YuMincho, serif; font-weight: 300;}
@media screen and (max-width: 1180px){
h2.new-index_cont_h2{ margin-bottom: calc((80/1180)*100vw);}
h2.new-index_cont_h2 a{ width: calc((260/1180)*100vw); padding-bottom: calc((40/1180)*100vw);}
h2.new-index_cont_h2 a:before{ width: calc((240/1180)*100vw);}
h2.new-index_cont_h2 a:after{ width: calc((20/1180)*100vw); left: calc((220/1180)*100vw);}
h2.new-index_cont_h2 a:hover:before{ width: calc((260/1180)*100vw);}
h2.new-index_cont_h2 a:hover:after{ left: calc((240/1180)*100vw);}
h2.new-index_cont_h2 strong{ font-size: calc((32/1180)*100vw);}
h2.new-index_cont_h2 span{ font-size: calc((20/1180)*100vw);}
}
@media screen and (max-width: 768px){
h2.new-index_cont_h2{ margin-bottom: 10%;}
h2.new-index_cont_h2 a{ width: 36vw; padding-bottom: 10%;}
h2.new-index_cont_h2 a:before{ width: 36vw;}
h2.new-index_cont_h2 a:after{ width: 4vw; left: 32vw;}
h2.new-index_cont_h2 a:hover:before{ width: 36vw;}
h2.new-index_cont_h2 a:hover:after{ left: 32vw;}
h2.new-index_cont_h2 strong{ font-size: 5vw;}
h2.new-index_cont_h2 span{ font-size: 3.2vw;}
}

h2.new-index_cont_h2.yoko{ justify-content: center;}
h2.new-index_cont_h2.yoko a{ flex-direction: row; align-items: flex-end; justify-content: center; width: auto; padding: 0 160px 0 0;}
h2.new-index_cont_h2.yoko a strong{ margin: 0 1em 0 0;}
h2.new-index_cont_h2.yoko a:before{ width: 160px; left: auto; right: -20px;}
h2.new-index_cont_h2.yoko a:after{ left: auto; right: -20px;}
h2.new-index_cont_h2.yoko a:hover:before{ width: 180px; right: -40px;}
h2.new-index_cont_h2.yoko a:hover:after{ right: -40px;}
@media screen and (max-width: 1180px){
h2.new-index_cont_h2.yoko a{ padding: 0 calc((160/1180)*100vw) 0 0;}
h2.new-index_cont_h2.yoko a:before{width: calc((160/1180)*100vw); right:  calc((-20/1180)*100vw);}
h2.new-index_cont_h2.yoko a:after{ left: auto; right: calc((-20/1180)*100vw);}
h2.new-index_cont_h2.yoko a:hover:before{width: calc((180/1180)*100vw); right: calc((-40/1180)*100vw);}
h2.new-index_cont_h2.yoko a:hover:after{ right: calc((-40/1180)*100vw);}
}
@media screen and (max-width: 768px){
h2.new-index_cont_h2.yoko a{ padding: 0 24vw 0 0;}
h2.new-index_cont_h2.yoko a strong{ margin: 0 0.5em 0 0;}
h2.new-index_cont_h2.yoko a:before{ width: 24vw; right: -2.5vw;}
h2.new-index_cont_h2.yoko a:after{ right: -2.5vw;}
h2.new-index_cont_h2.yoko a:hover:before{ width: 24vw; right: -2.5vw}
h2.new-index_cont_h2.yoko a:hover:after{ right: -2.5vw;}
}

#index_lead p{ text-align: center; font-size: 20px; font-family: "A1 Mincho R JIS2004 AP", "A1 Mincho", dnp-shuei-mincho-pr6n, '游明朝', YuMincho, serif;}
@media screen and (max-width: 1180px){
#index_lead p{ font-size: calc((20/1180)*100vw);}
}
@media screen and (max-width: 768px){
#index_lead p{ font-size: 3.5vw;}
}

#index_philosophy{ margin: 160px auto; padding: 120px 0 0;}
#index_philosophy figure.img01{ width: 800px; margin: 0; position: absolute; right: 0; top: -120px; z-index: -1;}
#index_philosophy ul.img02-03{ margin: 120px 0 0; display: flex;}
#index_philosophy ul.img02-03 li{ width: 320px; margin: 0 20px; padding: 0;}
@media screen and (max-width: 1180px){
#index_philosophy{ margin: calc((160/1180)*100vw) auto; padding: calc((120/1180)*100vw) 0 0;}
#index_philosophy figure.img01{ width: calc((800/1180)*100vw); right: 0; top: calc((-120/1180)*100vw);}
#index_philosophy ul.img02-03{ margin: calc((120/1180)*100vw) 0 0;}
#index_philosophy ul.img02-03 li{ width: calc((320/1180)*100vw); margin: 0 calc((20/1180)*100vw);}
}
@media screen and (max-width: 768px){
#index_philosophy{ margin: 15% auto; padding: 5vw 0 0;}
#index_philosophy figure.img01{ width: 75vw; right: -25vw; top: -5vw;}
#index_philosophy ul.img02-03{ margin: 0 0 0; display: flex; justify-content: center;}
#index_philosophy ul.img02-03 li{ width: 33.33%; margin: 0 2.5%;}
}

#index_business{ margin: 160px auto;}
#index_business ul{ width: calc(100% + 40px); margin: -20px 0 -20px -20px;}
#index_business ul li{ width: calc(33.33% - 40px); margin: 20px; padding: 0;}
#index_business ul li a{ display: block;}
#index_business ul li figure img{ border-radius: 50%;}
#index_business ul li h4{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 40px auto 0;}
#index_business ul li h4 strong{ font-size: 30px; line-height: 1em; letter-spacing: 0.1em; font-family: 'Butler', sans-serif; font-weight: 100; margin-bottom: 1em;}
#index_business ul li h4 span{ font-size: 20px; line-height: 1em; letter-spacing: 0.1em; font-family: "A1 Mincho R JIS2004 AP", "A1 Mincho", dnp-shuei-mincho-pr6n, '游明朝', YuMincho, serif; font-weight: 300;}
@media screen and (max-width: 1180px){
#index_business{ margin: calc((160/1180)*100vw) auto;}
#index_business ul{ width: calc(100% + calc((40/1080)*100vw)); margin: calc((-20/1180)*100vw) 0 calc((-20/1180)*100vw) calc((-20/1180)*100vw);}
#index_business ul li{ width: calc(33.33% - 40px); margin: calc((20/1180)*100vw);}
#index_business ul li h4{ margin: calc((40/1180)*100vw) auto 0;}
#index_business ul li h4 strong{ font-size: calc((30/1180)*100vw);}
#index_business ul li h4 span{ font-size: calc((20/1180)*100vw);}
}
@media screen and (max-width: 768px){
#index_business{ margin: 25% auto;}
#index_business ul{ justify-content: center; width: calc(100% + 5vw); margin: -2.5vw 0 -2.5vw -2.5vw;}
#index_business ul li{ width: calc(50% - 5.25vw); margin: 2.5vw;}
#index_business ul li:first-child{ margin: 2.5vw 5vw;}
#index_business ul li h4{ margin: 2.5% auto 0;}
#index_business ul li h4 strong{ font-size: 5vw; margin-bottom: 0.5em;}
#index_business ul li h4 span{ font-size: 3.5vw;}
}

#index_about{ margin: 160px auto; padding-top: 80px;}
#index_about .new-index_cont{ padding: 0 160px;}
#index_about figure.img01{ margin: 80px 0 0 0; text-align: left;}
#index_about figure.img01 img{ width: 480px; margin-left: -160px;}
#index_about figure.img02{ margin: 0; position: absolute; right:0; top: -80px; z-index: -1;}
#index_about figure.img02 img{ height: 420px; border-radius: 320px 0 0 320px;}
@media screen and (max-width: 1180px){
#index_about{ margin: calc((160/1180)*100vw) auto; padding-top: calc((80/1180)*100vw);}
#index_about .new-index_cont{ padding: 0 calc((160/1180)*100vw);}
#index_about figure.img01{ margin: calc((80/1180)*100vw) 0 0 0;}
#index_about figure.img01 img{ width: calc((480/1180)*100vw); margin-left:  calc((-160/1180)*100vw);}
#index_about figure.img02{ right: 0; top: calc((-80/1180)*100vw);}
#index_about figure.img02 img{ height: calc((420/1180)*100vw); border-radius: calc((320/1180)*100vw) 0 0 calc((320/1180)*100vw);}
}
@media screen and (max-width: 768px){
#index_about{ margin: 15% auto; padding-top: 5vw;}
#index_about .new-index_cont{ padding: 0;}
#index_about figure.img01{ margin: 25% 0 0 -5vw;}
#index_about figure.img01 img{ width: 50vw; margin-left: 0;}
#index_about figure.img02{ width: 75vw; right: -25vw; top: -5vw;}
#index_about figure.img02 img{ height: auto; width: 100%;}
}

#index_recruit{ margin: 80px auto 0; padding-top: 80px; padding-bottom: 360px;}
#index_recruit h2.new-index_cont_h2{ justify-content: flex-end;}
#index_recruit figure.img01{ margin-top: -280px;}
#index_recruit figure.img01 img{ height: 280px;}
#index_recruit figure.img02{ position: absolute; left: 0; bottom: -360px;}
#index_recruit figure.img02 img{ height: 240px; border-radius: 0 280px 0 0;}
@media screen and (max-width: 1180px){
#index_recruit{ margin: calc((80/1180)*100vw) auto 0; padding-top: calc((80/1180)*100vw); padding-bottom: calc((360/1180)*100vw);}
#index_recruit figure.img01{ margin-top: calc((-280/1180)*100vw);}
#index_recruit figure.img01 img{ height: calc((280/1180)*100vw);}
#index_recruit figure.img02{ left: 0; bottom: calc((-360/1180)*100vw);}
#index_recruit figure.img02 img{ height: calc((240/1180)*100vw); border-radius: 0 calc((280/1180)*100vw) 0 0;}
}
@media screen and (max-width: 768px){
#index_recruit{ margin: 15% auto 0; padding-top: 10vw; padding-bottom: 40vw;}
#index_recruit h2.new-index_cont_h2{ margin: 0;}
#index_recruit figure.img01{ margin-top: -25vw; text-align: left;}
#index_recruit figure.img01 img{ height: 30vw;}
#index_recruit figure.img02{ left: -5vw; bottom: -40vw;}
#index_recruit figure.img02 img{ height: 25vw; border-radius: 0 25vw 0 0;}
}

#index_store{ margin: 0 auto 80px; padding: 80px 0 20px;}
#index_store h2.new-index_cont_h2{ justify-content: flex-end; padding-top: 240px;}
#index_store h2.new-index_cont_h2 a{ flex-direction: row; align-items: flex-end;}
#index_store h2.new-index_cont_h2 a strong{ margin: 0 1em 0 0;}
#index_store figure.img01{ margin: 0; position: absolute; right: 0; top: -80px; z-index: -1;}
#index_store figure.img01 img{ height: 240px; border-radius: 0 0 0 120px;}
#index_store ul.img02-03{ display: block; position: absolute; left: 0; top: -80px;}
#index_store ul.img02-03 li{ width: 580px; margin: 0; padding: 0;}
#index_store ul.img02-03 li img{ width: 100%;}
@media screen and (max-width: 1180px){
#index_store{ margin: 0 auto calc((80/1180)*100vw); padding: calc((80/1180)*100vw) 0 calc((20/1180)*100vw);}
#index_store h2.new-index_cont_h2{ padding-top: calc((240/1180)*100vw);}
#index_store figure.img01{ right: 0; top: calc((-80/1180)*100vw);}
#index_store figure.img01 img{ height: calc((240/1180)*100vw); border-radius: 0 0 0 calc((120/1180)*100vw);}
#index_store ul.img02-03{ left: 0; top: calc((-80/1180)*100vw);}
#index_store ul.img02-03 li{ width: calc((580/1180)*100vw);}
}
@media screen and (max-width: 768px){
#index_store{ margin: 0 auto 15%; padding: 20vw 0 0;}
#index_store h2.new-index_cont_h2{ padding-top: 7.5vw;}
#index_store h2.new-index_cont_h2 a strong{ margin: 0 0.5em 0 0;}
#index_store figure.img01{ right: -10vw; top: -20vw;}
#index_store figure.img01 img{ height: 22.5vw; border-radius: 0 0 0 10vw;}
#index_store ul.img02-03{ left: -5vw; top: -20vw;}
#index_store ul.img02-03 li{ width: 50vw;}
}

#index_news h2.new-index_cont_h2{ flex-direction: column;}
/*
#index_news ul{ display: flex; justify-content: space-between; margin: 0;}
#index_news ul li{ width: calc(33.33% - 40px); margin: 0; padding: 0;}
*/
#index_news ul{ width: 100%; margin: 0;}
#index_news ul li{ margin: 0 10px; padding: 0;}
#index_news ul li a{ display: block; width: 100%; height: 100%; transition: 0.3s; padding: 0 20px 20px; background: #fafafa;}
#index_news ul li a:hover{ opacity: 0.7;}
#index_news ul li figure{ width: calc(100% + 40px); background: #fff; margin: 0 0 20px -20px;}
#index_news ul li figure img{ width: 100%; height: fit-content; object-fit: contain; aspect-ratio: 3/2; border: 1px solid #eee;/*height: 240px; object-fit: cover;*/}
#index_news ul li figure img.object-fit-cover{ object-fit: cover !important;}
#index_news ul li p{ font-size: 0.7rem; line-height: 1.5em; /*height: 4.5em;*/ overflow: hidden; margin-bottom: 0.5em;}
#index_news ul li span.date{ display: block; font-size: 0.6rem; line-height: 1em; color: #aaa;}
@media screen and (max-width:768px){
#index_news ul li{ margin: 0 1.875vw;}
#index_news ul li a{ padding: 0 2.5vw 2.5vw;}
#index_news ul li figure{ width: calc(100% + 5vw); margin: 0 0 2.5vw -2.5vw;}
#index_news ul li figure img{ width: 100%; /*height: 40vw; object-fit: cover;*/}

#index_news .slick-prev,
#index_news .slick-next{ width: 7.5vw; height: 7.5vw; z-index: 99;}
#index_news .slick-prev::before,
#index_news .slick-next::before { content: ""; display: none;}
#index_news .slick-prev{ background: url("../js/slick/arrow_l.png") center center; background-size: 100%; left: 1.875vw; top: 50%; transform: translateY(-50%); opacity: 0.75; transition: 0.3s;}
#index_news .slick-next{ background: url("../js/slick/arrow_r.png") center center; background-size: 100%; right: 1.875vw; top: 50%; transform: translateY(-50%); opacity: 0.75; transition: 0.3s;}
#index_news .slick-prev:hover,
#index_news .slick-next:hover{ opacity: 1.0;}
}




/*pages*/
#page_wrap{ background: #FAFAFA; overflow: hidden;}
#page_wrap_in{ background: #fff; padding: 1px 0; width: 100%; max-width: 1180px; margin: 0 auto;}
#page_wrap .page_cont{ padding: 0 80px;}
#page_wrap .page_cont .container{ width: 100%; padding: 0;}
@media screen and (max-width: 1180px){
#page_wrap .page_cont{ padding: 0 calc((80/1180)*100vw);}
}
@media screen and (max-width: 768px){
#page_wrap .page_cont{ padding: 0;}
#page_wrap .page_cont .container{ padding: 0 5%;}
}
.page_cont{ margin: 80px auto; overflow: hidden;}
@media screen and (max-width: 768px){
.page_cont:first-child{ margin-top: 0;}
.page_cont{ margin: 15% auto;}
}

/*page_mv*/
.page_mv{ width: 100%; display: block; overflow: hidden; background: #fff no-repeat fixed; background-size: cover; padding: 40px 0; position: relative; z-index: 1;}
.page_mv::before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(252,252,252, .30); z-index: -1;}
.page_mv h1{ width: 1080px; margin: 0 auto; font-size: 30px; letter-spacing: 0.5em; line-height: 1.75em; opacity: .75;}
@media screen and (max-width: 768px){
.page_mv{ background-attachment: inherit; padding: 7.5% 0;}
.page_mv h1{ width: 92.5%; font-size: 4.5vw; letter-spacing: 0.2em;}
}

/*パンくずナビ*/
.bread_nav{ width: 1180px; padding: 0 20px; margin: 20px auto;}
.bread_nav ul{ list-style: none; font-size: 14px;}
.bread_nav ul li{ display: inline-block; margin-right: 0.5em;}
.bread_nav ul li i{ margin-right: 0.5em;}
.bread_nav ul li a:hover{ text-decoration: underline;}
@media screen and (max-width: 1180px){
.bread_nav{ width: 100%;}
}
@media screen and (max-width: 768px){
.bread_nav{ width: 92.5%; margin: 5% auto;}
.bread_nav ul{ font-size: 2.5vw;}
}

/*tit*/
h2.page_tit_h2{ font-size: 40px; line-height: 1.5em; letter-spacing: 0.1em; font-family: 'Butler', sans-serif; font-weight: 100; margin-bottom: 0.5em;}
h3.page_tit_h3{ font-size: 24px; line-height: 1.5em; letter-spacing: 0.1em; font-family: "A1 Mincho R JIS2004 AP", "A1 Mincho", dnp-shuei-mincho-pr6n, '游明朝', YuMincho, serif; font-weight: 300; margin-bottom: 1.5em;}
@media screen and (max-width: 768px){
h2.page_tit_h2{ font-size: 6vw;}
h3.page_tit_h3{ font-size: 4.5vw;}
}

/*txt*/
.page_cont p.page_txt{ font-size: 18px; font-family: "A1 Mincho R JIS2004 AP", "A1 Mincho", dnp-shuei-mincho-pr6n, '游明朝', YuMincho, serif;}
@media screen and (max-width: 768px){
.page_cont p.page_txt{ font-size: 3.5vw;}
}


















@media print, screen and (min-width:769px){
.smp{ display:none !important;}
}
@media screen and (max-width:768px){
.pc{ display:none !important;}
}