@charset "utf-8";

/* 共通
======================================== */
.wrapper {
width: 100%;
}

section {
margin: 0 auto;
padding: 15% 0;
text-align: center;
}

.box {
width: 50%;
max-width: 700px;
}

p.text {
margin: 5% auto 0;
text-align: left;
font-size: 26px;
font-weight: 600;
color: #000;
}

h2.section_ttl {
padding-bottom: 100px;
color: #333;
}

.thumb01 {
max-width: 600px;
margin: 0 auto;
padding-top: 40px;
}

.thumb02_right {
max-width: 540px;
margin: 0 5% 0 auto;
padding-top: 150px;
}

.thumb02_left {
max-width: 540px;
margin: 0 auto 0 5%;
padding-top: 150px;
}

.thumb03 {
max-width: 600px;
margin: 0 auto;
padding-top: 40px;
}

img.thumb_left {
padding-right: 15px;
}

img.thumb_right {
padding-left: 15px;
}

img.thumb_left, img.thumb_right {
float: left;
max-width: 300px;
width: 50%;
margin: 0 0 5% 0
}

.material_last,
.inspection_last,
.shipment_last {
position: relative;
}

.material_last .box,
.inspection_last .box,
.shipment_last .box {
position: absolute;
}


@media screen and (min-width: 769px){

.box_left {
float: left;
}

.box_right {
float: right;
}

.material_last .box,
.inspection_last .box,
.shipment_last .box {
bottom: 150px;
}

}

@media screen and (min-width:768px) and ( max-width:1200px) {
/*　画面サイズが768pxから1200pxまではここを読み込む　*/

.thumb {
padding-top: 75px;
}

img.thumb_left, img.thumb_right {
padding: 0 7.5px;
}

}

@media screen and (max-width: 768px) {
/*768px以下*/

section {
margin: 0 auto;
padding: 45% 0 0 0;
text-align: center;
}

h2.section_ttl {
padding: 0 12% 10% 12%;
color: #333;
}

.thumb01 {
width: 90%;
padding-top: 0;
}

.thumb02_right {
margin: 0;
padding: 3%;
}

.thumb02_left {
margin: 0;
padding: 3%;
}

.thumb03 {
margin: 0;
padding: 3%;
}

.box {
width: 100%;
max-width: 600px;
}

.pc_sub{
display: none;
}

p.text {
font-size: 18px;
font-weight: normal;
}

img.thumb_left, img.thumb_right {
width: 50%;
}

.thumb, p.text {
padding: 0 2% 2% 2%;
}

img.thumb_left {
padding-right: 2.5px;
}

img.thumb_right {
padding-left: 2.5px;
}

.material_last .box, .inspection_last .box, .shipment_last .box {
position: absolute;
left: 0;
bottom: 50px;
}

.material_last p.text,
.inspection_last p.text,
.shipment_last p.text {
    max-width: 100%;
}

}


/* ぼかし効果
======================================== */
.blur {
height: 100vh;
/*ぼかし効果*/
height: 100%;
background: linear-gradient(#ffffff00, #ffffff);
/*background: linear-gradient(#ffffff, #ffffff20, #ffffff10, #ffffff00);*/
}

/* floatのクリア対応
======================================== */
section, .thumb {
overflow: hidden;
}

/* clearfix */
section:before,
section:after,
.thumb:before,
.thumb:after {
content: "";
display: table;
}

section:after, .thumb:after {
clear: both;
}


/* hero
======================================== */
.hero {
height: 90vh;
background: url(img/quality_top-bg01.jpg) no-repeat;
background-size: cover;
background-position: center;
}

.hero h1.logo {
padding-bottom: 100px;
}

.hero h2.section_ttl {
padding-bottom: 15px;
font-size: 32px;
}

.hero p.text {
max-width: 400px;
}


@media screen and (max-width: 768px) {
/*768px以下*/

.hero {
height: 80vh;
}

.hero h1.logo {
padding-bottom: 12%;
margin: auto;
width: 60%;
}

.box {
width: 100%;
max-width: 600px;
margin: 0 auto;
}

.hero h2.section_ttl {
padding: 10% 0 0 0;
font-size: 26px;
}

.hero p.text {
max-width: 91%;
}

}



/* material
======================================== */
.material {
max-width: 1300px;
margin: auto;
}

.material section {
max-width: initial;
padding: 10% 0 8% 0;
}

.material p.text {
max-width: 400px;
}

.material_top {
height: 80vh;
background: url(img/material_bg01.jpg) no-repeat;
background-size: cover;
background-position: bottom
}

.material_01 {
height: 80vh;
background: url(img/material_bg02.jpg) no-repeat;
background-size: cover;
background-position: bottom
}

.material_02 {
height: 80vh;
background: url(img/material_bg03.jpg) no-repeat;
background-size: cover;
background-position: bottom
}

.material_03 {
height: 80vh;
background: url(img/material_bg04.jpg) no-repeat;
background-size: cover;
background-position: bottom
}

.material_04 {
height: 80vh;
background: url(img/material_bg05.jpg) no-repeat;
background-size: cover;
background-position: bottom
}

.material_05 {
height: 80vh;
background: url(img/material_bg06.jpg) no-repeat;
background-size: cover;
background-position: bottom
}

.material_last {
height: 60vh;
background: url(img/material_bg07.jpg) no-repeat;
background-size: cover;
background-position: bottom;
margin: 0 0 10% 0;
}

@media screen and (max-width: 768px) {
/*768px以下*/
.material section {
max-width: initial;
padding: 30% 0 8% 0;
}

.material p.text {
padding: 5% 2% 2% 2%;
max-width: 91%;
}

.material_top {
height: auto;
background: none;
}

.material_01 section,
.material_02 section,
.material_03 section,
.material_04 section,
.material_05 section,
.material_06 section{
padding: 12% 0 0 0;
}

.material_01 {
background: url(img/material_bg02_sp.jpg) no-repeat;
height: 60vh;
background-size: cover;
background-position: bottom;
}

.material_02 {
background: url(img/material_bg03_sp.jpg) no-repeat;
height: 60vh;
background-size: cover;
background-position: bottom;
}

.material_03 {
background: url(img/material_bg04_sp.jpg) no-repeat;
height: 60vh;
background-size: cover;
background-position: bottom;
}

.material_04 {
background: url(img/material_bg05_sp.jpg) no-repeat;
height: 60vh;
background-size: cover;
background-position: bottom;
}

.material_05 {
background: url(img/material_bg06_sp.jpg) no-repeat;
height: 60vh;
background-size: cover;
background-position: bottom;
}

.material_last {
height: 55vh;
background-position: right;
}
}


/* inspection
======================================== */
.inspection_01,
.inspection_02,
.inspection_03,
.inspection_04,
.inspection_05,
.inspection_06 {
padding: 0;
}

.inspection {
max-width: 1300px;
margin: auto;
}

.inspection section {
width: 93%;
padding: 10% 0 8% 0;
}

.inspection_01 section,
.inspection_02 section,
.inspection_03 section,
.inspection_04 section,
.inspection_05 section,
.inspection_06 section{
width: 100%;
max-width: 1400px;
padding: 0;
}

.inspection p.text {
max-width: 400px;
}

.inspection_01 p.text ,
.inspection_02 p.text ,
.inspection_03 p.text ,
.inspection_04 p.text ,
.inspection_05 p.text ,
.inspection_06 p.text {
max-width: 470px;
}

.inspection_top {
height: 80vh;
background: url(img/inspection_bg01.jpg) no-repeat;
background-size: cover;
background-position: 10%;
}

.inspection_last {
height: 60vh;
background: url(img/inspection_bg02.jpg) no-repeat;
background-size: cover;
margin: 0 0 10% 0;
}

@media screen and (max-width: 768px) {
/*768px以下*/

.inspection section {
padding: 20% 0 5% 0;
}

.inspection_top {
height: auto;
background: none;
}

.inspection p.text {
padding: 5% 2% 2% 2%;
max-width: 91%;
}

.inspection .box_left > img {
padding: 3% 0 10% 0;
}

.inspection_01 section{
padding-top: 30px;
}

.inspection_01 section,
.inspection_02 section,
.inspection_03 section,
.inspection_04 section,
.inspection_05 section,
.inspection_06 section{
padding: 0 0 2% 0;
}

.inspection_last {
height: 50vh;
background-position: bottom;
}

}


/* shipment
======================================== */
.shipment {
max-width: 1300px;
margin: auto;
}

.shipment section {
width: 93%;
padding: 10% 0 8% 0;
}

.shipment_top {
height: 80vh;
background: url(img/shipment_bg01.jpg) no-repeat;
background-size: cover;
}

.shipment_top p.text {
max-width: 400px;
}

.shipment_01 {
height: 80vh;
background: url(img/shipment_bg02.jpg) no-repeat;
background-size: cover;
}

.shipment_01 p.text {
max-width: 470px;
}

.shipment_last {
height: 60vh;
background: url(img/shipment_bg03.jpg) no-repeat;
background-size: cover;
margin: 0 0 10% 0;
}

.shipment_last p.text {
max-width: 400px;
}

@media screen and (max-width: 768px) {
/*768px以下*/

.shipment section {
padding: 10% 0 5% 0;
width: 100%;
}

.shipment_top {
height: auto;
background: none;
padding-top: 10%;
}

.shipment p.text {
padding: 5% 2% 2% 2%;
max-width: 91%;
}

.shipment_last p.text {
padding: 5% 2% 0 2%;
margin-bottom: 0;
}

.shipment_01 {
background: url(img/shipment_bg02_sp.jpg) no-repeat;
height: 55vh;
background-size: cover;
background-position: bottom;
}

.shipment_last {
height: 50vh;
background-position: bottom;
margin-bottom: 20%;
}

}

/* animate
======================================== */
.invisible {
transition: opacity 0.5s ease;
opacity: 0.0;
}

.visible {
transition: opacity 0.5s ease;
opacity: 1.0;
}

.inspection section .thumb02_right .animated:nth-child(2) {
animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
}

.inspection section .thumb02_left .animated:nth-child(1) {
animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
}

.shipment section .thumb03 .animated:nth-child(1) {
animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
}