/*
Theme Name: APW6000
Author: Teruhisa Osawa
Version: 1.0
*/


*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}img:not([alt]){filter:blur(0)}


*{
box-sizing:border-box;
}
html{
scroll-behavior: smooth;
}
html, body {
height:100%;
font-family: 'Noto Sans JP', sans-serif;
font-feature-settings : "palt";
font-size:17px;
color:#333;
background:#fff;
width: 100%;
height: auto;
position: relative;
-webkit-text-size-adjust: 100%;
overflow-x:hidden;
}
body{
-webkit-transition:1;
-moz-transition:1s;
-o-transition:1s;
transition:1s;
}

a{
text-decoration:none;
opacity:1;
line-height:100%;
color:#666666;
}



a,a:hover {
-webkit-transition:0.7s;
-moz-transition:0.7s;
-o-transition:0.7s;
transition:0.7s;
}
a img:hover {
-moz-opacity:0.5;
opacity:0.5;
}

p,dt,dd,td,th,div{
line-height:2;
}
img{
vertical-align:bottom;
}

a.tel,
a.tel img{
opacity:1;
cursor:default;
}

p{
line-height: 2;
letter-spacing: 0.05em;
font-weight:normal;
}

.en{
font-family: 'Titillium Web', sans-serif;
}
.en2{
font-family: 'Roboto', sans-serif;
}

/* reset */

ul.rst,
.rst ul{
padding:0;
margin:0;
}
ul.rst li,
.rst ul li{
list-style:none;
}


/* flex */
.flex{
display: -webkit-flex;
display: flex;
}
.flex2{
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

/* font */
.fude{
font-family: "kokuryu", sans-serif;
font-weight: 400;
font-style: normal;
}

.fude .big{
font-size:200%
}
/*====================================================
LAYOUT
====================================================*/

.w1180{
width:1180px;
margin:0 auto;
}
.w1100{
width:1100px;
margin:0 auto;
}
.w980{
width:980px;
margin:0 auto;
}
.w800{
width:800px;
margin:0 auto;
}
.w720{
width:720px;
margin:0 auto;
}

.inside{
width: 96%;
max-width: 1180px;
margin: 0 auto;
}
/*====================================================
HEADER
====================================================*/
header{
margin-bottom:3rem;
}


/*====================================================
PAGE
=====================================================*/
#main{
}
.block h2{
font-size:28px;
margin-bottom:3rem;
color:#113479;
padding-bottom:0.3rem;
border-bottom:1px solid #ddd;
}

.pinfo{
margin-bottom:4rem;
}
.pinfo .img{
width:35%;
}
.pinfo .txt{
width:60%;
padding-top:4rem;
}
.pinfo h2{
padding:0.7rem;
background: #182C54;
background: linear-gradient(90deg,rgba(24, 44, 84, 1) 34%, rgba(41, 109, 177, 1) 100%);
font-size:36px;
font-weight:bold;
color:#fff;
line-height:1.6;
margin-bottom:3rem;
text-align:center;
}
.pinfo h3{
font-size:48px;
text-align:center;
font-weight:100;
line-height:1.5;
}
.pinfo h3 .big{
}
.point .point-l,
.point .point-r{
width:45%;
}

.point .item{
padding-left:75px;
margin-bottom:2rem;
}
.point .item h4{
font-size:21px;
}
.point .ico1{
background:url(../img/ico1.png) no-repeat left top;
background-size:60px 60px;
}
.point .ico2{
background:url(../img/ico2.png) no-repeat left top;
background-size:60px 60px;
}
.point .ico3{
background:url(../img/ico3.png) no-repeat left top;
background-size:60px 60px;
}
.point .ico4{
background:url(../img/ico4.png) no-repeat left top;
background-size:60px 60px;
}
.point .ico5{
background:url(../img/ico5.png) no-repeat left top;
background-size:60px 60px;
}
.point .ico6{
background:url(../img/ico6.png) no-repeat left top;
background-size:60px 60px;
}
.point .ico7{
background:url(../img/ico7.png) no-repeat left top;
background-size:60px 60px;
}
.point .ico8{
background:url(../img/ico8.png) no-repeat left top;
background-size:60px 60px;
}
.point .ico9{
background:url(../img/ico9.png) no-repeat left top;
background-size:60px 60px;
}

.tsuyomi{
margin-bottom:3rem;
}
.tsuyomi-l{
width:35%;
}
.tsuyomi-r{
width:60%;
padding:1rem;
}
.tsuyomi h3{
font-size:24px;
color:#3a63a6;
}
.tsuyomi-r li{
font-size:21px;
}

.spec-btn{
border:1px solid #ddd;
padding:0.5rem 1rem;
border-radius:5px;
background:rgba(213,220,238,0.2);
position:relative;
}
.spec-btn h3:after{
position:absolute;
content:"＋";
right:1rem;
top:0.5rem;
}
.spec-btn h3.active:after{
position:absolute;
content:"－";
right:1rem;
top:0.5rem;
}
.spec-btn h3:hover{
cursor:pointer;
}
.spec-in{
display:none;
}
.block{
margin-bottom:7rem;
}

.block2 h2{
font-size:36px;
color:#006332;
margin-bottom:2rem;
}
.block2 h2 .en{
padding-left:1rem;
font-weight:300;
font-size:24px;
}
.matepro{
margin-bottom:3rem;
}
.matepro .img{
width:20%;
}
.matepro .txt{
width:75%;
}
.matepro h3{
color:#096daf;
font-size:24px;
}
.matepro h3 .cate{
background:#096daf;
color:#fff;
display:block;
width:220px;
text-align:center;
font-size:18px;
line-height:1.6;
border-radius:5px;
}
.matepro h3 .weight{
color:#666;
font-size:18px;
}
.customunit p,
.matepro p{
margin-bottom:1rem;
}
.matepro dt{
color:#006332;
font-weight:bold;
}
.customunit .img{
width:45%;
}
.customunit .txt{
width:50%;
}
.customunit h3{
color:#006332;
font-size:32px;
}

.btn{
width:70%;
margin:4rem auto 0 auto;
} 

.btn a{
display:block;
background:#036157;
color:#fff;
border-radius:0.5rem;
padding:1rem;
text-align:center;
font-size:24px;
}
/* =========================
   製品仕様テーブル
========================= */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  line-height: 1.6;
  background: #f5f9fc;
margin:1rem auto;
}

.spec-table th,
.spec-table td {
  padding: 0.2rem 1rem;
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid #cad2d7;
  box-sizing: border-box;
}

/* 項目名 */
.spec-table th {
  width: 28%;
  font-weight: 400;
}

/* 通常行 */
.spec-table tr:nth-child(odd) {
  background-color: #e9eef4;
}

.spec-table tr:nth-child(even) {
  background-color: #fff;
}

/* 配管口径 */
.spec-table .pipe-label {
  width: 28%;
}

.spec-table .pipe-type {
  width: 20%;
}

.spec-table .pipe-size {
  width: 52%;
}

/* 長い文字列の折り返し */
.spec-table td,
.spec-table th {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* 最終行 */
.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: 1px solid #9eafd0;
}



.spec-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.spec-table-02 {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
line-height: 1.5;
margin:1rem auto;
}

/* 列幅 */
.spec-table-02 th:first-child {
  width: 26%;
}

.spec-table-02 th:nth-child(2),
.spec-table-02 th:nth-child(3) {
  width: 37%;
}

/* 共通 */
.spec-table-02 th,
.spec-table-02 td {
  padding: 0.3rem;
  vertical-align: middle;
  box-sizing: border-box;
}

/* ヘッダー */
.spec-table-02 thead th {
  background: #c3cad9;
  font-weight: 700;
  text-align: center;
}

.spec-table-02 thead th:first-child {
  text-align: left;
}

/* 左側項目 */
.spec-table-02 tbody th {
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

/* データ */
.spec-table-02 tbody td {
  text-align: center;
  font-weight: 400;
}

/* 交互背景 */
.spec-table-02 tbody tr:nth-child(even) {
  background: #e9edf4;
}

.spec-table-02 tbody tr:nth-child(odd) {
  background: #fff;
}

/* 縦罫線 */
.spec-table-02 tbody th {
  border-right: 1px solid #c3cad9;
}

.spec-table-02 tbody td + td {
  border-left: 1px solid #c3cad9;
}

/* 最終行 */
.spec-table-02 tbody tr:last-child th,
.spec-table-02 tbody tr:last-child td {
  border-bottom: 1px solid #d7dbe3;
}



/*====================================================
FOOTER
=====================================================*/
#footer{
padding:4rem 0;
}

/*====================================================
ANIMATION
====================================================*/
.ani{
opacity:0;
}
.ani.active {
animation-name: fadein;
animation-duration: 1s;
animation-fill-mode: forwards;
position:relative;
}
@keyframes fadein {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}


@keyframes fadeIn{
to {
opacity:1;
}
}
@keyframes slide_out {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
@keyframes fadeIn2{
to {
opacity:1;
margin-left:0;
}
}
@keyframes slide_in {
0% { transform: translateX(100%); }
100% { transform: translateX(0); }
}
@keyframes slide_in_nav {
0% { right:-240px; }
100% { right:0; }
}
/*====================================================
BASE
====================================================*/
.ctr{text-align:center;}
.tgt{text-align:right;}
.tlt{text-align:left;}
.bold{font-weight:bold;}
.mb02{margin-bottom:0.2rem;}
.mb03{margin-bottom:0.3rem;}
.mb05{margin-bottom:0.5rem;}
.mt05{margin-top:0.5rem;}
.mb1{margin-bottom:1rem;}
.mb15{margin-bottom:1.5rem;}
.mb2{margin-bottom:2rem;}
.mb25{margin-bottom:2.5rem;}
.mb3{margin-bottom:3rem;}
.mb4{margin-bottom:4rem;}
.mb5{margin-bottom:5rem;}
.mb6{margin-bottom:6rem;}
.mb8{margin-bottom:8rem;}
.mb10{margin-bottom:10rem;}
.mb12{margin-bottom:12rem;}
.mt2{margin-top:2rem;}
.pt05{padding-top:0.5rem;}
.pb1{padding-bottom:1rem;}
.pt1{padding-top:1rem;}
.pt2{padding-top:2rem;}
.pt4{padding-top:4rem;}
.pt6{padding-top:6rem;}
.pt8{padding-top:8rem;}
.fff{color:#fff;}
.red{color:#e95464;}
.big{font-size:150%;}
.small{font-size:80%;}
.txtlt{text-align:left;}
.txtgt{text-align:right;}
.txtctr{text-align:center;}
.txt9{font-size:9px;}
.txt10{font-size:10px;}
.txt11{font-size:11px;}
.txt12{font-size:12px;}
.txt13{font-size:13px;}
.txt15{font-size:15px;}
.txt16{font-size:16px;}
.txt18{font-size:18px;}
.txt20{font-size:20px;}
.txt21{font-size:21px;}
.txt24{font-size:24px;}
.txt25{font-size:25px;}
.txt30{font-size:30px;}
.txt32{font-size:32px;}
.lh1{line-height:1;}
.lh13{line-height:1.3;}
.lh15{line-height:1.5;}
.lh18{line-height:1.8;}
.lh20{line-height:2.0;}
.lh24{line-height:2.4;}
.ls01{letter-spacing:-1px;}
.ls02{letter-spacing:-2px;}
.ls03{letter-spacing:-3px;}
.ls04{letter-spacing:-4px;}
.ls05{letter-spacing:-5px;}
.ls06{letter-spacing:-6px;}
.size-full,
.img100 img,
.img100{
width:100%;
height:auto;
}

strike .strike{
color:#231916;
}

.shadow{text-shadow: rgba(0,0,0,0.5) 2px 2px 5px;}

.ffs{ -moz-font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";}

.none,
.sp{display:none;}
.pc{display:block;}


.img100{
width:100%;
height:auto;
}
.serif{
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

.yline{
color:#000;
background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fffb80 0%) repeat scroll 0 0;
}



/*====================================================
MEDIA QUERY
====================================================*/


@media screen and (max-width: 1200px) {
.w1180{
width:100%;
}
}


@media screen and (max-width: 1080px) {
.w980{
width:100%;
}
.product{
width:90%;
margin:0 auto;
}
}

@media screen and (max-width: 780px) {
body{
font-size:21px;
}
.sp{display:block;}
.pc{display:none;}

.spec-table {
font-size: 18px;
}

.spec-table th,
.spec-table td {
}

.spec-table th,
.spec-table .pipe-label {
width: 32%;
}

.spec-table .pipe-type {
width: 25%;
}

.spec-table .pipe-size {
width: 43%;
}
.spec-table-02 tbody th{
white-space:normal;
}
.pinfo .img{
width:70%;
margin:0 auto;
}
.pinfo .txt{
width:100%;
text-align:center;
}
.block h2{
font-size:36px;
}
.customunit .txt,
.customunit .img,
.tsuyomi-l,
.tsuyomi-r,
.point .point-l,
.point .point-r{
width:100%;
}
.tsuyomi-r li,
.tsuyomi h3,
.point .item h4{
font-size:28px;
}
.point .ico1,
.point .ico2,
.point .ico3,
.point .ico4,
.point .ico5,
.point .ico6,
.point .ico7,
.point .ico8,
.point .ico9{
padding-left:100px;
background-size: 80px 80px;
}
.tsuyomi-l img{
width:70%;
margin:0 auto 2rem auto;
}
}


@media screen and (max-width: 480px) {

.spec-table {
font-size: 14px;
line-height: 1.5;
}

.spec-table th,
.spec-table td {
padding: 12px 10px;
}

.spec-table th,
.spec-table .pipe-label {
width: 34%;
}

.spec-table .pipe-type {
width: 30%;
}

.spec-table .pipe-size {
width: 36%;
}
}