/* ========================================================================== Foundation reset/normalize/base... ========================================================================== */
/* Reset ----------------------------------------------------------------- */
/* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 */
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
     margin:0;
     padding:0;
     border:0;
     outline:0;
     font-size:100%;
     /*vertical-align:baseline;*/
     background:transparent;
}
 body {
     line-height:1;
}
 article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {
     display:block;
}
 nav ul {
     list-style:none;
}
 blockquote, q {
     quotes:none;
}
 blockquote:before, blockquote:after, q:before, q:after {
     content:'';
     content:none;
}
 a {
     margin:0;
     padding:0;
     font-size:100%;
     vertical-align:baseline;
     background:transparent;
}
/* change colours to suit your needs */
 ins {
     background-color:#ff9;
     color:#000;
     text-decoration:none;
}
/* change colours to suit your needs */
 mark {
     background-color:#ff9;
     color:#000;
     font-style:italic;
     font-weight:bold;
}
 del {
     text-decoration: line-through;
}
 abbr[title], dfn[title] {
     border-bottom:1px dotted;
     cursor:help;
}
 table {
     border-collapse:collapse;
     border-spacing:0;
     width: 100%;
}
/* change border colour to suit your needs */
 hr {
     display:block;
     height:1px;
     border:0;
     border-top:1px solid #cccccc;
     margin:1em 0;
     padding:0;
}
 input, select {
     vertical-align:middle;
}
/* Base ----------------------------------------------------------------- */
 *, *::before, *::after {
     box-sizing: border-box;
}
 body {
     margin: 0 auto;
     color:#333;
     font-family:'微软雅黑' ;
     font-weight: 500;
     font-size: 16px;
     letter-spacing: 0.05em;
     line-height: 1.5;
}
 header, main, footer {
     margin: 0 auto;
     overflow: hidden;
}
 ol, ul {
     list-style: none;
     padding: 0;
}
 p {
     line-height: 2;
     letter-spacing: 0.05em;
     text-rendering: optimizeSpeed;
}
 dl,dt,dd {
     line-height: 1.5;
     letter-spacing: 0.05em;
     text-rendering: optimizeSpeed;
}
 div {
     /*line-height: 1.5;*/
     letter-spacing: 0.05em;
     text-rendering: optimizeSpeed;
}
 a {  
     text-decoration: none;
     transition: .3s;
     color: #222;
}
 a[href^="tel:"] {
     pointer-events: none;
} 
 :focus {
     outline: none;
}
 img {
     max-width: 100%;
}
 @media screen and (max-width: 768px) {
     a[href^="tel"] {
         pointer-events: auto;
    }
}
/* font ------------------------------------------------------------*/
 @font-face {
     font-family: "ITCAvant";
     src: url("../font/ITCAvantGardeStdBold.woff") format("woff"), url("../font/ITCAvantGardeStdBold.woff") format("woff");
}
 
.u-headding {
    letter-spacing: 0.01em;
    font-weight: bold;
    color: #00479d;
    font-size: 36px;
    margin-bottom: 80px;
}
.u-headding_underBar {
    letter-spacing: 0.01em;
    font-weight: bold;
    color: #00479d;
    position: relative;
}
.u-headding_underBar::after {
    position: absolute;
    bottom: -25px;
    left: 50%;
    content: "";
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    width: 70px;
    height: 5px;
    background-color: #00479d;
}
 
 
 
 
 
/* arrow*/
.icon-arrow-radius {
  position: relative;
}

.icon-arrow-radius::after {
  position:absolute;
  content: "";
  z-index: 2;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 24px;
  height: 24px;
  background: url(https://www.hanshinmetalics.co.jp/assets/image/materials/icon-arrow-radius.png) no-repeat;
}
 
/* ========================================================================== STATIC PAGE --Layout base / main ========================================================================== */
/* BASE ----------------------------------------------------------------- */
/* inner*/
 .container {
     width: 100%;
     max-width: 100%;
     margin: 0 auto;
     overflow: hidden;
}
 .l-inner {
     max-width: 1004px;
     margin: 0 auto;
}
 .l-inner_middle {
     max-width: 1367px;
     margin: 0 auto;
}
 .l-wrapper {
     margin: 10px auto;

     width: 100%;
}
 .l-inner_base {
     max-width: 1000px;
     margin: 0 auto;
}
 .l-inner_base2 {
     max-width: 1100px;
     margin: 0 auto;
}
 
 @media screen and (min-width: 769px) and (max-width: 1024px) {
     .swiper-container .l-inner_base::before {
         content: "";
         width: 100%;
         height: 100%;
         max-width: 1024px;
         pointer-events: none;
         background-size: 100%;
    }
     .slide_title_box {
         width: 100%;
         max-width: 1005px;
         margin: 0 auto;
    }
     .strength_slide_contents {
         width: 100%;
         max-width: 1005px;
         margin: 0 auto;
         padding: 0 10px;
    }
}
 













 .l-material-area {
     position: relative;
     z-index: 10;
     background: linear-gradient(-110deg, #e8eef4 46%, #fff 42%);
     padding: 30px 0 95px;
}
 .l-material-area .l-material-list {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
}
 .l-material-area .l-title-box {
     margin-bottom: 30px;
}
 .l-material-area .l-material_item {
     width: calc( 100 / 3 );
     position: relative;
     z-index: 0;
     overflow: hidden;
     margin-bottom: 30px;
}
 .l-material-area .l-material_item picture {
     width: 100%;
     height: 100%;
     display: block;
     position: relative;
     z-index: 1;
     max-height: 181px;
}
 .l-material-area .l-material_item picture::after {
     content: "";
     display: block;
     position: absolute;
     z-index: 2;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(230, 230, 230, 0.8);
     width: 100%;
     height: 100%;
}





/* MATRIALS
----------------------------------------------------------------- */
.materials-table-area {
	margin-bottom: 90px;
}
.materials-table-dsc-box {
	max-width: 1194px;
	margin: 0 auto;
	padding: 45px 0 300px;
  position: relative;
  background-color: #f7f7f7;
}

.materials-table-dsc-box .u-text {
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
}

.materials-headding {
	margin-bottom: 80px;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}

.materials-introduce-area .l-material-area {
	margin: -280px auto 0;
	padding: 0 70px;
	background: none;
}

.materials-ttl-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	padding: 50px 0;
	margin: 0 auto 50px;
	height: 160px;
} 
.materials-detail-ttl::before {
	position: absolute;
	left: 0;
  font-family: "微软雅黑";
  content: "\f45c";
  font-weight: 900;
}
.l-material-area .l-material_item .material-text {
    width: 100%;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}

.l-material_item {
    width: calc(100% / 4 - 10px);
    border: 3px solid rgb(255, 255, 255);
}
 
.l-material_item .responsiv-image img {
    display: block;
}

.l-material-area .l-material_item picture {
    cursor: pointer;
    transition-duration: .5s;
}
 











 @media screen and (max-width: 768px) {
     .l-material-area {
         margin: 40px 0 0 0;
         padding: 45px 0 55px;
    }
     .l-material-area .l-material_item {
         width: 48%;
         position: relative;
    }
     .l-material-area .l-material_item picture {
         position: relative;
         width: 100%;
         height: 100%;
         min-height: 90px;
    }
     .l-material-area .l-material_item picture::after {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
    }
     .l-material-area .l-material_item .material-text {
         width: 100%;
         position: absolute;
         z-index: 3;
    }
 
     .materials-table-area {
         margin-bottom: 120px;
    }
     .materials-introduce-area .materials-table-dsc-box {
         padding: 45px 0;
    }
     .materials-table-dsc-box {
         padding: 45px 10px;
    }
     .materials-headding {
         margin-bottom: 50px;
    }
     .materials-introduce-area .l-material-area {
         margin: 20px auto 0;
         padding: 0px;
    }
     .materials-introduce-area .l-material_item {
         width: 48%;
    }
     .materials-introduce-area .l-material_item .responsiv-image::after {
         height: 127%;
    }
     .materials-ttl-box {
         width: 100%;
         max-width: 100%;
         padding: 0;
         margin: 0 auto 80px;
         height: 100%;
    }
     .materials-contents-title {
         width: 100%;
         max-width: 100%;
         height: 100%;
         max-height: 100%;
         padding: 0;
         margin: 0 auto;
    }
     .materials-detail-link-list {
         flex-wrap: wrap;
         margin-bottom: 30px;
    }
     .materials-detail-link_item {
         width: calc(100% / 2 - 10px);
         margin-bottom: 10px;
    }
     .materials-detail-link {
         font-size: 15px;
    }
	
	
	.materials-table-area {
		margin-bottom: 120px;
	}

	.materials-table-dsc-box {
		padding: 45px 10px;
  }

  .materials-table-dsc-box .u-text {
    font-size: 15px;
  }

	.materials-headding {
    font-size: 24px;
    font-weight: bold;
		margin-bottom: 50px;
	}

	.materials-introduce-area .l-material-area {
		margin: 20px auto 0;
		padding: 0px;
	}

	.materials-introduce-area .l-material_item {
		width: 48%;
		height: 100%;
		border: 3px solid #fff;
		margin-bottom: 30px;
	}

  .materials-introduce-area .l-material_item .responsiv-image img {
		border: none;
		display: block;
  }

  .materials-introduce-area .l-material_item .responsiv-image::after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
	}

	.l-material-area .l-material_item picture {
  	cursor: pointer;
		transition-duration: 0.5s;
	}

	.l-material-area .l-material_item picture:hover {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
		transition-duration: 0.5s;
	}

	.materials-ttl-box {
		width: 100%;
		max-width: 100%;
		height: 100px;
		padding: 0;
		margin: 0 auto 25px;
	}

	.materials-contents-title {
		top: 20px;
		-webkit-transform: translateY(-50%, -50%);
		transform: translateY(-50%, -50%);
		width: 100%;
		padding: 0;
    margin: 0 auto;
    font-size: 18px;
	}

	.materials-ttl-image img {
		width: 100%;
		height: 100px;
	}

	.materials-detail-link-list {
		flex-wrap: wrap;
		margin-bottom: 30px;
	}

	.materials-detail-link_item {
		width: calc(100% / 2 - 10px);
		margin-bottom: 10px;
	}

	.materials-detail-link {
		font-size: 15px;
	}
	.materials-table-area .tabele-ttl {
		font-size: 18px;
	}    .l-material-area .l-material_item .material-text {
        font-size: 11px;
    }

    .icon-arrow-radius::after {
        bottom: -16px;
        background-size: 60%;
    }    .l-material-area .l-material_item picture::after {
        background-color: rgba(230, 230, 230, 0.8);
    }

    .l-material-area .l-material_item .material-text {
        font-size: 13px;
    }

    .l-material_item {
        border: 3px solid #6683b8;
    }
}