@charset "UTF-8"; /* CSS Document */ @media (min-width:1051px) { /*共通*/ main #title_common{width: 100%;margin: 0 auto;padding: 0 0 0px 0;} main #title_common .inner{position:relative;width: 100%; aspect-ratio: 3 / 1.0;min-height: 500px;margin: 0 auto;padding: 0} main #title_common .inner .photo{position: absolute; top: 0;left: 0%; width:100%; height: 100%;overflow: hidden;} main #title_common .inner .photo img{ width:100%; height: 100%;object-fit: cover;} main #title_common .inner .shape{position: absolute; top: 0;left: 0%; width:100%; height: 100%;overflow: hidden;} main #title_common .inner .shape img{ width:100%; height: 100%;object-fit: cover;} main #title_common .inner .text{position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:80%;;min-width: 1000px;padding-top: 80px } main #title_common .inner .text h2{margin:0;padding: 0;font-size: clamp(30px, 2.8vw, 50px);letter-spacing:4px;color: white;font-weight: 600} main #title_common .inner .text .eng{margin:0;padding: 0;font-size: clamp(20px, 0.2vw, 24px);letter-spacing:2px;color: white;} main #breadcrumbs{border-bottom:1px solid #e6e6e5;padding: 18px 0} main #breadcrumbs .inner{ width:80%;;min-width: 1000px;margin:0 auto;font-size: 13px;letter-spacing:1px} main #breadcrumbs .inner a{position:relative;display: inline-block;color:#11a196;padding-right:10px;margin-right: 15px} main #breadcrumbs .inner a::before{content:"\f105";position: absolute;top: 50%;transform: translateY(-50%);left:100%;font-family: 'Font Awesome 5 Free';font-weight: 900;} main #breadcrumbs .inner a:hover{color:#323333;} /*main #breadcrumbs .inner span{color:#323333;}*/ /*水晶発振器*/ #crystal_o #lead_area{position:relative;} #crystal_o #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position: 20% 50%;background-size:auto 100%;z-index: -1} #crystal_o #lead_area .inner{ margin:0 auto;padding: 100px 0} #crystal_o #lead_area .inner h3{margin:0 0 50px 0;padding: 0;font-size: clamp(34px, 1.8vw, 50px);letter-spacing:4px;text-align: center;color: #323333;font-weight: 600} #crystal_o #lead_area .inner p{width:38%;min-width:700px;margin:0 auto 80px auto;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;line-height: 2.0} #crystal_o #lead_area .inner p span{color: #11a196} #crystal_o #lead_area .inner .photo{width:50%;max-width: 1500px;min-width: 900px;aspect-ratio:2.6/1; margin:0 auto;text-align: center;overflow:hidden;} #crystal_o #lead_area .inner .photo img{width: 100%;} #crystal_o #products_list{position:relative;padding: 70px 0} #crystal_o #products_list::before{content: '';position: absolute; top: 0;right:0%; width:100%; height: 100%;background:#e9f3f4;z-index: -2} #crystal_o #products_list::after{content: '';position: absolute; top: 0;right:0%; width:50%; height: 100%;background:url("../img/2nd/parallelogram02.png") no-repeat;background-position: 0% 50%;background-size: auto 100%;z-index:-1} #crystal_o #products_list .title{position:relative;} #crystal_o #products_list .title::before{content: '';position: absolute; bottom: 150%;left:50%;transform: translateX(-50%); width:1px; height: 78px;background:#6cbabc;} #crystal_o #products_list .title .eng{margin:0;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;color: #6cbabc;text-align: center;} #crystal_o #products_list .title h4{margin:0 0 50px 0;padding: 0;font-size: clamp(28px, 1.5vw, 40px);letter-spacing:4px;text-align: center;color: #323333;font-weight: 600} #crystal_o #products_list .inner{width:60%;max-width: 1200px;min-width: 1000px;margin:0 auto;padding: 0px 0;display: flex;flex-wrap: wrap;justify-content: space-between} #crystal_o #products_list .inner .unit{width:49%;margin-bottom:20px} #crystal_o #products_list .inner .unit a{position:relative;display:block;width: 100%;aspect-ratio:2.4/1; background:white;padding: 0px 0px;color:#323333;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #crystal_o #products_list .inner .unit a::before { content: ""; position: absolute; top: 0;left: 80%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b3ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #crystal_o #products_list .inner .unit a:hover::before { width: 105%; left: 0;} #crystal_o #products_list .inner .unit a:hover::after{left: 92%;transition: left 0.2s ease-out;} #crystal_o #products_list .inner .unit a .text_area{ position: absolute; top: 15%;/*transform: translateY(-50%);*/left:10%; z-index: 1; transition: color 0.3s ease;} #crystal_o #products_list .inner .unit a .text_area .name01{display:block;font-size: 22px;letter-spacing: 1px;} #crystal_o #products_list .inner .unit a .text_area .name02{display:block;font-size: 37px;letter-spacing: 1px;margin-bottom: 10px} #crystal_o #products_list .inner .unit a .text_area .fs{font-size: clamp(22px, 2.3vw, 27px);letter-spacing: 0px;} #crystal_o #products_list .inner .unit a .text_area .more{position:relative;font-size: 15px;letter-spacing:0;color: #1fa3ad} #crystal_o #products_list .inner .unit a .text_area .more::after{content:"\f105";position: absolute;top: 50%;transform: translateY(-50%);left: 110%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;transition: left 0.2s ease-out, color 0.3s ease;} #crystal_o #products_list .inner .unit a .text_area .photo_sub{ position: absolute; top: 38%;left:57%; width:44%;min-width: 110px;z-index: 1} #crystal_o #products_list .inner .unit a .text_area .photo_sub img{width: 100%;} #crystal_o #products_list .inner .unit a .photo{ position: absolute; top: 50%;transform: translateY(-50%);right:10%; width:30%; z-index: 1} #crystal_o #products_list .inner .unit a .photo img{width: 100%;transition:0.8s all;} #crystal_o #products_list .inner .unit a:hover .text_area{color: white} #crystal_o #products_list .inner .unit a:hover .more{color: white} #crystal_o #products_list .inner .unit a:hover .photo img{transform:scale(1.2,1.2); transition:0.5s all;} /*水晶発振器　各製品*/ #co_common #lead_area{position:relative;padding: 80px 0;} #co_common #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position: 40% 50%;background-size:auto 100% ;z-index: -1} #co_common #lead_area .inner{ margin:0 auto 0px auto;} #co_common #lead_area .inner p{width:50%;min-width:700px;margin:0 auto 0px auto;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;line-height: 2.0} #co_common #lead_area .inner p span{color: #11a196} #co_common #lead_area .inner_fs{background: white;width:80%;min-width:1000px;max-width: 1500px; margin:0 auto 0px auto;padding: 80px 0px;} #co_common #lead_area .inner_fs .intro{position: relative;width:90%;max-width: 1000px;margin:0 auto;padding: 0 0 20px 0; margin:0 auto 40px auto;} #co_common #lead_area .inner_fs .intro::before{content: '';position: absolute; bottom: 0%;left:0%; width:100%; height:3px;background:#e6e6e5} #co_common #lead_area .inner_fs .intro::after{content: '';position: absolute; bottom:0%;left:0%; width:10%; height:3px;background:linear-gradient(45deg, #00779c, #31b3ba)} #co_common #lead_area .inner_fs .intro p{position: relative;margin:0 auto 0px auto;padding: 0 0 0 40px;font-size: clamp(20px, 1.1vw, 26px);letter-spacing:1px;color: #323333;font-weight: 600;line-height: 1.5} #co_common #lead_area .inner_fs .intro p::before{content: '';position: absolute; top: 10%;left:0%; width:20px; height:20px;background:linear-gradient(45deg, #00779c, #31b3ba)} #co_common #lead_area .inner_fs .detail_area{width:90%;max-width: 1000px;margin:0 auto} #co_common #lead_area .inner_fs .detail_area .unit{margin:0 auto 30px auto;} #co_common #lead_area .inner_fs .detail_area .unit h3{position: relative;margin:0 auto 10px auto;padding: 0 0 0 30px;font-size: clamp(16px, 1.0vw, 22px);letter-spacing:1px;color: #1fa3ad;font-weight: 600;line-height: 1.5} #co_common #lead_area .inner_fs .detail_area .unit h3::before{content: '';position: absolute; top: 50%;transform: translateY(-50%);left:0%; width:14px; height:14px;background:linear-gradient(45deg, #00779c, #31b3ba);border-radius: 50%} #co_common #lead_area .inner_fs .detail_area .unit p{margin:0 auto 0px auto;padding: 0 0 0 0px;font-size:16px;letter-spacing:1px;font-weight: 400;line-height: 1.5} main.ocxo #lead_area{position:relative;padding: 100px 0 !important;} main.ocxo #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position: 0% 50%;background-size:50% auto !important;z-index: -1} main.ocxo #lead_area .inner{ margin:0 auto 0px auto !important;} #co_common #example_group{background: white;width:80%;min-width:1000px;max-width: 1200px;margin:0 auto 0px auto;padding:80px 0px;} #co_common #example_group .title_area{position: relative;display: flex;justify-content: flex-start;align-items:center;margin:0 auto 20px auto;padding: 0 0 16px 0 } #co_common #example_group .title_area .mark{margin-right:20px;background:linear-gradient(90deg, #00779c, #31b3ba);text-align: center;border-radius: 50px;font-size:0.8vw;letter-spacing:1px;color: white;font-weight: 500;padding: 5px 30px} #co_common #example_group .title_area h3{margin:0 0 0px 0;padding: 0;font-size: clamp(20px, 1.5vw, 26px);letter-spacing:1px;color: #323333;font-weight: 500} #co_common #example_group .title_area::before{content: '';position: absolute; bottom: 0;left:0%; width:100%; height: 3px;background:#e6e6e5} #co_common #example_group .title_area::after{content: '';position: absolute; bottom: 0;left:0%; width:10%; height: 3px;background:linear-gradient(90deg, #00779c, #31b3ba)} #co_common #example_group .detail_area{display: flex;justify-content: space-between;align-items:center;} #co_common #example_group .detail_area .photo{width: 36%;} #co_common #example_group .detail_area .photo img{width:100%;} #co_common #example_group .detail_area dl{width:60%;display: flex;flex-wrap: wrap;font-size: 16px;line-height: 1;letter-spacing: 1px;border-top: 1px solid #b6cdce} #co_common #example_group .detail_area dl dt{width:40%;background: #f7fcfc;margin: 0;padding: 12px 0 12px 3%;box-sizing: border-box;border-bottom: 1px solid #b6cdce;color: #000;font-weight: 500} #co_common #example_group .detail_area dl dd{width:60%;margin: 0;padding: 12px 0 12px 5%;box-sizing: border-box;border-bottom: 1px solid #b6cdce} #co_common #fs_image_group .inner{width:80%;min-width:1000px;max-width: 1200px;margin:0 auto 0px auto;padding:80px 0;display: flex;} #co_common #fs_image_group .inner figure{width: 50%; margin:0;padding: 0;} #co_common #fs_image_group .inner figure img{width: 100%;height: 100%;object-fit: cover} #co_common #list_group{padding:80px 0 10px 0;background: #f7fcfc} #co_common #list_group .title{margin: 0px auto 30px auto} #co_common #list_group .title .eng{margin:0;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;color: #6cbabc;text-align: center;} #co_common #list_group .title h4{margin:0 0 0px 0;padding: 0;font-size: clamp(28px, 1.5vw, 40px);letter-spacing:4px;text-align: center;color: #323333;font-weight: 600} #co_common #list_group .unit_table {margin:0 auto 50px auto;} #co_common #list_group .unit_table h5{width:80%;min-width:1100px;background:linear-gradient(90deg, #00779c, #31b3ba);margin:0 auto 2px auto;padding:3px 0;font-size:clamp(16px, 0.9vw, 24px);letter-spacing:1px;text-align: center;color: white;font-weight: 500} #co_common #list_group .unit_table .inner{} #co_common #list_group .unit_table .inner table{border-collapse: collapse;width: 80%;min-width: 1100px;margin: 0 auto;background: white} #co_common #list_group .unit_table .inner table thead{width: 100%;border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;} #co_common #list_group .unit_table .inner table thead th{padding:10px 0;color: #000;font-size: 14px;letter-spacing:1px;font-weight: 500;background:#f2f2f2 !important;text-align: center} #co_common #list_group .unit_table .inner table tbody tr{border-bottom:1px solid #cccccc;} #co_common #list_group .unit_table .inner table tbody td{padding:8px 0;font-size: 14px;letter-spacing:1px;text-align: center;vertical-align: middle} #co_common #list_group .unit_table .inner table tbody td.mark{font-size: 30px;color:#00779c} #co_common #list_group .unit_table .inner table tbody td .mark{font-size: 30px;color:#00779c;line-height: 1} #co_common #list_group .unit_table .inner table tbody td a{position: relative;display:block;background:#00779c;max-width:80px;margin:0 auto;padding: 5px 0px;text-align: center;color: white;text-decoration: none;border-radius: 5px;font-size: 12px;letter-spacing: 0} #co_common #list_group .unit_table .inner table tbody td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size:9px;} #co_common #list_group .unit_table .inner table tbody td a:hover{background: #00c1c6} #co_common #list_group .unit_table .note{width:80%;min-width:1100px;margin:20px auto 0 auto;padding: 0;font-size: 14px;letter-spacing:1px;text-align: center;} /*水晶振動子*/ #crystal_r #lead_area{position:relative;} #crystal_r #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position: 20% 50%;background-size:auto 100%;z-index: -1} #crystal_r #lead_area .inner{ margin:0 auto;padding: 100px 0} #crystal_r #lead_area .inner h3{margin:0 auto 80px auto;padding: 0;font-size: clamp(34px, 1.8vw, 50px);letter-spacing:4px;text-align: center;color: #323333;font-weight: 600} #crystal_r #lead_area .inner p{width:38%;min-width:700px;margin:0 auto 80px auto;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;line-height: 2.0} #crystal_r #lead_area .inner p span{color: #11a196} #crystal_r #lead_area .inner .photo{width:50%;max-width: 1200px;min-width: 800px;aspect-ratio:2.6/1; margin:0 auto;text-align: center;overflow:hidden;} #crystal_r #lead_area .inner .photo img{width: 100%;} #crystal_r #products_list{position:relative;padding: 70px 0} #crystal_r #products_list::before{content: '';position: absolute; top: 0;right:0%; width:100%; height: 100%;background:#e9f3f4;z-index: -2} #crystal_r #products_list::after{content: '';position: absolute; top: 0;right:0%; width:40%; height: 100%;background:url("../img/2nd/parallelogram02.png") no-repeat;background-position: 0% 50%;background-size: auto 100%;z-index:-1} #crystal_r #products_list .title{position:relative;} #crystal_r #products_list .title::before{content: '';position: absolute; bottom: 150%;left:50%;transform: translateX(-50%); width:1px; height: 78px;background:#6cbabc;} #crystal_r #products_list .title .eng{margin:0;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;color: #6cbabc;text-align: center;} #crystal_r #products_list .title h4{margin:0 0 50px 0;padding: 0;font-size: clamp(28px, 1.5vw, 40px);letter-spacing:4px;text-align: center;color: #323333;font-weight: 600} #crystal_r #products_list .inner{width:70%;;min-width: 1000px;margin:0 auto;padding: 0px 0;display: flex;flex-wrap: wrap;justify-content: space-between} #crystal_r #products_list .inner .unit{width:49%;margin-bottom:20px} #crystal_r #products_list .inner .unit a{position:relative;display:block;width: 100%;aspect-ratio:2.9/1; background:white;padding: 0px 0px;color:#323333;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #crystal_r #products_list .inner .unit a::before { content: ""; position: absolute; top: 0;left: 80%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b3ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #crystal_r #products_list .inner .unit a:hover::before { width: 105%; left: 0;} #crystal_r #products_list .inner .unit a:hover::after{left: 92%;transition: left 0.2s ease-out;} #crystal_r #products_list .inner .unit a .text_area{ position: absolute; top: 50%;transform: translateY(-50%);left:10%; z-index: 1; transition: color 0.3s ease;} #crystal_r #products_list .inner .unit a .text_area .name01{display:block;font-size: 32px;letter-spacing: 2px;margin-bottom: 10px} #crystal_r #products_list .inner .unit a .text_area .more{position:relative;font-size: 15px;letter-spacing:0;color: #1fa3ad} #crystal_r #products_list .inner .unit a .text_area .more::after{content:"\f105";position: absolute;top: 50%;transform: translateY(-50%);left: 110%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;transition: left 0.2s ease-out, color 0.3s ease;} #crystal_r #products_list .inner .unit a:hover .text_area{color: white} #crystal_r #products_list .inner .unit a:hover .more{color: white} #crystal_r #products_list .inner .unit a .photo{ position: absolute; top: 50%;transform: translateY(-50%);right:5%; width:34%; z-index: 1} #crystal_r #products_list .inner .unit a .photo img{width: 100%;height: 100%;object-fit: cover;object-position: 50% 0} /*水晶振動子　各製品*/ #cr_common #lead_area{position:relative;padding: 80px 0;} #cr_common #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position: 0% 50%;background-size:50% auto;z-index: -1} #cr_common #lead_area .inner{ margin:0 auto 0px auto;} #cr_common #lead_area .inner p{width:38%;min-width:700px;margin:0 auto 0px auto;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;line-height: 2.0} #cr_common #lead_area .inner p span{color: #11a196} #cr_common #list_group{padding:80px 0 10px 0;background: #f7fcfc} #cr_common #list_group .title{margin: 0px auto 30px auto} #cr_common #list_group .title .eng{margin:0;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;color: #6cbabc;text-align: center;} #cr_common #list_group .title h4{margin:0 0 0px 0;padding: 0;font-size: clamp(28px, 1.5vw, 40px);letter-spacing:4px;text-align: center;color: #323333;font-weight: 600} #cr_common #list_group .unit_table {margin:0 auto 50px auto;} #cr_common #list_group .unit_table h5{width:90%;min-width:1100px;background:linear-gradient(90deg, #00779c, #31b3ba);margin:0 auto 2px auto;padding:3px 0;font-size:clamp(16px, 0.9vw, 24px);letter-spacing:1px;text-align: center;color: white;font-weight: 500} #cr_common #list_group .unit_table .inner{} #cr_common #list_group .unit_table .inner table{border-collapse: collapse;width: 90%;min-width: 1100px;margin: 0 auto;background: white} #cr_common #list_group .unit_table .inner table thead{background:#f2f2f2;width: 100%;border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;} #cr_common #list_group .unit_table .inner table thead th{padding:10px 0;color: #000;font-size: 14px;letter-spacing:1px;font-weight: 500;background:#f2f2f2 !important;text-align: center} #cr_common #list_group .unit_table .inner table tbody tr{border-bottom:1px solid #cccccc;} #cr_common #list_group .unit_table .inner table tbody td{padding:8px 0;font-size: 14px;letter-spacing:1px;text-align: center;vertical-align: middle} #cr_common #list_group .unit_table .inner table tbody td a{position: relative;display:block;background:#00779c;max-width:80px;margin:0 auto;padding: 5px 0px;text-align: center;color: white;text-decoration: none;border-radius: 5px;font-size: 12px;letter-spacing: 0} #cr_common #list_group .unit_table .inner table tbody td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size:9px;} #cr_common #list_group .unit_table .inner table tbody td a:hover{background: #00c1c6} /*弊社の特徴*/ #features #lead_area{position:relative;} #features #lead_area::before{content: '';position: absolute; top: 0;left:10%; width:50%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position: 50% 50%;background-size: cover;z-index: -1} #features #lead_area .inner{ width:40%;;min-width: 700px;margin:0 auto;padding: 100px 0} #features #lead_area .inner p{margin:0;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;line-height: 2.0} #features #lead_area .inner p span{color: #11a196} #features #list_group{position:relative;padding: 70px 0 30px 0} #features #list_group::before{content: '';position: absolute; top: 0;right:0%; width:100%; height: 100%;background:#e9f3f4;z-index: -2} #features #list_group::after{content: '';position: absolute; top: 0;right:0%; width:50%; height: 100%;background:url("../img/2nd/parallelogram02.png") no-repeat;background-position: 0% 50%;z-index:-1} #features #list_group .title{position:relative;} #features #list_group .title::before{content: '';position: absolute; bottom: 150%;left:50%;transform: translateX(-50%); width:1px; height: 78px;background:#6cbabc;} #features #list_group .title .sub{margin:0;padding: 0;font-size: clamp(28px, 1.6vw, 36px);letter-spacing:1px;color: #323333;text-align: center;font-weight: 600} #features #list_group .title h3{margin:0 0 30px 0;padding: 0;font-size: clamp(40px, 3.2vw, 50px);letter-spacing:2px;text-align: center;color: #00889e;font-weight: 600;line-height: 1.2} #features #list_group .title h3 span{display:block;font-size: clamp(24px, 0.8vw, 36px);} #features #list_group .inner{width:50%;;min-width: 1000px;margin:0 auto;padding: 0px 0;display: flex;flex-wrap: wrap;justify-content: space-between} #features #list_group .inner .unit{width:49%;margin-bottom:10px} #features #list_group .inner .unit a{position:relative;display:block;background:#1fa3ad;padding: 38px 0px 28px 00px;color: white;font-size: 20px;letter-spacing: 1px;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #features #list_group .inner .unit a::before { content: ""; position: absolute; top: 0;left: 86%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b3ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #features #list_group .inner .unit a:hover::before { width: 105%; left: 0;} #features #list_group .inner .unit a::after{content:"\f107";position: absolute;top:50%;transform:translateY(-50%);left: 92%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 16px; transition: left 0.2s ease-out, color 0.3s ease;} #features #list_group .inner .unit a:hover::after{left: 92%;transition: left 0.2s ease-out;} #features #list_group .inner .unit a span{ position: absolute; top: 50%;transform: translateY(-50%);left: 40px; z-index: 1; transition: color 0.3s ease;} #features #case_group{padding: 80px 0 80px 0;background: #f5fcfb} #features #case_group .case{width:60%;min-width: 1000px;margin:0 auto 50px auto;padding: 50px 80px;background: white;box-sizing: border-box} #features #case_group .case .title{position: relative;display: flex;justify-content: flex-start;align-items:center;margin:0 auto 30px auto;padding: 0 0 16px 10px } #features #case_group .case .title::before{content: '';position: absolute; bottom: 0;left:0%; width:100%; height: 3px;background:#e6e6e5} #features #case_group .case .title::after{content: '';position: absolute; bottom: 0;left:0%; width:10%; height: 3px;background:linear-gradient(90deg, #00779c, #31b3ba)} #features #case_group .case .title .mark{position: relative;margin-right:30px;width:90px;/*background:linear-gradient(90deg, #00779c, #31b3ba);text-align: center;border-radius: 50px;*/padding: 20px 20px;} #features #case_group .case .title .mark::before { content: ""; position: absolute; top: 0;left:0%; width:100%; height: 100%;background:linear-gradient(90deg, #00779c, #31b3ba);transform: skewX(-25deg);z-index: 0} #features #case_group .case .title .mark span{ position: absolute; top: 50%;transform: translate(-50%,-50%);left:50%; font-size:18px;letter-spacing:2px;color: white;font-weight: 500;z-index: 1;} #features #case_group .case .title h4{margin:0 0 0px 0;padding: 0;font-size: clamp(24px, 1.8vw, 30px);letter-spacing:1px;color: #323333;font-weight: 500} /* #features #case_group .case .title{margin:0 auto 30px auto;padding: 20px 0px 10px 40px;background:linear-gradient(90deg, #1294a5, #2bbcbc);} #features #case_group .case .title .eng{margin:0 auto 0px auto;padding: 0;font-size: clamp(14px, 1.0vw, 18px);letter-spacing:1px;color:white;font-weight: 500;} #features #case_group .case .title h4{margin:0 auto 0px auto;padding: 0;font-size: clamp(20px, 1.2vw, 30px);letter-spacing:2px;color:white;font-weight: 600;} */ #features #case_group .case p{width:100%;margin:0 auto 0px auto;padding: 0;font-size: clamp(16px, 0.9vw, 18px);letter-spacing:1px;line-height: 1.75;} #features #case_group .case .spec{width:70%;min-width:500px;max-width:700px;margin:40px auto 40px 2.5%;} #features #case_group .case .spec dl{width:100%;display: flex;flex-wrap: wrap;font-size: 14px;letter-spacing: 1px;} #features #case_group .case .spec dl dt{width:30%;margin: 0;padding:3px 0;} #features #case_group .case .spec dl dt span{ background: linear-gradient(to right, #23b2d2, #168df2); display: block;padding: 3px 30px;border-radius: 50px;color: white;text-align: center;font-weight:500;} #features #case_group .case .spec dl dd{width: 70%;margin: 0;padding:3px 0 3px 3%;box-sizing: border-box;} #features #case_group .case .banner{width:70%;min-width: 350px;margin:30px auto 0 auto;} #features #case_group .case .banner a{display: block;;position: relative; background:#004c60; padding:38px 0px 26px 00px;color: white;font-size:18px;letter-spacing: 2px;font-weight: 500;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #features #case_group .case .banner a::before { content: ""; position: absolute; top: 0;left: 86%; width:30%; height: 100%;background:linear-gradient(90deg, #00313a, #1e6cb2);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #features #case_group .case .banner a:hover::before { width: 105%; left: 0;} #features #case_group .case .banner a::after{content:"\f105";position: absolute;top:50%;transform:translateY(-50%);left: 92%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 12px; transition: left 0.2s ease-out, color 0.3s ease;} #features #case_group .case .banner a:hover::after{left: 92%;transition: left 0.2s ease-out;} #features #case_group .case .banner a span{ position: absolute; top: 50%;transform: translateY(-50%);left: 40px; z-index: 1; transition: color 0.3s ease;} /*弊社の特徴01（カスタムスペックの対応）*/ #features01 #lead_area{position:relative;} #features01 #lead_area::before{content: '';position: absolute; top: 0;left:10%; width:50%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position: 50% 50%;background-size: cover;z-index: -1} #features01 #lead_area .inner{ margin:0 auto;padding: 100px 0} #features01 #lead_area .inner p{width:38%;min-width:700px;margin:0 auto 0px auto;padding: 0;font-size: clamp(16px, 1.1vw, 20px);letter-spacing:2px;line-height: 2.0;color: #1fa3ad;font-weight: 600} #features01 #case_wrapper{background:#e9f3f4;padding: 80px 0 30px 0} #features01 #case_wrapper .case{width:80%;min-width:1000px;margin:0 auto 50px auto;padding:50px 60px 30px 60px;box-sizing: border-box;background: white;} #features01 #case_wrapper .case .title{position: relative;margin:0 auto 30px auto;padding: 0 0 10px 0} #features01 #case_wrapper .case .title::before{content: '';position: absolute; bottom: 0;left:0%; width:100%; height: 3px;background:#e6e6e5} #features01 #case_wrapper .case .title::after{content: '';position: absolute; bottom: 0;left:0%; width:10%; height: 3px;background:linear-gradient(90deg, #00779c, #31b3ba)} #features01 #case_wrapper .case .title .mark{width:100px;margin:0 auto 0px 0;padding:6px 0;background: #1fa3ad;border-radius: 20px;text-align: center;color: white;font-size: clamp(14px, 1.0vw,18px);letter-spacing:1px;line-height: 1} #features01 #case_wrapper .case .title h3{margin:0 auto 0px auto;padding: 0;font-size: clamp(18px, 1.5vw, 24px);letter-spacing:2px;line-height: 2.0;color: #4d4d4d;font-weight: 500} #features01 #case_wrapper .case .inner{display: flex;justify-content: space-between;width: 100%;} #features01 #case_wrapper .case .inner .photo{width: 30%;margin: 0;padding: 0;} #features01 #case_wrapper .case .inner .photo img{width:100%;aspect-ratio:1.5/1;object-fit: cover} #features01 #case_wrapper .case .inner .detail_group{width: 66%;} #features01 #case_wrapper .case .inner .detail_group .unit{margin:0 auto 30px auto;} #features01 #case_wrapper .case .inner .detail_group .unit h4{position: relative;margin:0 auto 10px auto;padding:0 0 0 30px;font-size: clamp(16px, 1.0vw, 20px);letter-spacing:1px;line-height: 1.75;color: #1fa3ad;font-weight: 500} #features01 #case_wrapper .case .inner .detail_group .unit h4::before{content:'◼︎';position: absolute; top: 0;left: 0%;} #features01 #case_wrapper .case .inner .detail_group .unit p{margin:0 auto 0px auto;padding: 0;font-size: clamp(13px, 1.0vw, 16px);letter-spacing:1px;line-height: 1.75;} #features01 #case_wrapper .case .inner .detail_group .unit p span{color: #1fa3ad;} #features01 #case_wrapper .case .inner .detail_group .unit .note{background: #f5fcfb;margin:50px auto 10px auto;padding:40px 0 30px 0;} #features01 #case_wrapper .case .inner .detail_group .unit .note > div{display: flex;justify-content: space-between;width:70%;min-width: 500px;margin: 0 auto;text-align: center} #features01 #case_wrapper .case .inner .detail_group .unit .note div .common .name{padding: 15px 0;font-size: 15px;letter-spacing:1px;line-height: 1.5;color:white;} #features01 #case_wrapper .case .inner .detail_group .unit .note div .common .value{background: white;padding: 12px 0;font-size: 18px;letter-spacing:1px;line-height: 1.5;} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special{position: relative;width: 50%;border: 2px solid #1fa3ad;box-sizing: border-box} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special::before{content:'消費電流87%カット!';position: absolute; top: -60px;left: 50%;transform: translateX(-50%);width: 100%;padding: 12px 0;background:#f7ea00;border-radius: 8px;font-weight: 600;letter-spacing: 1px;color: #4d4d4d} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special::after{content:'';position: absolute; top: -15px;left: 50%;transform: translateX(-50%);background:#f7ea00;width:30px; aspect-ratio:1.2/1; clip-path: polygon(0 0, 100% 0%, 50% 100%);} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special .name{background: #1fa3ad;font-weight: 600} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special .value{font-weight: 600;color: #1fa3ad} #features01 #case_wrapper .case .inner .detail_group .unit .note div .general{width: 48%;border-bottom: 1px solid #b3b3b3;box-sizing: border-box} #features01 #case_wrapper .case .inner .detail_group .unit .note div .general .name{background: #b3b3b3;font-weight: 400} #features01 #case_wrapper .case .inner .detail_group .unit .note div .general .value{color: #666666} #features01 #case_wrapper .case .inner .detail_group .unit dl{width:100%;display: flex;flex-wrap: wrap;font-size: 14px;letter-spacing: 1px;border-top: 1px solid #c3e0df} #features01 #case_wrapper .case .inner .detail_group .unit dl dt{width:30%;margin: 0;padding:10px 0 10px 3%;background: #f2fcfa;box-sizing: border-box;border-bottom: 1px solid #c3e0df} #features01 #case_wrapper .case .inner .detail_group .unit dl dd{width: 70%;margin: 0;padding:10px 0 10px 3%;box-sizing: border-box;border-bottom: 1px solid #c3e0df} #features01 #case_wrapper .case .inner .detail_group .unit .note h5{margin:0 auto 10px auto;padding:0 0 0 30px;font-size: clamp(16px, 1.0vw, 20px);letter-spacing:1px;line-height: 1.75;color: #1fa3ad;font-weight: 600;text-align: center} #features01 #case_wrapper .case .inner .detail_group .unit .note .case02_graph{width: 80%;margin: 0 auto;background: white;padding: 20px;box-sizing: border-box} #features01 #case_wrapper .case .inner .detail_group .unit .note .case02_graph img{width: 100%;} /*弊社の特徴02（長期生産サポート）*/ #features02 #lead_area{position:relative;} #features02 #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position: 20% 50%;background-size:auto 100%;z-index: -1} #features02 #lead_area .inner{ margin:0 auto;padding: 100px 0;} #features02 #lead_area .inner p{width:50%;min-width:600px;margin:0 auto 30px auto;padding: 0;font-size: clamp(16px, 1.1vw, 20px);letter-spacing:2px;line-height: 2.0;} #features02 #lead_area .inner p span{color: #1fa3ad;} #features02 #lead_area .inner .feature_list{width:80%;min-width:1000px;max-width: 1500px;margin:0 auto 0px auto;padding:30px 0 20px 0;background: white} #features02 #lead_area .inner .feature_list h3{width: 20%;min-width:200px; margin:0 auto 20px auto;padding:6px 0px;box-sizing: border-box;font-size: clamp(16px,0.6vw, 18px);letter-spacing:1px;color:white;font-weight: 500;background:linear-gradient(90deg, #4facb4, #067995);text-align: center;border-radius:30px;} #features02 #lead_area .inner .feature_list ul{width: 80%;margin: 0 auto;padding:0px 0px;list-style: none} #features02 #lead_area .inner .feature_list ul li{position: relative;margin: 0 auto 10px auto;padding: 0 0 0 30px;font-size: clamp(18px,0.8vw, 22px);letter-spacing:1px;} #features02 #lead_area .inner .feature_list ul li::before{content:'';position: absolute; top: 5px;left:0%; width:10px; height: 10px;background:linear-gradient(90deg, #4facb4, #067995);} #features02 #list_group{/*background:#f5fcfb;*/padding: 80px 0 30px 0} #features02 #list_group .unit_table{width: 80%;min-width: 1000px;margin:0 auto 50px auto} #features02 #list_group .unit_table h4{margin:0 auto 2px auto;padding:6px 0px;font-size: clamp(18px,1.9vw, 22px);letter-spacing:1px;color:white;font-weight: 500;background:linear-gradient(90deg, #00779c, #31b3ba);text-align: center} #features02 #list_group .unit_table .inner table{border-collapse: collapse;width: 100%;background: white} #features02 #list_group .unit_table .inner table tr{border-bottom: 1px solid #c2d0d3;} #features02 #list_group .unit_table .inner table th{font-weight:600;padding:6px 0%;font-size: 15px;letter-spacing: 1px;background:#f2f2f2;border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;} #features02 #list_group .unit_table .inner table th:first-of-type{width: 15%} #features02 #list_group .unit_table .inner table th:nth-of-type(2){width: 30%} #features02 #list_group .unit_table .inner table th:nth-of-type(3){width: 40%} #features02 #list_group .unit_table .inner table th:last-of-type{width: 15%} #features02 #list_group .unit_table .inner table td{padding:8px 0%;font-size: 14px;letter-spacing: 1px;line-height: 1.55;vertical-align: middle;text-align: center} #features02 #list_group .unit_table .inner table td:nth-of-type(3){text-align: left} #features02 #list_group .unit_table .inner table td img{width: 35%;} #features02 #list_group .unit_table .inner table td a{position: relative; display:block;background:#00779c;color:white;text-decoration: none;width: 85%;margin: 0 auto;padding:8px 0%;border-radius: 5px} #features02 #list_group .unit_table .inner table td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;font-size: 12px; } #features02 #list_group .unit_table .inner table td a:hover{background:#00c1c6;} /*他社品名互換表*/ #compatible #intro_group{padding: 80px 0 0 0;margin:0 auto 50px auto;} #compatible #intro_group .inner{} #compatible #intro_group .inner .title_area{width: 50%;max-width: 1000px;min-width: 800px;margin: 0 auto 30px auto;display: flex;justify-content: space-between;align-items: center} #compatible #intro_group .inner .title_area .illustration{width: 35%;} #compatible #intro_group .inner .title_area .illustration img{width: 100%;} #compatible #intro_group .inner h3{position: relative;width: 55%;margin:0 auto 0px auto;padding: 30px 40px;box-sizing: border-box;font-size: clamp(20px,2.2vw, 30px);letter-spacing:2px;color:white;font-weight: 500;background:linear-gradient(90deg, #4facb4, #067995);text-align: center;border-radius: 10px;} #compatible #intro_group .inner h3 span{display:block;font-size: clamp(18px, 1.0vw, 24px);} #compatible #intro_group .inner h3::before{content:"";position: absolute;top:100%;left:10%;width:10%; aspect-ratio:2.0/1;/* height: 100px;*/ clip-path:polygon(0% 0%, 100% 0%, 0% 100%);background:#4facb4} #compatible #intro_group .inner p{font-size: clamp(18px, 1.0vw, 26px);letter-spacing: 2px;line-height: 1.75;text-align: center;color: #00779c;font-weight: 500} #compatible #table_group{} #compatible #table_group #search_area{width: 80%;min-width: 1000px;background: #f8fffe;border-top: 1px solid #c1dbd5;border-bottom: 1px solid #c1dbd5;padding:30px 0px;margin:0 auto 30px auto;box-sizing: border-box} #compatible #table_group #search_area .eng{font-size: clamp(14px,1.4vw, 18px);letter-spacing:1px;color:#1fa3ad;font-weight: 400;text-align: center;} #compatible #table_group #search_area h4{margin:0 auto 10px auto;padding:0px 0px;font-size: clamp(18px,2.0vw, 20px);letter-spacing:1px;font-weight: 500;text-align: center;} #compatible #table_group #search_area .button_container{width: 90%;max-width: 1100px;margin:0 auto;font-size: 0;display: flex;justify-content: space-between} #compatible #table_group #search_area .button_container #compatibility_search{outline: 0;border:1px solid #1fa3ad;box-sizing: border-box;border-radius: 5px;width:68%;margin: 0px 0 ;padding:10px 2%;font-size: 18px;letter-spacing:1px;background:white;} #compatible #table_group #search_area .button_container #button_search{outline: 0;border:none;border-radius: 5px;width:15%; margin: 0px 0 ;padding:10px 0%;font-size: 16px;letter-spacing:1px;background:#1fa3ad;color:white;} #compatible #table_group #search_area .button_container #button_search:hover{background: #00779c} #compatible #table_group #search_area .button_container #button_search_reset{outline: 0;border:none;border-radius: 5px;width:15%; margin: 0px 0 ;padding:10px 0%;font-size:16px;letter-spacing:1px;background:#7f858c;color:white;} #compatible #table_group #search_area .button_container #button_search_reset:hover{background: #00779c} #compatible #table_group .note{margin:0 auto 20px auto;font-size:16px;letter-spacing:1px;font-weight: 700;text-align: center;color:#1fa3ad} #compatible #table_group #fixed_area{width: 80%;min-width: 1000px; margin:0 auto; } #compatible #table_group .kotei { position: sticky; top: 90px; z-index: 10; background:#f2f2f2;} #compatible #table_group #fixed_area table{width:100%; margin:0 auto;border-collapse: collapse;border-top: 1px solid #cccccc;} #compatible #table_group #fixed_area table th{position:relative;padding:10px 0%;font-weight: 400;font-size: 13px;letter-spacing: 0px;vertical-align: middle;text-align: center;border-bottom: 1px solid #cccccc;} #compatible #table_group #fixed_area table th::before{content: '';position:absolute;top:50%;left: 0%;transform: translateY(-50%);width: 1px;height: 100%;background:#c8c8c8; } #compatible #table_group #fixed_area table th.grid01::before{display: none} #compatible #table_group #fixed_area table th.grid01{width:14%;} #compatible #table_group #fixed_area table th.grid02{width:8%;} #compatible #table_group #fixed_area table th.grid03{width:6%;} #compatible #table_group #fixed_area table th.grid04{width:15%;} #compatible #table_group #fixed_area table th.grid04-1{width:7.5%;} #compatible #table_group #fixed_area table th.grid04-2{width:7.5%;} #compatible #table_group #fixed_area table th.grid05{width:15%;} #compatible #table_group #fixed_area table th.grid05-1{width:7.5%;} #compatible #table_group #fixed_area table th.grid05-2{width:7.5%;} #compatible #table_group #fixed_area table th.grid06{width:7%;} #compatible #table_group #fixed_area table th.grid07{width:10%;} #compatible #table_group #fixed_area table th.grid08{width:25%;} #compatible #table_group #fixed_area table th.grid08-1{width:17%;} #compatible #table_group #fixed_area table th.grid08-2{width:8%;} #compatible #table_group #list_area{width: 80%;min-width: 1000px; margin:0 auto;} #compatible #table_group #list_area table{border-collapse: collapse;width: 100%;} #compatible #table_group #list_area table tr{border-bottom: 1px solid #c8c8c8;} #compatible #table_group #list_area table td{padding:10px 0%;font-size: 14px;letter-spacing: 0px;vertical-align: middle;text-align: center} #compatible #table_group #list_area table td:nth-of-type(1){width:14%;} #compatible #table_group #list_area table td:nth-of-type(2){width:8%;} #compatible #table_group #list_area table td:nth-of-type(3){width:6%;} #compatible #table_group #list_area table td:nth-of-type(4){width:7.55%;} #compatible #table_group #list_area table td:nth-of-type(5){width:7.5%;} #compatible #table_group #list_area table td:nth-of-type(6){width:7.5%;} #compatible #table_group #list_area table td:nth-of-type(7){width:7.5%;} #compatible #table_group #list_area table td:nth-of-type(8){width:7%;} #compatible #table_group #list_area table td:nth-of-type(9){width:10%;} #compatible #table_group #list_area table td:nth-of-type(10){width:17%;} #compatible #table_group #list_area table td:nth-of-type(11){width:8%;} #compatible #table_group #list_area table td:nth-of-type(2){position:relative;} #compatible #table_group #list_area table td:nth-of-type(2)::before{content: '';position:absolute;top:50%;left: 0%;transform: translateY(-50%);width: 1px;height: 100%;background:#c8c8c8; } #compatible #table_group #list_area table td:nth-of-type(2)::after{content: '';position:absolute;top:50%;left: 100%;transform: translateY(-50%);width: 1px;height: 100%;background:#c8c8c8; } #compatible #table_group #list_area table td a{position: relative; display:block;background:#00779c;color:white;text-decoration: none;width: 90%;margin: 0 auto;padding:10px 0%;border-radius: 5px;font-size: 12px;letter-spacing: 0} #compatible #table_group #list_area table td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;font-size: 9px; } #compatible #table_group #list_area table td a:hover{background:#00c1c6;} /* #compatible #table_group .inner{width: 80%;min-width: 1000px; height:900px;margin:0 auto 50px;overflow-x: auto;} #compatible #table_group .inner table{border-collapse: collapse;width: 100%;} #compatible #table_group .inner table thead{background: #f2f2f2;} #compatible #table_group .inner table thead th{padding:10px 0%;font-weight: 400;font-size: 15px;letter-spacing: 0px;vertical-align: middle;border-left: 1px solid #cccccc;} #compatible #table_group .inner table thead th.kotei { position: sticky; top: 0; z-index: 10; background: #f2f2f2;} #compatible #table_group .inner table thead th.kotei::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #ccc; z-index: -1;} #compatible #table_group .inner table thead th.kotei::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #ccc; z-index: -1;} #compatible #table_group .inner table thead th:first-of-type{border-left:none;} #compatible #table_group .inner table tbody tr{border-bottom: 1px solid #c8c8c8;} #compatible #table_group .inner table tbody td{padding:10px 0%;font-size: 14px;letter-spacing: 1px;vertical-align: middle;text-align: center} #compatible #table_group .inner table tbody td:nth-of-type(2){position:relative;} #compatible #table_group .inner table tbody td:nth-of-type(2)::before{content: '';position:absolute;top:50%;left: 0%;transform: translateY(-50%);width: 1px;height: 100%;background:#c8c8c8; } #compatible #table_group .inner table tbody td:nth-of-type(2)::after{content: '';position:absolute;top:50%;left: 100%;transform: translateY(-50%);width: 1px;height: 100%;background:#c8c8c8; } #compatible #table_group .inner table tbody td a{position: relative; display:block;background:#00779c;color:white;text-decoration: none;width: 90%;margin: 0 auto;padding:10px 0%;border-radius: 5px;font-size: 12px;letter-spacing: 0} #compatible #table_group .inner table tbody td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;font-size: 9px; } #compatible #table_group .inner table tbody td a:hover{background:#00c1c6;} */ /*取扱製品*/ #handling_product #list_group{background:#f7fcfc;padding: 80px 0;} #handling_product #list_group .product_unit{width: 70%;min-width: 1000px;;margin: 0 auto 80px auto;background:white;padding: 80px 5%;} #handling_product #list_group .product_unit .lead_area{width: 900px;margin: 0 auto 30px auto;padding: 0 0 30px 0;border-bottom: 1px solid #e6e6e5} #handling_product #list_group .product_unit .lead_area .logo{width: 500px;margin: 0 auto 50px auto} #handling_product #list_group .product_unit .lead_area .logo img{width: 100%;} #handling_product #list_group .product_unit .lead_area h3{margin: 0 auto 0px auto;padding: 0;font-size: 28px;letter-spacing: 1px;font-weight: 600;} #handling_product #list_group .product_unit .lead_area .eng{margin: 0 auto 30px auto;padding: 0;font-size: 18px;letter-spacing: 1px;font-weight: 500;} #handling_product #list_group .product_unit .lead_area .category span{padding: 8px 30px;text-align: center;background:#e4f1f2;color:#00779c;border-radius: 50px;font-size: 14px;letter-spacing: 0px;font-weight: 600;} #handling_product #list_group .product_unit .detail_area{width:900px;margin: 0 auto} #handling_product #list_group .product_unit .detail_area .unit{margin: 0 auto 30px auto;} #handling_product #list_group .product_unit .detail_area .unit h4{margin: 0 auto 10px auto;padding: 0;font-size: 22px;letter-spacing: 1px;font-weight: 600;color:#1fa3ad} #handling_product #list_group .product_unit .detail_area .unit p{margin: 0 auto 0px auto;padding: 0;font-size: 16px;letter-spacing: 1px;line-height: 1.75} #handling_product #list_group .product_unit .detail_area .banner{margin: 50px auto 0px auto;} #handling_product #list_group .product_unit .detail_area .banner a{position:relative;display:block;background:#1fa3ad;padding:38px 0px 28px 00px;color:white;font-size:20px;letter-spacing:1px;text-decoration:none;overflow:hidden;transition: color 0.3s ease;} #handling_product #list_group .product_unit .detail_area .banner a::before { content: ""; position: absolute; top: 0;left: 86%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b3ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #handling_product #list_group .product_unit .detail_area .banner a:hover::before { width: 105%; left: 0;} #handling_product #list_group .product_unit .detail_area .banner a::after{content:"\f105";position: absolute;top:50%;transform:translateY(-50%);left: 92%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 16px; transition: left 0.2s ease-out, color 0.3s ease;} #handling_product #list_group .product_unit .detail_area .banner a:hover::after{left: 92%;transition: left 0.2s ease-out;} #handling_product #list_group .product_unit .detail_area .banner a span{ position: absolute; top: 50%;transform: translateY(-50%);left: 40px; z-index: 1; transition: color 0.3s ease;} /*会社概要*/ #company_profile{} #company_profile #all_wrapper{ } #company_profile #all_wrapper .container{ display: flex; justify-content: space-between; gap: 50px; width: 80%;max-width: 1500px; min-width:1000px; margin: auto;} #company_profile #all_wrapper .container .main{ width: 68%; padding:80px 0 0px 0;} #company_profile #all_wrapper .container .main section{ width: 100%;margin: 0 auto 80px auto} #company_profile #all_wrapper .container .main section .inner .title{margin:0 auto 40px auto;color: #00779c} #company_profile #all_wrapper .container .main section .inner .title h3, #company_profile #all_wrapper .container .main section .inner .title h5{position: relative;margin:0;padding:40px 0 0 0; font-size: clamp(26px,1.8vw, 35px);letter-spacing: 1px;font-weight: 500} #company_profile #all_wrapper .container .main section .inner .title h3::before, #company_profile #all_wrapper .container .main section .inner .title h5::before{content: '';position: absolute;top: 0%;left:0%;background:linear-gradient(90deg, #005b90, #12dcdd);width:100px;height: 3px;} #company_profile #all_wrapper .container .main section .inner .title .eng{margin:0;padding: 0;font-size: clamp(18px,1.0vw,20px);letter-spacing: 1px;font-weight: 600;color: #1fa3c3} #company_profile #all_wrapper .container .main #sec01 .logo{width: 30%;min-width: 260px;margin:0 auto 30px auto;padding: 0;} #company_profile #all_wrapper .container .main #sec01 .logo img{width:100%;} #company_profile #all_wrapper .container .main #sec01 p{width:100%;margin:0 auto;padding:0px 0 0 0; font-size:16px;letter-spacing: 1px;line-height:1.75;} #company_profile #all_wrapper .container .main #sec02 .outline{/*background: #f7fcfc;*/padding: 00px;margin:0 auto 50px auto;} #company_profile #all_wrapper .container .main #sec02 .outline dl{width: 100%;margin:0 auto 0px auto;display: flex;flex-wrap: wrap; font-size: 16px;letter-spacing: 1px;line-height: 1.75;border-top: 1px solid #00779c;} #company_profile #all_wrapper .container .main #sec02 .outline dl dt{width:30%;margin: 0;padding:12px 0 12px 2%;border-bottom: 1px solid #00779c;color: #00779c;background:#f7fcfc;box-sizing: border-box} #company_profile #all_wrapper .container .main #sec02 .outline dl dd{width: 70%;margin: 0;padding:12px 0 12px 3%;border-bottom: 1px solid #00779c;box-sizing: border-box} #company_profile #all_wrapper .container .main #sec02 .office{width:100%;margin:0 auto 30px auto;padding:0px 0px 0px 0px;/*background:#f7fcfc;*/box-sizing: border-box} #company_profile #all_wrapper .container .main #sec02 .office .unit{margin: 0 auto 20px auto;padding: 30px 50px 30px 50px;background:#f2f7f7;} #company_profile #all_wrapper .container .main #sec02 .office .unit h4{width:300px;margin: 0 auto 20px 0;padding:3px 0px; font-size: clamp(18px,0.8vw, 25px);letter-spacing:1px;line-height: 1.8;color: white;text-align: center;font-weight: 500;background:linear-gradient(90deg, #269bae, #1b7eb5);border-radius: 50px} #company_profile #all_wrapper .container .main #sec02 .office .unit address{margin: 0 auto 20px auto;color:#000;font-style: normal;font-size:16px;letter-spacing: 1px;line-height: 1.4;} #company_profile #all_wrapper .container .main #sec02 .office .unit .google_map iframe{border: 0;outline: 0;width: 100%;aspect-ratio:2.0/1} #company_profile #all_wrapper .container .main #sec03 #timeline .unit{position: relative;width: 100%%; margin:0 auto 50px auto;padding:0px 0 0 50px;box-sizing: border-box ;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit::after{content: '';position: absolute;top:40px;left:7px;background:#cccccc;width:1px;height:90%;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .year{ position: relative;margin:0 auto 20px auto;font-size: clamp(20px,2.0vw, 24px);letter-spacing: 1px;color: #1fa3ad;font-weight: 500;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .year::before{content: '';position: absolute;top:50%;transform: translateY(-50%);left:-50px;background:linear-gradient(90deg, #005b90, #12dcdd);width:15px;height: 15px;border-radius: 10px} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .date_area{ margin:0 auto 20px auto;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .date_area .date{margin:0 auto 5px auto;padding:0px 0 0 0; font-size: clamp(16px,1.9vw, 20px);letter-spacing: 1px;line-height:1.75;color: #1fa3ad;font-weight: 500;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .date_area .text{margin:0 auto;padding:0px 0 0 0; font-size: clamp(14px,1.0vw, 16px);letter-spacing: 1px;line-height:1.75;} #company_profile #all_wrapper .container .main #sec04 .unit{margin:0 auto 40px auto;} #company_profile #all_wrapper .container .main #sec04 .unit h6{margin:0 auto 20px auto;padding:0px 0 10px 0; font-size: clamp(20px,1.0vw, 25px);letter-spacing: 1px;font-weight: 500;color: #1fa3ad;border-bottom: 1px solid #1fa3ad} #company_profile #all_wrapper .container .main #sec04 .unit p{margin:0;padding:0px 0 0 0; font-size:16px;letter-spacing: 1px;line-height:1.75;} #company_profile #all_wrapper .container .main #sec04 .unit ol{margin:30px auto 30px auto;} #company_profile #all_wrapper .container .main #sec04 .unit ol li{margin:0 auto 10px auto;color:#000;font-size:16px;letter-spacing: 1px;line-height:1.55;} #company_profile #all_wrapper .container .main #sec04 .unit .sign{text-align:center; font-size: clamp(14px,0.9vw, 16px);letter-spacing: 1px;} #company_profile #all_wrapper .container aside{ width: 25%;background: #f7f7f7;padding:80px 0 0px 0;} #company_profile #all_wrapper .container aside ul{ position: sticky; top: 100px;margin: 0;padding:0px 0 0px 0;list-style: none;} #company_profile #all_wrapper .container aside ul li{ margin: 0 0 1px 0;padding: 0; background:#52d5d0;} #company_profile #all_wrapper .container aside ul li a{position:relative;display:block;background:#2eb8bc;padding:50px 0px 30px 00px;color: white;font-size: 20px;letter-spacing: 1px;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #company_profile #all_wrapper .container aside ul li a::before { content: ""; position: absolute; top: 0;left: 86%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b4ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #company_profile #all_wrapper .container aside ul li a:hover::before { width: 105%; left: 0;} #company_profile #all_wrapper .container aside ul li a::after{content:"\f105";position: absolute;top:50%;transform:translateY(-50%);left: 92%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 16px; transition: left 0.2s ease-out, color 0.3s ease;} #company_profile #all_wrapper .container aside ul li a:hover::after{left: 90%;transition: left 0.2s ease-out;} #company_profile #all_wrapper .container aside ul li a > span{ position: absolute; top: 50%;transform: translateY(-50%);left: 40px; z-index: 1; transition: color 0.3s ease;font-size:18px;letter-spacing: 1px;font-weight: 500;} #company_profile #all_wrapper .container aside ul li a span span{display: block;font-size:12px;letter-spacing: 1px;font-weight: 500;} /*パートナー募集*/ #partner .sample{width:1000px;margin:100px auto 200px auto;} #partner .sample h3{margin:0 auto 20px auto;padding:0px 0 10px 0; font-size: clamp(20px,1.0vw, 25px);letter-spacing: 1px;font-weight: 500;color: #1fa3ad;border-bottom: 1px solid #1fa3ad} #partner #lead_area{position:relative;} #partner #lead_area::before{content: '';position: absolute; top: 0;left:10%; width:50%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position: 50% 50%;background-size: cover;z-index: -1} #partner #lead_area .inner{ width:80%;min-width: 700px;margin:0 auto;padding: 100px 0} #partner #lead_area .inner p{margin:0;padding: 0;font-size: clamp(20px, 1.0vw, 28px);letter-spacing:1px;line-height: 2.0;color: #0091a0;text-align: center;font-weight: 600} #partner #list_group{background:#e9f3f4;padding: 80px 0 80px 0} #partner #list_group .unit{margin: 0 auto 50px auto;} #partner #list_group .unit .title_area{width: 60%;min-width: 1000px;margin: 0 auto 50px auto;} #partner #list_group .unit .title_area .inner{position:relative;width: 100%;aspect-ratio:6/1;border-radius: 10px;overflow: hidden} #partner #list_group .unit .title_area .inner .photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} #partner #list_group .unit .title_area .inner .photo::before{content:'';position: absolute;top:0%;left: 0;width: 100%;height: 100%;background: rgba(0,32,40,0.7) } #partner #list_group .unit .title_area .inner .photo::after{content:'';position: absolute;top:0%;left: 80%;width: 30%;height: 100%;transform: skewX(-25deg);background:linear-gradient(90deg, #52d5d0, #31b3ba);} #partner #list_group .unit .title_area .inner .photo img{width: 100%;height: 100%;object-fit: cover;} #partner #list_group .unit .title_area .inner .text{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center} #partner #list_group .unit .title_area .inner .text p{position:relative;margin: 0;padding:20px 0 0 0;font-size: clamp(20px,1.0vw, 28px);letter-spacing: 1px;font-weight: 400;color:#00d1db;} #partner #list_group .unit .title_area .inner .text p::before{content:'Partner Support';position: absolute;top:0%;left: 50%;transform: translateX(-50%); font-size: clamp(14px,0.6vw, 20px);letter-spacing: 1px;width: 100%;} #partner #list_group .unit .title_area .inner h3{margin: 0;padding: 0;font-size: clamp(32px,1.2vw, 40px);letter-spacing: 1px;font-weight: 600;color: white;} #partner #list_group .unit .text_area{width: 50%;min-width: 800px;max-width: 1200px;margin: 0 auto;} #partner #list_group .unit .text_area p{font-size:16px;letter-spacing: 1px;font-weight: 400;line-height: 1.75} #partner #list_group .unit .text_area figure{margin:50px auto 0 auto;padding:0px 0 0 0;} #partner #list_group .unit .text_area figure img{width: 100%} #partner #contact_group .inner{position:relative;width: 100%;aspect-ratio:5.5/1;min-height: 400px} #partner #contact_group .inner .photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} #partner #contact_group .inner .photo::before{content:'';position: absolute;top:0%;left: 0;width: 100%;height: 100%;background: rgba(0,32,40,0.5) } #partner #contact_group .inner .photo::after{content:'';position: absolute;top:0%;right: 70%;width: 40%;height: 100%;transform: skewX(-25deg);background:linear-gradient(90deg, #52d5d0, #31b3ba);} #partner #contact_group .inner .photo img{width:100%;height: 100%;object-fit: cover;} #partner #contact_group .inner .text_area{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 50%;min-width: 900px;display: flex;justify-content: space-between;align-items: center} #partner #contact_group .inner .text_area .primary{width: 50%;} #partner #contact_group .inner .text_area .primary h4{margin: 0 auto 30px auto;padding: 0;font-size: clamp(38px,2.2vw, 50px);letter-spacing: 1px;font-weight: 600;color: white;} #partner #contact_group .inner .text_area .primary p{margin: 0;padding: 0;font-size: clamp(16px,0.8vw, 30px);letter-spacing: 1px;font-weight: 400;color: white;line-height: 1.75} #partner #contact_group .inner .text_area .banner{width: 40%;} #partner #contact_group .inner .text_area .banner a{position:relative;display:block;padding:30px 0px;text-decoration: none;background:linear-gradient(90deg, #1ca9ec, #00a1a5);transition: color 0.3s ease;overflow: hidden;} #partner #contact_group .inner .text_area .banner a span{ position: absolute; top: 50%;transform: translateY(-50%);left: 40px; z-index: 1; transition: color 0.3s ease;color: white;font-size: 16px;letter-spacing: 1px;} #partner #contact_group .inner .text_area .banner a::before {content:"";position:absolute;top:0;left:80%;width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b4ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #partner #contact_group .inner .text_area .banner a::after{content:"\f105";position: absolute;top:50%;transform:translateY(-50%);left: 90%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 16px; transition: left 0.2s ease-out, color 0.3s ease;} #partner #contact_group .inner .text_area .banner a:hover::before { width: 105%; left: 0;} #partner #contact_group .inner .text_area .banner a:hover::after{left: 92%;transition: left 0.2s ease-out;} /*ニュース*/ #news{} #news #all_group{width: 80%;min-width: 1000px;max-width: 1500px;margin: 0 auto;padding: 80px 0;display: flex;justify-content: space-between;} #news #all_group .list{width:70%;min-width: 700px;} #news #all_group .list .unit{margin:0 auto 0px auto;padding:24px 0 24px 0; border-bottom: 1px solid #cecece;display: flex;justify-content: space-between} #news #all_group .list .unit a{display: inline-block;font-size:16px;letter-spacing: 1px;line-height: 1.75;text-decoration: none;} #news #all_group .list .unit .date{width:20%;} #news #all_group .list .unit .date a{color: #0b758a} #news #all_group .list .unit .title{width:80%;} #news #all_group .list .unit .title a{color:#323333;} #news #all_group .list .unit a:hover{color: #ccc;} #news #pager_area{margin:50px 0 0px 0;text-align: center;font-size:16px;letter-spacing: 1px;} #news #pager_area .current{color:#000;} #news #pager_area a{color:#00779c;} #news #pager_area a:hover{color:#38c0b1;} /*ニュース　詳細*/ #news_post{} #news_post #all_group{width: 80%;min-width: 1000px;max-width: 1500px;margin: 0 auto;padding: 80px 0;display: flex;justify-content: space-between;} #news_post #all_group .post_area{width:70%;min-width: 700px;margin:0px;} #news_post #all_group .post_area .container .date{color: #00779c;font-size:16px;letter-spacing: 1px;line-height: 1.5;font-weight: 500;} #news_post #all_group .post_area .container h3{position:relative;margin: 15px auto 40px auto;padding: 0 0 20px 0;color: #000;font-size:20px;letter-spacing: 1px;line-height: 1.7;font-weight: 500;} #news_post #all_group .post_area .container h3::before{content:'';position: absolute;bottom:0%;left: 0;width: 100%;height: 2px;background: #ccc } #news_post #all_group .post_area .container h3::after{content:'';position: absolute;bottom:0%;left: 0;width: 20%;height: 2px;background:linear-gradient(90deg, #175b98, #4fbdb8);} #news_post #all_group .post_area .container .text{color: #000;font-size:16px;letter-spacing: 1px;line-height: 1.7;} #news_post .post-navigation { margin:50px 0 30px 0;text-align: center;font-size:16px;letter-spacing: 0px; } #news_post .post-navigation a{color:#00779c; margin: 0 5px} #news_post .post-navigation a:hover{color:#38c0b1;} #news_post #all_group .post_area .back_archive a{display: block;width: 180px;margin: 0 auto;padding: 6px 0px; color:white;font-size:14px;letter-spacing: 1px;text-decoration: none;background:linear-gradient(90deg, #175b98, #4fbdb8);border-radius: 50px; text-align:center;} #news_post #all_group .post_area .back_archive a .fa-undo-alt{margin-right: 10px} #news_post #all_group .post_area .back_archive a:hover{background:linear-gradient(90deg, #52d5d0, #31b4ba);} /*ニュース aside*/ aside.post_style{width:26%;padding:0px 0;} aside.post_style .box{margin:0 0 30px 0;} aside.post_style .box h4{position:relative;margin: 0 auto 15px auto;padding: 15px 0 0 0;font-size:16px;letter-spacing: 1px;color: #00404f;font-weight: 500} aside.post_style .box h4::before{content:'';position: absolute;top:0%;left: 0;width: 100%;height: 2px;background: #ccc } aside.post_style .box h4::after{content:'';position: absolute;top:0%;left: 0;width: 20%;height: 2px;background:linear-gradient(90deg, #52d5d0, #31b4ba);} aside.post_style .box ul{margin: 0 auto;padding: 0px 0;list-style: none} aside.post_style .box ul li{margin: 0 auto 10px auto;padding: 0px 0;} aside.post_style .box ul li a{color: #00404f;font-size:13px;letter-spacing: 1px;line-height: 1.5;} aside.post_style .box ul li a:hover{color: #ccc;} aside.post_style .box .comment-author-link{display: none;} /*お問い合わせ*/ #contact #lead_area{position:relative;} #contact #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position:00% 50%;background-size:50% auto;z-index: -1} #contact #lead_area .inner{ margin:0 auto;padding:80px 0} #contact #lead_area .inner p{margin:0 auto 0px auto;padding: 0;font-size: clamp(18px, 1.5vw, 20px);letter-spacing:1px;line-height: 2;text-align: center;color: #00889e;font-weight: 600;} #contact .tel_group{width:900px;margin:50px auto 50px auto;padding: 30px 0px 30px 0px;background:#f5fcfb;border: 1px solid #a6c9c9} #contact .tel_group h3{ position: relative;margin:0px auto 12px auto;padding:0px 0 10px 0;font-size:20px;letter-spacing:2px;text-align: center;font-weight: 600;color:#00889e } #contact .tel_group h3::before{content: '';position: absolute;bottom: 0px;left:50%;transform: translateX(-50%);background:#00889e;width:20px;height:1px;} #contact .tel_group .open{ margin:0px auto 20px auto;padding:0;font-size:16px;letter-spacing:1px;text-align: center;font-weight: 500;line-height: 1.9} #contact .tel_group .open span{display:block;font-size: 14px;} #contact .tel_group .number a{ pointer-events: none;display: block; margin:0px auto 0px auto;padding:0;font-size:26px;letter-spacing:1px;line-height: 1;text-align: center;text-decoration: none;color:#00889e;font-weight: 500} #contact .tel_group .number a span{color: white;margin-right: 20px;padding:2px 30px;background: #00889e;font-size:16px;letter-spacing:1px;border-radius: 20px;} #contact .tel_group .fax{ pointer-events: none;display: block; margin:10px auto 0px auto;padding:0;font-size:26px;letter-spacing:1px;line-height: 1;text-align: center;text-decoration: none;color:#00889e;font-weight: 500} #contact .tel_group .fax span{color: white;margin-right: 20px;padding: 2px 30px;background: #00889e;font-size:16px;letter-spacing:1px;border-radius: 20px;} #contact #form_wrapper{width:900px;margin:50px auto 50px auto;} #contact #form_wrapper table{border-collapse: collapse;width: 100%;margin: 0 auto 20px auto} #contact #form_wrapper table tr{border-top: 1px solid #cccccc} #contact #form_wrapper table tr th{width: 30%;padding: 20px 0;font-weight: 400;font-size: 16px;letter-spacing: 1px;text-align: left;color:#000;font-weight: 600} #contact #form_wrapper table tr td{width: 78%;padding: 20px 0 20px 2%;} #contact #form_wrapper table tr td .radio_area{margin-bottom:10px;font-size: 15px;letter-spacing: 1px;} #contact #form_wrapper .required{margin-left: 10px;padding: 2px 2px;background:#00889e;color: white;font-size: 12px;letter-spacing: 0;} #contact #form_wrapper input[type=text], #contact #form_wrapper input[type=tel], #contact #form_wrapper input[type=email], #contact #form_wrapper textarea{outline: 0;border:1px solid #abc4c6;width:96%; margin:0px 0 ;padding:6px 2%;font-size: 16px;line-height: 28px;letter-spacing:1px;background:#f5fcfb;} #contact #form_wrapper .short{width:30% !important;margin-bottom: 10px !important;} #contact #form_wrapper textarea{height:180px;} #contact #form_wrapper input[type="radio"] {position: relative;width: 20px;height:20px;border: 1px solid #00889e;border-radius: 50%;vertical-align: -8px;-webkit-appearance: none; -moz-appearance: none; appearance: none;} #contact #form_wrapper input[type="radio"]:checked:before {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width:12px;height:12px;border-radius: 50%; background: #00889e; content: '';} #contact #form_wrapper input[type="checkbox"] {position: relative;width: 20px;height:20px;border: 1px solid #00889e;vertical-align: -5px;-webkit-appearance: none; -moz-appearance: none; appearance: none;} #contact #form_wrapper input[type="checkbox"]:checked:before { position: absolute; top: 1px; left: 5px; transform: rotate(50deg); width: 6px; height: 10px; border-right:3px solid #00889e; border-bottom:3px solid #00889e; content: '';} #contact #form_wrapper .pp{padding: 20px 0;border-top: 1px solid #cccccc;} #contact #form_wrapper .pp p{ margin:0px auto 10px auto;padding:0;font-size: 14px;letter-spacing:1px;text-align: center} #contact #form_wrapper .pp p a{color:#00889e;} #contact #form_wrapper .pp p a:hover{color:#2bbcbc;} #contact #form_wrapper .pp .check_area {font-size: 16px;letter-spacing:1px;text-align: center;color:#000;font-weight: 500;} #contact #form_wrapper .note{padding: 20px 0;border-top: 1px solid #cccccc;} #contact #form_wrapper .note p{margin:0px auto 15px auto;padding:0;font-size: 16px;letter-spacing:2px;line-height: 1.7;text-align: center;color: #ff5d69;text-decoration: underline} #contact #form_wrapper .note .check_area {font-size: 16px;letter-spacing:1px;text-align: center;color:#000;font-weight: 500;} #contact #form_wrapper .button_area{margin:30px auto 0 auto; } #contact #form_wrapper .button_area input[type=submit]{-webkit-appearance: none;display: block; outline: 0;border:0;width:100%; margin:0px auto;padding:30px 0%;font-size: 20px;letter-spacing:1px;background:#00779c;color: white;} #contact #form_wrapper .button_area input[type=submit]:hover{background: #2bbcbc;} .wpcf7-form .wpcf7-not-valid-tip{display: inline-block;background:#ff5d69;color: white; padding: 2px 10px;margin-top: 5px;margin-left: 5px;border-radius: 20px;font-size: 12px;letter-spacing: 0px;text-align: center} .wpcf7-response-output{display: block;margin: 0 auto !important;width: 100% !important;background:#fff6f3;color:#ff5d69; padding:24px 0px !important;text-align: center;font-size: 16px;letter-spacing: 1px;font-weight: 600;border-color:none !important;border: none !important;} #contact #pp{background:#f5fcfb;padding:80px 0 30px 0;} #contact #pp h4{width:900px;margin:0px auto 50px auto;padding:0px 0 10px 0;font-size: clamp(22px, 1.8vw, 28px);letter-spacing:2px;text-align: center;font-weight: 600;color:#00889e;border-bottom: 1px solid #00889e} #contact #pp .unit{width:900px;margin:0px auto 40px auto;} #contact #pp .unit h5{margin:0px auto 10px auto;padding:0px 0 0px 0;font-size: clamp(16px, 1.2vw, 20px);letter-spacing:1px;font-weight:600;color:#00889e} #contact #pp .unit p{margin:0px auto 0px auto;padding:0px 0 0px 0;font-size: clamp(14px, 0.9vw, 16px);letter-spacing:1px;line-height: 1.75;color:#282828} #contact #pp .unit ul{margin:10px auto 0px auto;padding:0px 0 0px 30px;font-size: clamp(14px, 0.9vw, 16px);letter-spacing:1px;line-height: 1.75;color:#282828} /*404*/ #nf404{background:linear-gradient(90deg, #2a9f8e, #1b7e9a);} #nf404 .inner{width:100%;aspect-ratio:2.5/1;position: relative;} #nf404 .inner .text_area{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #nf404 .inner .text_area h2{margin:0px auto 20px auto;padding:0;font-size: clamp(25px,2.5vw, 60px);letter-spacing:1px;color:white;text-align: center;} #nf404 .inner .text_area p{margin:0px auto 0px auto;padding:0;font-size: clamp(14px, 0.6vw, 20px);letter-spacing:1px;color:white;text-align: center;} } @media screen and (min-width:701px) and ( max-width:1050px) { /*共通*/ main #title_common{width: 100%;margin: 0 auto;padding: 0 0 0px 0;} main #title_common .inner{position:relative;width: 100%; aspect-ratio:2.8/1;min-height:300px;margin: 0 auto;padding: 0} main #title_common .inner .photo{position: absolute; top: 0;left: 0%; width:100%; height: 100%;overflow: hidden;} main #title_common .inner .photo img{ width:100%; height: 100%;object-fit: cover;} main #title_common .inner .shape{position: absolute; top: 0;left: 0%; width:100%; height: 100%;overflow: hidden;} main #title_common .inner .shape img{ width:100%; height: 100%;object-fit: cover;} main #title_common .inner .text{position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:80%;padding-top: 80px } main #title_common .inner .text h2{margin:0;padding: 0;font-size: clamp(30px, 2.8vw, 50px);letter-spacing:4px;color: white;font-weight: 600} main #title_common .inner .text .eng{margin:0;padding: 0;font-size: clamp(20px, 0.2vw, 24px);letter-spacing:2px;color: white;} main #breadcrumbs{border-bottom:1px solid #e6e6e5;padding: 18px 0} main #breadcrumbs .inner{ width:90%;;margin:0 auto;font-size: 13px;letter-spacing:1px} main #breadcrumbs .inner a{position:relative;display: inline-block;color:#11a196;padding-right:10px;margin-right: 15px} main #breadcrumbs .inner a::before{content:"\f105";position: absolute;top: 50%;transform: translateY(-50%);left:100%;font-family: 'Font Awesome 5 Free';font-weight: 900;} main #breadcrumbs .inner a:hover{color:#323333;} /*main #breadcrumbs .inner span{color:#323333;}*/ /*他社品名互換表*/ #compatible #intro_group{padding: 80px 0 0 0;margin:0 auto 50px auto;} #compatible #intro_group .inner{} #compatible #intro_group .inner .title_area{width: 80%;margin: 0 auto 30px auto;display: flex;justify-content: space-between;align-items: center} #compatible #intro_group .inner .title_area .illustration{width: 35%;} #compatible #intro_group .inner .title_area .illustration img{width: 100%;} #compatible #intro_group .inner h3{position: relative;width:55%;margin:0 auto 0px auto;padding: 30px 20px;box-sizing: border-box;font-size: clamp(20px,2.2vw, 30px);letter-spacing:1px;color:white;font-weight: 500;background:linear-gradient(90deg, #4facb4, #067995);text-align: center;border-radius: 10px;} #compatible #intro_group .inner h3 span{display:block;font-size: clamp(18px, 1.0vw, 24px);} #compatible #intro_group .inner h3::before{content:"";position: absolute;top:100%;left:10%;width:10%; aspect-ratio:2.0/1;/* height: 100px;*/ clip-path:polygon(0% 0%, 100% 0%, 0% 100%);background:#4facb4} #compatible #intro_group .inner p{font-size: clamp(18px, 1.0vw, 26px);letter-spacing: 1px;line-height: 1.75;text-align: center;color: #00779c;font-weight: 500} #compatible #table_group{} #compatible #table_group #search_area{width:90%;background: #f8fffe;border-top: 1px solid #c1dbd5;border-bottom: 1px solid #c1dbd5;padding:30px 0px;margin:0 auto 30px auto;box-sizing: border-box} #compatible #table_group #search_area .eng{font-size: clamp(14px,1.4vw, 18px);letter-spacing:1px;color:#1fa3ad;font-weight: 400;text-align: center;} #compatible #table_group #search_area h4{margin:0 auto 10px auto;padding:0px 0px;font-size: clamp(18px,2.0vw, 20px);letter-spacing:1px;font-weight: 500;text-align: center;} #compatible #table_group #search_area .button_container{width: 96%;margin:0 auto;font-size: 0;display: flex;justify-content: space-between} #compatible #table_group #search_area .button_container #compatibility_search{outline: 0;border:1px solid #1fa3ad;box-sizing: border-box;border-radius: 5px;width:68%;margin: 0px 0 ;padding:10px 2%;font-size: 18px;letter-spacing:1px;background:white;} #compatible #table_group #search_area .button_container #button_search{outline: 0;border:none;border-radius: 5px;width:15%; margin: 0px 0 ;padding:10px 0%;font-size: 16px;letter-spacing:1px;background:#1fa3ad;color:white;} #compatible #table_group #search_area .button_container #button_search:hover{background: #00779c} #compatible #table_group #search_area .button_container #button_search_reset{outline: 0;border:none;border-radius: 5px;width:15%; margin: 0px 0 ;padding:10px 0%;font-size:16px;letter-spacing:1px;background:#7f858c;color:white;} #compatible #table_group #search_area .button_container #button_search_reset:hover{background: #00779c} #compatible #table_group .note{margin:0 auto 20px auto;font-size:16px;letter-spacing:1px;font-weight: 700;text-align: center;color:#1fa3ad} #compatible #table_group #scroll_group{width:90%; margin:0 auto;overflow-x: scroll;} #compatible #table_group #fixed_area{width:1200px; margin:0 auto; } #compatible #table_group .kotei { position: sticky; top: 0px; z-index: 10; background:#f2f2f2;} #compatible #table_group #fixed_area table{width:100%; margin:0 auto;border-collapse: collapse;border-top: 1px solid #cccccc;} #compatible #table_group #fixed_area table th{position:relative;padding:10px 0%;font-weight: 400;font-size: 13px;letter-spacing: 0px;vertical-align: middle;text-align: center;border-bottom: 1px solid #cccccc;} #compatible #table_group #fixed_area table th::before{content: '';position:absolute;top:50%;left: 0%;transform: translateY(-50%);width: 1px;height: 100%;background:#c8c8c8; } #compatible #table_group #fixed_area table th.grid01::before{display: none} #compatible #table_group #fixed_area table th.grid01{width:14%;} #compatible #table_group #fixed_area table th.grid02{width:8%;} #compatible #table_group #fixed_area table th.grid03{width:6%;} #compatible #table_group #fixed_area table th.grid04{width:15%;} #compatible #table_group #fixed_area table th.grid04-1{width:7.5%;} #compatible #table_group #fixed_area table th.grid04-2{width:7.5%;} #compatible #table_group #fixed_area table th.grid05{width:15%;} #compatible #table_group #fixed_area table th.grid05-1{width:7.5%;} #compatible #table_group #fixed_area table th.grid05-2{width:7.5%;} #compatible #table_group #fixed_area table th.grid06{width:7%;} #compatible #table_group #fixed_area table th.grid07{width:10%;} #compatible #table_group #fixed_area table th.grid08{width:25%;} #compatible #table_group #fixed_area table th.grid08-1{width:17%;} #compatible #table_group #fixed_area table th.grid08-2{width:8%;} #compatible #table_group #list_area{width:1200px; margin:0 auto;} #compatible #table_group #list_area table{border-collapse: collapse;width: 100%;} #compatible #table_group #list_area table tr{border-bottom: 1px solid #c8c8c8;} #compatible #table_group #list_area table td{padding:10px 0%;font-size: 14px;letter-spacing: 0px;vertical-align: middle;text-align: center} #compatible #table_group #list_area table td:nth-of-type(1){width:14%;} #compatible #table_group #list_area table td:nth-of-type(2){width:8%;} #compatible #table_group #list_area table td:nth-of-type(3){width:6%;} #compatible #table_group #list_area table td:nth-of-type(4){width:7.55%;} #compatible #table_group #list_area table td:nth-of-type(5){width:7.5%;} #compatible #table_group #list_area table td:nth-of-type(6){width:7.5%;} #compatible #table_group #list_area table td:nth-of-type(7){width:7.5%;} #compatible #table_group #list_area table td:nth-of-type(8){width:7%;} #compatible #table_group #list_area table td:nth-of-type(9){width:10%;} #compatible #table_group #list_area table td:nth-of-type(10){width:17%;} #compatible #table_group #list_area table td:nth-of-type(11){width:8%;} #compatible #table_group #list_area table td:nth-of-type(2){position:relative;} #compatible #table_group #list_area table td:nth-of-type(2)::before{content: '';position:absolute;top:50%;left: 0%;transform: translateY(-50%);width: 1px;height: 100%;background:#c8c8c8; } #compatible #table_group #list_area table td:nth-of-type(2)::after{content: '';position:absolute;top:50%;left: 100%;transform: translateY(-50%);width: 1px;height: 100%;background:#c8c8c8; } #compatible #table_group #list_area table td a{position: relative; display:block;background:#00779c;color:white;text-decoration: none;width: 90%;margin: 0 auto;padding:10px 0%;border-radius: 5px;font-size: 12px;letter-spacing: 0} #compatible #table_group #list_area table td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;font-size: 9px; } #compatible #table_group #list_area table td a:hover{background:#00c1c6;} /*取扱製品*/ #handling_product #list_group{background:#f7fcfc;padding: 80px 0;} #handling_product #list_group .product_unit{width: 90%;;margin: 0 auto 80px auto;background:white;padding: 80px 5%;box-sizing: border-box} #handling_product #list_group .product_unit .lead_area{width: 100%;margin: 0 auto 30px auto;padding: 0 0 30px 0;border-bottom: 1px solid #e6e6e5} #handling_product #list_group .product_unit .lead_area .logo{width: 500px;margin: 0 auto 50px auto} #handling_product #list_group .product_unit .lead_area .logo img{width: 100%;} #handling_product #list_group .product_unit .lead_area h3{margin: 0 auto 0px auto;padding: 0;font-size: 22px;letter-spacing: 1px;font-weight: 600;} #handling_product #list_group .product_unit .lead_area .eng{margin: 0 auto 30px auto;padding: 0;font-size: 18px;letter-spacing: 1px;font-weight: 500;} #handling_product #list_group .product_unit .lead_area .category span{padding: 8px 30px;text-align: center;background:#e4f1f2;color:#00779c;border-radius: 50px;font-size: 14px;letter-spacing: 0px;font-weight: 600;} #handling_product #list_group .product_unit .detail_area{width:100%;margin: 0 auto} #handling_product #list_group .product_unit .detail_area .unit{margin: 0 auto 30px auto;} #handling_product #list_group .product_unit .detail_area .unit h4{margin: 0 auto 10px auto;padding: 0;font-size: 18px;letter-spacing: 1px;font-weight: 600;color:#1fa3ad} #handling_product #list_group .product_unit .detail_area .unit p{margin: 0 auto 0px auto;padding: 0;font-size: 14px;letter-spacing: 1px;line-height: 1.75} #handling_product #list_group .product_unit .detail_area .banner{margin: 50px auto 0px auto;} #handling_product #list_group .product_unit .detail_area .banner a{position:relative;display:block;background:#1fa3ad;padding:38px 0px 28px 00px;color:white;font-size:20px;letter-spacing:1px;text-decoration:none;overflow:hidden;transition: color 0.3s ease;} #handling_product #list_group .product_unit .detail_area .banner a::before { content: ""; position: absolute; top: 0;left: 86%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b3ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #handling_product #list_group .product_unit .detail_area .banner a:hover::before { width: 105%; left: 0;} #handling_product #list_group .product_unit .detail_area .banner a::after{content:"\f105";position: absolute;top:50%;transform:translateY(-50%);left: 92%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 16px; transition: left 0.2s ease-out, color 0.3s ease;} #handling_product #list_group .product_unit .detail_area .banner a:hover::after{left: 92%;transition: left 0.2s ease-out;} #handling_product #list_group .product_unit .detail_area .banner a span{ position: absolute; top: 50%;transform: translateY(-50%);left: 40px; z-index: 1; transition: color 0.3s ease;} /*ニュース*/ #news{} #news #all_group{width: 80%;margin: 0 auto;padding:50px 0 80px 0;} #news #all_group .list{margin: 0 auto 50px auto;} #news #all_group .list .unit{margin:0 auto 0px auto;padding:24px 0 24px 0; border-bottom: 1px solid #cecece;} #news #all_group .list .unit a{display: inline-block;font-size:16px;letter-spacing: 1px;line-height: 1.75;text-decoration: none;} #news #all_group .list .unit .date{width:100%;} #news #all_group .list .unit .date a{color: #0b758a;} #news #all_group .list .unit .title{width:100%;} #news #all_group .list .unit .title a{color:#323333;} #news #all_group .list .unit a:hover{color: #ccc;} #news #pager_area{margin:50px 0 0px 0;text-align: center;font-size:16px;letter-spacing: 1px;} #news #pager_area .current{color:#000;} #news #pager_area a{color:#00779c;} #news #pager_area a:hover{color:#38c0b1;} /*ニュース　詳細*/ #news_post{} #news_post #all_group{width: 80%;margin: 0 auto;padding:50px 0 0 0;} #news_post #all_group .post_area{margin:0px auto 50px auto;} #news_post #all_group .post_area .container .date{color: #00779c;font-size:16px;letter-spacing: 1px;line-height: 1.5;font-weight: 500;} #news_post #all_group .post_area .container h3{position:relative;margin: 15px auto 40px auto;padding: 0 0 20px 0;color: #000;font-size:20px;letter-spacing: 1px;line-height: 1.7;font-weight: 500;} #news_post #all_group .post_area .container h3::before{content:'';position: absolute;bottom:0%;left: 0;width: 100%;height: 2px;background: #ccc } #news_post #all_group .post_area .container h3::after{content:'';position: absolute;bottom:0%;left: 0;width: 20%;height: 2px;background:linear-gradient(90deg, #175b98, #4fbdb8);} #news_post #all_group .post_area .container .text{color: #000;font-size:16px;letter-spacing: 1px;line-height: 1.7;} #news_post .post-navigation { margin:50px 0 30px 0;text-align: center;font-size:16px;letter-spacing: 0px; } #news_post .post-navigation a{color:#00779c; margin: 0 5px} #news_post .post-navigation a:hover{color:#38c0b1;} #news_post #all_group .post_area .back_archive a{display: block;width: 180px;margin: 0 auto;padding: 6px 0px; color:white;font-size:14px;letter-spacing: 1px;text-decoration: none;background:linear-gradient(90deg, #175b98, #4fbdb8);border-radius: 50px; text-align:center;} #news_post #all_group .post_area .back_archive a .fa-undo-alt{margin-right: 10px} #news_post #all_group .post_area .back_archive a:hover{background:linear-gradient(90deg, #52d5d0, #31b4ba);} /*ニュース aside*/ aside.post_style{} aside.post_style .box{margin:0 0 30px 0;} aside.post_style .box h4{position:relative;margin: 0 auto 15px auto;padding: 15px 0 0 0;font-size:16px;letter-spacing: 1px;color: #00404f;font-weight: 500} aside.post_style .box h4::before{content:'';position: absolute;top:0%;left: 0;width: 100%;height: 2px;background: #ccc } aside.post_style .box h4::after{content:'';position: absolute;top:0%;left: 0;width: 20%;height: 2px;background:linear-gradient(90deg, #52d5d0, #31b4ba);} aside.post_style .box ul{margin: 0 auto;padding: 0px 0;list-style: none} aside.post_style .box ul li{margin: 0 auto 10px auto;padding: 0px 0;} aside.post_style .box ul li a{color: #00404f;font-size:13px;letter-spacing: 1px;line-height: 1.5;} aside.post_style .box ul li a:hover{color: #ccc;} aside.post_style .box .comment-author-link{display: none;} /*お問い合わせ*/ #contact #lead_area{position:relative;} #contact #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position:50% 50%;background-size:auto 180%;z-index: -1} #contact #lead_area .inner{ margin:0 auto;padding:80px 0} #contact #lead_area .inner p{margin:0 auto 0px auto;padding: 0;font-size: clamp(18px, 1.5vw, 20px);letter-spacing:1px;line-height: 2;text-align: center;color: #00889e;font-weight: 600;} #contact .tel_group{width:90%;margin:50px auto 50px auto;padding: 30px 0px 30px 0px;background:#f5fcfb;border: 1px solid #a6c9c9} #contact .tel_group h3{ position: relative;margin:0px auto 12px auto;padding:0px 0 10px 0;font-size:20px;letter-spacing:2px;text-align: center;font-weight: 600;color:#00889e } #contact .tel_group h3::before{content: '';position: absolute;bottom: 0px;left:50%;transform: translateX(-50%);background:#00889e;width:20px;height:1px;} #contact .tel_group .open{ margin:0px auto 20px auto;padding:0;font-size:16px;letter-spacing:1px;text-align: center;font-weight: 500;line-height: 1.9} #contact .tel_group .open span{display:block;font-size: 14px;} #contact .tel_group .number a{ pointer-events: none;display: block; margin:0px auto 0px auto;padding:0;font-size:26px;letter-spacing:1px;line-height: 1;text-align: center;text-decoration: none;color:#00889e;font-weight: 500} #contact .tel_group .number a span{color: white;margin-right: 20px;padding:2px 30px;background: #00889e;font-size:16px;letter-spacing:1px;border-radius: 20px;} #contact .tel_group .fax{ pointer-events: none;display: block; margin:10px auto 0px auto;padding:0;font-size:26px;letter-spacing:1px;line-height: 1;text-align: center;text-decoration: none;color:#00889e;font-weight: 500} #contact .tel_group .fax span{color: white;margin-right: 20px;padding: 2px 30px;background: #00889e;font-size:16px;letter-spacing:1px;border-radius: 20px;} #contact #form_wrapper{width:90%;margin:50px auto 50px auto;} #contact #form_wrapper table{border-collapse: collapse;width: 100%;margin: 0 auto 20px auto} #contact #form_wrapper table tr{border-top: 1px solid #cccccc} #contact #form_wrapper table tr th{display: inline-block;width:100%;padding: 20px 0 10px 0;font-size: 16px;letter-spacing: 1px;text-align: left;color:#000;font-weight: 500} #contact #form_wrapper table tr td{display: inline-block;width:100%;padding: 0px 0 20px 0%;font-weight:500;font-size: 16px;letter-spacing: 1px;} #contact #form_wrapper table tr td .radio_area{margin-bottom:10px;font-size: 15px;letter-spacing: 1px;} #contact #form_wrapper .required{margin-left: 10px;padding: 5px 10px;background:#00889e;color: white;font-size: 13px;letter-spacing: 0;} #contact #form_wrapper input[type=text], #contact #form_wrapper input[type=tel], #contact #form_wrapper input[type=email], #contact #form_wrapper textarea{outline: 0;border:1px solid #abc4c6;width:96%; margin:0px 0 ;padding:6px 2%;font-size: 16px;line-height: 28px;letter-spacing:1px;background:#f5fcfb;} #contact #form_wrapper .short{width:40% !important;margin-bottom: 10px !important;} #contact #form_wrapper textarea{height:180px;} #contact #form_wrapper input[type="radio"] {position: relative;width: 20px;height:20px;border: 1px solid #00889e;border-radius: 50%;vertical-align: -8px;-webkit-appearance: none; -moz-appearance: none; appearance: none;} #contact #form_wrapper input[type="radio"]:checked:before {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width:12px;height:12px;border-radius: 50%; background: #00889e; content: '';} #contact #form_wrapper input[type="checkbox"] {position: relative;width: 20px;height:20px;border: 1px solid #00889e;vertical-align: -5px;-webkit-appearance: none; -moz-appearance: none; appearance: none;} #contact #form_wrapper input[type="checkbox"]:checked:before { position: absolute; top: 1px; left: 5px; transform: rotate(50deg); width: 6px; height: 10px; border-right:3px solid #00889e; border-bottom:3px solid #00889e; content: '';} #contact #form_wrapper .pp{padding: 20px 0;border-top: 1px solid #cccccc;} #contact #form_wrapper .pp p{ margin:0px auto 10px auto;padding:0;font-size: 14px;letter-spacing:1px;text-align: center} #contact #form_wrapper .pp p a{color:#00889e;} #contact #form_wrapper .pp p a:hover{color:#2bbcbc;} #contact #form_wrapper .pp .check_area {font-size: 16px;letter-spacing:1px;text-align: center;color:#000;font-weight: 500;} #contact #form_wrapper .note{padding: 20px 0 10px 0;border-top: 1px solid #cccccc;} #contact #form_wrapper .note p{margin:0px auto 15px auto;padding:0;font-size: 16px;letter-spacing:2px;line-height: 1.7;text-align: center;color: #ff5d69;text-decoration: underline} #contact #form_wrapper .note .check_area {font-size: 16px;letter-spacing:1px;text-align: center;color:#000;font-weight: 500;} #contact #form_wrapper .button_area{margin:30px auto 0 auto; } #contact #form_wrapper .button_area input[type=submit]{-webkit-appearance: none;display: block; outline: 0;border:0;width:100%; margin:0px auto;padding:30px 0%;font-size: 20px;letter-spacing:1px;background:#00779c;color: white;} #contact #form_wrapper .button_area input[type=submit]:hover{background: #2bbcbc;} .wpcf7-form .wpcf7-not-valid-tip{display: inline-block;background:#ff5d69;color: white; padding: 2px 10px;margin-top: 5px;margin-left: 5px;border-radius: 20px;font-size: 12px;letter-spacing: 0px;text-align: center} .wpcf7-response-output{display: block;margin: 0 auto !important;width: 100% !important;background:#fff6f3;color:#ff5d69; padding:24px 0px !important;text-align: center;font-size: 16px;letter-spacing: 1px;font-weight: 600;border-color:none !important;border: none !important;} #contact #pp{background:#f5fcfb;padding:80px 0 30px 0;} #contact #pp h4{width:90%;margin:0px auto 50px auto;padding:0px 0 10px 0;font-size: 24px;letter-spacing:1px;text-align: center;font-weight: 600;color:#00889e;border-bottom: 1px solid #00889e} #contact #pp .unit{width:90%;margin:0px auto 40px auto;} #contact #pp .unit h5{margin:0px auto 10px auto;padding:0px 0 0px 0;font-size: 20px;letter-spacing:1px;font-weight:600;color:#00889e} #contact #pp .unit p{margin:0px auto 0px auto;padding:0px 0 0px 0;font-size:14px;letter-spacing:1px;line-height: 1.7;color:#282828} #contact #pp .unit ul{margin:10px auto 0px auto;padding:0px 0 0px 30px;font-size:14px;letter-spacing:1px;line-height: 1.7;color:#282828} /*404*/ #nf404{background:linear-gradient(90deg, #2a9f8e, #1b7e9a);} #nf404 .inner{width:100%;aspect-ratio:2.0/1;position: relative;} #nf404 .inner .text_area{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #nf404 .inner .text_area h2{margin:0px auto 20px auto;padding:0;font-size: clamp(30px,2.0vw, 40px);letter-spacing:1px;color:white;text-align: center;} #nf404 .inner .text_area p{margin:0px auto 0px auto;padding:0;font-size: clamp(14px, 0.6vw, 20px);letter-spacing:1px;color:white;text-align: center;} /*******************ヘルプ分**********************/ /*水晶発振器*/ #crystal_o #lead_area{position:relative;} #crystal_o #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position:-400px 50%;background-size:auto 100%;z-index: -1} #crystal_o #lead_area .inner{ margin:0 auto;padding: 100px 0} #crystal_o #lead_area .inner h3{margin:0 0 40px 0;padding: 0;font-size: 30px;letter-spacing:4px;text-align: center;color: #323333;font-weight: 600} #crystal_o #lead_area .inner p{width:80%;margin:0 auto 56px auto;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;line-height: 2.0} #crystal_o #lead_area .inner p span{color: #11a196} #crystal_o #lead_area .inner .photo{width:84%;aspect-ratio:2.6/1; margin:0 auto;text-align: center;overflow:hidden;} #crystal_o #lead_area .inner .photo img{width: 100%;} #crystal_o #products_list{position:relative;padding: 70px 0} #crystal_o #products_list::before{content: '';position: absolute; top: 0;right:0%; width:100%; height: 100%;background:#e9f3f4;z-index: -2} #crystal_o #products_list::after{content: '';position: absolute; top: 0;right:0%; width:50%; height: 100%;background:url("../img/2nd/parallelogram02.png") no-repeat;background-position: 0% 50%;background-size: auto 100%;z-index:-1} #crystal_o #products_list .title{position:relative;} #crystal_o #products_list .title::before{content: '';position: absolute; bottom: 150%;left:50%;transform: translateX(-50%); width:1px; height: 78px;background:#6cbabc;} #crystal_o #products_list .title .eng{margin:0;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;color: #6cbabc;text-align: center;} #crystal_o #products_list .title h4{margin:0 0 40px 0;padding: 0;font-size: 26px;letter-spacing:4px;text-align: center;color: #323333;font-weight: 600} #crystal_o #products_list .inner{width:80%;margin:0 auto;padding: 0px 0;} #crystal_o #products_list .inner .unit{width:100%;margin-bottom:10px} #crystal_o #products_list .inner .unit a{position:relative;display:block;width: 100%;aspect-ratio:3.2/1; background:white;padding: 0px 0px;color:#323333;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #crystal_o #products_list .inner .unit a::before { content: ""; position: absolute; top: 0;left: 80%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b3ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #crystal_o #products_list .inner .unit a:hover::before { width: 105%; left: 0;} #crystal_o #products_list .inner .unit a:hover::after{left: 92%;transition: left 0.2s ease-out;} #crystal_o #products_list .inner .unit a .text_area{ position: absolute; top: 15%;/*transform: translateY(-50%);*/left:10%; z-index: 2; transition: color 0.3s ease;} #crystal_o #products_list .inner .unit a .text_area .name01{display:block;font-size: 20px;letter-spacing: 1px;} #crystal_o #products_list .inner .unit a .text_area .name02{display:block;font-size: 34px;letter-spacing: 1px;margin-bottom: 8px} #crystal_o #products_list .inner .unit a .text_area .fs{font-size: clamp(22px, 2.3vw, 27px);letter-spacing: 0px;} #crystal_o #products_list .inner .unit a .text_area .more{position:relative;font-size: 14px;letter-spacing:0;color: #1fa3ad} #crystal_o #products_list .inner .unit a .text_area .more::after{content:"\f105";position: absolute;top: 50%;transform: translateY(-50%);left: 110%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;transition: left 0.2s ease-out, color 0.3s ease;} #crystal_o #products_list .inner .unit a .text_area .photo_sub{ position: absolute; top: 38%;left:57%; width:60%;min-width: 150px;z-index: 1} #crystal_o #products_list .inner .unit a .text_area .photo_sub img{width: 100%;} #crystal_o #products_list .inner .unit a .photo{ position: absolute; top: 50%;transform: translateY(-50%);right:10%; width:26%; z-index: 1} #crystal_o #products_list .inner .unit a .photo img{width: 100%;transition:0.8s all;} #crystal_o #products_list .inner .unit a:hover .text_area{color: white} #crystal_o #products_list .inner .unit a:hover .more{color: white} #crystal_o #products_list .inner .unit a:hover .photo img{transform:scale(1.2,1.2); transition:0.5s all;} /*水晶発振器　各製品*/ #co_common #lead_area{position:relative;padding: 64px 0;} #co_common #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position: 40% 50%;background-size:auto 100%;z-index: -1} #co_common #lead_area .inner{ margin:0 auto 0px auto;} #co_common #lead_area .inner p{width:80%;margin:0 auto 0px auto;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;line-height: 2.0} #co_common #lead_area .inner p span{color: #11a196} #co_common #lead_area .inner_fs{background: white;width:90%;margin:0 auto 0px auto;padding: 56px 0px;} #co_common #lead_area .inner_fs .intro{position: relative;width:90%;margin:0 auto;padding: 0 0 20px 0; margin:0 auto 40px auto;} #co_common #lead_area .inner_fs .intro::before{content: '';position: absolute; bottom: 0%;left:0%; width:100%; height:3px;background:#e6e6e5} #co_common #lead_area .inner_fs .intro::after{content: '';position: absolute; bottom:0%;left:0%; width:10%; height:3px;background:linear-gradient(45deg, #00779c, #31b3ba)} #co_common #lead_area .inner_fs .intro p{position: relative;margin:0 auto 0px auto;padding: 0 0 0 32px;font-size: 18px;letter-spacing:1px;color: #323333;font-weight: 600;line-height: 1.5} #co_common #lead_area .inner_fs .intro p::before{content: '';position: absolute; top: 6%;left:0%; width:18px; height:18px;background:linear-gradient(45deg, #00779c, #31b3ba)} #co_common #lead_area .inner_fs .detail_area{width:90%;margin:0 auto} #co_common #lead_area .inner_fs .detail_area .unit{margin:0 auto 30px auto;} #co_common #lead_area .inner_fs .detail_area .unit h3{position: relative;margin:0 auto 10px auto;padding: 0 0 0 24px;font-size: clamp(16px, 1.0vw, 22px);letter-spacing:1px;color: #1fa3ad;font-weight: 600;line-height: 1.5} #co_common #lead_area .inner_fs .detail_area .unit h3::before{content: '';position: absolute; top: 50%;transform: translateY(-50%);left:0%; width:14px; height:14px;background:linear-gradient(45deg, #00779c, #31b3ba);border-radius: 50%} #co_common #lead_area .inner_fs .detail_area .unit p{margin:0 auto 0px auto;padding: 0 0 0 0px;font-size:16px;letter-spacing:1px;font-weight: 400;line-height: 1.5} main.ocxo #lead_area{position:relative;padding: 100px 0 !important;} main.ocxo #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position: 0% 50%;background-size:50% auto !important;z-index: -1} main.ocxo #lead_area .inner{ margin:0 auto 0px auto !important;} #co_common #example_group{background: white;width:88%;margin:0 auto 0px auto;padding:72px 0px;} #co_common #example_group .title_area{position: relative;display: flex;justify-content: flex-start;align-items:center;margin:0 auto 20px auto;padding: 0 0 16px 0 } #co_common #example_group .title_area .mark{margin-right:20px;background:linear-gradient(90deg, #00779c, #31b3ba);text-align: center;border-radius: 50px;font-size:13px;letter-spacing:1px;color: white;font-weight: 500;padding: 5px 30px} #co_common #example_group .title_area h3{margin:0 0 0px 0;padding: 0;font-size: 22px;letter-spacing:1px;color: #323333;font-weight: 500} #co_common #example_group .title_area::before{content: '';position: absolute; bottom: 0;left:0%; width:100%; height: 3px;background:#e6e6e5} #co_common #example_group .title_area::after{content: '';position: absolute; bottom: 0;left:0%; width:10%; height: 3px;background:linear-gradient(90deg, #00779c, #31b3ba)} #co_common #example_group .detail_area{display: flex;justify-content: space-between;align-items:center;} #co_common #example_group .detail_area .photo{width: 36%;} #co_common #example_group .detail_area .photo img{width:100%;} #co_common #example_group .detail_area dl{width:60%;display: flex;flex-wrap: wrap;font-size: 15px;line-height: 1;letter-spacing: 1px;border-top: 1px solid #b6cdce} #co_common #example_group .detail_area dl dt{width:40%;background: #f7fcfc;margin: 0;padding: 12px 0 12px 3%;box-sizing: border-box;border-bottom: 1px solid #b6cdce;color: #000;font-weight: 500} #co_common #example_group .detail_area dl dd{width:60%;margin: 0;padding: 12px 0 12px 5%;box-sizing: border-box;border-bottom: 1px solid #b6cdce} #co_common #fs_image_group .inner{width:80%;margin:0 auto 0px auto;padding:72px 0;display: flex;} #co_common #fs_image_group .inner figure{width: 50%; margin:0;padding: 0;} #co_common #fs_image_group .inner figure img{width: 100%;height: 100%;object-fit: cover} #co_common #list_group{padding:70px 0 10px 0;background: #f7fcfc} #co_common #list_group .title{margin: 0px auto 30px auto} #co_common #list_group .title .eng{margin:0;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;color: #6cbabc;text-align: center;} #co_common #list_group .title h4{margin:0 0 0px 0;padding: 0;font-size: 26px;letter-spacing:4px;text-align: center;color: #323333;font-weight: 600} #co_common #list_group .unit_table {margin:0 auto 50px auto;} #co_common #list_group .unit_table h5{width:90%;background:linear-gradient(90deg, #00779c, #31b3ba);margin:0 auto 2px auto;padding:3px 0;font-size:clamp(16px, 0.9vw, 24px);letter-spacing:1px;text-align: center;color: white;font-weight: 500} #co_common #list_group .unit_table .inner{width:90%;margin: 0 auto;overflow-x: scroll;} #co_common #list_group .unit_table .inner table{border-collapse: collapse;width:1000px;margin: 0 auto;background: white} #co_common #list_group .unit_table .inner table thead{width: 100%;border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;} #co_common #list_group .unit_table .inner table thead th{padding:10px 0;color: #000;font-size: 14px;letter-spacing:1px;font-weight: 500;background:#f2f2f2 !important;text-align: center} #co_common #list_group .unit_table .inner table tbody tr{border-bottom:1px solid #cccccc;} #co_common #list_group .unit_table .inner table tbody td{padding:8px 0;font-size: 14px;letter-spacing:1px;text-align: center;vertical-align: middle} #co_common #list_group .unit_table .inner table tbody td.mark{font-size: 30px;color:#00779c} #co_common #list_group .unit_table .inner table tbody td .mark{font-size: 30px;color:#00779c;line-height: 1} #co_common #list_group .unit_table .inner table tbody td a{position: relative;display:block;background:#00779c;max-width:80px;margin:0 auto;padding: 5px 0px;text-align: center;color: white;text-decoration: none;border-radius: 5px;font-size: 12px;letter-spacing: 0} #co_common #list_group .unit_table .inner table tbody td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size:9px;} #co_common #list_group .unit_table .inner table tbody td a:hover{background: #00c1c6} #co_common #list_group .unit_table .note{width:90%;margin:20px auto 0 auto;padding: 0;font-size: 14px;letter-spacing:1px;text-align: center;} /*水晶振動子*/ #crystal_r #lead_area{position:relative;} #crystal_r #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position:-400px 50%;background-size:auto 100%;z-index: -1} #crystal_r #lead_area .inner{ margin:0 auto;padding: 100px 0} #crystal_r #lead_area .inner h3{margin:0 0 40px 0;padding: 0;font-size: 30px;letter-spacing:4px;text-align: center;color: #323333;font-weight: 600} #crystal_r #lead_area .inner p{width:80%;margin:0 auto 56px auto;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;line-height: 2.0} #crystal_r #lead_area .inner p span{color: #11a196} #crystal_r #lead_area .inner .photo{width:84%;aspect-ratio:2.6/1; margin:0 auto;text-align: center;overflow:hidden;} #crystal_r #lead_area .inner .photo img{width: 100%;} #crystal_r #products_list{position:relative;padding: 70px 0} #crystal_r #products_list::before{content: '';position: absolute; top: 0;right:0%; width:100%; height: 100%;background:#e9f3f4;z-index: -2} #crystal_r #products_list::after{content: '';position: absolute; top: 0;right:0%; width:50%; height: 100%;background:url("../img/2nd/parallelogram02.png") no-repeat;background-position: 0% 50%;background-size: auto 100%;z-index:-1} #crystal_r #products_list .title{position:relative;} #crystal_r #products_list .title::before{content: '';position: absolute; bottom: 150%;left:50%;transform: translateX(-50%); width:1px; height: 78px;background:#6cbabc;} #crystal_r #products_list .title .eng{margin:0;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;color: #6cbabc;text-align: center;} #crystal_r #products_list .title h4{margin:0 0 40px 0;padding: 0;font-size: 26px;letter-spacing:4px;text-align: center;color: #323333;font-weight: 600} #crystal_r #products_list .inner{width:94%;margin:0 auto;padding: 0px 0;display: flex;flex-wrap: wrap;justify-content: space-between} #crystal_r #products_list .inner .unit{width:49%;margin-bottom:20px} #crystal_r #products_list .inner .unit a{position:relative;display:block;width: 100%;aspect-ratio:2.9/1; background:white;padding: 0px 0px;color:#323333;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #crystal_r #products_list .inner .unit a::before { content: ""; position: absolute; top: 0;left: 80%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b3ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #crystal_r #products_list .inner .unit a:hover::before { width: 105%; left: 0;} #crystal_r #products_list .inner .unit a:hover::after{left: 92%;transition: left 0.2s ease-out;} #crystal_r #products_list .inner .unit a .text_area{ position: absolute; top: 50%;transform: translateY(-50%);left:10%; z-index: 2; transition: color 0.3s ease;} #crystal_r #products_list .inner .unit a .text_area .name01{display:block;font-size: 20px;letter-spacing: 1px;} #crystal_r #products_list .inner .unit a .text_area .more{position:relative;font-size: 14px;letter-spacing:0;color: #1fa3ad} #crystal_r #products_list .inner .unit a .text_area .more::after{content:"\f105";position: absolute;top: 50%;transform: translateY(-50%);left: 110%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;transition: left 0.2s ease-out, color 0.3s ease;} #crystal_r #products_list .inner .unit a:hover .text_area{color: white} #crystal_r #products_list .inner .unit a:hover .more{color: white} #crystal_r #products_list .inner .unit a .photo{ position: absolute; top: 50%;transform: translateY(-50%);right:5%; width:34%; z-index: 1} #crystal_r #products_list .inner .unit a .photo img{width: 100%;height: 100%;object-fit: cover;object-position: 50% 0} /*水晶振動子　各製品*/ #cr_common #lead_area{position:relative;padding: 64px 0;} #cr_common #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position: 0% 50%;background-size:50% auto;z-index: -1} #cr_common #lead_area .inner{ margin:0 auto 0px auto;} #cr_common #lead_area .inner p{width:80%;margin:0 auto 0px auto;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;line-height: 2.0} #cr_common #lead_area .inner p span{color: #11a196} #cr_common #list_group{padding:80px 0 10px 0;background: #f7fcfc} #cr_common #list_group .title{margin: 0px auto 30px auto} #cr_common #list_group .title .eng{margin:0;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;color: #6cbabc;text-align: center;} #cr_common #list_group .title h4{margin:0 0 0px 0;padding: 0;font-size: 26px;letter-spacing:4px;text-align: center;color: #323333;font-weight: 600} #cr_common #list_group .unit_table {margin:0 auto 50px auto;} #cr_common #list_group .unit_table h5{width:90%;background:linear-gradient(90deg, #00779c, #31b3ba);margin:0 auto 2px auto;padding:3px 0;font-size:clamp(16px, 0.9vw, 24px);letter-spacing:1px;text-align: center;color: white;font-weight: 500} #cr_common #list_group .unit_table .inner{width:90%;margin: 0 auto;overflow-x: scroll;} #cr_common #list_group .unit_table .inner table{border-collapse: collapse;width:900px;margin: 0 auto;background: white} #cr_common #list_group .unit_table .inner table thead{width: 100%;border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;} #cr_common #list_group .unit_table .inner table thead th{padding:10px 0;color: #000;font-size: 14px;letter-spacing:1px;font-weight: 500;background:#f2f2f2 !important;} #cr_common #list_group .unit_table .inner table tbody tr{border-bottom:1px solid #cccccc;} #cr_common #list_group .unit_table .inner table tbody td{padding:8px 0;font-size: 14px;letter-spacing:1px;text-align: center;vertical-align: middle} #cr_common #list_group .unit_table .inner table tbody td a{position: relative;display:block;background:#00779c;max-width:80px;margin:0 auto;padding: 5px 0px;text-align: center;color: white;text-decoration: none;border-radius: 5px;font-size: 12px;letter-spacing: 0} #cr_common #list_group .unit_table .inner table tbody td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size:9px;} #cr_common #list_group .unit_table .inner table tbody td a:hover{background: #00c1c6} /*弊社の特徴*/ #features #lead_area{position:relative;} #features #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position:20% 50%;background-size:auto 100%;z-index: -1} #features #lead_area .inner{ width:80%;margin:0 auto;padding: 100px 0} #features #lead_area .inner p{margin:0;padding: 0;font-size: clamp(16px, 1.0vw, 18px);letter-spacing:1px;line-height: 2.0} #features #lead_area .inner p span{color: #11a196} #features #list_group{position:relative;padding: 56px 0 30px 0} #features #list_group::before{content: '';position: absolute; top: 0;right:0%; width:100%; height: 100%;background:#e9f3f4;z-index: -2} #features #list_group::after{content: '';position: absolute; top: 0;right:0%; width:50%; height: 100%;background:url("../img/2nd/parallelogram02.png") no-repeat;background-position: 0% 50%;z-index:-1} #features #list_group .title{position:relative;} #features #list_group .title::before{content: '';position: absolute; bottom: 150%;left:50%;transform: translateX(-50%); width:1px; height: 78px;background:#6cbabc;} #features #list_group .title .sub{margin:0;padding: 0;font-size: 30px;letter-spacing:1px;color: #323333;text-align: center;font-weight: 600} #features #list_group .title h3{margin:0 0 30px 0;padding: 0;font-size: 40px;letter-spacing:2px;text-align: center;color: #00889e;font-weight: 600;line-height: 1.2} #features #list_group .title h3 span{display:block;font-size: 22px;} #features #list_group .inner{width:70%;margin:0 auto;padding: 0px 0;} #features #list_group .inner .unit{margin-bottom:5px} #features #list_group .inner .unit a{position:relative;display:block;background:#1fa3ad;padding: 38px 0px 28px 00px;color: white;font-size: 17px;letter-spacing: 1px;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #features #list_group .inner .unit a::before { content: ""; position: absolute; top: 0;left: 86%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b3ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #features #list_group .inner .unit a:hover::before { width: 105%; left: 0;} #features #list_group .inner .unit a::after{content:"\f107";position: absolute;top:50%;transform:translateY(-50%);left: 92%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 16px; transition: left 0.2s ease-out, color 0.3s ease;} #features #list_group .inner .unit a:hover::after{left: 92%;transition: left 0.2s ease-out;} #features #list_group .inner .unit a span{ position: absolute; top: 50%;transform: translateY(-50%);left: 16px; z-index: 1; transition: color 0.3s ease;padding-right: 32px;} #features #case_group{padding: 56px 0 56px 0;background: #f5fcfb} #features #case_group .case{width:95%;margin:0 auto 40px auto;padding: 40px 40px;background: white;box-sizing: border-box} #features #case_group .case .title{position: relative;display: flex;justify-content: flex-start;align-items:center;margin:0 auto 30px auto;padding: 0 0 16px 10px } #features #case_group .case .title::before{content: '';position: absolute; bottom: 0;left:0%; width:100%; height: 3px;background:#e6e6e5} #features #case_group .case .title::after{content: '';position: absolute; bottom: 0;left:0%; width:15%; height: 3px;background:linear-gradient(90deg, #00779c, #31b3ba)} #features #case_group .case .title .mark{position: relative;margin-right:20px;width:70px;/*background:linear-gradient(90deg, #00779c, #31b3ba);text-align: center;border-radius: 50px;*/padding: 14px 14px;} #features #case_group .case .title .mark::before { content: ""; position: absolute; top: 0;left:0%; width:100%; height: 100%;background:linear-gradient(90deg, #00779c, #31b3ba);transform: skewX(-25deg);z-index: 0} #features #case_group .case .title .mark span{ position: absolute; top: 50%;transform: translate(-50%,-50%);left:50%; font-size:14px;letter-spacing:1px;color: white;font-weight: 600;z-index: 1;} #features #case_group .case .title h4{margin:0 0 0px 0;padding: 0;font-size:22px;letter-spacing:1px;color: #323333;font-weight: 500} #features #case_group .case p{width:95%;margin:0 auto 0px auto;padding: 0;font-size: clamp(16px, 0.9vw, 18px);letter-spacing:1px;line-height: 1.75;} #features #case_group .case .spec{width:90%;margin:32px auto 32px auto;} #features #case_group .case .spec dl{width:100%;display: flex;flex-wrap: wrap;font-size: 14px;letter-spacing: 1px;} #features #case_group .case .spec dl dt{width:100%;margin: 0;padding:3px 0;} #features #case_group .case .spec dl dt span{ background: linear-gradient(to right, #23b2d2, #168df2); display:inline-block;width:20%;padding: 3px 20px;border-radius: 50px;color: white;text-align: center;font-weight:500;} #features #case_group .case .spec dl dd{width: 100%;margin: 0 auto 10px auto;padding:3px 0 3px 3%;box-sizing: border-box;} #features #case_group .case .banner{width:90%;margin:30px auto 0 auto} #features #case_group .case .banner a{display: block;;position: relative; background:#004c60; padding:32px 0px 26px 00px;color: white;font-size:17px;letter-spacing: 2px;font-weight: 500;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #features #case_group .case .banner a::before { content: ""; position: absolute; top: 0;left: 86%; width:30%; height: 100%;background:linear-gradient(90deg, #00313a, #1e6cb2);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #features #case_group .case .banner a:hover::before { width: 105%; left: 0;} #features #case_group .case .banner a::after{content:"\f105";position: absolute;top:50%;transform:translateY(-50%);left: 92%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 12px; transition: left 0.2s ease-out, color 0.3s ease;} #features #case_group .case .banner a:hover::after{left: 92%;transition: left 0.2s ease-out;} #features #case_group .case .banner a span{ position: absolute; top: 50%;transform: translateY(-50%);left: 40px; z-index: 1; transition: color 0.3s ease;} /*弊社の特徴01（カスタムスペックの対応）*/ #features01 #lead_area{position:relative;} #features01 #lead_area::before{content: '';position: absolute; top: 0;left:10%; width:50%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position: 50% 50%;background-size: cover;z-index: -1} #features01 #lead_area .inner{ margin:0 auto;padding: 64px 0} #features01 #lead_area .inner p{width:80%;margin:0 auto 0px auto;padding: 0;font-size: clamp(16px, 1.1vw, 20px);letter-spacing:1px;line-height: 2.0;color: #1fa3ad;font-weight: 600} #features01 #case_wrapper{background:#e9f3f4;padding: 64px 0 24px 0} #features01 #case_wrapper .case{width:90%;margin:0 auto 40px auto;padding:40px 40px 24px 40px;box-sizing: border-box;background: white;} #features01 #case_wrapper .case .title{margin:0 auto 24px auto;} #features01 #case_wrapper .case .title .mark{width:100px;margin:0 auto 10px 0;padding:6px 0;background: #1fa3ad;border-radius: 20px;text-align: center;color: white;font-size: 13px;letter-spacing:1px;line-height: 1} #features01 #case_wrapper .case .title h3{margin:0 auto 0px auto;padding: 0;font-size: 20px;letter-spacing:2px;line-height: 2.0;color: #4d4d4d;font-weight: 500} #features01 #case_wrapper .case .inner{display: flex;justify-content: space-between;width: 100%;} #features01 #case_wrapper .case .inner .photo{width: 30%;margin: 0;padding: 0;} #features01 #case_wrapper .case .inner .photo img{width:100%;aspect-ratio:1.5/1;object-fit: cover} #features01 #case_wrapper .case .inner .detail_group{width: 66%;} #features01 #case_wrapper .case .inner .detail_group .unit{margin:0 auto 16px auto;} #features01 #case_wrapper .case .inner .detail_group .unit h4{position: relative;margin:0 auto 6px auto;padding:0 0 0 24px;font-size: clamp(16px, 1.0vw, 20px);letter-spacing:1px;line-height: 1.75;color: #1fa3ad;font-weight: 500} #features01 #case_wrapper .case .inner .detail_group .unit h4::before{content:'◼︎';position: absolute; top: 0;left: 0%;} #features01 #case_wrapper .case .inner .detail_group .unit p{margin:0 auto 0px auto;padding: 0;font-size: 15px;letter-spacing:0.5px;line-height: 1.75;} #features01 #case_wrapper .case .inner .detail_group .unit p span{color: #1fa3ad;} #features01 #case_wrapper .case .inner .detail_group .unit .note{background: #f5fcfb;margin:40px auto 10px auto;padding:24px 0 24px 0;} #features01 #case_wrapper .case .inner .detail_group .unit .note > div{display: flex;justify-content: space-between;width:90%;margin: 0 auto;text-align: center} #features01 #case_wrapper .case .inner .detail_group .unit .note div .common .name{padding: 15px 0;font-size: 14px;letter-spacing:0.5px;line-height: 1.5;color:white;} #features01 #case_wrapper .case .inner .detail_group .unit .note div .common .value{background: white;padding: 12px 0;font-size: 17px;letter-spacing:1px;line-height: 1.5;} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special{position: relative;width: 50%;border: 2px solid #1fa3ad;box-sizing: border-box} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special::before{content:'消費電流87%カット!';position: absolute; top: -60px;left: 50%;transform: translateX(-50%);width: 100%;padding: 12px 0;background:#f7ea00;border-radius: 8px;font-weight: 600;letter-spacing: 1px;color: #4d4d4d;font-size: 15px;} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special::after{content:'';position: absolute; top: -15px;left: 50%;transform: translateX(-50%);background:#f7ea00;width:30px; aspect-ratio:1.2/1; clip-path: polygon(0 0, 100% 0%, 50% 100%);} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special .name{background: #1fa3ad;font-weight: 600} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special .value{font-weight: 600;color: #1fa3ad} #features01 #case_wrapper .case .inner .detail_group .unit .note div .general{width: 48%;border-bottom: 1px solid #b3b3b3;box-sizing: border-box} #features01 #case_wrapper .case .inner .detail_group .unit .note div .general .name{background: #b3b3b3;font-weight: 400} #features01 #case_wrapper .case .inner .detail_group .unit .note div .general .value{color: #666666} #features01 #case_wrapper .case .inner .detail_group .unit dl{width:100%;display: flex;flex-wrap: wrap;font-size: 13px;letter-spacing: 0.5px;border-top: 1px solid #c3e0df} #features01 #case_wrapper .case .inner .detail_group .unit dl dt{width:30%;margin: 0;padding:10px 0 10px 2%;background: #f2fcfa;box-sizing: border-box;border-bottom: 1px solid #c3e0df} #features01 #case_wrapper .case .inner .detail_group .unit dl dd{width: 70%;margin: 0;padding:10px 0 10px 2%;box-sizing: border-box;border-bottom: 1px solid #c3e0df} #features01 #case_wrapper .case .inner .detail_group .unit .note h5{margin:0 auto 10px auto;padding:0;font-size: clamp(16px, 1.0vw, 20px);letter-spacing:1px;line-height: 1.75;color: #1fa3ad;font-weight: 600;text-align: center} #features01 #case_wrapper .case .inner .detail_group .unit .note .case02_graph{width: 90%;margin: 0 auto;background: white;padding: 16px;box-sizing: border-box} #features01 #case_wrapper .case .inner .detail_group .unit .note .case02_graph img{width: 100%;} /*弊社の特徴02（長期生産サポート）*/ #features02 #lead_area{position:relative;} #features02 #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position: 0% 50%;background-size:auto 100%;z-index: -1} #features02 #lead_area .inner{ margin:0 auto;padding: 64px 0;} #features02 #lead_area .inner p{width:80%;margin:0 auto 30px auto;padding: 0;font-size: clamp(16px, 1.1vw, 20px);letter-spacing:2px;line-height: 2.0;} #features02 #lead_area .inner p span{color: #1fa3ad;} #features02 #lead_area .inner .feature_list{width:90%;margin:0 auto 0px auto;padding:25px 0 15px 0;background: white} #features02 #lead_area .inner .feature_list h3{width: 20%;min-width:200px; margin:0 auto 20px auto;padding:6px 0px;box-sizing: border-box;font-size: clamp(15px,0.6vw, 18px);letter-spacing:1px;color:white;font-weight: 500;background:linear-gradient(90deg, #4facb4, #067995);text-align: center;border-radius:30px;} #features02 #lead_area .inner .feature_list ul{width: 85%;margin: 0 auto;padding:0px 0px;list-style: none} #features02 #lead_area .inner .feature_list ul li{position: relative;margin: 0 auto 10px auto;padding: 0 0 0 28px;font-size: clamp(17px,0.8vw, 22px);letter-spacing:1px;} #features02 #lead_area .inner .feature_list ul li::before{content:'';position: absolute; top: 7px;left:0%; width:10px; height: 10px;background:linear-gradient(90deg, #4facb4, #067995);} #features02 #list_group{/*background:#f5fcfb;*/padding: 64px 0 30px 0} #features02 #list_group .unit_table{width: 90%;margin:0 auto 50px auto} #features02 #list_group .unit_table h4{margin:0 auto 2px auto;padding:6px 0px;font-size: clamp(17px,1.9vw, 22px);letter-spacing:1px;color:white;font-weight: 500;background:linear-gradient(90deg, #00779c, #31b3ba);text-align: center} #features02 #list_group .unit_table .inner table{border-collapse: collapse;width: 100%;background: white} #features02 #list_group .unit_table .inner table tr{border-bottom: 1px solid #c2d0d3;} #features02 #list_group .unit_table .inner table th{font-weight:600;padding:6px 0%;font-size: 14px;letter-spacing: 0.5px;background:#f2f2f2;border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;} #features02 #list_group .unit_table .inner table th:first-of-type{width: 15%} #features02 #list_group .unit_table .inner table th:nth-of-type(2){width: 30%} #features02 #list_group .unit_table .inner table th:nth-of-type(3){width: 40%} #features02 #list_group .unit_table .inner table th:last-of-type{width: 15%} #features02 #list_group .unit_table .inner table td{padding:8px 0%;font-size: 13px;letter-spacing: 0.5px;line-height: 1.55;vertical-align: middle;text-align: center} #features02 #list_group .unit_table .inner table td:nth-of-type(3){text-align: left} #features02 #list_group .unit_table .inner table td img{width: 35%;} #features02 #list_group .unit_table .inner table td a{position: relative; display:block;background:#00779c;color:white;text-decoration: none;width: 85%;margin: 0 auto;padding:6px 0%;border-radius: 5px} #features02 #list_group .unit_table .inner table td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;font-size: 12px; } #features02 #list_group .unit_table .inner table td a:hover{background:#00c1c6;} /*会社概要*/ #company_profile{} #company_profile #all_wrapper{ } #company_profile #all_wrapper .container{display: flex;justify-content: space-between;gap: 24px; width: 100%;margin: auto;} #company_profile #all_wrapper .container .main{ width: 68%; padding:70px 5% 0px 0;} #company_profile #all_wrapper .container .main section{ width: 100%;margin: 0 auto 80px auto} #company_profile #all_wrapper .container .main section .inner .title{margin:0 auto 40px auto;color: #00779c} #company_profile #all_wrapper .container .main section .inner .title h3, #company_profile #all_wrapper .container .main section .inner .title h5{position: relative;margin:0;padding:32px 0 0 0; font-size: 24px;letter-spacing: 1px;font-weight: 500} #company_profile #all_wrapper .container .main section .inner .title h3::before, #company_profile #all_wrapper .container .main section .inner .title h5::before{content: '';position: absolute;top: 0%;left:0%;background:linear-gradient(90deg, #005b90, #12dcdd);width:100px;height: 3px;} #company_profile #all_wrapper .container .main section .inner .title .eng{margin:0;padding: 0;font-size: 16px;letter-spacing: 1px;font-weight: 600;color: #1fa3c3} #company_profile #all_wrapper .container .main #sec01 .logo{width: 30%;min-width: 260px;margin:0 auto 30px auto;padding: 0;} #company_profile #all_wrapper .container .main #sec01 .logo img{width:100%;} #company_profile #all_wrapper .container .main #sec01 p{width:100%;margin:0 auto;padding:0px 0 0 0; font-size:15px;letter-spacing: 0.5px;line-height:1.75;} #company_profile #all_wrapper .container .main #sec02 .outline{/*background: #f7fcfc;*/padding: 00px;margin:0 auto 50px auto;} #company_profile #all_wrapper .container .main #sec02 .outline dl{width: 100%;margin:0 auto 0px auto;display: flex;flex-wrap: wrap; font-size: 15px;letter-spacing: 0.5px;line-height: 1.75;border-top: 1px solid #00779c;} #company_profile #all_wrapper .container .main #sec02 .outline dl dt{width:30%;margin: 0;padding:12px 0 12px 2%;border-bottom: 1px solid #00779c;color: #00779c;background:#f7fcfc;box-sizing: border-box} #company_profile #all_wrapper .container .main #sec02 .outline dl dd{width: 70%;margin: 0;padding:12px 0 12px 3%;border-bottom: 1px solid #00779c;box-sizing: border-box} #company_profile #all_wrapper .container .main #sec02 .office{width:100%;margin:0 auto 30px auto;padding:0px 0px 0px 0px;/*background:#f7fcfc;*/box-sizing: border-box} #company_profile #all_wrapper .container .main #sec02 .office .unit{margin: 0 auto 20px auto;padding: 30px 0px 0px 0px;background:#f2f7f7;} #company_profile #all_wrapper .container .main #sec02 .office .unit h4{width:80%;margin: 0 auto 16px auto;padding:3px 0px; font-size: 16px;letter-spacing:1px;line-height: 1.8;color: white;text-align: center;font-weight: 500;background:linear-gradient(90deg, #269bae, #1b7eb5);border-radius: 50px} #company_profile #all_wrapper .container .main #sec02 .office .unit address{width:80%;margin: 0 auto 20px auto;color:#000;font-style: normal;font-size:15px;letter-spacing: 0.5px;line-height: 1.4;} #company_profile #all_wrapper .container .main #sec02 .office .unit .google_map iframe{border: 0;outline: 0;width: 100%;aspect-ratio:2.0/1} #company_profile #all_wrapper .container .main #sec03 #timeline .unit{position: relative;width: 100%%; margin:0 auto 50px auto;padding:0px 0 0 40px;box-sizing: border-box ;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit::after{content: '';position: absolute;top:40px;left:7px;background:#cccccc;width:1px;height:90%;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .year{ position: relative;margin:0 auto 16px auto;font-size: 19px;letter-spacing: 1px;color: #1fa3ad;font-weight: 500;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .year::before{content: '';position: absolute;top:50%;transform: translateY(-50%);left:-40px;background:linear-gradient(90deg, #005b90, #12dcdd);width:14px;height: 14px;border-radius: 10px} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .date_area{ margin:0 auto 20px auto;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .date_area .date{margin:0 auto 5px auto;padding:0px 0 0 0; font-size: 15px;letter-spacing: 0.5px;line-height:1.75;color: #1fa3ad;font-weight: 500;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .date_area .text{margin:0 auto;padding:0px 0 0 0; font-size: clamp(14px,1.0vw, 16px);letter-spacing: 1px;line-height:1.75;} #company_profile #all_wrapper .container .main #sec04 .unit{margin:0 auto 32px auto;} #company_profile #all_wrapper .container .main #sec04 .unit h6{margin:0 auto 16px auto;padding:0px 0 10px 0; font-size: 18px;letter-spacing: 0.5px;font-weight: 500;color: #1fa3ad;border-bottom: 1px solid #1fa3ad} #company_profile #all_wrapper .container .main #sec04 .unit p{margin:0;padding:0px 0 0 0; font-size:15px;letter-spacing: 0.5px;line-height:1.75;} #company_profile #all_wrapper .container .main #sec04 .unit ol{margin:30px auto 30px auto;} #company_profile #all_wrapper .container .main #sec04 .unit ol li{margin:0 auto 10px auto;color:#000;font-size:15px;letter-spacing: 0.5px;line-height:1.55;} #company_profile #all_wrapper .container .main #sec04 .unit .sign{text-align:center; font-size: 14px;letter-spacing: 0.5px;} #company_profile #all_wrapper .container aside{ width: 27%;background: #f7f7f7;padding:64px 0 0px 0;} #company_profile #all_wrapper .container aside ul{ position: sticky; top: 100px;margin: 0;padding:0px 0 0px 0;list-style: none;} #company_profile #all_wrapper .container aside ul li{ margin: 0 0 1px 0;padding: 0; background:#52d5d0;} #company_profile #all_wrapper .container aside ul li a{position:relative;display:block;background:#2eb8bc;padding:50px 0px 30px 00px;color: white;font-size: 20px;letter-spacing: 1px;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #company_profile #all_wrapper .container aside ul li a::before { content: ""; position: absolute; top: 0;left: 86%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b4ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #company_profile #all_wrapper .container aside ul li a:hover::before { width: 105%; left: 0;} #company_profile #all_wrapper .container aside ul li a::after{content:"\f105";position: absolute;top:50%;transform:translateY(-50%);left: 92%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 16px; transition: left 0.2s ease-out, color 0.3s ease;} #company_profile #all_wrapper .container aside ul li a:hover::after{left: 90%;transition: left 0.2s ease-out;} #company_profile #all_wrapper .container aside ul li a > span{ position: absolute; top: 50%;transform: translateY(-50%);left: 20px; z-index: 1; transition: color 0.3s ease;font-size:16px;letter-spacing: 1px;font-weight: 500;} #company_profile #all_wrapper .container aside ul li a span span{display: block;font-size:11px;letter-spacing: 1px;font-weight: 500;} /*パートナー募集*/ #partner .sample{width:1000px;margin:100px auto 200px auto;} #partner .sample h3{margin:0 auto 20px auto;padding:0px 0 10px 0; font-size: clamp(20px,1.0vw, 25px);letter-spacing: 1px;font-weight: 500;color: #1fa3ad;border-bottom: 1px solid #1fa3ad} #partner #lead_area{position:relative;} #partner #lead_area::before{content: '';position: absolute; top: 0;left:10%; width:50%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position: 50% 50%;background-size: cover;z-index: -1} #partner #lead_area .inner{ width:90%;margin:0 auto;padding: 80px 0} #partner #lead_area .inner p{margin:0;padding: 0;font-size: 18px;letter-spacing:1px;line-height: 2.0;color: #0091a0;text-align: center;font-weight: 600} #partner #list_group{background:#e9f3f4;padding: 80px 0 64px 0} #partner #list_group .unit{margin: 0 auto 40px auto;} #partner #list_group .unit .title_area{width: 90%;margin: 0 auto 40px auto;} #partner #list_group .unit .title_area .inner{position:relative;width: 100%;aspect-ratio:6.5/1;border-radius: 10px;overflow: hidden} #partner #list_group .unit .title_area .inner .photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} #partner #list_group .unit .title_area .inner .photo::before{content:'';position: absolute;top:0%;left: 0;width: 100%;height: 100%;background: rgba(0,32,40,0.7) } #partner #list_group .unit .title_area .inner .photo::after{content:'';position: absolute;top:0%;left: 80%;width: 30%;height: 100%;transform: skewX(-25deg);background:linear-gradient(90deg, #52d5d0, #31b3ba);} #partner #list_group .unit .title_area .inner .photo img{width: 100%;height: 100%;object-fit: cover;} #partner #list_group .unit .title_area .inner .text{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;width: 100%;} #partner #list_group .unit .title_area .inner .text p{position:relative;margin: 0;padding:18px 0 0 0;font-size: 18px;letter-spacing: 1px;font-weight: 400;color:#00d1db;} #partner #list_group .unit .title_area .inner .text p::before{content:'Partner Support';position: absolute;top:0%;left: 50%;transform: translateX(-50%); font-size: 14px;letter-spacing: 1px;width: 100%;} #partner #list_group .unit .title_area .inner h3{margin: 0;padding: 0;font-size: 24px;letter-spacing: 1px;font-weight: 600;color: white;} #partner #list_group .unit .text_area{width: 80%;margin: 0 auto;} #partner #list_group .unit .text_area p{font-size:15px;letter-spacing: 0.5px;font-weight: 400;line-height: 1.75} #partner #list_group .unit .text_area figure{margin:30px auto 0 auto;padding:0px 0 0 0;} #partner #list_group .unit .text_area figure img{width: 100%} #partner #contact_group .inner{position:relative;width: 100%;aspect-ratio:5.5/1;min-height: 350px} #partner #contact_group .inner .photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} #partner #contact_group .inner .photo::before{content:'';position: absolute;top:0%;left: 0;width: 100%;height: 100%;background: rgba(0,32,40,0.5) } #partner #contact_group .inner .photo::after{content:'';position: absolute;top:0%;right: 70%;width: 40%;height: 100%;transform: skewX(-25deg);background:linear-gradient(90deg, #52d5d0, #31b3ba);} #partner #contact_group .inner .photo img{width:100%;height: 100%;object-fit: cover;} #partner #contact_group .inner .text_area{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 90%;display: flex;justify-content: space-between;align-items: center} #partner #contact_group .inner .text_area .primary{width: 50%;} #partner #contact_group .inner .text_area .primary h4{margin: 0 auto 30px auto;padding: 0;font-size: 34px;letter-spacing: 1px;font-weight: 600;color: white;} #partner #contact_group .inner .text_area .primary p{margin: 0;padding: 0;font-size: 15px;letter-spacing: 0.5px;font-weight: 400;color: white;line-height: 1.75} #partner #contact_group .inner .text_area .banner{width: 40%;} #partner #contact_group .inner .text_area .banner a{position:relative;display:block;padding:30px 0px;text-decoration: none;background:linear-gradient(90deg, #1ca9ec, #00a1a5);transition: color 0.3s ease;overflow: hidden;} #partner #contact_group .inner .text_area .banner a span{ position: absolute; top: 50%;transform: translateY(-50%);left: 40px; z-index: 1; transition: color 0.3s ease;color: white;font-size: 15px;letter-spacing: 0.5px;} #partner #contact_group .inner .text_area .banner a::before {content:"";position:absolute;top:0;left:80%;width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b4ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #partner #contact_group .inner .text_area .banner a::after{content:"\f105";position: absolute;top:50%;transform:translateY(-50%);left: 90%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 16px; transition: left 0.2s ease-out, color 0.3s ease;} #partner #contact_group .inner .text_area .banner a:hover::before { width: 105%; left: 0;} #partner #contact_group .inner .text_area .banner a:hover::after{left: 92%;transition: left 0.2s ease-out;} } @media (max-width: 700px) { /*共通*/ main #title_common{width: 100%;margin: 0 auto;padding: 0 0 0px 0;} main #title_common .inner{position:relative;width: 100%; aspect-ratio:3.0/1;min-height:220px;margin: 0 auto;padding: 0} main #title_common .inner .photo{position: absolute; top: 0;left: 0%; width:100%; height: 100%;overflow: hidden;} main #title_common .inner .photo img{ width:100%; height: 100%;object-fit: cover;} main #title_common .inner .shape{position: absolute; top: 0;left: 0%; width:100%; height: 100%;overflow: hidden;} main #title_common .inner .shape img{ width:100%; height: 100%;object-fit: cover;} main #title_common .inner .text{position: absolute; top: 50%;transform: translateY(-50%);left: 5%; width:90%;padding-top: 20px } main #title_common .inner .text h2{margin:0;padding: 0;font-size: 20px;letter-spacing:0px;color: white;font-weight: 600;line-height: 1.2} main #title_common .inner .text .eng{margin:0;padding: 0;font-size:14px;letter-spacing:1px;color: white;} main #breadcrumbs{border-bottom:1px solid #e6e6e5;padding: 12px 0} main #breadcrumbs .inner{ width:90%;;margin:0 auto;font-size: 11px;letter-spacing:0px} main #breadcrumbs .inner a{position:relative;display: inline-block;color:#11a196;padding-right:6px;margin-right: 10px} main #breadcrumbs .inner a::before{content:"\f105";position: absolute;top: 50%;transform: translateY(-50%);left:100%;font-family: 'Font Awesome 5 Free';font-weight: 900;} main #breadcrumbs .inner a:hover{color:#323333;} /*main #breadcrumbs .inner span{color:#323333;}*/ /*他社品名互換表*/ #compatible #intro_group{padding: 30px 0 0 0;margin:0 auto 30px auto;} #compatible #intro_group .inner{} #compatible #intro_group .inner .title_area{width: 90%;margin: 0 auto 30px auto;display: flex;justify-content: space-between;align-items: center} #compatible #intro_group .inner .title_area .illustration{width: 28%;} #compatible #intro_group .inner .title_area .illustration img{width: 100%;} #compatible #intro_group .inner h3{position: relative;width:65%;margin:0 auto 0px auto;padding: 10px 10px;box-sizing: border-box;font-size: 16px;letter-spacing:0px;color:white;font-weight: 500;background:linear-gradient(90deg, #4facb4, #067995);text-align: center;border-radius: 10px;} #compatible #intro_group .inner h3 span{display:block;font-size:12px;} #compatible #intro_group .inner h3::before{content:"";position: absolute;top:100%;left:10%;width:10%; aspect-ratio:2.0/1;/* height: 100px;*/ clip-path:polygon(0% 0%, 100% 0%, 0% 100%);background:#4facb4} #compatible #intro_group .inner p{width: 80%;margin: 0 auto 0px auto;font-size:14px;letter-spacing: 0px;line-height: 1.5;color: #00779c;font-weight: 500} #compatible #table_group{} #compatible #table_group #search_area{width:90%;background: #f8fffe;border-top: 1px solid #c1dbd5;border-bottom: 1px solid #c1dbd5;padding:20px 0px;margin:0 auto 10px auto;box-sizing: border-box;} #compatible #table_group #search_area .eng{font-size:14px;letter-spacing:1px;color:#1fa3ad;font-weight: 400;text-align: center;} #compatible #table_group #search_area h4{margin:0 auto 10px auto;padding:0px 0px;font-size:16px;letter-spacing:1px;font-weight: 500;text-align: center;} #compatible #table_group #search_area .button_container{width: 96%;margin:0 auto;font-size: 0;} #compatible #table_group #search_area .button_container #compatibility_search{outline: 0;border:1px solid #1fa3ad;box-sizing: border-box;border-radius: 5px;width:98%;margin: 0px auto 10px auto;padding:10px 2%;font-size: 16px;letter-spacing:0px;background:white;box-sizing: border-box;} #compatible #table_group #search_area .button_container #button_search{outline: 0;border:none;border-radius: 5px;width:46%; margin: 0px 2% ;padding:10px 0%;font-size: 14px;letter-spacing:0px;background:#1fa3ad;color:white;} #compatible #table_group #search_area .button_container #button_search:hover{background: #00779c} #compatible #table_group #search_area .button_container #button_search_reset{outline: 0;border:none;border-radius: 5px;width:46%; margin: 0px 2% ;padding:10px 0%;font-size:14px;letter-spacing:0px;background:#7f858c;color:white;} #compatible #table_group #search_area .button_container #button_search_reset:hover{background: #00779c} #compatible #table_group .note{margin:0 auto 20px auto;font-size:16px;letter-spacing:1px;font-weight: 700;text-align: center;color:#1fa3ad} #compatible #table_group #scroll_group{width:90%; margin:0 auto;overflow-x: scroll;} #compatible #table_group #fixed_area{width:800px; margin:0 auto; } #compatible #table_group .kotei { position: sticky; top: 0px; z-index: 10; background:#f2f2f2;} #compatible #table_group #fixed_area table{width:100%; margin:0 auto;border-collapse: collapse;border-top: 1px solid #cccccc;} #compatible #table_group #fixed_area table th{position:relative;padding:6px 0%;font-weight: 300;font-size: 11px;letter-spacing: 0px;vertical-align: middle;text-align: center;border-bottom: 1px solid #cccccc;} #compatible #table_group #fixed_area table th::before{content: '';position:absolute;top:50%;left: 0%;transform: translateY(-50%);width: 1px;height: 100%;background:#c8c8c8; } #compatible #table_group #fixed_area table th.grid01::before{display: none} #compatible #table_group #fixed_area table th.grid01{width:12%;} #compatible #table_group #fixed_area table th.grid02{width:8%;} #compatible #table_group #fixed_area table th.grid03{width:6%;} #compatible #table_group #fixed_area table th.grid04{width:15%;} #compatible #table_group #fixed_area table th.grid04-1{width:7.5%;} #compatible #table_group #fixed_area table th.grid04-2{width:7.5%;} #compatible #table_group #fixed_area table th.grid05{width:15%;} #compatible #table_group #fixed_area table th.grid05-1{width:7.5%;} #compatible #table_group #fixed_area table th.grid05-2{width:7.5%;} #compatible #table_group #fixed_area table th.grid06{width:7%;} #compatible #table_group #fixed_area table th.grid07{width:10%;} #compatible #table_group #fixed_area table th.grid08{width:27%;} #compatible #table_group #fixed_area table th.grid08-1{width:17%;} #compatible #table_group #fixed_area table th.grid08-2{width:10%;} #compatible #table_group #list_area{width:800px; margin:0 auto;} #compatible #table_group #list_area table{border-collapse: collapse;width: 100%;} #compatible #table_group #list_area table tr{border-bottom: 1px solid #c8c8c8;} #compatible #table_group #list_area table td{padding:10px 0%;font-size: 12px;letter-spacing: 0px;vertical-align: middle;text-align: center} #compatible #table_group #list_area table td:nth-of-type(1){width:12%;} #compatible #table_group #list_area table td:nth-of-type(2){width:8%;} #compatible #table_group #list_area table td:nth-of-type(3){width:6%;} #compatible #table_group #list_area table td:nth-of-type(4){width:7.55%;} #compatible #table_group #list_area table td:nth-of-type(5){width:7.5%;} #compatible #table_group #list_area table td:nth-of-type(6){width:7.5%;} #compatible #table_group #list_area table td:nth-of-type(7){width:7.5%;} #compatible #table_group #list_area table td:nth-of-type(8){width:7%;} #compatible #table_group #list_area table td:nth-of-type(9){width:10%;} #compatible #table_group #list_area table td:nth-of-type(10){width:17%;} #compatible #table_group #list_area table td:nth-of-type(11){width:10%;} #compatible #table_group #list_area table td:nth-of-type(2){position:relative;} #compatible #table_group #list_area table td:nth-of-type(2)::before{content: '';position:absolute;top:50%;left: 0%;transform: translateY(-50%);width: 1px;height: 100%;background:#c8c8c8; } #compatible #table_group #list_area table td:nth-of-type(2)::after{content: '';position:absolute;top:50%;left: 100%;transform: translateY(-50%);width: 1px;height: 100%;background:#c8c8c8; } #compatible #table_group #list_area table td a{position: relative; display:block;background:#00779c;color:white;text-decoration: none;width: 90%;margin: 0 auto;padding:10px 0%;border-radius:3px;font-size: 12px;letter-spacing: 0} #compatible #table_group #list_area table td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;font-size: 6px; } #compatible #table_group #list_area table td a:hover{background:#00c1c6;} /*取扱製品*/ #handling_product #list_group{background:#f7fcfc;padding: 30px 0;} #handling_product #list_group .product_unit{width: 90%;;margin: 0 auto 0px auto;background:white;padding: 30px 5%;box-sizing: border-box} #handling_product #list_group .product_unit .lead_area{width: 100%;margin: 0 auto 20px auto;padding: 0 0 20px 0;border-bottom: 1px solid #e6e6e5} #handling_product #list_group .product_unit .lead_area .logo{width: 100%;margin: 0 auto 30px auto} #handling_product #list_group .product_unit .lead_area .logo img{width: 100%;} #handling_product #list_group .product_unit .lead_area h3{margin: 0 auto 0px auto;padding: 0;font-size: 18px;letter-spacing: 0px;font-weight: 600;} #handling_product #list_group .product_unit .lead_area .eng{margin: 0 auto 10px auto;padding: 0;font-size: 13px;letter-spacing: 0px;font-weight: 500;} #handling_product #list_group .product_unit .lead_area .category span{padding: 4px 20px;text-align: center;background:#e4f1f2;color:#00779c;border-radius: 50px;font-size: 11px;letter-spacing: 0px;font-weight: 500;} #handling_product #list_group .product_unit .detail_area{width:100%;margin: 0 auto} #handling_product #list_group .product_unit .detail_area .unit{margin: 0 auto 20px auto;} #handling_product #list_group .product_unit .detail_area .unit h4{margin: 0 auto 10px auto;padding: 0;font-size: 15px;letter-spacing: 0px;font-weight: 600;color:#1fa3ad} #handling_product #list_group .product_unit .detail_area .unit p{margin: 0 auto 0px auto;padding: 0;font-size: 14px;letter-spacing: 0px;line-height: 1.5} #handling_product #list_group .product_unit .detail_area .banner{margin: 20px auto 0px auto;} #handling_product #list_group .product_unit .detail_area .banner a{position:relative;display:block;background:#1fa3ad;padding:30px 0px 30px 00px;color:white;font-size:14px;letter-spacing:1px;text-decoration:none;overflow:hidden;transition: color 0.3s ease;} #handling_product #list_group .product_unit .detail_area .banner a::before { content: ""; position: absolute; top: 0;left: 80%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b3ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #handling_product #list_group .product_unit .detail_area .banner a:hover::before { width: 105%; left: 0;} #handling_product #list_group .product_unit .detail_area .banner a::after{content:"\f105";position: absolute;top:50%;transform:translateY(-50%);left: 90%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 14px; transition: left 0.2s ease-out, color 0.3s ease;} #handling_product #list_group .product_unit .detail_area .banner a:hover::after{left: 92%;transition: left 0.2s ease-out;} #handling_product #list_group .product_unit .detail_area .banner a span{ position: absolute; top: 50%;transform: translateY(-50%);left: 20px; z-index: 1; transition: color 0.3s ease;} /*ニュース*/ #news{} #news #all_group{width: 88%;margin: 0 auto;padding:30px 0 30px 0;} #news #all_group .list{margin: 0 auto 30px auto;} #news #all_group .list .unit{margin:0 auto 0px auto;padding:14px 0 14px 0; border-bottom: 1px solid #cecece;} #news #all_group .list .unit a{display: inline-block;font-size:14px;letter-spacing: 1px;line-height: 1.5;text-decoration: none;} #news #all_group .list .unit .date{width:100%;} #news #all_group .list .unit .date a{color: #0b758a;} #news #all_group .list .unit .title{width:100%;} #news #all_group .list .unit .title a{color:#323333;} #news #all_group .list .unit a:hover{color: #ccc;} #news #pager_area{margin:30px 0 0px 0;text-align: center;font-size:14px;letter-spacing: 0px;} #news #pager_area .current{color:#000;} #news #pager_area a{color:#00779c;} #news #pager_area a:hover{color:#38c0b1;} /*ニュース　詳細*/ #news_post{} #news_post #all_group{width: 88%;margin: 0 auto;padding:30px 0 0 0;} #news_post #all_group .post_area{margin:0px auto 30px auto;} #news_post #all_group .post_area .container .date{color: #00779c;font-size:14px;letter-spacing:0px;font-weight: 500;} #news_post #all_group .post_area .container h3{position:relative;margin: 10px auto 20px auto;padding: 0 0 10px 0;color: #000;font-size:17px;letter-spacing:1px;line-height: 1.5;font-weight: 500;} #news_post #all_group .post_area .container h3::before{content:'';position: absolute;bottom:0%;left: 0;width: 100%;height: 2px;background: #ccc } #news_post #all_group .post_area .container h3::after{content:'';position: absolute;bottom:0%;left: 0;width: 20%;height: 2px;background:linear-gradient(90deg, #175b98, #4fbdb8);} #news_post #all_group .post_area .container .text{color: #000;font-size:14px;letter-spacing: 0px;line-height: 1.5;} #news_post .post-navigation { margin:30px 0 20px 0;text-align: center;font-size:13px;letter-spacing: 0px; } #news_post .post-navigation a{color:#00779c; margin: 0 5px} #news_post .post-navigation a:hover{color:#38c0b1;} #news_post #all_group .post_area .back_archive a{display:block;width: 80%;margin: 0 auto;padding: 6px 0px; color:white;font-size:12px;letter-spacing:0;text-decoration: none;background:linear-gradient(90deg, #175b98, #4fbdb8);border-radius: 50px; text-align:center;} #news_post #all_group .post_area .back_archive a .fa-undo-alt{margin-right: 10px} #news_post #all_group .post_area .back_archive a:hover{background:linear-gradient(90deg, #52d5d0, #31b4ba);} /*ニュース aside*/ aside.post_style{} aside.post_style .box{margin:0 0 20px 0;} aside.post_style .box h4{position:relative;margin: 0 auto 10px auto;padding: 15px 0 0 0;font-size:14px;letter-spacing: 1px;color: #00404f;font-weight:600} aside.post_style .box h4::before{content:'';position: absolute;top:0%;left: 0;width: 100%;height: 2px;background: #ccc } aside.post_style .box h4::after{content:'';position: absolute;top:0%;left: 0;width: 20%;height: 2px;background:linear-gradient(90deg, #52d5d0, #31b4ba);} aside.post_style .box ul{margin: 0 auto;padding: 0px 0;list-style: none} aside.post_style .box ul li{margin: 0 auto 5px auto;padding: 0px 0;} aside.post_style .box ul li a{color: #00404f;font-size:13px;letter-spacing: 0px;line-height: 1.5;} aside.post_style .box ul li a:hover{color: #ccc;} aside.post_style .box .comment-author-link{display: none;} /*お問い合わせ*/ #contact #lead_area{position:relative;} #contact #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position:50% 50%;background-size:auto 100%;z-index: -1} #contact #lead_area .inner{ margin:0 auto;padding:40px 0} #contact #lead_area .inner p{width:80%;margin:0 auto 0px auto;padding: 0;font-size:14px;letter-spacing:0px;line-height: 1.7;color: #00889e;font-weight: 600;} #contact #lead_area .inner p br{display:none} #contact .tel_group{width:80%;margin:30px auto 30px auto;padding: 20px 10px 20px 10px;background:#f5fcfb;border-top: 1px solid #a6c9c9;border-bottom: 1px solid #a6c9c9;text-align: center;} #contact .tel_group h3{ position: relative;margin:0px auto 20px auto;padding:0px 0 10px 0;font-size:18px;letter-spacing:0px;font-weight: 600;color:#00889e } #contact .tel_group h3::before{content: '';position: absolute;bottom: 0px;left:50%;transform: translateX(-50%);background:#00889e;width:20px;height:1px;} #contact .tel_group .open{ margin:0px auto 20px auto;padding:0;font-size:15px;letter-spacing:0px;font-weight: 600;line-height: 1.5} #contact .tel_group .open span{display:block;font-size: 12px;margin:5px auto 0px auto;} #contact .tel_group .number{margin: 0 auto 20px auto} #contact .tel_group .number a{ display: block; margin:0px auto 0px auto;padding:0;font-size:20px;letter-spacing:0px;line-height: 1;text-decoration: none;color:#00889e;font-weight: 500} #contact .tel_group .number a span{display: block;color: white; margin:0px auto 10px auto;padding:3px 0px;background: #00889e;font-size:14px;letter-spacing:1px;border-radius: 20px;} #contact .tel_group .fax{margin:0px auto 0px auto;padding:0;font-size:20px;letter-spacing:0px;line-height: 1;text-decoration: none;color:#00889e;font-weight: 500} #contact .tel_group .fax span{display: block;color: white; margin:0px auto 10px auto;padding:3px 0px;background: #00889e;font-size:14px;letter-spacing:1px;border-radius: 20px;} #contact #form_wrapper{width:85%;margin:0px auto 20px auto;} #contact #form_wrapper table{border-collapse: collapse;width: 100%;margin: 0 auto 10px auto} #contact #form_wrapper table tr{border-top: 1px solid #cccccc} #contact #form_wrapper table tr th{display: inline-block;width:100%;padding: 12px 0 8px 0;font-size: 14px;letter-spacing:0px;text-align: left;color:#000;font-weight: 500} #contact #form_wrapper table tr td{display: inline-block;width:100%;padding: 0px 0 12px 0%;font-weight:500;font-size: 14px;letter-spacing: 0px;} #contact #form_wrapper table tr td .radio_area{margin-bottom:10px;font-size: 14px;letter-spacing:0px;} #contact #form_wrapper .required{margin-left: 5px;padding: 3px 5px;background:#00889e;color: white;font-size: 11px;letter-spacing: 0;} #contact #form_wrapper input[type=text], #contact #form_wrapper input[type=tel], #contact #form_wrapper input[type=email], #contact #form_wrapper textarea{outline: 0;border:1px solid #abc4c6;width:96%; margin:0px 0 ;padding:5px 2%;font-size: 16px;line-height:1.5;letter-spacing:0px;background:#f5fcfb;} #contact #form_wrapper .short{width:50% !important;margin-bottom: 10px !important;} #contact #form_wrapper textarea{height:200px;} #contact #form_wrapper input[type="radio"] {position: relative;width: 20px;height:20px;border: 1px solid #00889e;border-radius: 50%;vertical-align: -8px;-webkit-appearance: none; -moz-appearance: none; appearance: none;} #contact #form_wrapper input[type="radio"]:checked:before {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width:12px;height:12px;border-radius: 50%; background: #00889e; content: '';} #contact #form_wrapper input[type="checkbox"] {position: relative;width: 20px;height:20px;border: 1px solid #00889e;vertical-align: -5px;-webkit-appearance: none; -moz-appearance: none; appearance: none;} #contact #form_wrapper input[type="checkbox"]:checked:before { position: absolute; top: 1px; left: 5px; transform: rotate(50deg); width: 6px; height: 10px; border-right:3px solid #00889e; border-bottom:3px solid #00889e; content: '';} #contact #form_wrapper .pp{padding: 16px 0;border-top: 1px solid #cccccc;} #contact #form_wrapper .pp p{ margin:0px auto 10px auto;padding:0;font-size: 14px;letter-spacing:0px;text-align: center} #contact #form_wrapper .pp p a{color:#00889e;} #contact #form_wrapper .pp p a:hover{color:#2bbcbc;} #contact #form_wrapper .pp .check_area {font-size: 14px;letter-spacing:0px;text-align: center;color:#000;font-weight: 500;} #contact #form_wrapper .note{padding: 16px 0 0px 0;border-top: 1px solid #cccccc;} #contact #form_wrapper .note p{margin:0px auto 10px auto;padding:0;font-size: 14px;letter-spacing:0px;line-height: 1.5;text-align: center;color: #ff5d69;text-decoration: underline} #contact #form_wrapper .note .check_area {font-size: 14px;letter-spacing:0px;text-align: center;color:#000;font-weight: 500;} #contact #form_wrapper .button_area{margin:30px auto 0 auto; } #contact #form_wrapper .button_area input[type=submit]{-webkit-appearance: none;display: block; outline: 0;border:0;width:100%; margin:0px auto;padding:18px 0%;font-size: 16px;letter-spacing:0px;background:#00779c;color: white;font-weight: 500;} #contact #form_wrapper .button_area input[type=submit]:hover{background: #2bbcbc;} .wpcf7-form .wpcf7-not-valid-tip{display: inline-block;background:#ff5d69;color: white; padding: 1px 10px;margin-top: 5px;margin-left: 5px;border-radius: 20px;font-size: 10px;letter-spacing: 0px;text-align: center} .wpcf7-response-output{display: block;margin: 0 auto !important;width: 100% !important;background:#fff6f3;color:#ff5d69; padding:15px 3% !important;box-sizing: border-box;text-align: center;font-size: 13px;letter-spacing: 0;font-weight:600;border-color:none !important;border: none !important;} #contact #pp{background:#f5fcfb;padding:30px 0 10px 0;} #contact #pp h4{width:80%;margin:0px auto 20px auto;padding:0px 0 10px 0;font-size:18px;letter-spacing:0px;text-align: center;font-weight: 600;color:#00889e;border-bottom: 1px solid #00889e} #contact #pp .unit{width:80%;margin:0px auto 20px auto;} #contact #pp .unit h5{margin:0px auto 10px auto;padding:0px 0 0px 0;font-size: 16px;letter-spacing:0px;font-weight:600;color:#00889e} #contact #pp .unit p{margin:0px auto 0px auto;padding:0px 0 0px 0;font-size:13px;letter-spacing:0px;line-height: 1.5;color:#282828} #contact #pp .unit ul{margin:10px auto 0px auto;padding:0px 0 0px 30px;font-size:13px;letter-spacing:0px;line-height: 1.5;color:#282828} /*404*/ #nf404{background:linear-gradient(90deg, #2a9f8e, #1b7e9a);} #nf404 .inner{width:100%;aspect-ratio:1.2/1;position: relative;} #nf404 .inner .text_area{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #nf404 .inner .text_area h2{margin:0px auto 20px auto;padding:0;font-size: clamp(20px,1.5vw, 30px);letter-spacing:0px;color:white;text-align: center;} #nf404 .inner .text_area p{margin:0px auto 0px auto;padding:0;font-size: 12px;letter-spacing:0px;color:white;text-align: center;} /*******************ヘルプ分**********************/ /*水晶発振器*/ #crystal_o #lead_area{position:relative;} #crystal_o #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position:-20% 50%;background-size:auto 100%;z-index: -1} #crystal_o #lead_area .inner{ margin:0 auto;padding: 48px 0 0 0} #crystal_o #lead_area .inner h3{margin:0 0 32px 0;padding: 0;font-size: 22px;letter-spacing:1px;text-align: center;color: #323333;font-weight: 600} #crystal_o #lead_area .inner p{width:88%;margin:0 auto 32px auto;padding: 0;font-size: 15px;letter-spacing:0.5px;line-height: 1.9;} #crystal_o #lead_area .inner p span{color: #11a196} #crystal_o #lead_area .inner .photo{width:100%;aspect-ratio:2.6/1; margin:0 auto;text-align: center;overflow:hidden;} #crystal_o #lead_area .inner .photo img{width: 100%;} #crystal_o #products_list{position:relative;padding: 40px 0} #crystal_o #products_list::before{content: '';position: absolute; top: 0;right:0%; width:100%; height: 100%;background:#e9f3f4;z-index: -2} #crystal_o #products_list::after{content: '';position: absolute; top: 0;left:0%; width:50%; height: 100%;background:url("../img/2nd/parallelogram02.png") no-repeat;background-position: 100% 50%;background-size: auto 100%;z-index:-1} #crystal_o #products_list .title{position:relative;} #crystal_o #products_list .title::before{content: '';position: absolute; bottom: 150%;left:50%;transform: translateX(-50%); width:1px; height: 78px;background:#6cbabc;} #crystal_o #products_list .title .eng{margin:0;padding: 0;font-size: 14px;letter-spacing:1px;color: #6cbabc;text-align: center;} #crystal_o #products_list .title h4{margin:0 0 24px 0;padding: 0;font-size: 20px;letter-spacing:3px;text-align: center;color: #323333;font-weight: 600} #crystal_o #products_list .inner{width:88%;margin:0 auto;padding: 0px 0;display: flex;flex-wrap: wrap;justify-content: space-between} #crystal_o #products_list .inner .unit{width:100%;margin-bottom:10px} #crystal_o #products_list .inner .unit a{position:relative;display:block;width: 100%;aspect-ratio:3.0/1; background:white;padding: 0px 0px;color:#323333;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #crystal_o #products_list .inner .unit a::before { content: ""; position: absolute; top: 0;left: 85%; width:25%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b3ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #crystal_o #products_list .inner .unit a:hover::before { width: 105%; left: 0;} #crystal_o #products_list .inner .unit a:hover::after{left: 92%;transition: left 0.2s ease-out;} #crystal_o #products_list .inner .unit a .text_area{ position: absolute; top: 50%;transform: translateY(-50%);left:8%; z-index: 2; transition: color 0.3s ease;} #crystal_o #products_list .inner .unit a .text_area .name01{display:block;font-size: 14px;letter-spacing: 0px;} #crystal_o #products_list .inner .unit a .text_area .name02{display:block;font-size: 24px;letter-spacing: 0px;margin-bottom: 5px} #crystal_o #products_list .inner .unit a .text_area .fs{font-size: 20px;letter-spacing: 0px;} #crystal_o #products_list .inner .unit a .text_area .more{position:relative;font-size: 13px;letter-spacing:0;color: #1fa3ad} #crystal_o #products_list .inner .unit a .text_area .more::after{content:"\f105";position: absolute;top: 50%;transform: translateY(-50%);left: 110%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;transition: left 0.2s ease-out, color 0.3s ease;} #crystal_o #products_list .inner .unit a .text_area .photo_sub{ position: absolute; top: 38%;left:80%; width:60%;z-index: 1} #crystal_o #products_list .inner .unit a .text_area .photo_sub img{width: 100%;} #crystal_o #products_list .inner .unit a .photo{ position: absolute; top: 50%;transform: translateY(-50%);right:6%; width:24%; z-index: 1} #crystal_o #products_list .inner .unit a .photo img{width: 100%;transition:0.8s all;} #crystal_o #products_list .inner .unit a:hover .text_area{color: white} #crystal_o #products_list .inner .unit a:hover .more{color: white} #crystal_o #products_list .inner .unit a:hover .photo img{transform:scale(1.2,1.2); transition:0.5s all;} /*水晶発振器　各製品*/ #co_common #lead_area{position:relative;padding: 40px 0;} #co_common #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position: 40% 50%;background-size:auto 100%;z-index: -1} #co_common #lead_area .inner{ margin:0 auto 0px auto;} #co_common #lead_area .inner p{width:88%;margin:0 auto 0px auto;padding: 0;font-size: 15px;letter-spacing:0.5px;line-height: 1.9;} #co_common #lead_area .inner p span{color: #11a196} #co_common #lead_area .inner_fs{background: white;width:88%;margin:0 auto 0px auto;padding: 32px 0px;} #co_common #lead_area .inner_fs .intro{position: relative;width:90%;margin:0 auto;padding: 0 0 20px 0; margin:0 auto 24px auto;} #co_common #lead_area .inner_fs .intro::before{content: '';position: absolute; bottom: 0%;left:0%; width:100%; height:3px;background:#e6e6e5} #co_common #lead_area .inner_fs .intro::after{content: '';position: absolute; bottom:0%;left:0%; width:10%; height:3px;background:linear-gradient(45deg, #00779c, #31b3ba)} #co_common #lead_area .inner_fs .intro p{position: relative;margin:0 auto 0px auto;padding: 0 0 0 24px;font-size: 16px;letter-spacing:0.5px;color: #323333;font-weight: 600;line-height: 1.5} #co_common #lead_area .inner_fs .intro p::before{content: '';position: absolute; top: 5%;left:0%; width:16px; height:16px;background:linear-gradient(45deg, #00779c, #31b3ba)} #co_common #lead_area .inner_fs .detail_area{width:90%;max-width: 1000px;margin:0 auto} #co_common #lead_area .inner_fs .detail_area .unit{margin:0 auto 24px auto;} #co_common #lead_area .inner_fs .detail_area .unit h3{position: relative;margin:0 auto 8px auto;padding: 0 0 0 24px;font-size: 15px;letter-spacing:0.5px;color: #1fa3ad;font-weight: 600;line-height: 1.5} #co_common #lead_area .inner_fs .detail_area .unit h3::before{content: '';position: absolute; top: 15%;left:2%; width:10px; height:10px;background:linear-gradient(45deg, #00779c, #31b3ba);border-radius: 50%} #co_common #lead_area .inner_fs .detail_area .unit p{margin:0 auto 0px auto;padding: 0 0 0 20px;font-size:14px;letter-spacing:0.5px;font-weight: 400;line-height: 1.5} main.ocxo #lead_area{position:relative;padding: 40px 0 !important;} main.ocxo #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position: 40% 50%;background-size:100% auto;z-index: -1} main.ocxo #lead_area .inner{ margin:0 auto 0px auto !important;} #co_common #example_group{background: white;width:88%;margin:0 auto 0px auto;padding:32px 0px;} #co_common #example_group .title_area{position: relative;display: flex;justify-content: flex-start;align-items:flex-start;margin:0 auto 16px auto;padding: 0 0 12px 0;flex-direction: column;} #co_common #example_group .title_area .mark{background:linear-gradient(90deg, #00779c, #31b3ba);text-align: center;border-radius: 50px;font-size:13px;letter-spacing:0px;color: white;font-weight: 600;padding: 5px 30px;margin-bottom: 6px;} #co_common #example_group .title_area h3{margin:0 0 0px 0;padding: 0;font-size: 20px;letter-spacing:1px;color: #323333;font-weight: 500} #co_common #example_group .title_area::before{content: '';position: absolute; bottom: 0;left:0%; width:100%; height: 3px;background:#e6e6e5} #co_common #example_group .title_area::after{content: '';position: absolute; bottom: 0;left:0%; width:10%; height: 3px;background:linear-gradient(90deg, #00779c, #31b3ba)} #co_common #example_group .detail_area{display: flex;justify-content: space-between;align-items:center;flex-direction: column;} #co_common #example_group .detail_area .photo{width: 100%;} #co_common #example_group .detail_area .photo img{width:100%;} #co_common #example_group .detail_area dl{width:100%;display: flex;flex-wrap: wrap;font-size: 14px;line-height: 1;letter-spacing: 1px;border-top: 1px solid #b6cdce} #co_common #example_group .detail_area dl dt{width:40%;background: #f7fcfc;margin: 0;padding: 12px 0 12px 3%;box-sizing: border-box;border-bottom: 1px solid #b6cdce;color: #000;font-weight: 500} #co_common #example_group .detail_area dl dd{width:60%;margin: 0;padding: 12px 0 12px 5%;box-sizing: border-box;border-bottom: 1px solid #b6cdce} #co_common #fs_image_group .inner{width:100%;margin:0 auto 0px auto;padding:0;display: flex;} #co_common #fs_image_group .inner figure{width: 50%; margin:0;padding: 0;} #co_common #fs_image_group .inner figure img{width: 100%;height: 100%;object-fit: cover} #co_common #list_group{padding:40px 0 10px 0;background: #f7fcfc} #co_common #list_group .title{margin: 0px auto 24px auto} #co_common #list_group .title .eng{margin:0;padding: 0;font-size: 14px;letter-spacing:1px;color: #6cbabc;text-align: center;} #co_common #list_group .title h4{margin:0 0 0px 0;padding: 0;font-size: 20px;letter-spacing:3px;text-align: center;color: #323333;font-weight: 600} #co_common #list_group .unit_table {margin:0 auto 10px auto;} #co_common #list_group .unit_table h5{width:90%;background:linear-gradient(90deg, #00779c, #31b3ba);margin:0 auto 2px auto;padding:3px 0;font-size:clamp(16px, 0.9vw, 24px);letter-spacing:1px;text-align: center;color: white;font-weight: 600} #co_common #list_group .unit_table .inner{width:90%;margin: 0 auto;overflow-x: scroll;} #co_common #list_group .unit_table .inner table{border-collapse: collapse;width:1000px;margin: 0 auto;background: white} #co_common #list_group .unit_table .inner table thead{width: 100%;border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;} #co_common #list_group .unit_table .inner table thead th{padding:10px 0;color: #000;font-size: 14px;letter-spacing:1px;font-weight: 500;background:#f2f2f2 !important;text-align: center} #co_common #list_group .unit_table .inner table tbody tr{border-bottom:1px solid #cccccc;} #co_common #list_group .unit_table .inner table tbody td{padding:8px 0;font-size: 13px;letter-spacing:0px;text-align: center;vertical-align: middle} #co_common #list_group .unit_table .inner table tbody td.mark{font-size: 22px;color:#00779c} #co_common #list_group .unit_table .inner table tbody td .mark{font-size:22px;color:#00779c;line-height: 1} #co_common #list_group .unit_table .inner table tbody td a{position: relative;display:block;background:#00779c;max-width:80px;margin:0 auto;padding: 5px 0px;text-align: center;color: white;text-decoration: none;border-radius: 5px;font-size: 12px;letter-spacing: 0} #co_common #list_group .unit_table .inner table tbody td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size:9px;} #co_common #list_group .unit_table .inner table tbody td a:hover{background: #00c1c6} #co_common #list_group .unit_table .note{width:90%;margin:10px auto 0 auto;padding: 0;font-size: 12px;letter-spacing:0px;text-align: center;} /*水晶振動子*/ #crystal_r #lead_area{position:relative;} #crystal_r #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position:-20% 50%;background-size:auto 100%;z-index: -1} #crystal_r #lead_area .inner{ margin:0 auto;padding: 48px 0 0 0} #crystal_r #lead_area .inner h3{margin:0 0 32px 0;padding: 0;font-size: 22px;letter-spacing:1px;text-align: center;color: #323333;font-weight: 600} #crystal_r #lead_area .inner p{width:88%;margin:0 auto 32px auto;padding: 0;font-size: 15px;letter-spacing:0.5px;line-height: 1.9} #crystal_r #lead_area .inner p span{color: #11a196} #crystal_r #lead_area .inner .photo{width:100%;aspect-ratio:2.6/1; margin:0 auto;text-align: center;overflow:hidden;} #crystal_r #lead_area .inner .photo img{width: 100%;} #crystal_r #products_list{position:relative;padding: 40px 0} #crystal_r #products_list::before{content: '';position: absolute; top: 0;right:0%; width:100%; height: 100%;background:#e9f3f4;z-index: -2} #crystal_r #products_list::after{content: '';position: absolute; top: 0;right:0%; width:60%; height: 100%;background:url("../img/2nd/parallelogram02.png") no-repeat;background-position: 0% 50%;background-size: auto 100%;z-index:-1} #crystal_r #products_list .title{position:relative;} #crystal_r #products_list .title::before{content: '';position: absolute; bottom: 150%;left:50%;transform: translateX(-50%); width:1px; height: 78px;background:#6cbabc;} #crystal_r #products_list .title .eng{margin:0;padding: 0;font-size: 14px;letter-spacing:1px;color: #6cbabc;text-align: center;} #crystal_r #products_list .title h4{margin:0 0 24px 0;padding: 0;font-size: 20px;letter-spacing:3px;text-align: center;color: #323333;font-weight: 600} #crystal_r #products_list .inner{width:88%;margin:0 auto;padding: 0px 0;display: flex;flex-wrap: wrap;justify-content: space-between} #crystal_r #products_list .inner .unit{width:100%;margin-bottom:10px} #crystal_r #products_list .inner .unit a{position:relative;display:block;width: 100%;aspect-ratio:3.2/1; background:white;padding: 0px 0px;color:#323333;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #crystal_r #products_list .inner .unit a::before { content: ""; position: absolute; top: 0;left: 80%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b3ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #crystal_r #products_list .inner .unit a:hover::before { width: 105%; left: 0;} #crystal_r #products_list .inner .unit a:hover::after{left: 92%;transition: left 0.2s ease-out;} #crystal_r #products_list .inner .unit a .text_area{ position: absolute; top: 50%;transform: translateY(-50%);left:10%; z-index: 2; transition: color 0.3s ease;} #crystal_r #products_list .inner .unit a .text_area .name01{display:block;font-size: 18px;letter-spacing: 1px;} #crystal_r #products_list .inner .unit a .text_area .more{position:relative;font-size: 13px;letter-spacing:0;color: #1fa3ad} #crystal_r #products_list .inner .unit a .text_area .more::after{content:"\f105";position: absolute;top: 50%;transform: translateY(-50%);left: 110%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;transition: left 0.2s ease-out, color 0.3s ease;} #crystal_r #products_list .inner .unit a:hover .text_area{color: white} #crystal_r #products_list .inner .unit a:hover .more{color: white} #crystal_r #products_list .inner .unit a .photo{ position: absolute; top: 50%;transform: translateY(-50%);right:5%; width:34%; z-index: 1} #crystal_r #products_list .inner .unit a .photo img{width: 100%;height: 100%;object-fit: cover;object-position: 50% 0} /*水晶振動子　各製品*/ #cr_common #lead_area{position:relative;padding: 48px 0;} #cr_common #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position: 50% 50%;background-size:auto 100%;z-index: -1} #cr_common #lead_area .inner{ margin:0 auto 0px auto;} #cr_common #lead_area .inner p{width:88%;margin:0 auto 0px auto;padding: 0;font-size: 15px;letter-spacing:0.5px;line-height: 1.9;} #cr_common #lead_area .inner p span{color: #11a196} #cr_common #list_group{padding:30px 0 10px 0;background: #f7fcfc} #cr_common #list_group .title{margin: 0px auto 24px auto} #cr_common #list_group .title .eng{margin:0;padding: 0;font-size: 14px;letter-spacing:1px;color: #6cbabc;text-align: center;} #cr_common #list_group .title h4{margin:0 0 0px 0;padding: 0;font-size: 20px;letter-spacing:3px;text-align: center;color: #323333;font-weight: 600} #cr_common #list_group .unit_table {margin:0 auto 10px auto;} #cr_common #list_group .unit_table h5{width:90%;background:linear-gradient(90deg, #00779c, #31b3ba);margin:0 auto 2px auto;padding:3px 0;font-size:clamp(16px, 0.9vw, 24px);letter-spacing:1px;text-align: center;color: white;font-weight: 600} #cr_common #list_group .unit_table .inner{width:90%;margin: 0 auto;overflow-x: scroll} #cr_common #list_group .unit_table .inner table{border-collapse: collapse;width: 800px;margin: 0 auto;background: white} #cr_common #list_group .unit_table .inner table thead{width: 100%;border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;} #cr_common #list_group .unit_table .inner table thead th{padding:8px 0;color: #000;font-size: 13px;letter-spacing:0px;font-weight: 500;background:#f2f2f2 !important;} #cr_common #list_group .unit_table .inner table tbody tr{border-bottom:1px solid #cccccc;} #cr_common #list_group .unit_table .inner table tbody td{padding:8px 0;font-size: 14px;letter-spacing:1px;text-align: center;vertical-align: middle} #cr_common #list_group .unit_table .inner table tbody td a{position: relative;display:block;background:#00779c;max-width:80px;margin:0 auto;padding: 5px 0px;text-align: center;color: white;text-decoration: none;border-radius: 5px;font-size: 12px;letter-spacing: 0} #cr_common #list_group .unit_table .inner table tbody td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size:9px;} #cr_common #list_group .unit_table .inner table tbody td a:hover{background: #00c1c6} /*弊社の特徴*/ #features #lead_area{position:relative;} #features #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position:0% 50%;background-size:auto 100%;z-index: -1} #features #lead_area .inner{ width:88%;margin:0 auto;padding:48px 0} #features #lead_area .inner p{margin:0;padding: 0;font-size:15px;letter-spacing:0.5px;line-height: 1.9} #features #lead_area .inner p span{color: #11a196} #features #list_group{position:relative;padding:40px 0 24px 0} #features #list_group::before{content: '';position: absolute; top: 0;right:0%; width:100%; height: 100%;background:#e9f3f4;z-index: -2} #features #list_group::after{content: '';position: absolute; top: 0;right:0%; width:50%; height: 100%;background:url("../img/2nd/parallelogram02.png") no-repeat;background-position: 0% 50%;z-index:-1} #features #list_group .title{position:relative;} #features #list_group .title::before{content: '';position: absolute; bottom: 150%;left:50%;transform: translateX(-50%); width:1px; height: 78px;background:#6cbabc;} #features #list_group .title .sub{margin:0;padding: 0;font-size:20px;letter-spacing:1px;color: #323333;text-align: center;font-weight: 600} #features #list_group .title h3{margin:0 0 10px 0;padding: 0;font-size: 30px;letter-spacing:2px;text-align: center;color: #00889e;font-weight: 600;line-height: 1.2} #features #list_group .title h3 span{display:block;font-size: 16px;} #features #list_group .inner{width:90%;margin:0 auto;padding: 0px 0;} #features #list_group .inner .unit{margin-bottom:5px} #features #list_group .inner .unit a{position:relative;display:block;background:#1fa3ad;padding: 38px 0px 28px 00px;color: white;font-size: 16px;letter-spacing: 0px;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #features #list_group .inner .unit a::before { content: ""; position: absolute; top: 0;left: 86%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b3ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #features #list_group .inner .unit a:hover::before { width: 105%; left: 0;} #features #list_group .inner .unit a::after{content:"\f107";position: absolute;top:50%;transform:translateY(-50%);left: 92%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 16px; transition: left 0.2s ease-out, color 0.3s ease;} #features #list_group .inner .unit a:hover::after{left: 92%;transition: left 0.2s ease-out;} #features #list_group .inner .unit a span{ position: absolute; top: 50%;transform: translateY(-50%);left: 16px; z-index: 1; transition: color 0.3s ease;padding-right: 32px;} #features #case_group{padding: 40px 0 20px 0;background: #f5fcfb} #features #case_group .case{width:90%;margin:0 auto 20px auto;padding: 20px 12px 10px 12px;background: white;box-sizing: border-box} #features #case_group .case .title{position: relative;margin:0 auto 20px auto;padding: 0 0 10px 0px } #features #case_group .case .title::before{content: '';position: absolute; bottom: 0;left:0%; width:100%; height: 2px;background:#e6e6e5} #features #case_group .case .title::after{content: '';position: absolute; bottom: 0;left:0%; width:15%; height: 2px;background:linear-gradient(90deg, #00779c, #31b3ba)} #features #case_group .case .title .mark{position: relative;margin-bottom:10px;margin-left: 10px;width:70px;padding: 14px 14px;} #features #case_group .case .title .mark::before { content: ""; position: absolute; top: 0;left:0%; width:100%; height: 100%;background:linear-gradient(90deg, #00779c, #31b3ba);transform: skewX(-25deg);z-index: 0} #features #case_group .case .title .mark span{ position: absolute; top: 50%;transform: translate(-50%,-50%);left:50%; font-size:14px;letter-spacing:1px;color: white;font-weight:500;z-index: 1;} #features #case_group .case .title h4{margin:0 0 0px 0;padding: 0;font-size:18px;letter-spacing:0px;color: #323333;font-weight:600;line-height: 1.5} #features #case_group .case p{width:96%;margin:0 auto 0px auto;padding: 0;font-size: 14px;letter-spacing:0.5px;line-height: 1.5;} #features #case_group .case .spec{width:96%;margin:12px auto;} #features #case_group .case .spec dl{width:100%;display: flex;flex-wrap: wrap;font-size: 13px;letter-spacing: 0.5px;} #features #case_group .case .spec dl dt{width:100%;margin: 0 auto 4px auto;padding:0px 0;} #features #case_group .case .spec dl dt span{ background: linear-gradient(to right, #23b2d2, #168df2); display: inline-block;padding: 1px 20px;border-radius: 50px;color: white;text-align: center;font-weight:500;} #features #case_group .case .spec dl dd{width:100%;margin: 0 auto 10px auto;padding:0px 0 0px 3%;box-sizing: border-box;} #features #case_group .case .banner{width:98%;margin:16px auto;} #features #case_group .case .banner a{display: block;;position: relative; background:#004c60; padding:24px 0px 20px 00px;color: white;font-size:15px;letter-spacing: 1px;font-weight: 500;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #features #case_group .case .banner a::before { content: ""; position: absolute; top: 0;left: 86%; width:30%; height: 100%;background:linear-gradient(90deg, #00313a, #1e6cb2);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #features #case_group .case .banner a:hover::before { width: 105%; left: 0;} #features #case_group .case .banner a::after{content:"\f105";position: absolute;top:50%;transform:translateY(-50%);left: 92%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 12px; transition: left 0.2s ease-out, color 0.3s ease;} #features #case_group .case .banner a:hover::after{left: 92%;transition: left 0.2s ease-out;} #features #case_group .case .banner a span{ position: absolute; top: 50%;transform: translateY(-50%);left: 32px; z-index: 1; transition: color 0.3s ease;} /*弊社の特徴01（カスタムスペックの対応）*/ #features01 #lead_area{position:relative;} #features01 #lead_area::before{content: '';position: absolute; top: 0;left:10%; width:50%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position: 50% 50%;background-size: cover;z-index: -1} #features01 #lead_area .inner{ margin:0 auto;padding: 40px 0} #features01 #lead_area .inner p{width:88%;margin:0 auto 0px auto;padding: 0;font-size: 15px;letter-spacing:0.5px;line-height: 1.9;color: #1fa3ad;font-weight: 600} #features01 #case_wrapper{background:#e9f3f4;padding: 32px 0 24px 0} #features01 #case_wrapper .case{width:90%;margin:0 auto 24px auto;padding:24px 12px 16px 12px;box-sizing: border-box;background: white;} #features01 #case_wrapper .case .title{margin:0 auto 16px auto;} #features01 #case_wrapper .case .title .mark{width:100px;margin:0 auto 10px 0;padding:6px 0;background: #1fa3ad;border-radius: 20px;text-align: center;color: white;font-size: 13px;letter-spacing:1px;line-height: 1} #features01 #case_wrapper .case .title h3{margin:0 auto 0px auto;padding: 0;font-size: 18px;letter-spacing:1px;line-height: 1.6;color: #4d4d4d;font-weight: 500} #features01 #case_wrapper .case .inner{display: flex;justify-content: space-between;width: 100%;flex-direction: column;} #features01 #case_wrapper .case .inner .photo{width: 72%;margin: 0 auto;padding: 0;} #features01 #case_wrapper .case .inner .photo img{width:100%;aspect-ratio:1.5/1;object-fit: cover} #features01 #case_wrapper .case .inner .detail_group{width: 96%;} #features01 #case_wrapper .case .inner .detail_group .unit{margin:0 auto 16px auto;} #features01 #case_wrapper .case .inner .detail_group .unit h4{position: relative;margin:12px auto 0;padding:0 0 0 24px;font-size: 16px;letter-spacing:0.5px;line-height: 1.75;color: #1fa3ad;font-weight: 500} #features01 #case_wrapper .case .inner .detail_group .unit h4::before{content:'◼︎';position: absolute; top: 0;left: 0%;} #features01 #case_wrapper .case .inner .detail_group .unit p{margin:0 auto 0px auto;padding: 0;font-size: 14px;letter-spacing:0.5px;line-height: 1.75;} #features01 #case_wrapper .case .inner .detail_group .unit p span{color: #1fa3ad;} #features01 #case_wrapper .case .inner .detail_group .unit .note{background: #f5fcfb;margin:30px auto 10px auto;padding:24px 0 24px 0;} #features01 #case_wrapper .case .inner .detail_group .unit .note > div{display: flex;justify-content: space-between;width:90%;margin: 0 auto;text-align: center} #features01 #case_wrapper .case .inner .detail_group .unit .note div .common .name{padding: 12px 0;font-size: 13px;letter-spacing:0.5px;line-height: 1.5;color:white;} #features01 #case_wrapper .case .inner .detail_group .unit .note div .common .value{background: white;padding: 10px 0;font-size: 16px;letter-spacing:1px;line-height: 1.5;} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special{position: relative;width: 50%;border: 2px solid #1fa3ad;box-sizing: border-box} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special::before{content:'消費電流87%カット!';position: absolute; top: -46px;left: 50%;transform: translateX(-50%);width: 100%;padding: 10px 0;background:#f7ea00;border-radius: 8px;font-weight: 600;letter-spacing: 0.5px;color: #4d4d4d;font-size: 12px;} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special::after{content:'';position: absolute; top: -10px;left: 50%;transform: translateX(-50%);background:#f7ea00;width:20px; aspect-ratio:1.2/1; clip-path: polygon(0 0, 100% 0%, 50% 100%);} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special .name{background: #1fa3ad;font-weight: 600} #features01 #case_wrapper .case .inner .detail_group .unit .note div .special .value{font-weight: 600;color: #1fa3ad} #features01 #case_wrapper .case .inner .detail_group .unit .note div .general{width: 48%;border-bottom: 1px solid #b3b3b3;box-sizing: border-box} #features01 #case_wrapper .case .inner .detail_group .unit .note div .general .name{background: #b3b3b3;font-weight: 400} #features01 #case_wrapper .case .inner .detail_group .unit .note div .general .value{color: #666666} #features01 #case_wrapper .case .inner .detail_group .unit dl{width:100%;display: flex;flex-wrap: wrap;font-size: 13px;letter-spacing: 0.5px;border-top: 1px solid #c3e0df;margin: 8px 0;} #features01 #case_wrapper .case .inner .detail_group .unit dl dt{width:30%;margin: 0;padding:10px 0 10px 2%;background: #f2fcfa;box-sizing: border-box;border-bottom: 1px solid #c3e0df} #features01 #case_wrapper .case .inner .detail_group .unit dl dd{width: 70%;margin: 0;padding:10px 0 10px 2%;box-sizing: border-box;border-bottom: 1px solid #c3e0df} #features01 #case_wrapper .case .inner .detail_group .unit .note h5{margin:0 auto 10px auto;padding:0;font-size: clamp(16px, 1.0vw, 20px);letter-spacing:1px;line-height: 1.75;color: #1fa3ad;font-weight: 600;text-align: center} #features01 #case_wrapper .case .inner .detail_group .unit .note .case02_graph{width: 90%;margin: 0 auto;background: white;padding: 16px;box-sizing: border-box} #features01 #case_wrapper .case .inner .detail_group .unit .note .case02_graph img{width: 100%;} /*弊社の特徴02（長期生産サポート）*/ #features02 #lead_area{position:relative;} #features02 #lead_area::before{content: '';position: absolute; top: 0;left:0%; width:100%; height: 100%;background:#e9f3f4 url("../img/2nd/parallelogram01.png") no-repeat;background-position: 50% 50%;background-size:auto 100%;z-index: -1} #features02 #lead_area .inner{ margin:0 auto;padding: 48px 0;} #features02 #lead_area .inner p{width:88%;margin:0 auto 24px auto;padding: 0;font-size: 15px;letter-spacing:0.5px;line-height: 1.9;} #features02 #lead_area .inner p span{color: #1fa3ad;} #features02 #lead_area .inner .feature_list{width:88%;margin:0 auto 0px auto;padding:20px 0 15px 0;background: white} #features02 #lead_area .inner .feature_list h3{width: 80%;margin:0 auto 20px auto;padding:6px 0px;box-sizing: border-box;font-size: 14px;letter-spacing:0.5px;color:white;font-weight: 500;background:linear-gradient(90deg, #4facb4, #067995);text-align: center;border-radius:30px;} #features02 #lead_area .inner .feature_list ul{width: 80%;margin: 0 auto;padding:0px 0px;list-style: none} #features02 #lead_area .inner .feature_list ul li{position: relative;margin: 0 auto 8px auto;padding: 0 0 0 20px;font-size: 16px;letter-spacing:0px;} #features02 #lead_area .inner .feature_list ul li::before{content:'';position: absolute; top: 7px;left:0%; width:9px; height: 9px;background:linear-gradient(90deg, #4facb4, #067995);} #features02 #list_group{/*background:#f5fcfb;*/padding: 40px 0 10px 0} #features02 #list_group .unit_table{width: 90%;margin:0 auto 32px auto} #features02 #list_group .unit_table h4{margin:0 auto 2px auto;padding:6px 0px;font-size: clamp(17px,1.9vw, 22px);letter-spacing:1px;color:white;font-weight: 500;background:linear-gradient(90deg, #00779c, #31b3ba);text-align: center} #features02 #list_group .unit_table .inner {overflow-x: scroll;} #features02 #list_group .unit_table .inner table{border-collapse: collapse;width: 600px;background: white} #features02 #list_group .unit_table .inner table tr{border-bottom: 1px solid #c2d0d3;} #features02 #list_group .unit_table .inner table th{font-weight:600;padding:6px 0%;font-size: 14px;letter-spacing: 0.5px;background:#f2f2f2;border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;} #features02 #list_group .unit_table .inner table th:first-of-type{width: 20%} #features02 #list_group .unit_table .inner table th:nth-of-type(2){width: 20%} #features02 #list_group .unit_table .inner table th:nth-of-type(3){width: 45%} #features02 #list_group .unit_table .inner table th:last-of-type{width: 15%} #features02 #list_group .unit_table .inner table td{padding:8px 0%;font-size: 13px;letter-spacing: 0.5px;line-height: 1.55;vertical-align: middle;text-align: center} #features02 #list_group .unit_table .inner table td:nth-of-type(3){text-align: left} #features02 #list_group .unit_table .inner table td img{width:80%;} #features02 #list_group .unit_table .inner table td a{position: relative; display:block;background:#00779c;color:white;text-decoration: none;width: 85%;margin: 0 auto;padding:6px 0%;border-radius: 5px} #features02 #list_group .unit_table .inner table td a::before{content:"\f08e";position: absolute;top:50%;transform:translateY(-50%);right: 10%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;font-size: 12px; } #features02 #list_group .unit_table .inner table td a:hover{background:#00c1c6;} /*会社概要*/ #company_profile{} #company_profile #all_wrapper{ } #company_profile #all_wrapper .container{width: 88%;margin: 0 auto;} #company_profile #all_wrapper .container .main{padding:48px 0 0px 0;} #company_profile #all_wrapper .container .main section{ width: 100%;margin: 0 auto 40px auto} #company_profile #all_wrapper .container .main section .inner .title{margin:0 auto 24px auto;color: #00779c} #company_profile #all_wrapper .container .main section .inner .title h3, #company_profile #all_wrapper .container .main section .inner .title h5{position: relative;margin:0;padding:20px 0 0 0; font-size: 20px;letter-spacing: 1px;font-weight: 600} #company_profile #all_wrapper .container .main section .inner .title h3::before, #company_profile #all_wrapper .container .main section .inner .title h5::before{content: '';position: absolute;top: 0%;left:0%;background:linear-gradient(90deg, #005b90, #12dcdd);width:60px;height: 2px;} #company_profile #all_wrapper .container .main section .inner .title .eng{margin:0;padding: 0;font-size: 14px;letter-spacing: 0px;font-weight: 500;color: #1fa3c3} #company_profile #all_wrapper .container .main #sec01 .logo{width: 64%;max-width: 275px;margin:0 auto 10px auto;padding: 0;} #company_profile #all_wrapper .container .main #sec01 .logo img{width:100%;} #company_profile #all_wrapper .container .main #sec01 p{width:100%;margin:0 auto;padding:0px 0 0 0; font-size:14px;letter-spacing: 1px;line-height:1.5;} #company_profile #all_wrapper .container .main #sec02 .outline{/*background: #f7fcfc;*/padding: 00px;margin:0 auto 32px auto;} #company_profile #all_wrapper .container .main #sec02 .outline dl{width: 100%;margin:0 auto 0px auto;display: flex;flex-wrap: wrap; font-size: 14px;letter-spacing: 0.5px;line-height: 1.75;} #company_profile #all_wrapper .container .main #sec02 .outline dl dt{width:100%;margin: 0;padding:6px 0 6px 2%;border-top: 1px solid #00779c;border-bottom: 1px solid #00779c;color: #00779c;background:#f7fcfc;box-sizing: border-box} #company_profile #all_wrapper .container .main #sec02 .outline dl dd{width: 100%;margin: 0;padding:8px 0 16px 3%;box-sizing: border-box} #company_profile #all_wrapper .container .main #sec02 .office{width:100%;margin:0 auto 30px auto;padding:0px 0px 0px 0px;/*background:#f7fcfc;*/box-sizing: border-box} #company_profile #all_wrapper .container .main #sec02 .office .unit{margin: 0 auto 16px auto;padding: 16px 0px 0px 0px;background:#f2f7f7;} #company_profile #all_wrapper .container .main #sec02 .office .unit h4{width:90%;margin: 0 auto 16px auto;padding:3px 0px; font-size: 14px;letter-spacing:0.5px;line-height: 1.8;color: white;text-align: center;font-weight: 500;background:linear-gradient(90deg, #269bae, #1b7eb5);border-radius: 50px} #company_profile #all_wrapper .container .main #sec02 .office .unit address{width:80%;margin: 0 auto 16px auto;color:#000;font-style: normal;font-size:12px;letter-spacing: 0px;line-height: 1.4;} #company_profile #all_wrapper .container .main #sec02 .office .unit .google_map iframe{border: 0;outline: 0;width: 100%;aspect-ratio:1.5/1} #company_profile #all_wrapper .container .main #sec03 #timeline .unit{position: relative;width: 100%%; margin:0 auto 20px auto;padding:0px 0 0 32px;box-sizing: border-box ;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit::after{content: '';position: absolute;top:30px;left:5px;background:#cccccc;width:1px;height:85%;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .year{ position: relative;margin:0 auto 8px auto;font-size: 17px;letter-spacing: 0.5px;color: #1fa3ad;font-weight: 500;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .year::before{content: '';position: absolute;top:50%;transform: translateY(-50%);left:-32px;background:linear-gradient(90deg, #005b90, #12dcdd);width:13px;height: 13px;border-radius: 10px} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .date_area{ margin:0 auto 16px auto;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .date_area .date{margin:0 auto 5px auto;padding:0px 0 0 0; font-size: 14px;letter-spacing: 0.5px;line-height:1.75;color: #1fa3ad;font-weight: 500;} #company_profile #all_wrapper .container .main #sec03 #timeline .unit .date_area .text{margin:0 auto;padding:0px 0 0 0; font-size:13px;letter-spacing: 0px;line-height:1.5;} #company_profile #all_wrapper .container .main #sec04 .unit{margin:0 auto 24px auto;} #company_profile #all_wrapper .container .main #sec04 .unit h6{margin:0 auto 12px auto;padding:0px 0 6px 0; font-size: 17px;letter-spacing: 0.5px;font-weight: 600;color: #1fa3ad;border-bottom: 1px solid #1fa3ad} #company_profile #all_wrapper .container .main #sec04 .unit p{margin:0;padding:0px 0 0 0; font-size:14px;letter-spacing: 0;line-height:1.5;} #company_profile #all_wrapper .container .main #sec04 .unit ol{margin:24px auto 24px auto;} #company_profile #all_wrapper .container .main #sec04 .unit ol li{margin:0 auto 10px auto;color:#000;font-size:14px;letter-spacing: 0.5px;line-height:1.55;} #company_profile #all_wrapper .container .main #sec04 .unit .sign{text-align:center; font-size: 12px;letter-spacing: 0.5px;} #company_profile #all_wrapper .container aside{display: none;} #company_profile #all_wrapper .container aside ul{ position: sticky; top: 100px;margin: 0;padding:0px 0 0px 0;list-style: none;} #company_profile #all_wrapper .container aside ul li{ margin: 0 0 1px 0;padding: 0; background:#52d5d0;} #company_profile #all_wrapper .container aside ul li a{position:relative;display:block;background:#2eb8bc;padding:50px 0px 30px 00px;color: white;font-size: 20px;letter-spacing: 1px;text-decoration: none;overflow: hidden; transition: color 0.3s ease;} #company_profile #all_wrapper .container aside ul li a::before { content: ""; position: absolute; top: 0;left: 86%; width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b4ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #company_profile #all_wrapper .container aside ul li a:hover::before { width: 105%; left: 0;} #company_profile #all_wrapper .container aside ul li a::after{content:"\f105";position: absolute;top:50%;transform:translateY(-50%);left: 92%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 16px; transition: left 0.2s ease-out, color 0.3s ease;} #company_profile #all_wrapper .container aside ul li a:hover::after{left: 90%;transition: left 0.2s ease-out;} #company_profile #all_wrapper .container aside ul li a > span{ position: absolute; top: 50%;transform: translateY(-50%);left: 20px; z-index: 1; transition: color 0.3s ease;font-size:16px;letter-spacing: 1px;font-weight: 500;} #company_profile #all_wrapper .container aside ul li a span span{display: block;font-size:11px;letter-spacing: 1px;font-weight: 500;} /*パートナー募集*/ #partner .sample{width:1000px;margin:100px auto 200px auto;} #partner .sample h3{margin:0 auto 20px auto;padding:0px 0 10px 0; font-size: clamp(20px,1.0vw, 25px);letter-spacing: 1px;font-weight: 500;color: #1fa3ad;border-bottom: 1px solid #1fa3ad} #partner #lead_area{position:relative;} #partner #lead_area::before{content: '';position: absolute; top: 0;left:10%; width:50%; height: 100%;background: url("../img/2nd/parallelogram01.png") no-repeat;background-position: 50% 50%;background-size: cover;z-index: -1} #partner #lead_area .inner{ width:88%;margin:0 auto;padding: 32px 0} #partner #lead_area .inner p{margin:0;padding: 0;font-size: 15px;letter-spacing:0.5px;line-height: 1.9;color: #0091a0;text-align: left;font-weight: 600} #partner #lead_area .inner p br {display: none;} #partner #list_group{background:#e9f3f4;padding: 48px 0 24px 0} #partner #list_group .unit{margin: 0 auto 32px auto;} #partner #list_group .unit .title_area{width: 88%;margin: 0 auto 24px auto;} #partner #list_group .unit .title_area .inner{position:relative;width: 100%;aspect-ratio:6/1;border-radius: 10px;overflow: hidden;min-height: 80px;} #partner #list_group .unit .title_area .inner .photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} #partner #list_group .unit .title_area .inner .photo::before{content:'';position: absolute;top:0%;left: 0;width: 100%;height: 100%;background: rgba(0,32,40,0.7) } #partner #list_group .unit .title_area .inner .photo::after{content:'';position: absolute;top:0%;left: 80%;width: 30%;height: 100%;transform: skewX(-25deg);background:linear-gradient(90deg, #52d5d0, #31b3ba);} #partner #list_group .unit .title_area .inner .photo img{width: 100%;height: 100%;object-fit: cover;} #partner #list_group .unit .title_area .inner .text{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;width: 100%;} #partner #list_group .unit .title_area .inner .text p{position:relative;margin: 0;padding:18px 0 0 0;font-size: 16px;letter-spacing: 1px;font-weight: 400;color:#00d1db;} #partner #list_group .unit .title_area .inner .text p::before{content:'Partner Support';position: absolute;top:0%;left: 50%;transform: translateX(-50%); font-size: 13px;letter-spacing: 1px;width: 100%;} #partner #list_group .unit .title_area .inner h3{margin: 0;padding: 0;font-size: 19px;letter-spacing: 1px;font-weight: 600;color: white;} #partner #list_group .unit .text_area{width: 78%;margin: 0 auto;} #partner #list_group .unit .text_area p{font-size:14px;letter-spacing: 0.5px;font-weight: 400;line-height: 1.75} #partner #list_group .unit .text_area figure{margin:20px auto 0 auto;padding:0px 0 0 0;} #partner #list_group .unit .text_area figure img{width: 100%} #partner #contact_group .inner{position:relative;width: 100%;aspect-ratio:5.5/1;min-height: 285px} #partner #contact_group .inner .photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} #partner #contact_group .inner .photo::before{content:'';position: absolute;top:0%;left: 0;width: 100%;height: 100%;background: rgba(0,32,40,0.5) } #partner #contact_group .inner .photo::after{content:'';position: absolute;top:0%;right: 70%;width: 40%;height: 100%;transform: skewX(-25deg);background:linear-gradient(90deg, #52d5d0, #31b3ba);} #partner #contact_group .inner .photo img{width:100%;height: 100%;object-fit: cover;} #partner #contact_group .inner .text_area{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 80%;display: flex;justify-content: space-between;align-items: center;flex-direction: column;} #partner #contact_group .inner .text_area .primary{width: 100%;} #partner #contact_group .inner .text_area .primary h4{margin: 0 auto 24px auto;padding: 0;font-size: 30px;letter-spacing: 1px;font-weight: 600;color: white;} #partner #contact_group .inner .text_area .primary p{margin: 0;padding: 0;font-size: 14px;letter-spacing: 0.5px;font-weight: 400;color: white;line-height: 1.75;margin-bottom: 20px;} #partner #contact_group .inner .text_area .primary p br {display: none;} #partner #contact_group .inner .text_area .banner{width: 100%;} #partner #contact_group .inner .text_area .banner a{position:relative;display:block;padding:30px 0px;text-decoration: none;background:linear-gradient(90deg, #1ca9ec, #00a1a5);transition: color 0.3s ease;overflow: hidden;} #partner #contact_group .inner .text_area .banner a span{ position: absolute; top: 50%;transform: translateY(-50%);left: 30px; z-index: 1; transition: color 0.3s ease;color: white;font-size: 14px;letter-spacing: 0.5px;} #partner #contact_group .inner .text_area .banner a::before {content:"";position:absolute;top:0;left:80%;width:30%; height: 100%;background:linear-gradient(90deg, #52d5d0, #31b4ba);transform: skewX(-25deg);transition: width 0.5s ease, left 0.5s ease;z-index: 0} #partner #contact_group .inner .text_area .banner a::after{content:"\f105";position: absolute;top:50%;transform:translateY(-50%);left: 90%;z-index: 0;font-family: 'Font Awesome 5 Free';font-weight: 900;color: white;font-size: 16px; transition: left 0.2s ease-out, color 0.3s ease;} #partner #contact_group .inner .text_area .banner a:hover::before { width: 105%; left: 0;} #partner #contact_group .inner .text_area .banner a:hover::after{left: 92%;transition: left 0.2s ease-out;} }