@charset "utf-8";
/* CSS Document */

/*--------------------　mv　--------------------*/

#mv {
margin-bottom: 4%;
border-bottom: solid 1px #0E1E4F;
position: relative;
}

#mv img {
width: 100%;
}

#mv .inbox {
width: 90%;
max-width: 500px;
background: #0E1E4F;
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
}

#mv dl {
color: #FFFFFF;
display: flex;
font-size: 80%;
line-height: 160%;
position: relative;
}

#mv dl dt {
margin-right: 30px;
}

#mv dl dd {
margin-right: 20px;
}

#mv dl:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  transform: rotate(45deg);
  box-sizing: border-box;
}

#mv .inbox a {
text-decoration: none;
color: #FFFFFF;
padding: 8px 3%;
box-sizing: border-box;
width: 100%;
display: block;
}

/*--------------------　about　--------------------*/

#contents section.about .inside {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
}

#contents section.about .inside:before {
position: absolute;
top: 0;
left: 0;
content: "";
background: #0093E7;
width: 45%;
height: 40%;
z-index: 0;
}

#contents section.about .img {
width: 55%;
border: solid 1px #0E1E4F;
z-index: 1;
position: relative;
}

#contents section.about .img img {
width: 100%;
}

#contents section.about .img:before {
position: absolute;
top: -25px;
left: 0;
content: "Mizusawa Industrial Corporation";
color: #FFFFFF;
font-size: clamp(0.5rem, 0.364rem + 0.68vw, 0.875rem);
font-weight: bold;
line-height: 100%;
}

#contents section.about .inbox {
width: 45%;
padding-left: 5.2%;
box-sizing: border-box;
}

#contents section.about h2 {
font-size: clamp(4.375rem, 2.813rem + 2.6vw, 5.938rem);
font-family: Arial, Helvetica, "sans-serif";
line-height: 100%;
margin-bottom: 8%;
}

#contents section.about h2 p {
margin-top: 20px;
font-size: clamp(1rem, 0.75rem + 0.42vw, 1.25rem);
line-height: 100%;
}

#contents section.about .inbox p {
font-size: clamp(1rem, 0.75rem + 0.42vw, 1.25rem);
line-height: 200%;
margin-bottom: 8%;
}

#contents section.about .inbox .btn a {
width: 200px;
height: 60px;
padding-right: 40px;
box-sizing: border-box;
border: solid 1px #0E1E4F;
text-decoration: none;
font-weight: bold;
font-size: clamp(0.75rem, 0.5rem + 0.42vw, 1rem);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

#contents section.about .inbox .btn a:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 40px;
  height: 100%;
  margin: auto;
  border-right: solid 1px #0E1E4F;
}

#contents section.about .inbox .btn a:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #0E1E4F;
  border-right: 2px solid #0E1E4F;
  transform: rotate(45deg);
  box-sizing: border-box;
}

/*--------------------　service　--------------------*/

#contents section.service .inner {
background: #F0F0F0;
}

#contents section.service .title {
display: flex;
align-items: flex-start;
margin-bottom: 5.2%;
}

#contents section.service h2 {
font-size: clamp(4.375rem, 2.813rem + 2.6vw, 5.938rem);
font-family: Arial, Helvetica, "sans-serif";
line-height: 100%;
}

#contents section.service h2 p {
margin-top: 20px;
font-size: clamp(1rem, 0.75rem + 0.42vw, 1.25rem);
line-height: 100%;
}

#contents section.service h3 {
margin-bottom: 3%;
margin-left: 6%;
font-size: clamp(1.125rem, 0.25rem + 1.46vw, 2rem);
line-height: 260%;
}

#contents section.service h3 span {
background: linear-gradient(transparent 0%, #FFFFFF 0%);
padding: 10px 15px;
}

#contents section.service ul.inbox1 {
display: grid; 
grid-template-columns: repeat(3,1fr);
gap: 0 3.65%;
margin-bottom: 3%;
}

#contents section.service ul.inbox1 li p {
margin: 15px 0;
font-weight: bold;
font-size: clamp(0.875rem, 0.5rem + 0.63vw, 1.25rem);
line-height: 200%;
}

#contents section.service ul.inbox1 li img {
border: solid 1px #0E1E4F;
width: 100%;
}

#contents section.service ul.inbox1 li:nth-child(1) {
grid-column: 1;
position: relative;
}

#contents section.service ul.inbox1 li:nth-child(1):before {
position: absolute;
top: -7%;
right: 7%;
content: "01";
font-family: Arial, Helvetica, "sans-serif";
color: #0093E7;
font-size: clamp(5rem, 2.5rem + 4.17vw, 7.5rem);
font-weight: bold;
}

#contents section.service ul.inbox1 li:nth-child(2) {
grid-column: 2;
position: relative;
display: flex;
flex-direction: column;
}

#contents section.service ul.inbox1 li:nth-child(2) p {
margin-top: auto;
}

#contents section.service ul.inbox1 li:nth-child(2):before {
position: absolute;
bottom: -7%;
left: 7%;
content: "02";
font-family: Arial, Helvetica, "sans-serif";
color: #0093E7;
font-size: clamp(5rem, 2.5rem + 4.17vw, 7.5rem);
font-weight: bold;
}

#contents section.service ul.inbox1 li:nth-child(3) {
grid-column: 3;
position: relative;
}

#contents section.service ul.inbox1 li:nth-child(3):before {
position: absolute;
top: -7%;
left: 7%;
content: "03";
font-family: Arial, Helvetica, "sans-serif";
color: #0093E7;
font-size: clamp(5rem, 2.5rem + 4.17vw, 7.5rem);
font-weight: bold;
}

#contents section.service .inner2 {
border-top: solid 1px #0E1E4F;
}

#contents section.service .inner2 .inside {
padding: 0 5.2%;
border-left: solid 1px #0E1E4F;
border-right: solid 1px #0E1E4F;
}

#contents section.service ul.inbox2 {
display: grid; 
grid-template-columns: repeat(3,1fr);
}

#contents section.service ul.inbox2 li:nth-child(1) {
grid-column: 1;
border-left: solid 1px #0E1E4F;
border-right: solid 1px #0E1E4F;
}

#contents section.service ul.inbox2 li:nth-child(2) {
grid-column: 2;
border-right: solid 1px #0E1E4F;
}

#contents section.service ul.inbox2 li:nth-child(3) {
grid-column: 3;
border-right: solid 1px #0E1E4F;
}

#contents section.service ul.inbox2 li img {
width: 100%;
}

/*--------------------　base　--------------------*/

#contents section.base .inner {
background: #0093E7;
}

#contents section.base h2 {
font-size: clamp(4.375rem, 2.813rem + 2.6vw, 5.938rem);
font-family: Arial, Helvetica, "sans-serif";
line-height: 100%;
color: #FFFFFF;
margin-bottom: 25px;
}

#contents section.base span {
margin-right: 30px;
}

#contents section.base h2 p {
font-size: clamp(1rem, 0.75rem + 0.42vw, 1.25rem);
line-height: 100%;
width: 200px;
text-align: center;
padding: 10px;
background: #FFFFFF;
color: #0093E7;
display: inline-block;
vertical-align: 120%;
}

#contents section.base .lead {
font-size: clamp(1rem, 0.75rem + 0.42vw, 1.25rem);
color: #FFFFFF;
font-weight: bold;
}

#contents section.base .inbox {
margin-top: 5.2%;
background: #FFFFFF;
padding: 4%;
display: flex;
justify-content: space-between;
}

#contents section.base .inbox .img {
width: 45%;
padding-right: 3%;
}

#contents section.base .inbox .img img {
width: 100%;
}

#contents section.base .inbox .right {
width: 55%;
}

#contents section.base .inbox .right .txt {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}

#contents section.base .inbox .right .txt .btn {
margin-bottom: 20px;
}

#contents section.base .inbox .right .txt .btn a {
width: 200px;
height: 60px;
padding-right: 40px;
box-sizing: border-box;
border: solid 1px #0E1E4F;
text-decoration: none;
font-weight: bold;
font-size: clamp(0.75rem, 0.5rem + 0.42vw, 1rem);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

#contents section.base .inbox .right .txt .btn a:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 40px;
  height: 100%;
  margin: auto;
  border-right: solid 1px #0E1E4F;
}

#contents section.base .inbox .right .txt .btn a:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #0E1E4F;
  border-right: 2px solid #0E1E4F;
  transform: rotate(45deg);
  box-sizing: border-box;
}

/*
#contents section.base .inbox .right .txt .btn {
margin-right: 20px;
margin-bottom: 15px;
}

#contents section.base .inbox .right .txt .btn a {
width: 300px;
height: 70px;
padding-right: 40px;
box-sizing: border-box;
border: solid 1px #0093E7;
text-decoration: none;
font-weight: bold;
color: #0093E7;
font-size: clamp(1rem, 0.75rem + 0.42vw, 1.25rem);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

#contents section.base .inbox .right .txt .btn a:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 40px;
  height: 100%;
  margin: auto;
  border-right: solid 1px #0093E7;
}

#contents section.base .inbox .right .txt .btn a:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #0093E7;
  border-right: 2px solid #0093E7;
  transform: rotate(45deg);
  box-sizing: border-box;
}
*/
#contents section.base .inbox .right .txt img {
margin-bottom: 20px;
}

#contents section.base dl,
#contents section.base dt,
#contents section.base dd {
  box-sizing: border-box;
}
#contents section.base dl {
width: 100%;
margin-bottom: 20px;
}
#contents section.base dt,
#contents section.base dd {
}
#contents section.base dt {
  width: 4.7em;
  float: left;
  text-align-last: justify;
  text-justify: inter-ideograph;
}
#contents section.base dd {
  margin-left: 5.2em;
  word-break: break-all;
}
#contents section.base dd:after {
  content: '';
  display: block;
  clear: both;
}

#contents section.base ul {
width: 100%;
display: flex;
justify-content: space-between;
}

#contents section.base ul li {
width: 33.3%;
}

#contents section.base ul li img {
width: 100%;
}

/*--------------------　news　--------------------*/

#contents section.news .inside {
display: flex;
align-items: flex-start;
}

#contents section.news .title {
margin-right: 60px;
}

#contents section.news h2 {
font-size: clamp(4.375rem, 2.813rem + 2.6vw, 5.938rem);
font-family: Arial, Helvetica, "sans-serif";
line-height: 100%;
white-space: nowrap;
margin-bottom: 40px;
}

#contents section.news h2 p {
margin-top: 20px;
font-size: clamp(1rem, 0.75rem + 0.42vw, 1.25rem);
line-height: 100%;
}

#contents section.news #news_box_wp {
width: 100%;
}

#contents section.news dl,
#contents section.news dt,
#contents section.news dd {
  box-sizing: border-box;
}
#contents section.news dl {
width: 100%;
  border-bottom: 1px solid #ccc;
}
#contents section.news dt,
#contents section.news dd {
  padding: 15px 0 0 0;
  border-top: 1px solid #ccc;
  line-height: 180%;
}
#contents section.news dt:first-of-type,
#contents section.news dd:first-of-type {
  border-top: none;
}
#contents section.news dt {
  width: 8em;
  float: left;
  font-weight: bold;
}
#contents section.news dd {
  margin-left: 8em;
  padding-bottom: 15px;
}
#contents section.news dd:after {
  content: '';
  display: block;
  clear: both;
}

#contents section.news dd a {
text-decoration: none;
}

#contents section.news .btn a {
width: 200px;
height: 38px;
padding-right: 40px;
box-sizing: border-box;
background: #0E1E4F;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size: clamp(0.75rem, 0.5rem + 0.42vw, 1rem);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

#contents section.news .btn a:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 40px;
  height: 100%;
  margin: auto;
  border-right: solid 1px #FFFFFF;
}

#contents section.news .btn a:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  transform: rotate(45deg);
  box-sizing: border-box;
}

/*--------------------　roots　--------------------*/

#contents section.roots .inner {
background: url("../images/roots_bg.png") no-repeat top right 12%;
}

#contents section.roots .inside {
position: relative;
}

#contents section.roots .title img {
margin-top: 6%;
border: solid 1px #0E1E4F;
width: 100%;
}

#contents section.roots h2 {
font-size: clamp(4.375rem, 2.813rem + 2.6vw, 5.938rem);
font-family: Arial, Helvetica, "sans-serif";
line-height: 100%;
}

#contents section.roots h2 p {
margin-top: 20px;
font-size: clamp(1rem, 0.75rem + 0.42vw, 1.25rem);
line-height: 100%;
}

#contents section.roots h3 {
position: absolute;
top: 8%;
right: 0;
margin-right: 8%;
font-size: clamp(1.125rem, 0.25rem + 1.46vw, 2rem);
line-height: 360%;
color: #FFFFFF;
writing-mode: vertical-rl;
font-feature-settings: "pkna" 1;
}

#contents section.roots h3 span {
background: linear-gradient(transparent 0%, #0E1E4F 0%);
padding: 10px 15px;
}

#contents section.roots .inner2 {
border-top: solid 1px #0E1E4F;
background: none;
}

#contents section.roots .inner2 .inside {
background: none;
padding: 0;
}

#contents section.roots .inbox {
display: flex;
justify-content: space-between;
}

#contents section.roots .inbox .left {
padding: 5.2%;
width: 45%;
}

#contents section.roots .inbox .left h4 {
margin-bottom: 10%;
font-size: clamp(1.375rem, 0.75rem + 1.04vw, 2rem);
}

#contents section.roots .inbox .left p {
font-size: clamp(1rem, 0.75rem + 0.42vw, 1.25rem);
line-height: 200%;
}

#contents section.roots .inbox .right {
padding: 5.2%;
width: 55%;
border-left: solid 1px #0E1E4F;
background: #F0F0F0;
}

#contents section.roots .inbox .right img {
margin-bottom: 6%;
width: 100%;
}

#contents section.roots .inbox .right .access {
display: flex;
justify-content: space-between;
}

#contents section.roots .inbox .right .txt {
width: calc(100% - 200px);
}

#contents section.roots .inbox .right h5 {
margin-bottom: 2%;
font-size: clamp(1rem, 0.75rem + 0.42vw, 1.25rem);
}

#contents section.roots .inbox .right p {
font-size: clamp(0.875rem, 0.625rem + 0.42vw, 1.125rem);
}

#contents section.roots .inbox .right .btn a {
width: 170px;
height: 60px;
padding-right: 40px;
box-sizing: border-box;
border: solid 1px #0E1E4F;
text-decoration: none;
font-weight: bold;
font-size: clamp(0.75rem, 0.5rem + 0.42vw, 1rem);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

#contents section.roots .inbox .right .btn a:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 40px;
  height: 100%;
  margin: auto;
  border-right: solid 1px #0E1E4F;
}

#contents section.roots .inbox .right .btn a:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #0E1E4F;
  border-right: 2px solid #0E1E4F;
  transform: rotate(45deg);
  box-sizing: border-box;
}


/* タブレットレイアウト : 768 px ～ 959 px*/
@media screen and (max-width:959px)
{
.pt{display: block;}
.pc{display: none;}
.ps{display: none;}
.tb{display: block;}
.ts{display: block;}
.sp{display: none;}

/*--------------------　about　--------------------*/

#contents section.about .inside {
display: block;
}

#contents section.about .inside:before {
width: 60%;
height: 25%;
}

#contents section.about .img {
width: 100%;
margin-bottom: 8%;
}

#contents section.about .inbox {
width: 100%;
padding-left: 0;
}

/*--------------------　service　--------------------*/

#contents section.service .title {
display: block;
margin-bottom: 12%;
}

#contents section.service h3 {
margin-top: 4%;
margin-left: 0;
}

/*--------------------　base　--------------------*/

#contents section.base .inbox {
display: block;
}

#contents section.base .inbox .img {
width: 100%;
padding-right: 0;
text-align: center;
margin-bottom: 4%;
}

#contents section.base .inbox .right {
width: 100%;
}

/*--------------------　news　--------------------*/

#contents section.news .inside {
display: block;
}

#contents section.news .title {
margin-right: 0;
}

#contents section.news dl {
margin-bottom: 4%;
}

/*--------------------　roots　--------------------*/

#contents section.roots .inbox .right .access {
display: block;
}

#contents section.roots .inbox .right .txt {
width: 100%;
margin-bottom: 6%;
}

}


/* スマホ設定  768 以下*/
@media screen and (max-width:767px)
{
.pt{display: none;}
.pc{display: none;}
.ps{display: block;}
.tb{display: none;}
.ts{display: block;}
.sp{display: block;}

/*--------------------　mv　--------------------*/

#mv {
margin-bottom: 30px;
}

#mv .inbox {
display: none;
}

/*--------------------　about　--------------------*/

#contents section.about .inside:before {
width: 80%;
height: 20%;
}

#contents section.about .img:before {
top: -15px;
}

#contents section.about h2 {
font-size: 300%;
}

#contents section.about h2 p {
margin-top: 0;
font-size: 25%!important;
}

#contents section.about .inbox p {
font-size: 100%;
}

#contents section.about .inbox .btn a {
width: 100%;
}

/*--------------------　service　--------------------*/

#contents section.service h2 {
font-size: 300%;
}

#contents section.service h2 p {
margin-top: 10px;
font-size: 25%;
}

#contents section.service h3 {
margin-bottom: 60px;
font-size: 90%;
margin-top: 20px;
}

#contents section.service h3 span {
padding: 6px 10px;
}

#contents section.service ul.inbox1 {
display: block;
margin-bottom: 0;
}

#contents section.service ul.inbox1 li {
margin-bottom: 60px;
}

#contents section.service ul.inbox1 li:last-child {
margin-bottom: 0;
}

#contents section.service ul.inbox1 li p {
font-size: 90%;
}

#contents section.service ul.inbox1 li:nth-child(1):before {
top: -7%;
right: 7%;
font-size: 80px;
}

#contents section.service ul.inbox1 li:nth-child(2) {
display: block;
}

#contents section.service ul.inbox1 li:nth-child(2) p {
margin-top: 15px;
}

#contents section.service ul.inbox1 li:nth-child(2):before {
top: -7%;
left: 7%;
font-size: 80px;
}

#contents section.service ul.inbox1 li:nth-child(3):before {
top: -7%;
right: 7%;
left: auto;
font-size: 80px;
}

#contents section.service ul.inbox2 {
display: block; 
}

#contents section.service ul.inbox2 li:nth-child(1) {
border-bottom: solid 1px #0E1E4F;
}

#contents section.service ul.inbox2 li:nth-child(2) {
border-bottom: solid 1px #0E1E4F;
border-left: solid 1px #0E1E4F;
}

#contents section.service ul.inbox2 li:nth-child(3) {
border-right: solid 1px #0E1E4F;
border-left: solid 1px #0E1E4F;
}

/*--------------------　base　--------------------*/

#contents section.base h2 {
font-size: 280%;
margin-bottom: 25px;
}

#contents section.base span {
margin-right: 0;
}

#contents section.base h2 p {
font-size: 30%;
width: 100px;
padding: 7px;
display: block;
vertical-align: initial;
margin-top: 10px;
}

#contents section.base .lead {
font-size: 100%;
}

#contents section.base .inbox {
margin-top: 30px;
padding: 20px;
display: block;
}

#contents section.base .inbox .img {
margin-bottom: 20px;
}

#contents section.base .inbox .right .txt {
display: block;
}

#contents section.base .inbox .right .txt .btn {
margin-right: 0;
}

#contents section.base .inbox .right .txt .btn a {
width: 100%;
/*height: 60px;*/
}

#contents section.base dl {
font-size: 90%;
line-height: 180%;
}

/*--------------------　news　--------------------*/

#contents section.news .inside {
display: block;
}

#contents section.news .title {
margin-right: 0;
}

#contents section.news h2 {
font-size: 300%;
margin-bottom: 30px;
}

#contents section.news h2 p {
margin-top: 10px;
font-size: 25%;
}

#contents section.news dt:first-of-type,
#contents section.news dd:first-of-type {
  border-top: none;
}
#contents section.news dt {
  width: 100%;
  float: none;
}
#contents section.news dd {
  margin-left: 0;
  border-top: none;
  padding: 0 0 15px 0;
}

#contents section.news .btn {
margin-top: 30px;
}

#contents section.news .btn a {
width: 100%;
height: 60px;
}

/*--------------------　roots　--------------------*/

#contents section.roots .inner {
background-size: 100%;

}

#contents section.roots .inside {
position: static;
}

#contents section.roots .title img {
margin-top: 30px;
height: 160px;
object-fit: cover;

}

#contents section.roots h2 {
font-size: 300%;
}

#contents section.roots h2 p {
margin-top: 10px;
font-size: 25%;
}

#contents section.roots h3 {
position: static;
font-size: 90%;
margin-top: 20px;
margin-right: 0;
line-height: 260%;
writing-mode: horizontal-tb;
font-feature-settings: normal;
}

#contents section.roots h3 span {
padding: 6px 10px;
}

#contents section.roots .inbox {
display: block;
}

#contents section.roots .inbox .left {
padding: 30px;
width: 100%;
box-sizing: border-box;
}

#contents section.roots .inbox .left h4 {
margin-bottom: 30px;
font-size: 140%;
}

#contents section.roots .inbox .left p {
font-size: 100%;
}

#contents section.roots .inbox .right {
padding: 30px;
width: 100%;
border-left: none;
box-sizing: border-box;
}

#contents section.roots .inbox .right img {
margin-bottom: 30px;;
}

#contents section.roots .inbox .right .btn a {
width: 100%;
height: 60px;
}

}