@charset "utf-8";

/* 製品部門 
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ */
.technology_main { 
background-image : url(../images/technology/technology_main.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
padding: 0 15px;
}

.technology_box {
max-width: 1200px;
height: 200px;
margin: 0 auto;
}

.technology_box h2 {
font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
font-size: 36px;
line-height: 1.5em;
color: #fff;
margin: 0;
padding-top: 70px;
text-shadow: 1px 2px 3px #111;
}

.back_introduction { 
background: #00A0FF;
position: relative;
height: 180px;
}

.introduction { 
width: 100%;
max-width: 900px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.introduction h2 { font-size: 30px; line-height: 1.5em; text-align: center; color: #fff; margin-top: 0; margin-bottom: 5px; padding: 0 15px; }
.introduction p { font-size: 18px; line-height: 2em; text-align: center; color: #fff; margin-bottom: 0; padding: 0 15px; }

@media screen and (max-width: 767px) {
.technology_box h2 { text-align: center; }
.introduction h2 { font-size: 24px; }
.introduction p { font-size: 16px; }
}


/* 電機・電子機器、皮膜、押出、輸送製品、容器、圧延、溶接、輸送製品 
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ */
.anchor { max-width: 700px; margin: 60px auto; }
.anchor a { font-size: 30px; line-height: 1.5em; text-align: center; padding: 10px 0; color: #fff; background: #00A0FF; }

.anchor .box01 { margin-bottom: 15px; }
.anchor .box01 a { display: block; width: 100%; }

.anchor .box02 { display: flex; margin-bottom: 15px; }
.anchor .box02 a { width: 49%; }
.anchor .box02 a:last-child { margin-left: 2%; }

.anchor .box03 { display: flex; margin-bottom: 15px; }
.anchor .box03 a { width: 32%; margin-right: 2%; }
.anchor .box03 a:last-child { margin-right: 0; }

@media screen and (max-width: 767px) {
.anchor a { font-size: 4vw; }
}



/* 工場MAP */
.plant-map { max-width: 700px; margin: 60px auto; overflow: auto;}
.plant-map table img { 
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none; /* From IE10 only */
user-select: none;
-webkit-user-drag: none;
user-drag: none;
}



/* 部門 */
.bumon { max-width: 1000px; margin: 0 auto 60px auto; padding: 30px; background: #E5F5FF; }
.bumon h2 {
font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
font-size: 30px;
line-height: 1.5em;
text-align: center;
border-bottom: 1px solid #111;
margin-top: 0;
margin-bottom: 60px;
padding-bottom: 30px;
}
.bumon h3 { font-size: 20px; line-height: 1.5em; margin: 20px 0; }

.bumon .two_box { display: flex; }
.bumon .two_box .two_box_text { display: block; width: 49%; }
.bumon .two_box .two_box_phot { width: 49%; margin-left: 2%; }
.bumon .two_box .two_box_phot img { width: 100%; }

.bumon .line { border-bottom: 1px solid #111; margin-top: 60px; margin-bottom: 60px; }

@media screen and (max-width: 900px) {
.bumon { max-width: 700px; }
.bumon h3 br { display: none; }
.bumon .two_box { display: block; }
.bumon .two_box .two_box_text { width: 100%; }
.bumon .two_box .two_box_phot { width: 100%; margin-left: 0; }
.bumon .point01 .point_text { margin-left: 0; }
}



/* POINT */
.bumon .point01 { background: #00A0FF; margin-top: 60px; padding: 15px; }
.bumon .point01 h3 { font-size: 20px; line-height: 1.5em; color: #fff; margin: 0; }
.bumon .point01 a { display: table; margin: 0 auto; }
.bumon .point01 .point_text { display: flex; }
.bumon .point01 .point_text h3 { display: flex; align-items: center; justify-content: center; }
.bumon .point01 .point_text h3 img { margin-left: 20px; }

.bumon .point02 { position: relative; background: #00A0FF; margin-top: 80px; padding: 15px; }
.bumon .point02 h3 { font-size: 20px; line-height: 1.5em; color: #fff; margin: 0; }
.bumon .point02 .point_text { display: flex; align-items: flex-start; }
.bumon .point02 .point_text p { max-width: 500px; color: #fff; margin-bottom: 0; margin-left: 20px; }
.bumon .point02 .point_text img { position: absolute; right: 15px; bottom: 15px; }

@media screen and (max-width: 1000px) {
.bumon .point02 .point_text { display: flex; justify-content: space-between; margin-left: 0; }
.bumon .point02 .point_text p { max-width: 100%; padding-right: 20px; }
.bumon .point02 .point_text img { position: static; width: 100%; max-width: 243px; }
}
@media screen and (max-width: 767px) {
.bumon .point01 .point_text { display: block; }	
.bumon .point02 .point_text { display: block; }
.bumon .point02 .point_text p { padding-right: 0; margin-bottom: 20px; margin-left: 0; }
.bumon .point02 .point_text img { max-width: 100%; }
}



/* 工場見学に関するご連絡 */
.kengaku_back { 
background-image : url(../images/back_02.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.kengaku { max-width: 700px; margin: 0 auto; padding: 60px 0; }
.kengaku h2 {
font-size: 30px;
line-height: 1.5em;
color: #fff;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.kengaku h2 img { margin-left: 30px; }

@media screen and (max-width: 767px) {
.kengaku h2 { display: block; text-align: center; }
.kengaku h2 img { display: block; margin: 10px auto 0 auto; }
}
@media screen and (max-width: 400px) {
.kengaku h2 { font-size: 24px; }
.kengaku h2 img { width: 250px; }
}



/* スライド 
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ */
.css-carousel-slider2 {
width: 100%;
overflow: hidden;
position: relative;
}
.css-carousel-slider2 img {
width: 100%;
height: auto;
vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider2 .slide-wrap {
width: 200%;
position: absolute;
display: flex;
top: 0;
left: 0;
z-index: 0;
animation: css-carousel-slider2 10s infinite;
animation-delay: 2s;
}
.css-carousel-slider2 .slide-wrap-main {
width: 100%;
z-index: 1;
animation: css-carousel-slider-main2 10s infinite;
animation-delay: 2s;
}
.css-carousel-slider2 .slide {
width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider2 {
0% { transform: translateX(0); }
40% { transform: translateX(calc(1 / 2 * -100%)); }
50% { transform: translateX(calc(1 / 2 * -100%)); }
90% { transform: translateX(calc(2 / 2 * -100%)); }
100% { transform: translateX(calc(2 / 2 * -100%)); }
}

@keyframes css-carousel-slider-main2 {
0% { transform: translateX(100%); }
50% { transform: translateX(100%); }
90% { transform: translateX(0%);}
}