@charset "utf-8";
/* CSS Document */
.mainMenu {
    z-index: 10000;
}

/*PC*/
@media print, screen and (min-width: 769px) {

.btn01 {
max-width: 250px;
margin: 50px auto;
}
.btn01 a {
display: block;
text-align: center;
font-family: "游明朝",YuMincho,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HG明朝E","MS P明朝","MS 明朝",serif;
border: 1px solid #333;
padding: 10px;
position: relative;
}
.btn01 a:before {
content: "";
position: absolute;
background: #333;
left: -40px;
top: 50%;
width: 80px;
height: 1px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.btn01 a:hover:before {
left: -20px
}



/*--------hed_img------------*/

#hedImg {
background: url(../images/reason/hed_img.jpg) center center no-repeat;
background-size: cover;
}

.reason_list {
width: 100%;
margin: 50px auto;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
}

.reason_list li { 
width: 50%;
float: left;
border-top: #dddddd 1px solid;
box-sizing: border-box;
border-right: #dddddd 1px solid;
height: 200px;
display: table;
}

/*.reason_list li:nth-child(2n+1) {
border-right: #dddddd 1px solid;
}*/

.reason_list li a {
display: block;
height: 200px;
line-height: 200px;
font-size: 16px;
font-weight: 500;
padding-right: 50px;
position: relative;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: rgba(255,255,255,0.6);
text-align: center;
vertical-align: middle;
font-family: "游明朝体","Yu Mincho",YuMincho,"ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif;
}


.reason_list li a:hover {
background: rgba(255,255,255,000)!important;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.reason_list li:nth-child(1) {
background: url(../images/reason/list_img01.jpg) center center no-repeat;
background-size: cover;
}

.reason_list li:nth-child(2) {
background: url(../images/reason/list_img02.jpg) center center no-repeat;
background-size: cover;
}

.reason_list li:nth-child(3) {
background: url(../images/reason/list_img03.jpg) center center no-repeat;
background-size: cover;
}

.reason_list li:nth-child(4) {
background: url(../images/reason/list_img04.jpg) center center no-repeat;
background-size: cover;
}


.reason_list li a:hover {
color: #fff;
}

.reason_list li a::after {
position: absolute;
content: "\f054";
display: block;
font-family: "Font Awesome 5 Free";
right: 0;
top: 0;
width: 50px;
height: 100%;
font-size: 20px;
text-align: center;
box-sizing: border-box;
font-weight: bold;
color: #ff0048;
border-left: #dddddd 1px solid;
background: #fff;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.reason_list li a:hover::after {
color: #fff;
background: linear-gradient(135deg, #a40000, #ff0000 18%, #ff0048 98%);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}


/*-----一番おいしい状態への見極め-------------*/

.reason_box {
width: 100%;
margin: 0 auto 200px;
position: relative;
}

.reason_box::after {
content: "";
position: absolute;
right: 0;
top: 15%;
width: 70%;
height: 60%;
background: linear-gradient(135deg, #a40000, #ff0000 18%, #ff0048 98%);
z-index: -1;
display: block;
}

.reason_box2 {
width: 100%;
margin: 0 auto 250px;
position: relative;
}

.reason_box2::after {
content: "";
position: absolute;
left: 20%;
top: -10%;
width: 40%;
height: 120%;
background: linear-gradient(135deg, #a40000, #ff0000 18%, #ff0048 98%);
z-index: -1;
display: block;
}

.reason_imgL {
width: 60%;
margin: auto auto auto 0;
margin-left: -100px;
}

.reason_imgR {
width: 60%;
margin: auto 0 auto auto;
margin-right: -100px;
}

.reason_imgL img ,.reason_imgR img {
width: 100%;
height: auto;
}

.reason_boxR {
width: 40%;
position: absolute;
right: 20%;
bottom: -10%;
z-index: 10;
}

.reason_boxL {
width: 40%;
position: absolute;
left: 10%;
top: 20%;
z-index: 10;
}


.reason_txtbox {
background: #fff;
box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
padding: 40px 50px;
}

.reason_txtbox_tit {
font-size: 18px;
font-family: "游明朝体","Yu Mincho",YuMincho,"ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif;
font-weight: bold;
margin-bottom: 15px;
}

.reason_txtbox_txt {
}

/*----------きめこまやかなニーズに応じた加工-----------*/

.reason02_box {
width: 100%;
margin: 0 auto 100px;
position: relative;
}

.reason02_box::after {
position: absolute;
content: "";
background: url(../images/reason/02/bg_img.jpg) center center no-repeat;
height: 500px;
background-size: cover;
left: -150px;
right: 0;
width: 150%;
bottom: -100px;
z-index: -1;
}

.reason02_img {
width: 70%;
margin: auto auto auto 0;
}

.reason02_img img { 
width: 100%;
height: auto;
}

.reason02_txtbox {
width: 40%;
background: #fff;
box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
padding: 40px 50px;
position: absolute;
right: 0%;
bottom: -10%;
}

/*------------トータルコストの削減-------*/

.reason03_icon {
width: 820px;
margin: 0 auto 50px;
}

.reason03_icon img {
width: 100%;
height: auto;
}

.reason03_txt {
line-height: 2em;
padding: 40px 50px;
background: #fff;
box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
text-align: center;
}


}




/*----------------------------------------------------*/




/*sp*/
@media only screen and (max-width: 768px) {

.btn01 {
max-width: 250px;
margin: 50px auto 0;
}
.btn01 a {
display: block;
text-align: center;
font-family: "游明朝",YuMincho,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HG明朝E","MS P明朝","MS 明朝",serif;
border: 1px solid #333;
padding: 10px;
position: relative;
}
.btn01 a:before {
content: "";
position: absolute;
background: #333;
left: -40px;
top: 50%;
width: 80px;
height: 1px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.btn01 a:hover:before {
left: -20px
}


/*--------------------*/

#hedImg {
background: url(../images/reason/hed_img.jpg) center center no-repeat;
background-size: cover;
}

.reason_list {
width: 100%;
margin: 50px auto;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
}

.reason_list li { 
width: 100%;
float: left;
border-top: #dddddd 1px solid;
box-sizing: border-box;
height: 200px;
display: table;
}

/*.reason_list li:nth-child(2n+1) {
border-right: #dddddd 1px solid;
}*/

.reason_list li a {
display: block;
height: 200px;
line-height: 200px;
font-size: 16px;
font-weight: 500;
position: relative;
padding-right: 50px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: rgba(255,255,255,0.6);
text-align: center;
vertical-align: middle;
font-family: "游明朝体","Yu Mincho",YuMincho,"ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif;
}


.reason_list li a:hover {
background: rgba(255,255,255,000)!important;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.reason_list li:nth-child(1) {
background: url(../images/reason/list_img01.jpg) center center no-repeat;
background-size: cover;
}

.reason_list li:nth-child(2) {
background: url(../images/reason/list_img02.jpg) center center no-repeat;
background-size: cover;
}

.reason_list li:nth-child(3) {
background: url(../images/reason/list_img03.jpg) center center no-repeat;
background-size: cover;
}

.reason_list li:nth-child(4) {
background: url(../images/reason/list_img04.jpg) center center no-repeat;
background-size: cover;
}


.reason_list li a:hover {
color: #fff;
}

.reason_list li a::after {
position: absolute;
content: "\f054";
display: block;
font-family: "Font Awesome 5 Free";
right: 0;
top: 0;
width: 50px;
height: 100%;
font-size: 20px;
text-align: center;
box-sizing: border-box;
font-weight: bold;
background: #fff;
color: #ff0048;
border-left: #dddddd 1px solid;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.reason_list li a:hover::after {
color: #fff;
background: linear-gradient(135deg, #a40000, #ff0000 18%, #ff0048 98%);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}



/*-----一番おいしい状態への見極め-------------*/

.reason_box {
width: 100%;
margin: 0 auto 100px;
position: relative;
}

.reason_box::after {
content: "";
position: absolute;
right: 0;
top: 15%;
width: 70%;
height: 60%;
background: linear-gradient(135deg, #a40000, #ff0000 18%, #ff0048 98%);
z-index: -1;
display: block;
}

.reason_box2 {
width: 100%;
margin: 0 auto 100px;
position: relative;
}

.reason_box2::after {
content: "";
position: absolute;
right: 0;
top: 15%;
width: 70%;
height: 60%;
background: linear-gradient(135deg, #a40000, #ff0000 18%, #ff0048 98%);
z-index: -1;
display: block;
}

.reason_imgL {
width: 100%;
margin: 0 auto;
}

.reason_imgR {
width: 100%;
margin: 0 auto;
}

.reason_imgL img ,.reason_imgR img {
width: 100%;
height: auto;
}

.reason_boxR {
width: 80%;
z-index: 10;
margin-top: -50px;
position: relative;
z-index: 10;
}

.reason_boxL {
width: 80%;
z-index: 10;
margin-top: -50px;
position: relative;
z-index: 10;
}


.reason_txtbox {
background: #fff;
box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
padding: 40px 50px;
}

.reason_txtbox_tit {
font-size: 16px;
font-family: "游明朝体","Yu Mincho",YuMincho,"ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif;
font-weight: bold;
margin-bottom: 15px;
}

.reason_txtbox_txt {
}

/*----------きめこまやかなニーズに応じた加工-----------*/

.reason02_box {
width: 100%;
margin: 0 auto 100px;
position: relative;
}

.reason02_box::after {
position: absolute;
content: "";
background: url(../images/reason/02/bg_img.jpg) center center no-repeat;
height: 500px;
background-size: cover;
left: -150px;
right: 0;
width: 150%;
bottom: -50px;
z-index: -1;
}

.reason02_img {
width: 100%;
margin: auto auto auto 0;
}

.reason02_img img { 
width: 100%;
height: auto;
}

.reason02_txtbox {
width: 80%;
background: #fff;
box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
padding: 40px 50px;
margin: 0 auto;
box-sizing: border-box;
margin-top: -50px;
position: relative;
z-index: 10;
}


/*------------トータルコストの削減-------*/

.reason03_icon {
width: 80%;
margin: 0 auto 50px;
}

.reason03_icon img {
width: 100%;
height: auto;
}

.reason03_txt {
line-height: 2em;
font-size: 14px;
padding: 40px 50px;
background: #fff;
box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
text-align: center;
}





}