@charset "UTF-8";

#wrap {
background:url(../images/bg_001.png) left top repeat;
position: relative;
overflow: hidden;
}
#wrap::before,
#wrap::after {
position: absolute;
content:url(../images/bg_002.png);
}
#wrap::before {
left: -120px;
top: -120px;
/* animation: egg1 2s ease-in-out; */
}
@keyframes egg1 {
0% {transform: scale(0.8);}
100% {transform: scale(1.0);}
}
#wrap::after {
right: -250px;
top: 500px;
/* animation: egg2 3s ease-in-out; */
}
@keyframes egg2 {
0% {transform: scale(0.9);}
100% {transform: scale(1.0);}
}
/* ----------------------------------------- */
#wrap #gnav .gnavBtn {
background: #e67d14;
width: 90px;
height: 90px;
border-radius: 50%;
position: fixed;
z-index: 100;
right: 20px;
top: 15px;
}
#wrap #gnav .gnavBtn span {
position: absolute;
background: #fff;
width: 36px;
height: 2px;
transition: .3s ease-out;
}
#wrap #gnav .gnavBtn span:nth-child(1) {
top: 32px;
left:27px;
}
#wrap #gnav .gnavBtn span:nth-child(2) {
top: 44px;
left:27px;
}
#wrap #gnav .gnavBtn span:nth-child(3) {
top: 56px;
left:27px;
}
#wrap #gnav .gnavBtn.active span:nth-child(1) {
transform: rotate(45deg);
top: 44px;
}
#wrap #gnav .gnavBtn.active span:nth-child(2) {
display: none;
}
#wrap #gnav .gnavBtn.active span:nth-child(3) {
transform: rotate(-45deg);
top: 44px;
}
#wrap #gnav .gnavmMenu {
transform: translateX(100%);
transition: 0.4s ease-out;
position: fixed;
z-index: 50;
right: 0px;
top: 0px;
background: #fff8b8;
height: 100%;
padding: 100px 100px 30px 20px;
}
#wrap #gnav .gnavBtn.active+.gnavmMenu {
transform: translateX(0%);
overflow-y: scroll;
}
#wrap #gnav .gnavmMenu ul li a {
display: block;
padding: 10px 0;
}
#wrap #gnav .gnavmMenu ul li a span {
display: block;
color: #e67d14;
}
#wrap #gnav .gnavmMenu ul li .en {
font-size: 1.2rem;
line-height: 1.5;
}
#wrap #gnav .gnavmMenu ul li .ja {
font-size: 1.8rem;
line-height: 1.5;
font-weight: 700;
}
#wrap #gnav .gnavmMenu ul li a:hover span {
transition: 0.2s ease-out;
color: #000;
}
#wrap #gnav .gnavmMenu ul .cbtn a {
background: #e67d14;
font-size: 1.8rem;
font-weight: 700;
color: #fff;
margin: 10px 0 20px 0;
text-align: center;
border-radius: 10px;
transition: 0.2s ease-out;
}
#wrap #gnav .gnavmMenu ul .cbtn a:hover {
background: #000;
}
#wrap #gnav .gnavmMenu ul .tbtn a {
margin: 0px 0 0 0;
color: #000;
text-decoration: underline;
font-size: 1.4rem;
font-weight: 700;
transition: 0.2s ease-out;
}
#wrap #gnav .gnavmMenu ul .tbtn a:hover {
text-decoration: none;
}
@media screen and (max-width: 768px) {
#wrap #gnav .gnavBtn {
width: 60px;
height: 60px;
right: 10px;
top: 10px;
}
#wrap #gnav .gnavBtn span {
width: 26px;
}
#wrap #gnav .gnavBtn span:nth-child(1) {
top: 20px;
left:17px;
}
#wrap #gnav .gnavBtn span:nth-child(2) {
top: 30px;
left:17px;
}
#wrap #gnav .gnavBtn span:nth-child(3) {
top: 40px;
left:17px;
}
#wrap #gnav .gnavBtn.active span:nth-child(1) {
top: 30px;
}
#wrap #gnav .gnavBtn.active span:nth-child(3) {
top: 30px;
}
#wrap #gnav .gnavmMenu {
padding: 20px 80px 30px 20px;
}
}
/* ----------------------------------------- */
#headerOuter {
padding:0 15px;
position: relative;
z-index: 1;
}
#header {
max-width: 1000px;
padding: 12px 15px 10px;
margin: 0 auto 30px;
background: #fff;
text-align: center;
border-radius: 0 0 30px 30px;
border-right: 4px #e67d14 solid;
border-bottom: 4px #e67d14 solid;
border-left: 4px #e67d14 solid;
}
#header h1 {
display: flex;
justify-content: center;
align-items: center;
gap: 7px;
}
#header h1 .logo {
max-width: 172px;
}
#header h1 .ttl {
max-width: 164px;
}
@media screen and (max-width: 768px) {
#header {
margin: 0 auto 10px;
}
}
@media screen and (max-width: 540px) {
#headerOuter {
padding:0 5px;
}
#header h1 {
justify-content: flex-start;
gap:2px;
}
#header h1 .logo {
max-width: 142px;
}
#header h1 .ttl {
max-width: 124px;
}
}
/* ----------------------------------------- */
#main #einsOuter {
padding:0 15px;
position: relative;
z-index: 1;
}
#main #eins {
overflow: hidden;
max-width: 1000px;
margin: 0 auto 180px;
background: #fff;
border-radius: 30px 30px 30px 30px;
border: 4px #e67d14 solid;
background: url(../images/bg_007.png) repeat left top;
}
@media screen and (max-width: 540px) {
#main #einsOuter {
padding:0 5px;
}
}
/* ------------------- */
#main #eins #mainVisual {
padding:50px 60px 30px 60px;
background: #fff;
}
#main #eins #mainVisual .mainCatch {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#main #eins #mainVisual .mainCatch span {
color: #e67d14;
font-size: 2.8rem;
line-height: 1.6;
font-weight: 700;
letter-spacing: 0.14em;
opacity: 0;
overflow: hidden;
}
#main #eins #mainVisual .mainCatch span:nth-child(1) {
animation: mainCatch 0.8s ease 1.0s forwards;
}
#main #eins #mainVisual .mainCatch span:nth-child(2) {
animation: mainCatch 0.8s ease 1.8s forwards;
}
#main #eins #mainVisual .mainCatch span:nth-child(3) {
animation: mainCatch 0.8s ease 1.8s forwards;
}
@keyframes mainCatch {
0% {transform: translateY(10px);}
100% {opacity: 1.0; transform: translateY(0px);}
}
#main #eins #mainVisual .mainImg {
text-align: center;
margin:60px auto 54px;
position: relative;
opacity: 0;
animation: mainImg 1s ease 0.3s forwards;
}
#main #eins #mainVisual .mainImg .img {
max-width: 32.11%;
}
@keyframes mainImg {
0% {transform: translateY(10px); opacity: 0;}
100% {transform: translateY(0px); opacity: 1.0;}
}
#main #eins #mainVisual .mainImg div {
width: 100%;
max-width: 6.88%;
position: absolute;
}
#main #eins #mainVisual .mainImg .mv001 {
top: 3%;
left: 23.85%;
}
#main #eins #mainVisual .mainImg .mv002 {
top: 15%;
left: 11.47%;
}
#main #eins #mainVisual .mainImg .mv003 {
top: 29%;
left: 1.15%;
max-width: 7.34%;
}
#main #eins #mainVisual .mainImg .mv004 {
top: 31%;
left: 18.12%;
max-width: 6.65%;
}
#main #eins #mainVisual .mainImg .mv005 {
top:52%;
left: 3.67%;
max-width: 7.57%;
}
#main #eins #mainVisual .mainImg .mv006 {
top: 50%;
left: 14.68%;
max-width: 7.8%;
}
#main #eins #mainVisual .mainImg .mv007 {
top: 73%;
left: 14.22%;
max-width: 7.34%;
}
#main #eins #mainVisual .mainImg .mv008 {
top: 77%;
left: 24.08%;
max-width: 6.65%;
}
#main #eins #mainVisual .mainImg .mv009 {
top: 2%;
right: 23.08%;
max-width: 7.11%;
}
#main #eins #mainVisual .mainImg .mv010 {
top: 14%;
right: 9.86%;
max-width: 8.03%;
}
#main #eins #mainVisual .mainImg .mv011 {
top: 26%;
right: 0.23%;
max-width: 7.34%;
}
#main #eins #mainVisual .mainImg .mv012 {
top: 33%;
right:  12.84%;
max-width: 6.42%;
}
#main #eins #mainVisual .mainImg .mv013 {
top:53%;
right:16.97%;
}
#main #eins #mainVisual .mainImg .mv014 {
top:48%;
right: 3.9%;
max-width: 6.19%;
}
#main #eins #mainVisual .mainImg .mv015 {
top: 69%;
right: 11.93%;
}
#main #eins #mainVisual .mainImg .mv016 {
top: 78%;
right: 23.17%;
max-width: 7.34%;
}
@media screen and (max-width: 768px) {
#main #eins #mainVisual .mainCatch span {
font-size: 2.4rem;
}
#main #eins #mainVisual {
padding: 40px 15px 30px 15px;
}
#main #eins #mainVisual .mainImg {
margin: 20px auto 54px;
}
}
@media screen and (max-width: 414px) {
#main #eins #mainVisual {
padding: 30px 15px 30px 15px;
}
#main #eins #mainVisual .mainCatch span {
font-size: 1.8rem;
}
#main #eins #mainVisual .mainImg .img {
max-width: 50%;
}
#main #eins #mainVisual .mainImg .mv001,
#main #eins #mainVisual .mainImg .mv004,
#main #eins #mainVisual .mainImg .mv008,
#main #eins #mainVisual .mainImg .mv009,
#main #eins #mainVisual .mainImg .mv013,
#main #eins #mainVisual .mainImg .mv016 {
display: none;
}
}



#main #eins #mainVisual .mainTxt {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
#main #eins #mainVisual .mainTxt .mtOuter {
overflow: hidden;
display: block;
}
#main #eins #mainVisual .mainTxt .mtOuter .mtTxt {
font-size: 1.8rem;
line-height:1.5;
letter-spacing: 0.2em;
padding: 0 0 5px;
font-weight: 700;
text-align: center;
transition: 1.2s ease-in-out;
transform: translate3d(0,100%,0) skewY(12deg);
transform-origin: left;
display: block;
background-image : linear-gradient(to right, #e67d14 2px, transparent 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: bottom;
}
#main #eins #mainVisual .mainTxt.blockIn .mtOuter .mtTxt {
transform: translate3d(0,0,0) skewY(0);
}
@media screen and (max-width: 768px) {
#main #eins #mainVisual .mainTxt .mtOuter .mtTxt {
font-size: 1.6rem;
letter-spacing: 0.1em;
}
}
@media screen and (max-width: 414px) {
#main #eins #mainVisual .mainTxt .mtOuter .mtTxt {
font-size: 1.4rem;
letter-spacing: 0.1em;
}
}
/* -------------------------------------- ABOUT */
#main #eins #about #aboutInner {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 60px;
position: relative;
z-index: 2;
background: #fff;
border-bottom-left-radius: 800px 200px;
border-bottom-right-radius: 800px 200px;
margin-left: -100px;
margin-right: -100px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 120px;
}
#main #eins #about .abTtlWrap {
padding: 0 0 0 15px;
}
#main #eins #about .abTtlWrap h2 {
font-size: 2.4rem;
line-height: 1.5;
letter-spacing: 0.1em;
width: 272px;
padding: 38px 0 50px 48px;
background: url(../images/frame_001.svg) left top no-repeat;
opacity: 0;
transform: translateY(20px);
transition: 0.8s ease-in-out;
}
#main #eins #about .abTtlWrap.blockIn h2 {
transform: translateY(0px);
opacity: 1.0;
}
#main #eins #about .abTtlWrap .img {
max-width: 242px;
margin: auto 0 0 auto;
}
#main #eins #about .abTxtWrap {
padding: 0 100px 50px 0;
}
#main #eins #about .abTxtWrap p {
font-size: 1.6rem;
letter-spacing: 0.1em;
line-height: 2.5;
}
#main #eins #about .ab001 {
position: absolute;
width: 100%;
max-width: 90px;
top: 36px;
right: 304px;
z-index: -1;
}
#main #eins #about .ab002 {
position: absolute;
width: 100%;
max-width: 162px;
top: 148px;
right: 150px;
z-index: -1;
}
#main #eins #about .ab003 {
position: absolute;
width: 100%;
max-width: 90px;
top: 380px;
right: 280px;
z-index: -1;
}
#main #eins #about .ab004 {
position: absolute;
width: 100%;
max-width: 72px;
top: 500px;
right: 186px;
z-index: -1;
}
@media screen and (max-width: 960px) {
#main #eins #about #aboutInner {
gap:10px 30px;
}
#main #eins #about .abTxtWrap {
padding: 0 50px 25px 0;
}
}
@media screen and (max-width: 768px) {
#main #eins #about #aboutInner {
flex-wrap: wrap;
}
#main #eins #about .abTtlWrap {
padding: 0;
gap: 10px;
display: flex;
align-items: flex-end;
}
#main #eins #about .abTtlWrap .img {
margin: 0 0 36px 0;
max-width: 184px;
}
#main #eins #about .abTxtWrap {
padding: 0;
}
}
@media screen and (max-width: 540px) {
#main #eins #about .abTtlWrap {
position: relative;
display: block;
padding: 60px 15px 0 15px;
width: 100%;
}
#main #eins #about .abTtlWrap .img {
position: absolute;
top: 0;
right: 10px;
max-width: 144px;
}
#main #eins #about .abTxtWrap {
padding: 0 20px;
}
#main #eins #about .abTxtWrap p {
font-size: 1.4rem;
line-height: 2.0;
}
#main #eins #about .abTxtWrap .res {
display: none;
}
}
@media screen and (max-width: 414px) {
#main #eins #about .abTtlWrap .img {
max-width: 121px;
}
}
/* -------------------------------------- 事業紹介 */
#main #eins #about #business {
max-width: 840px;
padding: 0 20px;
margin: 60px auto 120px;
}
#main #eins #about #business .businessWrap {
margin: 60px 0 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 50px 25px;
}
#main #eins #about #business .businessWrap .businessBlock {
width: 250px;
}
#main #eins #about #business .businessWrap .businessBlock dl {
border: 1px solid #e67d14;
background: #fff;
text-align: center;
}
#main #eins #about #business .businessWrap .businessBlock dl dt {
background: #e67d14;
color: #fff;
position: relative;
font-size: 1.8rem;
line-height: 1.5;
font-weight: 700;
letter-spacing: 0.1em;
padding:6px 10px;
}
#main #eins #about #business .businessWrap .businessBlock dl dt .icon {
width: 50px;
position: absolute;
right: -1px;
top: -25px;
}
#main #eins #about #business .businessWrap .businessBlock dl dd {
font-size: 1.4rem;
line-height: 1.7;
padding: 10px;
}
@media screen and (max-width: 768px) {
#main #eins #about #business .businessWrap {
gap: 40px 15px;
margin: 30px 0 0 0;
}
#main #eins #about #business .businessWrap .businessBlock {
width: calc((100% - 15px) / 2);
}
#main #eins #about #business .businessWrap .businessBlock dl dt {
font-size: 1.6rem;
}

}
@media screen and (max-width:540px) {
#main #eins #about #business .businessWrap {
margin: 30px 0 0 0;
gap: 30px 15px;
}
#main #eins #about #business .businessWrap .businessBlock {
max-width: 414px;
width: 100%;
}
}
/* -------------------------------------- 受賞歴 */
#main #eins #about #awardOuter {
padding: 0 15px;
}
#main #eins #about #award {
max-width: 830px;
margin: 100px auto;
display: flex;
background: url(../images/bg_009.png) left bottom no-repeat;
}
#main #eins #about #award .awardWrap {
width: calc(100% - 160px);
margin: 0 0 0 auto;
padding: 0 0 30px 0;
} 
#main #eins #about #award .awardWrap .awardBlock {
background: #fff;
border-radius: 10px;
padding: 20px 30px;
margin: 0 0 15px 0;
box-shadow: 2px 4px 5px 0px rgba(0, 0, 0, 0.1);
width: calc(100% - 10px);
}
#main #eins #about #award .awardWrap .awardBlock:nth-child(1) {
background: #fff url(../images/bg_008.png) no-repeat 10px 10px;
}
#main #eins #about #award .awardWrap .awardBlock h4 {
border-bottom: 1px solid #d6af0d;
letter-spacing: 0.1em;
text-align: right;
color: #d6af0d;
font-size: 2.4rem;
margin: 0 0 20px 0;
}
@media screen and (max-width: 768px) {
#main #eins #about #award {
flex-direction: column;
background: url(../images/bg_009.png) right top no-repeat;
background-size: 50%;
}
#main #eins #about #award .awardWrap {
width:100%;
margin:30px auto 0;
}
#main #eins #about #award .awardWrap .awardBlock h4 {
text-align: left;
font-size: 2.0rem;
}
#main #eins #about #award .awardWrap .awardBlock:nth-child(1) {
background: #fff url(../images/bg_008.png) no-repeat 10px 10px;
background-size: 15%;
}
}
@media screen and (max-width: 414px) {
#main #eins #about #award .awardWrap .awardBlock {
padding: 20px 20px;
}
}

/* -------------------------------------- セイブのはたらき方 */
#main #eins #work {
background: #fff8b8;
padding: 120px 0 0;
}
#main #eins #work .ttlWrapA .res {
display: none;
}
@media screen and (max-width: 768px) {
#main #eins #work {
padding: 90px 0 0;
}
#main #eins #work .ttlWrapA .res {
display: block;
}
}
/* ------------------- */
#main #eins #work #working {
max-width: 840px;
padding: 0 20px 120px;
margin: 0 auto;
}
#main #eins #work #working .workingBlock01 .ttlWrapB {
margin: 0 0 24px;
}
#main #eins #work #working .workingBlock01 figure {
max-width: 720px;
margin: 30px auto 30px;
}
#main #eins #work #working .workingBlock01 figure img {
border-radius: 15px;
}
#main #eins #work #working .workingWrap {
max-width: 720px;
margin: 0 auto;
display: flex;
justify-content: space-between;
} 
#main #eins #work #working .workingWrap .workingBlock02 {
width: calc((100% - 40px) / 2);
}
#main #eins #work #working .workingWrap .workingBlock02 h4 {
line-height: 1.4;
margin: 0 0 10px;
padding: 0 0 0 1.8em;
background: url(../images/icon_006.svg) left top no-repeat;
}

@media screen and (max-width: 768px) {
#main #eins #work #working {
padding: 0 20px 60px;
}
#main #eins #work #working .workingWrap {
flex-direction: column;
gap: 20px;
} 
#main #eins #work #working .workingWrap .workingBlock02 {
width: 100%;
}
}
/* ------------------- 調理スタッフの1日 */
#main #eins #work #schedule {
width: 100%;
padding: 60px 0 60px 50px;
background: #fff;
}
#main #eins #work #schedule .ttlWrapB {
text-align: center;
margin: 0 0 30px 0;
}
#main #eins #work #schedule .scheduleWrap {
overflow-x: auto;
}
#main #eins #work #schedule .scheduleWrap::-webkit-scrollbar {
background: #ccc;
height: 6px;
border-radius: 3px;
}
#main #eins #work #schedule .scheduleWrap::-webkit-scrollbar-thumb {
background: #666;
border-radius: 3px;
}
#main #eins #work #schedule .scheduleWrap .scheduleWrapInner {
display: flex;
gap: 10px;
width: 1660px;
padding: 0 50px 20px 0;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock {
width: 260px;
padding: 20px 20px;
border-radius: 10px;
position: relative;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlockOuter {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock .label {
position: absolute;
right:0;
top: 0;
color: #fff;
font-weight: 700;
text-align: center;
width: 42px;
line-height: 1.8;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock.all {
background: #f7d8b8;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock.all .times .time,
#main #eins #work #schedule .scheduleWrap .scheduleBlock.all .times .ttl {
color: #e67d14;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock.manu {
background: #e2efdb;
margin: 0 0 5px;
padding: 20px 14px;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock.manu .label {
background: #6cae4a;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock.manu .times .time,
#main #eins #work #schedule .scheduleWrap .scheduleBlock.manu .times .ttl {
color: #6cae4a;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock.arr {
background: #d9e9fb;
width: 260px;
padding: 20px 14px;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock.arr .label {
background: #4391ea;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock.arr .times .time,
#main #eins #work #schedule .scheduleWrap .scheduleBlock.arr .times .ttl {
color: #4391ea;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock .times {
display: flex;
align-items: center;
gap: 10px;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock .times .icon {
width: 32px;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock .times .time {
font-size: 1.2rem;
font-weight: 700;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock .times .ttl {
font-size: 2.2rem;
font-weight: 700;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock .txt {
margin: 16px 0 0 0;
font-size: 1.6rem;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock.manu .txt,
#main #eins #work #schedule .scheduleWrap .scheduleBlock.arr .txt {
margin: 8px 0 0 0;
letter-spacing: -0.1em;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock.manu .txt.ls {
letter-spacing: 0em;
}

@media screen and (max-width: 768px) {
#main #eins #work #schedule {
padding: 60px 0 60px 20px;
}
#main #eins #work #schedule .scheduleWrap .scheduleBlock .txt {
font-size: 1.4rem;
}
}
/* ------------------- */
#main #eins #work #interview {
max-width: 840px;
padding: 120px 20px 120px;
margin: 0 auto;
}
#main #eins #work #interview .ttlWrapB {
margin: 0 0 30px 0;
}
#main #eins #work #interview iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
@media screen and (max-width: 768px) {
#main #eins #work #interview {
padding: 60px 20px 120px;
}
}

/* ------------------- こんな人にピッタリ！ */
#main #eins #work #matchOuter {
padding: 0 5px;
}
#main #eins #work #match {
max-width: 800px;
padding:50px 50px 0px;
margin: 0 auto;
background: #fff064;
border-radius: 15px 15px 0 0;
position: relative;
}
#main #eins #work #match .clip {
width: 240px;
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
}
#main #eins #work #match #matchInner {
padding:50px 30px 30px;
background: url(../images/bg_007.png) repeat left top;
}
#main #eins #work #match .ttlWrap {
margin: 0 0 50px;
}
#main #eins #work #match .ttlWrap h3 {
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px 0;
}
#main #eins #work #match .ttlWrap h3 span {
font-size: 4.8rem;
font-weight: 700;
}
#main #eins #work #match .ttlWrap h3 .bd {
color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
border-bottom: 5px solid #fff064;
}
#main #eins #work #match .ttlWrap h3 .or {
color: #e67d14;
border-bottom: 5px solid #fff064;
position: relative;
}
#main #eins #work #match .ttlWrap h3 .or .img {
width: 46px;
position: absolute;
top: -30px;
right: -40px;
}
#main #eins #work #match .matchWrap {
display: flex;
gap: 30px;
justify-content: center;
align-items: center;
margin: 20px auto;
}
#main #eins #work #match .matchWrap .matchImg {
width: 210px;
}
#main #eins #work #match .matchWrap .matchTxt {
text-align: center;
}
#main #eins #work #match .matchWrap .matchTxt h4 {
margin: 0 0 20px 0;
}
#main #eins #work #match .matchBtm {
text-align: center;
}
@media screen and (max-width: 768px) {
#main #eins #work #match {
padding:30px 30px 0px;
}
#main #eins #work #match .ttlWrap h3 span {
font-size: 3.6rem;
}
#main #eins #work #match .ttlWrap h3 .or .img {
width: 23px;
top: -20px;
right: -30px;
}
#main #eins #work #match .matchWrap {
flex-direction: column;
}
#main #eins #work #match .matchWrap:nth-child(2) {
flex-direction: column-reverse;
}
#main #eins #work #match .matchBtm {
margin: 40px 0 0 0;
text-align: left;
}
}
@media screen and (max-width: 414px) {
#main #eins #work #match {
padding:30px 15px 0px;
}
#main #eins #work #match .clip {
width: 180px;
top: -46px;
}
#main #eins #work #match #matchInner {
padding: 40px 20px 30px;
}
#main #eins #work #match .ttlWrap h3 span {
font-size: 2.6rem;
}
#main #eins #work #match .matchWrap .matchTxt h4 {
font-size: 1.6rem;
}
#main #eins #work #match .matchWrap .matchTxt p {
text-align: left;
}
#main #eins #work #match .matchWrap .matchTxt .res {
display: none;
}
#main #eins #work #match .matchWrap .matchImg {
width: 160px;
}
#main #eins #work #match .matchBtm .res {
display: none;
}
}

/* ----------------------------------------- */
#main #zwei #environment #infographics {
padding: 60px 0 0 0;
}
#main #zwei #environment #infographics .ttlWrapB {
margin: 0px auto 30px;
padding: 0 20px;
max-width: 940px;
}
#main #zwei #environment #infographics .infographicsWrap {
max-width: 924px;
margin: 0 auto 40px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock {
padding:0 8px 20px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.wide {
width: calc((100% /3) * 2);
min-width: 616px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.narrow {
width: calc((100% /3) * 1);
min-width: 308px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock .infographicsBlockInner {
background: #fff;
height: 100%;
padding: 20px;
border-radius: 10px;
position: relative;
box-shadow: 2px 4px 0px 0px rgba(0, 0, 0, 0.1);
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock .flag {
position: absolute;
z-index: 5;
width: 162px;
top: -10px;
left: -10px;
animation: flag 2s ease 0s infinite;
}
@keyframes flag {
0% {transform: rotate(1deg);}
50% {transform: rotate(-2deg);}
100% {transform: rotate(1deg);}
}
/* ---------- */
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap {
display: flex;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 {
position: relative;
max-width: 332px;
height: 240px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .arrow {
position: absolute;
top: -8px;
left: 0;
opacity: 0.0;
transition: 0.5s 0.5s ease-in-out;
width: 90%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(1) .profitWrap .profitBlock01 .arrow {
opacity: 1.0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul {
display: flex;
justify-content: space-between;
padding: 0 4px 0 14px;
gap: 9px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul li {
font-size: 0.9rem;
letter-spacing: -0.1em;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.chart {
border-top: 1px solid #000;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.chart li {
position: relative;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.chart li.bou::after {
position: absolute;
content: "";
background: #f5cba1;
width: 24px;
left: 0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.chart li.bou01::after {
height: 60px;
top: -61px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.chart li.bou02::after {
height: 108px;
top: -109px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.chart li.bou03::after {
height: 114px;
top: -115px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.chart li.bou04::after {
height: 132px;
top: -133px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.chart li.bou05::after {
height: 138px;
top: -139px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.chart li.bou06::after {
height: 160px;
top: -161px;
transition: 0.5s 0s ease-in-out;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.chart li.bou07::after {
background: #e67d14;
height: 1px;
top: -1px;
transition: 0.5s 0s ease-in-out;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.chart li.bou07::after {
height: 172px;
top: -173px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.year li {
text-align: center;
font-weight: 700;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .chartWrap ul.year li:last-child {
padding: 0 3em 0 0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock02 {
padding: 36px 0 20px 0;
width: 100%;
max-width: 220px;
opacity: 0;
transform: scale(0.9);
transition: 0.5s 0.6s ease-in-out;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(1) .profitWrap .profitBlock02 {
transform: scale(1.0);
opacity: 1.0;
}
/* ---------- */
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(2) .holidayWrap .holidayBlock01 {
position: relative;
padding: 40px 0 25px;
opacity: 0;
transform: scale(0.9);
transition: 0.5s 0.6s ease-in-out;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(2) .holidayWrap .holidayBlock01 {
transform: scale(1.0);
opacity: 1.0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(2) .holidayWrap .holidayBlock01 .holiday {
max-width: 240px;
margin: 0 auto;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(2) .holidayWrap .holidayBlock01 .kira1 {
position: absolute;
top: 58%;
left: 10px;
width: 16px;
animation: kira 1s ease 0.8s infinite;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(2) .holidayWrap .holidayBlock01 .kira2 {
position: absolute;
top: 1%;
right: 20px;
width: 40px;
animation: kira 1s ease 1.2s infinite;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(2) .holidayWrap .holidayBlock01 .kira3 {
position: absolute;
top: 40%;
right: 0px;
width: 25px;
animation: kira 1s ease 1.4s infinite;
}
@keyframes kira {
0% {transform: scale(0.8);}
50% {transform: scale(1.0);}
100% {transform: scale(0.8);}
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(2) .holidayWrap .holidayBlock02 {
padding: 0 10px;
max-width: 320px;
margin: auto;
}
/* ---------- */
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(3) .memberWrap01 {
position: relative;
width: 100%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(3) .memberWrap01 .memberBlock01 {
position: absolute;
top: -10px;
right: 0;
width: 18%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(3) .memberWrap01 .memberBlock02 {
padding: 50px 0 20px 0;
opacity: 0;
transform: scale(0.9);
transition: 0.5s 0.6s ease-in-out;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(3) .memberWrap01 .memberBlock02 {
max-width: 240px;
margin: 0 auto;
transform: scale(1.0);
opacity: 1.0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(3) .memberBlock03 {
max-width: 240px;
width: 100%;
opacity: 0;
transform: scale(0.9);
transition: 0.5s 1.2s ease-in-out;
margin: 0 auto;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(3) .memberBlock03 {
transform: scale(1.0);
opacity: 1.0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(3) .memberWrap02 .memberBlock04 {
max-width: 129px;
width: 51.19%;
opacity: 0;
transform: scale(0.9);
transition: 0.5s 1.4s ease-in-out;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(3) .memberWrap02 .memberBlock04 {
transform: scale(1.0);
opacity: 1.0;
}
/* ---------- */
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .infographicsBlockInner {
padding: 50px 20px 20px 20px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .chart {
position: absolute;
z-index: 1;
left: 50%;
transform: translate(-50%);
width: 150px;
height: 150px;
background-image: conic-gradient(#e67d14 0% 0%, #000 0% 100%);
border-radius: 50%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(4) .chart {
animation:chart 2s ease-in-out 0.2s forwards;
}
@keyframes chart {
0% {background-image: conic-gradient(#e67d14 0% 0%, #000 0% 100%);}
1% {background-image: conic-gradient(#e67d14 0% 1%, #000 1% 100%);}
2% {background-image: conic-gradient(#e67d14 0% 2%, #000 2% 100%);}
3% {background-image: conic-gradient(#e67d14 0% 3%, #000 3% 100%);}
4% {background-image: conic-gradient(#e67d14 0% 4%, #000 4% 100%);}
5% {background-image: conic-gradient(#e67d14 0% 5%, #000 5% 100%);}
6% {background-image: conic-gradient(#e67d14 0% 6%, #000 6% 100%);}
7% {background-image: conic-gradient(#e67d14 0% 7%, #000 7% 100%);}
8% {background-image: conic-gradient(#e67d14 0% 8%, #000 8% 100%);}
9% {background-image: conic-gradient(#e67d14 0% 9%, #000 9% 100%);}
10% {background-image: conic-gradient(#e67d14 0% 10%, #000 10% 100%);}
11% {background-image: conic-gradient(#e67d14 0% 11%, #000 11% 100%);}
12% {background-image: conic-gradient(#e67d14 0% 12%, #000 12% 100%);}
13% {background-image: conic-gradient(#e67d14 0% 13%, #000 13% 100%);}
14% {background-image: conic-gradient(#e67d14 0% 14%, #000 14% 100%);}
15% {background-image: conic-gradient(#e67d14 0% 15%, #000 15% 100%);}
16% {background-image: conic-gradient(#e67d14 0% 16%, #000 16% 100%);}
17% {background-image: conic-gradient(#e67d14 0% 17%, #000 17% 100%);}
18% {background-image: conic-gradient(#e67d14 0% 18%, #000 18% 100%);}
19% {background-image: conic-gradient(#e67d14 0% 19%, #000 19% 100%);}
20% {background-image: conic-gradient(#e67d14 0% 20%, #000 20% 100%);}
21% {background-image: conic-gradient(#e67d14 0% 21%, #000 21% 100%);}
22% {background-image: conic-gradient(#e67d14 0% 22%, #000 22% 100%);}
23% {background-image: conic-gradient(#e67d14 0% 23%, #000 23% 100%);}
24% {background-image: conic-gradient(#e67d14 0% 24%, #000 24% 100%);}
25% {background-image: conic-gradient(#e67d14 0% 25%, #000 25% 100%);}
26% {background-image: conic-gradient(#e67d14 0% 26%, #000 26% 100%);}
27% {background-image: conic-gradient(#e67d14 0% 27%, #000 27% 100%);}
28% {background-image: conic-gradient(#e67d14 0% 28%, #000 28% 100%);}
29% {background-image: conic-gradient(#e67d14 0% 29%, #000 29% 100%);}
30% {background-image: conic-gradient(#e67d14 0% 30%, #000 30% 100%);}
31% {background-image: conic-gradient(#e67d14 0% 31%, #000 31% 100%);}
32% {background-image: conic-gradient(#e67d14 0% 32%, #000 32% 100%);}
33% {background-image: conic-gradient(#e67d14 0% 33%, #000 33% 100%);}
34% {background-image: conic-gradient(#e67d14 0% 34%, #000 34% 100%);}
35% {background-image: conic-gradient(#e67d14 0% 35%, #000 35% 100%);}
36% {background-image: conic-gradient(#e67d14 0% 36%, #000 36% 100%);}
37% {background-image: conic-gradient(#e67d14 0% 37%, #000 37% 100%);}
38% {background-image: conic-gradient(#e67d14 0% 38%, #000 38% 100%);}
39% {background-image: conic-gradient(#e67d14 0% 39%, #000 39% 100%);}
40% {background-image: conic-gradient(#e67d14 0% 40%, #000 40% 100%);}
41% {background-image: conic-gradient(#e67d14 0% 41%, #000 41% 100%);}
42% {background-image: conic-gradient(#e67d14 0% 42%, #000 42% 100%);}
43% {background-image: conic-gradient(#e67d14 0% 43%, #000 43% 100%);}
44% {background-image: conic-gradient(#e67d14 0% 44%, #000 44% 100%);}
45% {background-image: conic-gradient(#e67d14 0% 45%, #000 45% 100%);}
46% {background-image: conic-gradient(#e67d14 0% 46%, #000 46% 100%);}
47% {background-image: conic-gradient(#e67d14 0% 47%, #000 47% 100%);}
48% {background-image: conic-gradient(#e67d14 0% 48%, #000 48% 100%);}
49% {background-image: conic-gradient(#e67d14 0% 49%, #000 49% 100%);}
50% {background-image: conic-gradient(#e67d14 0% 50%, #000 50% 100%);}
51% {background-image: conic-gradient(#e67d14 0% 51%, #000 51% 100%);}
52% {background-image: conic-gradient(#e67d14 0% 52%, #000 52% 100%);}
53% {background-image: conic-gradient(#e67d14 0% 53%, #000 53% 100%);}
54% {background-image: conic-gradient(#e67d14 0% 54%, #000 54% 100%);}
55% {background-image: conic-gradient(#e67d14 0% 55%, #000 55% 100%);}
56% {background-image: conic-gradient(#e67d14 0% 56%, #000 56% 100%);}
57% {background-image: conic-gradient(#e67d14 0% 57%, #000 57% 100%);}
58% {background-image: conic-gradient(#e67d14 0% 58%, #000 58% 100%);}
59% {background-image: conic-gradient(#e67d14 0% 59%, #000 59% 100%);}
60% {background-image: conic-gradient(#e67d14 0% 60%, #000 60% 100%);}
100% {background-image: conic-gradient(#e67d14 0% 60%, #000 60% 100%);}
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .chart span {
position: absolute;
z-index: 2;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 1.8rem;
font-weight: 700;
opacity: 0.0;
transition: 0.2s 1.6s ease-in-out;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(4) .chart span {
opacity: 1.0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .chart span.mens {
left: 18px;
top: 44%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .chart span.ladies {
right: 28px;
top: 60%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: relative;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .peopleBlock01Outer,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .peopleBlock02Outer {
width:50%;
position: relative;
padding: 170px 0 0 0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .peopleBlock01,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .peopleBlock02 {
width: 100%;
opacity: 0.0;
transform: scale(0.9);
transition: 0.5s 1.8s ease-in-out;
text-align: center;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .peopleBlock01 img {
max-width: 88px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .peopleBlock02 img {
max-width: 100px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .peopleBlock01 {
border-right: 2px solid #000;
padding: 0 10px 0 0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .peopleBlock02 {
padding: 0 0px 0 10px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(4) .peopleWrap .peopleBlock01,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(4) .peopleWrap .peopleBlock02 {
opacity: 1.0;
transform: scale(1.0);
}
/* ---------------- people */
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men {
position: absolute;
width: 9.2%;
max-width: 12px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady {
position: absolute;
width: 10.8%;
max-width: 14px;
}

#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men01 {
width: 12.0%;
top: 26.8%;
left: -1.5%;
max-width: 15px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men02 {
top: 26.8%;
left: 16.4%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men03 {
top: 42%;
left: 1.4%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men04 {
top: 42%;
left: 16.4%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men05 {
top: 42%;
left: 31.2%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men06 {
top: 58%;
left: 1.4%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men07 {
top: 58%;
left: 16.4%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men08 {
top: 58%;
left: 31.2%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men09 {
top: 58%;
left:46%;
}

#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady01 {
top: 0.4%;
left: 52.8%;
width: 10.8%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady02 {
top: 1%;;
right:23.8%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady03 {
top: 1%;
right:11%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady04 {
top: 1%;
right:-1.8%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady05 {
top:14.8%;
right:23.8%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady06 {
top:14.8%;
right:11%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady07 {
top:14.8%;
right:-1.8%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady08 {
top: 29%;
right:11%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady09 {
top: 29%;
right:-1.8%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady10 {
top:44%;
right:23.8%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady11 {
top:44%;
right:11%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady12 {
top:44%;
right:-1.8%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady13 {
top: 58.4%;
right:36.6%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady14 {
top: 58.4%;
right:23.8%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady15 {
top: 58.4%;
right:11%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady16 {
top: 58.4%;
right:-1.8%;
}

/* ---------- */
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(5) .infographicsBlockInner {
padding: 56px 20px 20px 20px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(5) .ttl {
max-width: 164px;
margin: 0 auto 10px auto;
padding: 0 24px 0 0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(5) .number {
max-width:320px;
margin: auto;
position: relative;
opacity: 0.0;
transform: scale(0.9);
transition: 0.5s 0.6s ease-in-out;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(5) .number {
opacity: 1.0;
transform: scale(1.0);
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(5) .kira1 {
width: 18px;
top: 50%;
left: 0;
position: absolute;
animation: kira 1s ease 1.4s infinite;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(5) .kira2 {
width: 14px;
top: 40%;
right: 2px;
position: absolute;
animation: kira 1s ease 0.8s infinite;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(5) .kira3 {
width: 26px;
top: -20%;
right: 15px ;
position: absolute;
animation: kira 1s ease 1.4s infinite;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(5) .btm {
max-width: 224px;
margin: 0 auto;
text-align: center;
padding: 20px 10px 0;
}
/* ---------- */
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .infographicsBlockInner {
padding: 80px 20px 70px 20px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band {
width: 100%;
border: 1px solid #e67d14;
border-radius: 5px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul {
display: flex;
align-items: center;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li {
text-align: center;
padding: 30px 5px 36px 5px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(1) {
width: 27%;
background: #fff064;
border-radius: 5px 0 0 5px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(1) img {
width: 52px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(2) {
width: 22%;
background: #f7d8b8;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(2) img {
width: 58px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(3) {
width: 24%;
background: #fbecdc;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(3) img {
width: 64px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(4) {
width: 27%;
background: #fef8f3;
border-radius:0 5px 5px 0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(4) img {
width: 54px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .under {
width: 110px;
position: absolute;
bottom: 5px;
left: 5px;
opacity: 0.0;
transform: scale(0.9);
transition: 0.5s 1.2s ease-in-out;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.blockIn:nth-child(6) .under {
opacity: 1.0;
transform: scale(1.0);
}
/* ---------- */
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(7) .infographicsBlockInner {
padding: 50px 30px 20px 40px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(7) dl {
display: flex;
justify-content: space-between;
position: relative;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(7) dl::after {
position: absolute;
border-top: 1px dotted #000;
width: 100%;
top: 12px;
left: 0;
content: "";
z-index: 1;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(7) dl dt {
font-size: 1.4rem;
background: #fff;
font-weight: 700;
line-height: 1.8;
z-index: 2;
padding: 0 8px 0 0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(7) dl dd {
background: #fff;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.8;
z-index: 2;
padding: 0px 0 0 10px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(7) dl dd span {
font-size: 2.0rem;
font-weight: 600;
}
@media screen and (max-width: 899px) {
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(7) {
min-width: 616px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(7) .list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(7) .list dl {
width: calc(50% - 20px);
}
}
@media screen and (max-width: 616px) {
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock .infographicsBlockInner {
padding: 30px 15px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.wide {
min-width: 100%;
max-width: 600px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock.narrow {
min-width: 100%;
max-width: 320px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap {
flex-direction: column;
justify-content: center;
align-items: center;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock01 .arrow {
top: -20px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(1) .profitWrap .profitBlock02 {
padding:5px 0 0;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(3) .memberBlock03,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap {
max-width: 320px;
margin: 0 auto;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(7) {
min-width: 100%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock .flag {
left: -5px;
}
}
@media screen and (max-width: 570px) {
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .infographicsBlockInner {
padding: 30px 15px 20px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .chart {
width: 140px;
height: 140px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men01 {
top:52%;
left: 0%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men07,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men08 {
top:52%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men02,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men03,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men04,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men05,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men06,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .men09 {
display: none;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady01 {
top:52%;
right:50.2%;
left: auto;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady13,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady14,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady15,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady16 {
top:52%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady02,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady03,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady04,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady05,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady06,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady07,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady08,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady09,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady10,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady11,
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(4) .peopleWrap .lady12 {
display: none;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(1) img {
transform: scale(0.8);
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(2) img {
transform: scale(0.8);
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(3) img {
transform: scale(0.8);
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(4) img {
transform: scale(0.8);
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .under {
transform: scale(0.8);
}
}
@media screen and (max-width: 500px) {
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .infographicsBlockInner {
padding: 60px 20px 30px 20px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band {
max-width: 240px;
margin: 0 auto;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul {
flex-direction: column;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li {
padding: 10px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(1) {
width:100%;
border-radius: 5px 5px 0 0px;
padding:25px 10px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(1) img {
transform: scale(1.0);
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(2) {
width: 100%;
padding: 5px 10px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(3) {
width: 100%;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .band ul li:nth-child(4) {
width: 100%;
border-radius:0 0 5px 5px;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(6) .under {
top: 5px;
right: 5px;
left: auto;
}
#main #zwei #environment #infographics .infographicsWrap .infographicsBlock:nth-child(7) .list dl {
width: 100%;
}
}

/* ------------------- 福利厚生 */
#main #zwei #environment #benefit {
max-width: 940px;
padding: 0px 20px 120px;
margin: 0 auto;
}
#main #zwei #environment #benefit .benefitWrap {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 30px 0 0 0;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock {
width: calc((100% - 30px) / 3);
border-radius: 10px;
box-shadow: 2px 4px 0px 0px rgba(0, 0, 0, 0.1);
text-align: center;
padding:30px 15px 45px;
background: #fff;
position: relative;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock.hoken {
margin: 60px 0 0 0;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock.iwai {
margin: 120px 0 0 0;
padding:30px 15px 80px;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock .top,
#main #zwei #environment #benefit .benefitWrap .benefitBlock .bottom {
position: absolute;
width: 130px;
left: 50%;
transform: translateX(-50%);
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock .top {
top: 0;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock .bottom {
bottom: 0;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock p {
font-weight: 700;
line-height: 1.2;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock .icon {
width: 44px;
margin: 0 auto 20px;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock .first {
font-size: 2.8rem;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock.iwai .first {
margin:42px 0 0 0;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock .second {
display: flex;
justify-content: center;
align-items: baseline;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock .second span {
color: #e67d14;
display: block;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock .second .number {
font-weight: 600;
font-size: 6.4rem;
margin: 0 3px;
opacity: 0;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock.blockIn .second .number {
animation: number 0.3s ease-out 0.8s forwards;
}
@keyframes number {
0% { opacity: 1.0; transform: scale(0.6) translateY(10px);}
100% { opacity: 1.0; transform: scale(1.0) translateY(0px);}
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock .second .txt {
font-size: 3.8rem;
font-weight: 700;
transform: translateY(-3px);
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock.iwai  .second .number {
font-size: 7.2rem;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock.iwai  .second .txt {
font-size: 4.6rem;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock .plus {
width: 18px;
margin: 10px auto 14px;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock .third {
font-size: 2.6rem;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock .third span {
margin: 0 0 0 3px;
font-size: 2.6rem;
font-weight: 700;
color: #e67d14;
}
@media screen and (max-width: 899px) {
#main #zwei #environment #benefit .benefitWrap {
flex-direction: column;
gap: 20px;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock {
width: 72%;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock.hoken {
margin: 0 auto;
}
#main #zwei #environment #benefit .benefitWrap .benefitBlock.iwai {
margin: 0 0 0 auto;
}
}
@media screen and (max-width: 414px) {
#main #zwei #environment #benefit .benefitWrap .benefitBlock {
width:84%;
}
}

/* ------------------- キャリアパス */
#main #zwei #careerPath {
background: url(../images/bg_010.png) center top no-repeat;
max-width: 940px;
padding: 120px 20px 60px;
margin: 0 auto;
}
#main #zwei #careerPath .stepWrap {
display: flex;
flex-direction: column;
gap: 30px;
margin: 60px auto 0;
}
#main #zwei #careerPath .stepWrap .stepBlock {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 720px;
border: 1px solid #e67d14;
background: #fff;
padding: 20px 20px 20px 30px;
position: relative;
}
#main #zwei #careerPath .stepWrap .stepBlock:nth-child(even) {
margin: 0 0 0 auto;
}
#main #zwei #careerPath .stepWrap .stepBlock .txtBlock {
width: calc(100% - 286px);
}
#main #zwei #careerPath .stepWrap .stepBlock .txtBlock .ttl {
font-size: 2.8rem;
margin: 0 0 10px;
color: #e67d14;
}
#main #zwei #careerPath .stepWrap .stepBlock .txtBlock .note {
background: #fff064;
color: #e67d14;
font-weight: 700;
display: inline-block;
margin: 10px 0 0;
}
#main #zwei #careerPath .stepWrap .stepBlock figure {
max-width: 261px;
position: relative;
}
#main #zwei #careerPath .stepWrap .stepBlock figure figcaption {
font-size: 6.0rem;
font-weight: 700;
color: #fff064;
position: absolute;
}
#main #zwei #careerPath .stepWrap .stepBlock.step1 .congrats {
position: absolute;
top: -30px;
right: -30px;
width: 100px;
height: 100px;
text-align: center;
border-radius: 50px;
background: #fff064;
transform: rotate(-10deg);
}
#main #zwei #careerPath .stepWrap .stepBlock.step1 .congrats p {
color: #e67d14;
font-size: 1.2rem;
font-weight: 700;
padding: 30px 0;
}

#main #zwei #careerPath .stepWrap .stepBlock.step1 figure figcaption {
bottom: 0;
right: 0;
}
#main #zwei #careerPath .stepWrap .stepBlock.step2 figure figcaption {
bottom: 0;
left: 0;
}
#main #zwei #careerPath .stepWrap .stepBlock.step3 figure figcaption {
bottom: 0;
left: 0;
}
#main #zwei #careerPath .stepWrap .stepBlock.step4 figure figcaption {
bottom: 0;
right: 0;
}
#main #zwei #careerPath .stepWrap .stepBlock.step5 figure figcaption {
bottom: 0;
right: 0;
}
#main #zwei #careerPath .stepWrap .stepBlock.step6 figure figcaption {
top: 0;
right: 0;
}

@media screen and (max-width: 768px) {
#main #zwei #careerPath .stepWrap {
margin: 40px auto 0;
}
#main #zwei #careerPath .stepWrap .stepBlock .txtBlock {
width: calc(100% - 215px);
}
#main #zwei #careerPath .stepWrap .stepBlock .txtBlock .ttl {
font-size: 2.4rem;
}
#main #zwei #careerPath .stepWrap .stepBlock .txtBlock .txt {
font-size: 1.2rem;
}
#main #zwei #careerPath .stepWrap .stepBlock figure {
max-width: 200px;
}
#main #zwei #careerPath .stepWrap .stepBlock figure figcaption {
font-size: 4.8rem;
}
#main #zwei #careerPath .stepWrap .stepBlock.step1 .congrats {
left: -15px;
right: auto;
width: 80px;
height:80px;
}
#main #zwei #careerPath .stepWrap .stepBlock.step1 .congrats p {
font-size: 1.0rem;
padding: 24px 0;
}
}
@media screen and (max-width: 560px) {
#main #zwei #careerPath .stepWrap .stepBlock {
flex-direction: column-reverse;
gap: 10px;
padding: 20px;
}
#main #zwei #careerPath .stepWrap .stepBlock figure figcaption {
font-size: 4.2rem;
}
#main #zwei #careerPath .stepWrap .stepBlock .txtBlock {
width: 100%;
}
}
/* ------------------- */
#main #zwei #cpImage {
max-width: 940px;
padding: 60px 20px 120px;
margin: 0 auto;
}
#main #zwei #cpImage .pdf {
max-width: 800px;
margin: 60px auto 60px;
background: #fff;
border: 1px solid #ccc;
}
#main #zwei #cpImage .pdf img:hover {
opacity: 0.7;
}

@media screen and (max-width: 768px) {
#main #zwei #cpImage {
padding: 30px 20px 120px;
}
#main #zwei #cpImage .pdf {
margin: 30px auto 40px;
}
}


/* ----------------------------------------- */
#main #dreiOuter {
padding:0 15px;
position: relative;
z-index: 1;
}
#main #drei {
overflow: hidden;
max-width: 1000px;
margin: 0 auto 0;
background: #fff;
border-radius: 30px 30px 0px 0px;
border-top: 4px #e67d14 solid;
border-right: 4px #e67d14 solid;
border-left: 4px #e67d14 solid;
}
@media screen and (max-width: 540px) {
#main #dreiOuter {
padding:0 5px;
}
}
/* ----------------------------------------- 職場見学 */
#main #drei #tour {
padding: 60px 0 0 0;
}
#main #drei #tour .tourWrapA,
#main #drei #tour .tourWrapB {
max-width: 760px;
padding: 0 20px;
}
#main #drei #tour .tourWrapA {
margin: 0 auto;
display: flex;
justify-content: space-between;
}
#main #drei #tour .tourWrapA .img {
max-width: 450px;
}
#main #drei #tour .tourWrapA .txtBlock {
position: relative;
max-width: 250px;
}
#main #drei #tour .tourWrapA .ttl {
background: url(../images/frame_002.svg) left top no-repeat;
width: 325px;
padding: 84px 90px 46px 90px;
position: absolute;
left: -84px;
top: -32px;
}
#main #drei #tour .tourWrapA .txt {
padding: 150px 0 0 0;
}
#main #drei #tour .tourWrapB {
display: flex;
gap:10px 15px;
margin: 15px auto 60px;
}
#main #drei #tour .tourWrapB figure:not(:first-child) {
padding: 15px 0 0 0;
}
@media screen and (max-width: 768px) {
#main #drei #tour .tourWrapA {
flex-direction: column;
}
#main #drei #tour .tourWrapA .txtBlock {
max-width: 450px;
margin: 0 auto;
}
#main #drei #tour .tourWrapA .txtBlock .ttl {
left: -6%;
top: -112px;
}
#main #drei #tour .tourWrapA .txtBlock .txt {
padding:70px 20px 20px;
}
#main #drei #tour .tourWrapA .img {
margin: 0px auto 0;
}
#main #drei #tour .tourWrapB {
flex-direction: column;
width: 72%;
max-width: 490px;
}
}

/* ----------------------------------------- */
#main #drei #qa {
padding: 120px 0 120px 0;
}
#main #drei #qa .qaWrap {
max-width: 760px;
padding: 0 20px;
margin: 0 auto;
}
#main #drei #qa .qaWrap .qaBlock {
border-top: 1px solid #ccc;
position: relative;
}
#main #drei #qa .qaWrap .qaBlock::after {
position: absolute;
content: "";
right: 5px;
top: 20px;
width: 10px;
height: 10px;
transform: rotate(-45deg);
border-left: 3px solid #e67d14;
border-bottom: 3px solid #e67d14;
}
#main #drei #qa .qaWrap .qaBlock[open]::after {
top: 26px;
transform: rotate(135deg);
}

#main #drei #qa .qaWrap .qaBlock:last-child {
border-bottom: 1px solid #ccc;
}
#main #drei #qa .qaWrap .qaBlock .question {
color: #e67d14;
font-size: 1.6rem;
font-weight: 700;
list-style: none;
padding: 15px 30px 15px 42px;
text-indent: -42px;
cursor: pointer;
}
#main #drei #qa .qaWrap .qaBlock .question span {
background:#e67d14;
color: #fff;
display: inline-block;
font-size: 1.6rem;
width: 32px;
line-height: 2.0;
font-weight: 700;
text-align: center;
border-radius: 50%;
margin: 0 10px 0 0;
text-indent: 0;
}
#main #drei #qa .qaWrap .qaBlock .anser {
font-size: 1.6rem;
font-weight: 700;
padding-left: 42px;
text-indent: -42px;
}
#main #drei #qa .qaWrap .qaBlock .anser span {
background:#000;
color: #fff;
display: inline-block;
font-size: 1.6rem;
width: 32px;
line-height: 2.0; 
font-weight: 700;
text-align: center;
border-radius: 50%;
margin: 0 10px 0 0;
text-indent: 0;
}
#main #drei #qa .qaWrap .qaBlock .txt {
padding: 10px 0 15px 44px;
}
/* ----------------------------------------- */
#main #drei #company #greeting .greetingWrap {
max-width: 760px;
padding: 0 20px;
margin: 0 auto 120px;
gap: 30px;
display: flex;
justify-content: space-between;
}
#main #drei #company #greeting .greetingWrap .greetingTxt {
width: calc(100% - 280px);
}
#main #drei #company #greeting .greetingWrap .greetingTxt .ttlWrapB {
margin: 0 0 24px;
}
#main #drei #company #greeting .greetingWrap #message {
margin: 24px 0 0;
}
#main #drei #company #greeting .greetingWrap #message h4 {
line-height: 1.4;
margin: 0 0 10px;
padding: 0 0 0 1.8em;
background: url(../images/icon_007.svg) left top no-repeat;
}
#main #drei #company #greeting .greetingWrap .greetingTxt .line {
background:linear-gradient(transparent 60%, #fff064 60%);
font-size: 1.4rem;
}
#main #drei #company #greeting .greetingWrap .greetingImg {
max-width: 250px;
margin: 0 auto;
position: relative;
}
#main #drei #company #greeting .greetingWrap .greetingImg figure {
box-shadow: 10px 10px 0px 0px #fff064;
border-radius: 15px;
}
#main #drei #company #greeting .greetingWrap .greetingImg img {
aspect-ratio: 9 / 16;
object-fit: cover;
overflow: hidden;
border-radius: 15px;
}
@media screen and (max-width: 768px) {
#main #drei #company #greeting .greetingWrap {
flex-direction: column-reverse;
}
#main #drei #company #greeting .greetingWrap .greetingTxt {
width: 100%;
}
#main #drei #company #greeting .greetingWrap .greetingImg {
max-width: 400px;
}
#main #drei #company #greeting .greetingWrap .greetingImg img {
aspect-ratio: 1 / 1;
}
}
/* ----------------------------------------- */
#main #drei #company #info {
max-width: 760px;
padding: 0 20px 120px;
margin: 0 auto;
}
#main #drei #company #info .infoWrap {
margin: 30px 0 0 0;
}
#main #drei #company #info .infoWrap dl {
display: flex;
}
#main #drei #company #info .infoWrap dl dt {
font-size: 1.4rem;
line-height: 1.5;
font-weight: 700;
letter-spacing: 0.2rem;
width: 140px;
border-top: 1px solid #e67d14;
padding: 15px 20px;
}
#main #drei #company #info .infoWrap dl:last-child dt {
border-bottom: 1px solid #e67d14;
}
#main #drei #company #info .infoWrap dl dd {
font-size: 1.4rem;
line-height: 1.5;
padding: 15px 20px;
border-top: 1px solid #ccc;
width: calc(100% - 140px);
}
#main #drei #company #info .infoWrap dl:last-child dd {
border-bottom: 1px solid #ccc;
}
#main #drei #company #info .infoWrap dl dd a {
font-size: 1.4rem;
text-decoration: underline;
}
#main #drei #company #info .infoWrap dl dd a:hover {
text-decoration: none;
}
@media screen and (max-width: 414px) {
#main #drei #company #info .infoWrap dl dt {
padding: 10px 5px;
width: 6em;
}
#main #drei #company #info .infoWrap dl dd {
padding: 10px 5px;
width: calc(100% - 6em);
}
}
/* ----------------------------------------- */
#main #drei #company #initiatives {
max-width: 760px;
padding: 0 20px 120px;
margin: 0 auto;
}
#main #drei #company #initiatives h4 {
line-height: 1.4;
margin: 30px 0 10px;
padding: 0 0 0 1.8em;
background: url(../images/icon_007.svg) left top no-repeat;
}
#main #drei #company #initiatives .sdgs {
max-width: 430px;
margin: 30px auto 30px;
}
#main #drei #company #initiatives .sdgs ul {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
#main #drei #company #initiatives .sdgs ul li {
width: 100px;
}
#main #drei #company #initiatives .link {
text-align: center;
}
#main #drei #company #initiatives .link a {
font-size: 1.2rem;
color: #e67d14;
text-decoration: underline;
}
#main #drei #company #initiatives .link a:hover {
text-decoration: none;
}
@media screen and (max-width: 414px) {
#main #drei #company #initiatives .sdgs ul li {
min-width: auto;
width: calc((100% - 20px) / 3);
}
}
/* ----------------------------------------- */
#main #drei #dl .btn a {
pointer-events: none;
background: #ccc;
color: #eee;
}
/* ----------------------------------------- */
#footer {
width: 100%;
background: #000;
padding: 30px;
color: #fff;
}
#footer .footerWrap {
display: flex;
align-items: center;
justify-content: center;
gap:10px 30px;
margin: 0 0 15px;
}
#footer .footerWrap h2 {
font-size: 2.4rem;
padding: 0 30px 0 0;
border-right: 1px solid #fff;
}
#footer .footerWrap p a {
font-size: 1.4rem;
color: #fff;
pointer-events: none;
}
#footer .copy {
font-size: 1.0rem;
text-align: center;
}
@media screen and (max-width: 768px) {
#footer .footerWrap {
flex-direction: column;
text-align: center;
}
#footer .footerWrap h2 {
border-right: none;
padding: 0;
}
#footer .footerWrap p a {
text-decoration: underline;
pointer-events: all;
}
}