@charset "utf-8";

/*-----スタイルシート　1910--------------------------------------------*/
/*HTML5 Doctor Reset Stylesheet*/

@import url("rest.css");

/*-------------------------------------------------*/
/*全体設定*/

:root{
--ac1:#FA870F;
--ac2:#00AFAF;
--tx1:#091111;
--f-not:"Noto Sans JP", sans-serif;
--f-mpl:"M PLUS Rounded 1c", sans-serif;
--f-tka:"TsukuAntiqueLGoStd-B", sans-serif;
--f-kom:komet, sans-serif;
}


h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
/*--------------------*/



.sp_only { display:none;}
#wrapper {
width:100%;
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: 20px;
color: var(--tx1);
}
#contents {
width:100%;
margin:0 auto;
}
div[class$="_box"],section[class$="_box"]{
width: 1100px;
margin-left: auto;
margin-right: auto;
}
div,section {
justify-content: space-between;
flex-wrap: wrap;
}
p {
letter-spacing: 0.06em;
}
p.honb {
line-height: 2.5em;
}



/*-------------------------------------------------*/
/*ヘッダー*/
header{
width: 100%;
min-width: 1100px;
z-index: 50;
display: flex;
justify-content: space-between;
padding-top: 8px;
position: absolute;
}
.logo{
font-family: var(--f-mpl);
transform: rotate(0.03deg);
font-weight: 600;
font-size: 32px;
padding-left: 34px;
}
.logo a{
letter-spacing: 0.07em;
padding: 14px;
display: block;
}
.logo span{
display: block;
font-size: 15px;
margin-left: 2px;
font-weight: 500;
letter-spacing: 0.15em;
}
.logo strong{
display: inline-block;
transform: translate(4px,3px);
font-size: 40px;
font-weight: 600;
}
.header_nav {
}
.header_nav ul{
position: fixed;
top: 40px; right: 0;
display: flex;
align-items: center;
background: #fff;
padding: 11px 25px 9px;
border-radius:32px 0 0 32px;
box-shadow: 1px 1px 4px rgba(0,0,0,0.13);
}
.header_nav ul li{
margin: 8px 4px;
font-size: 19px;
font-weight: 500;
font-family: var(--f-mpl);
transform: rotate(0.03deg);
}
.header_nav ul li a{
}
.header_nav ul li a:not(.hd_icon){
padding: 4px 9px;
transition: 0.12s ease-in-out;
}
.header_nav ul li a:not(.hd_icon):hover{
color: var(--ac1);
}
.header_nav ul li a.hd_icon{
background: var(--ac2);
border-radius: 26px;
color: #fff;
text-align: center;
font-size: 26px;
padding: 6px 11px 4px;
margin-left: 10px;
transition: 0.15s ease-in-out;
}
.header_nav ul li a.hd_icon:hover{
opacity: 0.6;
}


.pagetop {
position: fixed;
width: 70px;
padding: 11px;
right: 10px;
bottom: -350px;
z-index: 90001;
background: var(--ac2);
color: #fff;
text-align: center;
font-size: 18px;
font-family: var(--f-kom);
font-weight: 500;
font-style: italic;
letter-spacing: 0.00em;
transition: 0.9s;
}
.pagetop.act {
bottom: 10px;
}

/*-----フェードアニメーション-----*/
.fade-in {
opacity: 0;
transition-duration: 500ms;
transition-property: opacity, transform;
}
.fade-in-up {
transform: translate(0, 50px);
}

.fade-in-down {
transform: translate(0, -50px);
}

.fade-in-left {
transform: translate(-50px, 0);
}

.fade-in-right {
transform: translate(50px, 0);
}

.scroll-in {
opacity: 1;
transform: translate(0, 0);
}
.delay1{
transition-delay: 0.4s;
}

.delay2{
transition-delay: 0.8s;
}
/*-----スクロールアニメーション-----*/
.scr_act {
/*transition: 0.8s ease-in-out;*/
}
/*-------------------------------------------------*/
/*フッター*/


footer {
width: 100%;
min-width: 1100px;
position: relative;
background: var(--ac1);
padding: 75px 0 0;
overflow: hidden;
}
.foot_box {
display: flex;
margin-bottom: 80px;
color: #fff;
font-family: var(--f-mpl);
transform: rotate(0.03deg);
}

.foot_inf a:first-child{
letter-spacing: 0.04em;
padding: 10px;
display: block;
font-size: 40px;
margin-left: -10px;
}
.foot_inf a:first-child span{
display: block;
font-size: 18px;
margin-left: 2px;
font-weight: 500;
letter-spacing: 0.17em;
}
.foot_inf a:first-child strong{
display: inline-block;
transform: translate(4px,3px);
font-size: 50px;
font-weight: 500;
}
.foot_inf p {
margin: 8px 0 7px;
}
.foot_inf a:last-child {
font-size: 23px;
font-weight: 600;
letter-spacing: 0.06em;;
}
.foot_inf i {
color: rgba(255,255,255,0.6);
display: inline-block;
font-size: 120%;;
transform: translateY(0.2rem);
margin-right: 6px;
}

.foot_link {
width: 340px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.foot_link li {
width: 140px;
}
.foot_link li a {
padding: 3px 6px 3px 20px;
position: relative;
}
.foot_link li a::before {
content: "";
background: #fff;
width: 15px; height: 1px;
position: absolute;
left: -5px; top: 17px;
}
.foot_link li a::after {
content: "";
background: #fff;
width: 5px; height: 5px;
border-radius: 3px;
position: absolute;
left: -9px; top: 15px;
transition: 0.15s ease-in-out;
}
.foot_link li a:hover::after {
width: 7px; height: 7px;
border-radius: 4px;
left: 9px; top: 14px;
}
#copyright {
background: rgba(0,0,0,0.2);
padding: 19px 0 22px;
color: rgba(255,255,255,0.7);
font-weight: 300;
letter-spacing: 0.07em;
}
#copyright {
text-align: center;
font-size: 14px;
font-family:var(--f-ftu);
margin-top: 50px;
}


/*-------------------------------------------------*/
/*コンテンツ*/

/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　TOP　◆◆*/

/*--////　main_visual　////--*/
#main_visual{
width: calc(100% - 40px);
min-width: 1100px;
margin: 20px 20px 0;
height:90vh;
position: relative;
background: url("../images/top_main.webp") 90% 90%;
background-size:cover;
border-radius: 40px;
}
#main_visual h1{
color: var(--ac1);
font-family: var(--f-tka);
font-size: 50px;
position: absolute;
left: 50%; top:50%;
transform: translate(-50%,-50%);
letter-spacing: 0.1em;
text-shadow: 
3px 3px 8px rgba(255,255,255,1),
3px -3px 8px rgba(255,255,255,1),
-3px 3px 8px rgba(255,255,255,1),
-3px -3px 8px rgba(255,255,255,1),
6px 6px 16px rgba(255,255,255,1),
6px -6px 16px rgba(255,255,255,1),
-6px 6px 16px rgba(255,255,255,1),
-6px -6px 16px rgba(255,255,255,1);
}

a.pagelink {
font-family: var(--f-mpl);
font-size: 24px;
font-weight: 600;
transform: rotate(0.03deg);
letter-spacing: 0.11em;
padding:2px 47px 2px 8px;
position: relative;
z-index: 5;
}
a.pagelink span {
content: "";
width: 40px; height: 40px;
border-radius: 20px;
background: var(--ac2);
position: absolute;
right: 2px; top: 0;
transition: 0.07s ease-in-out;
}
a.pagelink:hover span {
right: -10px;
}
a.pagelink span::after,
a.pagelink span::before{
content: "";
border-radius: 1.5px;
background: #fff;
position: absolute;
transform: rotate(45deg);
}
a.pagelink span::after {
width: 15px; height: 3px;
right: 10px; top: 14px;
}
a.pagelink span::before {
width: 3px; height: 15px;
right: 16px; top: 17px;
}

/*--////　top_pol　////--*/

#top_pol {
height: 950px;
width: 100%;
min-width: 1100px;
position: relative;
background: url("../images/top_pol_back.webp") center center;
background-size: cover;
}
#top_pol h2 {
position: absolute;
top: 50%;
right: calc(50% - 225px);
transform: translate(50%,-50%);
text-align: center;
font-family: var(--f-kom);
font-weight: 500;
font-style: italic;
font-size: 100px;
color: var(--ac1);
line-height: 1.4em;
}
#top_pol h2::before {
content: "";
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%,-50%);
width: 650px;
height: 650px;
background: url("../images/top_pol_mask.webp") center center;
background-size: cover;
z-index: -1;
}
#top_pol div {
position: absolute;
z-index: 5;
left: calc(50% - 550px);
top: 140px;
width: 400px;
}
#top_pol div p {
margin-bottom: 100px;
}
#top_pol div a.pagelink {
left: 210px;
}

/*--////　top_prd　////--*/

.basich2 {
font-family: var(--f-kom);
font-weight: 500;
font-style: italic;
font-size: 100px;
color: var(--ac1);
}
.basich2 span {
display: inline-block;
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 500;
font-size: 18px;
color: var(--tx1);
margin-left: 20px;
margin-right: 20px;
}


#top_prd {
background: url("../images/tp_prd_main.webp") center center no-repeat;
overflow: hidden;
padding: 30px 0 80px;
background-size: cover;
/*height: 980px;*/
}
#top_prd h2 {
width: 1100px;
margin: 0 auto 40px;
text-align: right;
}
.top_prd_in {
width: 1100px;
margin: 0 auto;
padding-left: 630px;
}

.top_prd_in div {
width: 470px;
}
.top_prd_in div h3 {
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 600;
font-size: 40px;
margin-bottom: 24px;
}
.top_prd_in div p {
margin-bottom: 50px;
}
.top_prd_in div a {
left: 290px;
}
/*--////　top_prd2　////--*/
/*

.top_prd_itm {
width: 1100px;
margin: 40px auto 90px;
display: flex;
justify-content: space-between;
}
.top_prd_itm li {
width: 340px;
text-align: center;
position: relative;
}
.top_prd_itm li img {
width: 100%;
height: 240px;
object-fit: cover;
background: #f2f2f2;
border-radius: 20px;
}
.top_prd_itm li p {
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 600;
font-size: 25px;
position: absolute;
left: 15px;
top: 10px;
}
*/

/*--////　top_rec　////--*/

#top_rec {
background: url("../images/top_rec.webp") center center no-repeat;
overflow: hidden;
padding: 70px 0 200px;
background-size: cover;
/*height: 980px;*/
}
#top_rec h2 {
text-align: right;
width: 1100px;
margin: 0 auto 120px;
}
#top_rec div {
width: 1100px;
margin: 0 auto;
padding-right: 570px;
}
#top_rec div h3 {
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 600;
font-size: 52px;
margin-bottom: 40px;
line-height: 1.5em;
letter-spacing: 0.1em;
}
#top_rec div p {
margin-bottom: 60px;
}
#top_rec div a {
left: 370px;
}

/*--////　top_abo　////--*/

#top_abo {
padding: 100px 0 150px;
}
#top_abo h2 {
width: 1100px;
margin: 0 auto 20px;
}
.top_abo_in {
display: flex;
width: 1100px;
margin: 0 auto;
}
.top_abo_in img {
width: 520px;
border-radius: 25px;
}
.top_abo_in div {
width: 520px;
}
.top_abo_in div h3 {
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 600;
font-size: 40px;
margin-bottom: 40px;
margin-top: 30px;
letter-spacing: 0.1em;
}
.top_abo_in div p {
margin-bottom: 60px;
line-height: 2.5em;
}
.top_abo_in div a {
left: 370px;
}

/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　サブ共通　◆◆*/

#sub_visual {
width: calc(100% - 40px);
min-width: 1100px;
margin: 20px 20px 0;
height:480px;
position: relative;
background-size:cover;
border-radius: 40px;
}
#sub_visual h1 {
color: var(--ac1);
font-family: var(--f-mpl);
font-size: 50px;
position: absolute;
left: calc(50% - 530px); top:50%;
transform: translate(0%,-50%);
letter-spacing: 0.1em;
text-shadow: 
3px 3px 8px rgba(255,255,255,1),
3px -3px 8px rgba(255,255,255,1),
-3px 3px 8px rgba(255,255,255,1),
-3px -3px 8px rgba(255,255,255,1),
6px 6px 16px rgba(255,255,255,1),
6px -6px 16px rgba(255,255,255,1),
-6px 6px 16px rgba(255,255,255,1),
-6px -6px 16px rgba(255,255,255,1);
}


/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　POLICY　◆◆*/

/*--////　pol_sub　////--*/
.pol_sub {
background: url("../images/pol_sub.webp") 0% 90%;
}
/*--////　pol_omo　////--*/

#pol_omo {
padding: 100px 0 100px;
}
#pol_omo h2 {
width: 1100px;
margin: 0 auto 40px;
}
.pol_omo_in {
display: flex;
width: 1100px;
margin: 0 auto;
}
.pol_omo_in img {
width: 650px;
object-fit: cover;
border-radius: 40px;
}
.pol_omo_in div {
width: 400px;
}
.pol_omo_in div h3 {
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 600;
font-size: 40px;
margin-bottom: 20px;
letter-spacing: 0.1em;
line-height: 1.42em;
}
.pol_omo_in div p {
line-height: 2.42em;
margin-bottom: 20px;
}

/*--////　pol_fea　////--*/


#pol_fea {
overflow: hidden;
padding: 0px 0 80px;
}
#pol_fea h2 {
text-align: right;
width: 1100px;
margin: 0 auto 20px;
}
#pol_fea ul {
display: flex;
justify-content: space-between;
width: 1100px;
margin: 0 auto;
}
#pol_fea ul li {
text-align: center;
width: 340px;
height: 340px;
border-radius: 170px;
border: #F4F4F4 solid 10px;
padding-top: 32px;
}
#pol_fea ul li img {
width: 220px;
}
#pol_fea ul li h3 {
background: var(--ac1);
padding: 15px 0;
width: 80%;
margin: 17px auto 15px;
border-radius: 30px;
color: #fff;
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 400;
font-size: 22px;
}
#pol_fea ul li p {
}

/*--////　pol_mot　////--*/

#pol_mot {
padding: 0 0 110px;
}
#pol_mot h2 {
width: 1100px;
margin: 0 auto 25px;
}
#pol_mot > ul {
width: 1100px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
#pol_mot > ul > li {
text-align: center;
border-radius: 15px;
box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
width: 520px;
padding: 30px;
}
#pol_mot > ul > li h3 {
color: var(--ac1);
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 400;
font-size: 40px;
margin-bottom: 15px;
letter-spacing: 0.1em;
}
#pol_mot > ul > li h4 {
font-size: 29px;
margin-bottom: 20px;
}
#pol_mot > ul > li ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#pol_mot > ul > li ul li {
width: 28%;
padding: 5px 0;
border: 2px solid var(--ac2);
margin: 5px;
border-radius: 4px;
}
#pol_mot > ul > li ul li:nth-child(n+4) {
border-color: var(--ac1);
margin-bottom: 0;
}
#pol_mot > ul > li p {
line-height: 2.2em;
margin-top: 28px;
}


/*--////　pol_lit　////--*/
#pol_lit {
background: linear-gradient(180deg, rgba(234,234,234,1) 0%, rgba(234,234,234,0) 80%);
margin-bottom: 50px;
overflow: hidden;
min-width: 1100px;
}
#pol_lit h2 {
font-family: var(--f-kom);
font-size: 100px;
color: #fff;
}
#pol_lit div {
position: relative;
height: 250px;
margin-top: 4px;
}
#pol_lit div img {
position: absolute;
width: 22.5%;
height: 250px;
bottom: 0px;
object-fit: cover;
border-radius: 20px;
animation: polit 30s linear infinite;
}
#pol_lit div img:nth-child(1) {
animation-delay: -25s;
}
#pol_lit div img:nth-child(2) {
animation-delay: -20s;
}
#pol_lit div img:nth-child(3) {
animation-delay: -15s;
}
#pol_lit div img:nth-child(4) {
animation-delay: -10s;
}
#pol_lit div img:nth-child(5) {
animation-delay: -5s;
}
#pol_lit div img:nth-child(6) {
animation-delay: 0s;
}
@keyframes polit {
0% {left: 123%;}
100% {left:-23%;}
}

/*--////　pol_mes　////--*/

#pol_mes {
background: url("../images/pol_mes_bg.webp") center center;
background-size: cover;
overflow: hidden;
padding: 90px 0 0;
background-size: cover;
/*height: 980px;*/
}
#pol_mes h2 {
width: 1100px;
margin: 0 auto 60px;
}
.pol_mes_in {
width: 1100px;
margin: 0 auto;
display: flex;
}
.pol_mes_in img {
width: 640px;
margin-right: -160px;
margin-left: -100px;
margin-bottom: -20px;
margin-top: -130px;
}
.pol_mes_in div {
width: 720px;
}
.pol_mes_in div p {
line-height: 2.2em;
margin-bottom: 40px;
text-shadow: 
3px 3px 8px rgba(255,255,255,1),
3px -3px 8px rgba(255,255,255,1),
-3px 3px 8px rgba(255,255,255,1),
-3px -3px 8px rgba(255,255,255,1);
}

.pol_mes_in div h4 {
text-align: right;
font-size: 19px;
}
.pol_mes_in div h4 strong {
font-size: 26px;
letter-spacing: 0.1em;
}

/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　PRODUCT　◆◆*/

/*--////　prd_sub　////--*/
.prd_sub {
background: url("../images/prd_sub.webp") 0% 90%;
}
/*--////　prd_ser　////--*/
#prd_ser {
position: relative;
padding: 110px 0 80px;
background: linear-gradient(180deg, rgba(255,255,255,1) 40%, rgba(255,243,231,0.7) 70%, rgba(255,255,255,1) 100%);
z-index: -2;
}
.prd_ser_tx {
width: 1100px;
margin: 0 auto;
}
.prd_ser_tx h2 {
width: 460px;
margin-bottom: 70px;
}
.prd_ser_tx h3 {
width: 460px;
margin-bottom: 40px;
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 600;
font-size: 40px;
letter-spacing: 0.1em;
}
.prd_ser_tx p {
width: 460px;
margin-bottom: 30px;
}
#prd_ser > img {
position: absolute;
top: 0;
right: 0;
height: 745px;
object-fit: cover;
object-position: left;
width: calc(50% + 240px);
z-index: -1;
}
.prd_ser_kode {
width: 1100px;
margin: 0 auto;
padding: 30px;
background: #fff;
border: 2px solid var(--ac1);
border-radius: 20px;
display: flex;
align-items: center;
}
.prd_ser_kode h4 {
width: 150px;
text-align: center;
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 600;
font-size: 25px;
}
.prd_ser_kode p {
line-height: 1.5em;
width: 853px;
font-size: 18px;
line-height: 1.8em;
}

/*--////　prd_lot　////--*/
#prd_lot {
width: 1100px;
margin: 0 auto;
padding: 80px 0 120px;
display: flex;
}
#prd_lot > img {
width: max(520px,calc(50vw - 30px));
margin-left: min(0px,calc(550px - 50vw));
height: 420px;
object-fit: cover;
border-radius: 0 40px 40px 0;
}
.prd_lot_tx {
width: 520px;
}
.prd_lot_tx h2 {
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 600;
font-size: 40px;
letter-spacing: 0.1em;
margin-bottom: 25px;
margin-top: 10px;
}
.prd_lot_tx p {
}
.prd_lot_tx a {
display: block;
padding: 8px;
border: 1px solid var(--ac1);
border-radius: 20px;
width: 250px;
text-align: center;
position: relative;
letter-spacing: 0.1em;
margin: 30px auto 0;
font-size: 18px;
}
.prd_lot_tx a i {
position: absolute;
right: 12px;
top: 11px;
font-size: 14px;
}

/*--////　prd_itm　////--*/
#prd_itm {
background: #F4F4F4;
padding: 90px 0;
}
#prd_itm h2 {
width: 1100px;
margin: 0 auto 60px;
}
#prd_itm ul {
width: 1100px;
margin: 0 auto;
}
#prd_itm ul li {
display: flex;
justify-content: space-between;
margin-bottom: 45px;
}
#prd_itm ul li img {
width: 440px;
border-radius: 25px;
}
#prd_itm ul li div {
width: 610px;
padding-top: 20px;
}
#prd_itm ul li div h3 {
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 600;
font-size: 30px;
margin-bottom: 25px;
}
#prd_itm ul li div p {
line-height: 2em;
}


/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　RECRUIT　◆◆*/

/*--////　rec_sub　////--*/
.rec_sub {
background: url("../images/rec_sub.webp") 0% 90%;
}
/*--////　rec_wos　////--*/
#rec_wos {
padding: 100px 0 570px;
background: url("../images/rec_wp_bg.png") 0% 90%;
background-size: cover;
}
#rec_wos h2 {
width: 1100px;
margin: 0 auto 70px;
}
.rec_wos_in {
width: 1100px;
margin: 0 auto;
display: flex;
position: relative;
}
.rec_wos_in > img:not(.wosi) {
width: 620px;
height: 420px;
object-fit: cover;
border-radius: 40px;
}
.rec_wos_in > div {
width: 440px;
}
.rec_wos_in > div h3 {
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 600;
font-size: 40px;
letter-spacing: 0.1em;
margin-bottom: 35px;
}
.rec_wos_in > div p {
line-height: 2em;
}
.rec_wos_in > img.wosi {
border-radius: 30px;
position: absolute;
object-fit: cover;
}
.rec_wos_in > img.wosi:nth-of-type(2) {
width: 400px;
height: 290px;
left: 190px;
top: 385px;
z-index: 4;
}
.rec_wos_in > img.wosi:nth-of-type(3) {
width: 250px;
height: 250px;
left: 0px;
top: 630px;
z-index: 5;
}
.rec_wos_in > img.wosi:nth-of-type(4) {
width: 250px;
height: 250px;
left: 495px;
top: 550px;
z-index: 3;
}
.rec_wos_in > img.wosi:nth-of-type(5) {
width: 380px;
height: 380px;
left: 720px;
top: 500px;
}
/*--////　rec_voc　////--*/
#rec_voc {
background: rgba(253,207,159,0.4);
overflow: hidden;
}
.rec_voc_lay {
background: url("../images/rec_voi_bg.png") no-repeat;
background-size: 90vw;
background-position: 170% 0px;
padding: 100px 0 130px;
}
.rec_voc_lay h2 {
width: 1100px;
margin: 0 auto -40px;
}
.rec_voc_lay ul {

}
.rec_voc_lay ul li {
width: 1100px;
margin: 110px auto 0px;
}
.rec_voc_lay ul li h3{
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 600;
font-size: 40px;
letter-spacing: 0.1em;
margin-bottom: 35px;
line-height: 1.5em;
}
.rec_voc_lay ul li.recvoc_R h3{
text-align: right;
}
.recvoc_L {

}
.recvoc_R {

}
.recvoc_obi {
display: flex;
width: 1100px;
margin: 0 auto;
position: relative;
z-index: 3;
}
.recvoc_R .recvoc_obi {
flex-flow: row-reverse;
}
.recvoc_obi::before {
background: #fff;
content: "";
width: calc(50vw + 610px);
height: 360px;
position: absolute;
top: -20px;
z-index: -1;
border-radius: 40px;
}
.recvoc_obi::after {
background: #fff;
content: "";
width: calc(50vw - 210px);
height: 400px;
position: absolute;
top: -160px;
z-index: -1;
border-radius: 40px;
opacity: 0.6;
}
.recvoc_L .recvoc_obi::before {
left: min(-30px,calc(520px - 50vw));
}
.recvoc_L .recvoc_obi::after {
right: calc(520px - 50vw);
}
.recvoc_R .recvoc_obi::before {
right: calc(520px - 50vw);
}
.recvoc_R .recvoc_obi::after {
left: min(-30px,calc(520px - 50vw));
}


.recvoc_obi p {
width: 630px;
padding-top: 30px;
line-height: 1.8em;
}

.recvoc_tx {
}
.recvoc_tx h4 {
padding: 10px 0px;
width: 340px;
text-align: center;
color: #fff;
display: block;
margin: -40px 0 10px;
background: var(--ac1);
border-radius: 30px;
}
.recvoc_L .recvoc_tx h4 {
margin-left: 78px;
}
.recvoc_tx img {
width: 420px;
height: 300px;
object-fit: cover;
object-position: 50% 40%; 
border-radius: 20px;
}

/*--////　rec_yok　////--*/
#rec_yok {
width: 1100px;
margin: 0 auto;
padding: 90px 0;
}
#rec_yok h2 {
margin-bottom: -30px;
}
.stopped {
padding: 190px 0 200px;
}
.stopped h3 {
text-align: center;
opacity: 0.7;
font-size: 26px;
letter-spacing: 0.1em;
}
.recyok_bit {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.recyok_bitnot {
position: relative;
}
.recyok_bitnot::before {
position: absolute;
width: 1100px;
content: "";
height: 250px;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
bottom: 0;
z-index: 3;
}
.recyok_bitnot dl {
opacity: 0.15;
}
.recyok_bit h3 {
width: 1100px;
margin-bottom: 30px;
margin-top: 120px;
border-bottom: 2px solid var(--ac1);
padding-bottom: 10px;
padding-left: 10px;
font-family: var(--f-mpl);
transform: rotate(0.04deg);
font-weight: 600;
font-size: 33px;
letter-spacing: 0.1em;
position: relative;
}
.recyok_bit h3::after {
position: absolute;
content: "";
height: 6px;
width: 180px;
bottom: -1px;
left: 0;
background: var(--ac1);
}
.recyok_bit h3 span {
font-size: 27px;
position: absolute;
background: var(--ac2);
left: 200px;
padding: 5px 8px 4px 13px;
letter-spacing: 0.02em;;
color: #fff;
}
.recyok_bit h3 span.bitnot {
background: #bbb;
}

.recyok_bit dl {
width: 520px;
line-height: 1.3em;
}
.recyok_bit dl dt {
color: var(--ac1);
margin-bottom: 15px;
}
.recyok_bit dl dd {
margin-bottom: 22px;
border-bottom: 1px solid #888;
padding-bottom: 20px;
}
.recyok_bit dl span {
color: var(--ac1);
}



/*--////　要項を非表示にするセット　////--*/
.recyok_bit dl,
.recyok_bit h3 span{
display: none;
}
.recyok_bit h3 {
margin-top: 90px;
margin-bottom: -20px;
}
/*--////　要項を非表示にするセット　ここまで　////--*/


/*--////　contact　////--*/
#contact {
background: #F4F4F4;
padding: 90px 0 120px;
}
.cont_tx {
display: flex;
width: 1100px;
margin: 0 auto;
align-items: center;
}
.cont_tx h2{
width: 450px;
}
.cont_tx p {
width: 600px;
line-height: 2em;
margin-top: 30px;
}

/*------------------form.php---------------------*/

.contact_in {
width: 900px;
margin: 70px auto 0;
position: relative;
}

.formstyle div:not(.formbotarea){
margin: 0 0 18px;
}
.formstyle label {
width: 180px;
display: inline-block;
margin: 15px 0;
font-size: 20px;
vertical-align: top;
margin-right: 0.5em;
text-align: right;
line-height: 1.4em;
}
.formstyle label span {
color: var(--ac1);
font-size: 150%;
display: inline-block;
line-height: 0;
}
.formstyle input:not(.imbot),
.formstyle textarea,
.formstyle select{
width: 700px;
border:none;
padding: 10px 15px;
border-radius: 7px;
font-family:var(--f-not);
font-weight: 300!important;
font-size: 20px;
background: rgba(255,255,255,0.71);
border: 1px solid rgba(50,50,50,0.18);
}
.formstyle textarea{
font-family:var(--f-not);
font-weight: 300!important;
font-size: 20px;
font-size: 18px;
height: 12em;
}
.formstyle select{
width: 500px;
padding: 14px 15px;
-webkit-appearance: none;
appearance: none;
}
.formstyle .selectdiv{
position: relative;
}
.formstyle .selectarr{
position: absolute;
z-index: 10;
right: 150px;
top: 50%;
line-height: 0;
font-size: 12px;
opacity: 0.5;
}
.formbotarea  {
display: flex;
width: 700px;
margin: 0 auto;
justify-content: center;
padding-top: 40px;
}

.lnkbott {
color: #fff;
padding: 13px 0;
border: none;
font-size: 20px;
margin-top: 20px;
background: var(--ac1);
width: 240px;
cursor: pointer;
}
.hissu {
text-align: center;
width: 100%;
}
.lnkbott:hover {
opacity: 0.7;
}
.lnkbott_op {
opacity: 0.8;
background: #aaa;
}


/*--- フォーム確認画面・最終画面 ----*/

#formWrap {
width: 1100px;
margin: 0px auto 0px;
padding: 200px 0 30vh;
}
#rec_kakunin {
}

.kakunin_err {
width: 700px;
margin: 0 auto;
}
.kakunin_err h4 {
text-align: center;
font-size: 22px;
line-height: 1.4em;
margin-bottom: 65px;
}
.error_messe {
width: 490px;
margin: 15px auto;
color:darkred;
}


.formTable {
border-collapse: collapse;
width: 700px;
margin: 50px auto;
}
.formTable th,
.formTable td{
border: 1px solid #aaa;
padding: 12px;
}
.formTable th{
background: #ddd;
width: 180px;
}

.kakunin_ok {
text-align: center;
font-size: 22px;
line-height: 1.4em;
}

.f_kanryo {
width: 700px;
margin: 0px auto 200px;
padding-top: 190px;
}
.f_kanryo p {
margin: 70px 0;
font-size: 22px;
}


/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　ABOUT　◆◆*/

/*--////　abo_sub　////--*/
.abo_sub {
background: url("../images/abo_sub.webp") 0% 90%;
}
/*--////　abo_out　////--*/
#abo_out {
width: 1100px;
margin: 0 auto;
padding: 80px 0 120px;
}
#abo_out h2 {
margin-bottom: 40px;
}
.outline {
display: flex;
}

.outline dl {
width: 520px;
line-height: 1.3em;
}
.outline dl dt {
color: var(--ac1);
margin-bottom: 15px;
}
.outline dl dd {
margin-bottom: 22px;
border-bottom: 1px solid #888;
padding-bottom: 20px;
}
.outline dt span {
color: var(--tx1);
font-size: 16px;
}
.outline dd span {
color: var(--ac1);
}

.overview {
margin: 60px auto 0;
display: flex;
justify-content: space-between;
}
.overview li {
width: 340px;
position: relative;
}
.overview li p {
position: absolute;
z-index: 3;
left: 10px;
top: 10px;
}
.overview li img {
width: 100%;
border-radius: 20px;
}

/*--////　abo_acc　////--*/
#abo_acc {
}
#abo_acc h2 {
width: 1100px;
margin: 0 auto 30px;
}
.map-embed {
width: 100% ;
height: 700px;
padding: 0 0 px ;
overflow: hidden ;
position: relative ;
top: 0 ;
left: 0 ;
background:#ddd;
}
.map-embed > div {
position: absolute ;
top: 0 ;
left: 0 ;
width: 100% ;
height: 100% ;
margin: 0 ;
padding: 0 ;
}
.map-embed img {
max-width: none ;
}


/*--////　abo_his　////--*/
#abo_his {
padding: 110px 0;
width: 1100px;
margin: 0 auto;
}
#abo_his h2 {
margin-bottom: 90px;
}
#abo_his dl {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
#abo_his dl dt {
width: 200px;
text-align: center;
background: var(--ac1);
padding: 8px 0;
border-radius: 20px;
color: #fff;
margin-bottom: 50px;;
}
#abo_his dl dd {
width: 850px;
margin-bottom: 50px;;
}


/*
<section id="abo_his">
<h2 class="basich2">History<span>会社沿革</span></h2>
<dl>
<dt>1985年9月</dt><dd>豊川市新豊町に株式会社豊電を設立。初代代表取締役に村田義正が就任。</dd>
<dt>1994年4月</dt><dd>豊川市三上町に移転。</dd>
<dt>2010年9月</dt><dd>2代目代表取締役社長に村田典広が就任。</dd>
<dt>2019年4月</dt><dd>豊川市足山田町に足山田工場を新設。</dd>
</dl>
</section>

*/