@charset "utf-8";


/*======================================================

  共通レイアウト

======================================================*/
#wrapper {
  position: relative;
}

#page_top {
  position: fixed;
  right: 1.5%;
  bottom: 3.5%;
  z-index: 25;
}

#page_top a {
  display: block;
  color: #fff;
  position: relative;
  /* padding-bottom: 13rem; */
  background: #1c2f6e;
  width: 4rem;
  padding-top: 4rem;
  border-radius: 50%;
}

#page_top a:after {
  content: "";
  background: url(../Image/common/img_arrow_01.png) no-repeat;
  background-size: contain;
  width: 8px;
  height: 12px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}

#page_top.visible {
  transform: scale(1);
}

@media screen and (min-width : 992px) {
  #page_top a:hover {
    opacity: 0.6;
  }
}

section {
  padding: 15rem 0;
}

.under section {
  padding: 10rem 0;
}

section .sec_inner {
  max-width: 1200px;
  margin: auto;
  width: 92%;
}
.ttl_wrap {
  font-size:4rem;
  margin-bottom:1.1em;
}
.ttl_wrap .ttl_01 {
  line-height: 1;
}

.ttl_wrap .en {
  font-size: .35em;
  color: #1C2F6E;
  font-weight: 600;
  position: relative;
  margin-bottom: 3.2rem;
}

.ttl_wrap .en:before {
  content: "";
  background: #1C2F6E;
  width: 30%;
  height: 1px;
  display: block;
  position: absolute;
  bottom: -65%;
  left: 0;
}

.btn_01 {
  max-width: 250px;
}

.btn_01 a {
  width: 100%;
  display: block;
  text-align: center;
  padding: 7.5% 3%;
  background: #1C2F6E;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  position: relative;
  font-weight: 700;
  border: 2px solid #1C2F6E;
}

.btn_01 a:after {
  content: "";
  background: url(../Image/common/img_arrow_01.png) no-repeat;
  background-size: cover;
  width: 8px;
  height: 14px;
  display: block;
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (min-width : 992px) {
  .btn_01 a:hover {
    color: #1C2F6E;
    background: #fff;
    /* font-size: 1.6rem; */
  }

  .btn_01 a:hover:after {
    background: url(../Image/common/img_arrow_02.png) no-repeat;
    background-size: cover;
  }
}

/*--------------------------------------------
  パンくず
--------------------------------------------*/
#breadcrumb {
  padding: 1.8% 0;
  line-height: 1;
  text-align: left;
  border-bottom: 1px solid #F3F4F6;
  border-top: 1px solid #F3F4F6;
}

#breadcrumb ul {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
  font-weight: 200;
}

#breadcrumb li {
  position: relative;
  display: inline-block;
  font-size: 1.6rem;
  color: #444;
  padding-right: 0.5rem;
}

#breadcrumb li:last-child {
  padding-right: 0;
  font-weight: 500;
}

#breadcrumb li:first-child:after {
  content: ">";
  color: #000;
  margin-left: 1rem;
}

@media screen and (min-width : 992px) {
  #breadcrumb li a:hover span {
    text-decoration: underline;
  }
}

#breadcrumb li a:hover {
  text-decoration: none;
}

#breadcrumb li:last-child:before {
  content: none;
}

/*----------------------------------------
      トップページ　@top
----------------------------------------*/
#top #mainimage .txt_area {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#top #mainimage .txt_area img {
  max-width: 100%;
}

#top #mainimage .img_area {
  height: 80rem;
}

#top #mainimage .img_area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#top #sec_company {
  position: relative;
  margin-bottom: 13rem;
}

#top #sec_company.animate {
  opacity: 0;
  transform: translateY(5rem);
  transition: .6s;
}

#top #sec_company.animate.active {
  opacity: 1;
  transform: translateY(0rem);
}

#top #sec_company:before {
  content: "";
  background: #ECECF4;
  width: 80%;
  height: 69%;
  display: block;
  position: absolute;
  bottom: 7%;
  right: 0;
}

#top #sec_company .sec_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 5;
}

#top #sec_company .img_area {
  width: 52.5%;
  position: relative;
}

#top #sec_company .img_area:after {
  content: "";
  background: url(../Image/top/company_img_02.jpg) no-repeat;
  background-size: cover;
  width: 400px;
  height: 310px;
  display: block;
  position: absolute;
  bottom: -32%;
  right: -13%;
}

#top #sec_company .img_area img {
  max-width: 100%;
}

#top #sec_company .txt_area {
  max-width: 420px;
  padding-top: 12%;
  margin-left: auto;
}

#top #sec_company .txt_area .c_ttl {
  font-size: 2.8rem;
  line-height: 1.4;
  color: #1C2F6E;
  position: relative;
  margin-bottom: 4rem;
}

#top #sec_company .txt_area .c_ttl:after {
  content: "";
  background: #1C2F6E;
  height: 1px;
  width: 20%;
  display: block;
  position: absolute;
  left: 0;
  bottom: -2rem;
}

#top #sec_company .txt_area p {
  font-weight: 500;
  margin-bottom: 3rem;
}

#top #sec_business {
  padding: 32rem 0 0;
  margin-bottom: 12rem;
}

#top #sec_business.animate {
  opacity: 0;
  transform: translateY(5rem);
  transition: .6s;
}

#top #sec_business.animate.active {
  opacity: 1;
  transform: translateY(0rem);
}

#top #sec_business .sec_inner {
  position: relative;
  z-index: 5;
}

#top .menu {
  position: relative;
}

#top .menu:before {
  content: "";
  background: #ECECF4;
  width: 80%;
  height: 97%;
  position: absolute;
  top: 7%;
  display: block;
}

#top #sec_business.menu:before {
  left: 0;
}

#top #sec_products.menu:before {
  right: 0;
}
#top .menu .btn_wrap{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
#top .menu .btn_wrap .btn_01{
  max-width: 180px;
  width: 100%;
}
#top .menu:after {
  content: "";
  background: url(../Image/top/service_img.jpg) no-repeat;
  background-size: cover;
  width: 80%;
  height: 100%;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

#top .menu:after {
  content: "";
  width: 80%;
  height: 100%;
  display: block;
  position: absolute;
  top: -4%;
}

#top #sec_business.menu:after {
  background: url(../Image/top/service_img.jpg) no-repeat;
  background-size: cover;
  right: 0;
}

#top #sec_products.menu:after {
  background: url(../Image/top/product_img.jpg) no-repeat;
  background-size: cover;
  left: 0;
}

#top .menu .txt_area {
  background: #fff;
  max-width: 680px;
  padding: 6.2% 5.5%;
  z-index: 1;
  position: relative;
}

#top #sec_products.menu .txt_area {
  margin-left: auto;
}

#top .menu .txt_area>p {
  font-weight: 500;
  margin-bottom: 2.8rem;
}

#top .menu .txt_area .ttl_wrap {
  line-height: 1;
}

#top #sec_products.menu .txt_area .btn_wrap {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

#top #sec_products.menu .txt_area .btn_01 {
  width: 32%;
}

#top #sec_products.menu .txt_area .btn_01 a {
  font-size: 1.6rem;
  padding: 12% 2%;
}

#top #sec_products {
  padding: 35rem 0 0;
  margin-bottom: 10rem;
}

#top #sec_products.animate {
  opacity: 0;
  transform: translateY(5rem);
  transition: .6s;
}

#top #sec_products.animate.active {
  opacity: 1;
  transform: translateY(0rem);
}

#top #sec_recruit {
  background: #849BBD;
  padding: 18rem 0;
}

#top #sec_recruit.animate {
  opacity: 0;
  transform: translateY(5rem);
  transition: .6s;
}

#top #sec_recruit.animate.active {
  opacity: 1;
  transform: translateY(0rem);
}

#top #sec_recruit .sec_inner {
  position: relative;
}

#top #sec_recruit .sec_inner:before {
  content: "";
  background: url(../Image/top/recruit_img.jpg) no-repeat;
  background-size: cover;
  width: 70%;
  height: 134%;
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#top #sec_recruit .txt_area {
  max-width: 440px;
  background: #fff;
  padding: 5.5% 5%;
  position: relative;
  z-index: 1;
}

#top #sec_recruit .txt_area .ttl_wrap .en {
  margin-bottom: 1.8rem;
}

#top #sec_recruit .txt_area .ttl_wrap .en:before {
  bottom: -19%;
}

#top #sec_recruit .txt_area .ttl_wrap .ttl_01 {
  margin-bottom: 1.5rem;
  font-size: 3.4rem;
}

#top #sec_recruit .txt_area>p {
  font-weight: 500;
  margin-bottom: 1.5rem;
}

#top #sec_recruit .txt_area .btn_01 {
  max-width: 100%;
}

#top #sec_recruit .txt_area .btn_01 a {
  padding: 6% 2%;
}

/*============================
  FRAMEWORK @common
============================*/
.container {
  max-width: 1200px;
  width: 92%;
  margin: 0 auto;
  padding: 0 5rem;
}

.flex_box {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

.ttl_02 {
  position: relative;
  font-size: 2.6rem;
  line-height: 1.2;
  border-bottom: solid 1px #ddd;
  padding-left: .75em;
  padding-bottom: .75em;
  margin-bottom: 5rem;
}

.ttl_02:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -1px;
  width: 1.75em;
  height: 1px;
  background: #1b2f6e;

}
.ttl_03 {
    font-size: 2rem;
    line-height: 1;
}
.ttl_04 {
    font-size: 2.2rem;
    line-height: 1;
}
.ttl_04 span{
  position:relative;
}
.ttl_04 span:before{
  content:"";
  background:#162168;
  width:16px;
  height:3px;
  display:block;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
}
.under .main_sec {
  padding-bottom: 0;
}

article .sub_sec {
  padding: 10rem 0;
}

.under .mv {
  background: url(../Image/common/mv.jpg) no-repeat center center / cover;
}

.under .mv .container {
  position: relative;
  padding: 50rem 0 0;
}

.under .page_ttl {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 1;
  width: 55%;
  font-size: 4.5rem;
  padding-top: 1.9em;
  padding-left: 1em;
  background: #fff;
}

.under .page_ttl h1 {
  margin-bottom: .44em
}

.under .page_ttl p {
  font-size: .4em;
  color: #1c2f6e;
  font-weight: bold;
}

.breadcrumbs {
  padding: 3rem 0;
  line-height: 1;
  font-size: 1.4rem;
  font-weight: 500;
}

.breadcrumbs ul {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}

.breadcrumbs li:not(:last-child):after {
  content: "\03009";
}

.breadcrumbs a {
  color: #333333;
  white-space: nowrap;
}

.breadcrumbs li:last-child a {
  max-width: 10em;
  text-overflow: ellipsis;
  overflow: hidden;
}

/*============================
  事業紹介　@business
============================*/
/* @ === common === @ */
#business article {
  counter-reset: ttl_count 0;
}

/* @ === sec_intro === @ */
#business .sec_intro {
  padding-bottom: 0;
}

#business .sec_intro .container {
  padding: 0;
}

#business .sec_intro .lead {
  text-align: center;
  line-height: 1.875;
  margin-bottom: 2.5em;
}

#business .sec_intro .a_link {
  padding: 5rem;
  background: #ececf4;
  counter-reset: link_count 0;
}

#business .sec_intro .a_link ul {
  justify-content: space-between;
}

#business .sec_intro .a_link li {
  justify-content: stretch;
  width: 31%;
  counter-increment: link_count 1;
}

#business .sec_intro .a_link ul li a {
  position: relative;
  justify-content: space-between;
  flex-direction: column;
  background: #fff;
  font-size: 2rem;
  font-weight: bold;
  width: 100%;
  height: 100%;
  border-top: solid 1px #e9e9e9;
}

#business .sec_intro .a_link ul li span {
  position: relative;
  padding: 1.5em 1.5em 1em 3.5em;
}

#business .sec_intro .a_link ul li a span:before {
  position: absolute;
  content: counter(link_count, decimal-leading-zero);
  font-size: 1.6em;
  left: .75em;
  top: .9em;
  line-height: 1;
  color: #1c2f6e;
}

#business .sec_intro .a_link ul li a:after {
  position: absolute;
  content: "";
  width: 30%;
  height: 2px;
  top: -2px;
  left: 0;
  background: #1c2f6e;

}

#business .sec_intro .a_link ul li a>* {
  display: block;
}

#business .sec_intro .a_link ul li a i.arrow {
  border-top: solid 1px #eee;
  padding: 7px 0 8px;
  text-align: center;
  line-height: 1;
  font-size: 0;
}

#business .sec_intro .a_link ul li a i.arrow:before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 8px;
  background: url(../Image/common/img_arrow_04.png) no-repeat center center;
}

/* @ === sec_business === @ */
#business .sec_business {
  counter-increment: ttl_count 1;
}

#business #business02 {
  background: #ececf4;
}

#business .sec_business .upper {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-bottom: 5rem;
}

#business .sec_business:nth-of-type(odd) .upper {
  justify-content: flex-start;
}

#business .sec_business:nth-of-type(even) .upper {
  justify-content: flex-end;
}

#business .sec_business .upper .txt_box {
  position: absolute;
  width: 47%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  top: 10%;
  background: #fff;
  padding: 2.5rem 5.5rem;
}

#business .sec_business:nth-of-type(odd) .upper .txt_box {
  right: 0;
}

#business .sec_business:nth-of-type(even) .upper .txt_box {
  left: 0;
}

#business .sec_business .upper h2 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  font-size: 2.2rem;
  margin-bottom: 1.368em;
  line-height: 1;
}

#business .sec_business .upper h2:before {
  font-size: 1.68em;
  content: counter(ttl_count, decimal-leading-zero);
  margin-right: .5em;
  color: #1c2f6e;
}

#business .sec_business .upper h2 span {
  padding-bottom: .15em;
}

#business .sec_business .upper p:not(:last-child) {
  margin-bottom: 1em;
}

#business .sec_business .upper strong {
  font-size: 1.25em;
}

#business .sec_business .upper .img_box {
  width: 68%;
}

#business .sec_business .upper .img_box img {
  max-width: 100%;
  height: auto;
}

#business .sec_business dl:not(:last-child) {
  margin-bottom: 5rem
}
#business .sec_business .btn_ttl{
    text-align: center;
    font-size: 1.3em;
    margin-bottom: 0.5em;
}
#business .sec_business dt {
  position: relative;
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 1em;
}

#business .sec_business dt:before {
  position: absolute;
  content: "";
  width: .75em;
  height: 3px;
  background: #1c2f6e;
  top: calc(50% - 2px);
  left: 0;
}

#business .sec_business dt,
#business .sec_business dd {
  padding-left: 3rem;
}

#business .sec_business dd:not(:last-child) {
  margin-bottom: 5rem;
}

#business .sec_business .sheet {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}

#business .sec_business .sheet li {
  width: 49%;
  justify-content: space-between;
}

#business .sec_business .sheet li:nth-child(n+3) {
  margin-top: 3%
}

#business .sec_business .sheet span {
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  line-height: 1.4;
  padding: 1.2em 0;
}

#business .sec_business .sheet .ttl {
  width: 24.5%;
  border-color: #1c2f6e;
}

#business .sec_business .sheet .detail {
  width: 71%;
}

#business .sec_business .item_list {
  flex-wrap: wrap;
  margin-top: -1em;
}

#business .sec_business .item_list li {
  font-weight: bold;
  line-height: 1;
  padding: 1em 1em .85em;
  border: solid 1px#1b2f6e;
  color: #1b2f6e;
  margin-top: 1em;
}

#business .sec_business .item_list li:not(:last-child) {
  margin-right: 1em;
}

#business .sec_business .img_list {
  flex-wrap: wrap;
}

#business .sec_business .img_list li {
  width: 23.5%;
}

#business .sec_business .img_list li:nth-child(n+5) {
  margin-top: 4rem;
}

#business .sec_business .img_list li:not(:nth-child(4n)):not(:last-child) {
  margin-right: 2%;
}

#business .sec_business .img_list .image {
  width: 100%;
}

#business .sec_business .img_list .image img {
  max-width: 100%;
  height: auto;
}

#business .sec_business .img_list p {
  font-size: 1.8rem;
  font-weight: bold;
  color: #1b2f6e;
  line-height: 1.2;
  text-align: center;
  margin-top: .9em;
}

#business .sec_business .banner {
  position: relative;
  align-items: center;
  padding: 5rem 33% 5rem 5rem;
  background: #ececf4;
}

#business .sec_business .banner:after {
  position: absolute;
  content: "";
  width: 33%;
  height: 100%;
  background: url(../Image/business/bnr_img.jpg) no-repeat center center /cover;
  top: 0;
  right: 0;
}

#business .sec_business .banner h3 {
  position: relative;
  width: 140px;
  padding-top: 140px;
  border-radius: 50%;
  background: #1b2f6e;
  color: #fff;
  margin-right: 1.5rem;
  font-size: 1.8rem;
  line-height: 1.33;
}

#business .sec_business .banner h3 span {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

#business .sec_business .banner .tArea {
  width: calc(100% - 140px - 4rem);
}

#business .sec_business .banner .tArea p:not(:last-child) {
  margin-bottom: 1em;
}

#business .sec_business .banner .tArea p strong {
  font-size: 1.375em;
  color: #1b2f6e;
  line-height: 1.5;
}

#business .sec_business .btn_wrap {
  justify-content: center;
}

#business .sec_business .btn_wrap .btn_01 {
  width: 18em;
  max-width: none;
}

#business .sec_business .btn_wrap .btn_01:not(:last-child) {
  margin-right: 4.5em;
}

#business .sec_business .btn_wrap .btn_01 a {}

/* @ === sec_flow === @ */
#business .sec_flow {
  background: #ececf4;
}

#business .sec_flow .container {
  padding: 5rem;
  background: #fff;
}

#business .sec_flow .flow_box {
  counter-reset: flow_count 0;
}

#business .sec_flow li {
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  padding: 3em 0;
  counter-increment: flow_count 1;
}

#business .sec_flow li:before {
  display: block;
  content: counter(flow_count, decimal-leading-zero);
  font-weight: bold;
  line-height: 1;
  color: #1b2f6e;
  font-size: 1.625em;
  padding-right: 1em;
  border-right: solid 1px #1b2f6e;
  width: 2.5em;
}

#business .sec_flow .txt_box {
  padding: 0 1.5em 0 3.75em;
  width: calc(69.5% - 4.0625em);
}

#business .sec_flow h3 {
  font-size: 1.625em;
  line-height: 1;
  margin-bottom: 1.75em;
}

#business .sec_flow .img_box {
  width: 30.5%;
}

#business .sec_flow .img_box img {
  max-width: 100%;
  height: auto;
}


/*============================
  製品案内　@products
============================*/
.sec_products .container {
  justify-content: space-between;
}
.sec_products .side {
  width: 20%;
}
.sec_products .side .ttl_03 {
  margin-bottom: 2rem;
  line-height: 1;
}
.sec_products .side .serch {
  justify-content:space-between;
  border-bottom: 1px solid #afbabd;
  padding-bottom: 2em;
  margin-bottom: 2em;
}
.sec_products .side .serch input.s_box{
  max-width: 17rem;
  border: 1px solid #C3C3C3;
}
.sec_products .side .serch input.btn {
  width: 3rem;
  padding: 2.7rem 0 0 0;
  font-size: 0;
  border-radius: 3px;
  position:relative;
  background:url(../Image/common/icon_serch.png) #162168 center no-repeat;
}
.sec_products .side .category .cat li {
  padding-left: 2em;
  margin-bottom: 1em;
}
.sec_products .side .category .cat li a {
  display: block;
  line-height: 1;
}
.sec_products .side .category .cat li a p {
  position:relative;
}
.sec_products .side .category .cat li a p:before{
  content:"";
  background:url(../Image/common/img_arrow_04.png) no-repeat;
  width:1.3rem;
  height:0.9rem;
  display:block;
  transform: translateY(-50%) rotate(-90deg);
  position: absolute;
  top: 50%;
  left: -1em;
}
@media screen and (min-width : 992px) {
  .sec_products .side .category .cat li a:hover{
    opacity:0.6;
  }
}
.sec_products .m-cont .ttl_04 {
  margin-bottom: 2em;
}
.sec_products .m-cont .ttl_04 span {
  display: block;
  padding-left: 1em;
}
.sec_products .m-cont {
  width: 74.5%;
}
.sec_products .m-cont .in_box{
  flex-wrap:wrap;
}
.sec_products .m-cont .p_box {
  width: 31.5%;
  margin-right: 2.75%;
  margin-top: 4em;
}
.sec_products .m-cont .p_box a{
  display:block;
  width: 100%;
}
@media (min-width : 768px) {
  .sec_products .m-cont .p_box:nth-child(-n+3){
    margin-top:0;
  }
  .sec_products .m-cont .p_box:nth-child(3n){
    margin-right:0;    
  }
}
.sec_products .m-cont .p_box .img {
  width:100%;
  text-align: center;
  border: 1px solid #A5A5A5;
  margin-bottom: 0.8em;
  height: 11em;
}
.sec_products .m-cont .p_box .img img {
  /* max-width: 100%; */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec_products .m-cont .p_box .txt {
    line-height: 1;
    font-size: 1.8rem;
    font-weight: 600;
    position:relative;
    padding-left:1em;
}
.sec_products .m-cont .p_box .txt:before {
  content:"";
  background:url(../Image/common/img_arrow_04.png) no-repeat;
  width:13px;
  height:9px;
  display:block;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
}
@media screen and (min-width : 992px) {
  .sec_products .m-cont .p_box a:hover{
    opacity:0.5;
  }
}

/*single*/
 .sec_products.single {
}
 .sec_products.single {
}
 .sec_products.single .side {
}
 .sec_products.single .side .ttl_03 {
}
 .sec_products.single .side .serch {
}
 .sec_products.single .side .serch input.btn {
}
 .sec_products.single .side .category {
}
 .sec_products.single .side .category .ttl_03 {
}
 .sec_products.single .side .category .cat {
}
 .sec_products.single .side .category .cat li {
}
 .sec_products.single .side .category .cat li a {
}
 .sec_products.single .side .category .cat li a p {
}
 .sec_products.single {
}
 .sec_products.single .ttl_05 {
   font-size: 4.8rem;
   line-height: 1;
   margin-bottom: 0.8em;
}
 .sec_products.single .ttl_05 span {
   font-size: 1.8rem;
   font-weight: 400;
   margin-left: 0.5em;
}
 .sec_products.single .img {
   border: 1px solid #9C9C9C;
   padding: 1em;
   height: 50rem;
   margin-bottom: 4em;
}
 .sec_products.single .img img {
   width: 100%;
   height:100%;
   object-fit: contain;
 }
 .sec_products.single .detail {
   width: 72rem;
   margin: 0 auto 5em;
  }
 .sec_products.single .detail li {
   display: flex;
   justify-content: space-between;
   align-items: stretch;
   line-height: 1.6;
   font-size: 1.8rem;
 }
  .sec_products.single .detail li .ttl,
  .sec_products.single .detail li .txt {
   padding: 1em 0;
  }
 .sec_products.single .detail li .ttl {
   width: 17.3%;
   border-bottom: 1px solid #162168;
 }
  .sec_products.single .detail li:first-child .ttl{
   border-top: 1px solid #162168;
 }
  .sec_products.single .detail li:first-child .txt{
   border-top: 1px solid #D9D9D9;
 }
 .sec_products.single .detail li .txt {
   max-width: 580px;
   width: 80%;
   border-bottom: 1px solid #D9D9D9;
 }
 .sec_products.single .cord {
   margin-bottom: 4em;
 }
 .sec_products.single .cord .color {
   flex-wrap:wrap;
   width: 72rem;
   margin: auto;
}
 .sec_products.single .cord .color li {
   width: 12.5%;
   margin-right: 9.3%;
   margin-top:2em;
}
@media (min-width : 768px) {
 .sec_products.single .cord .color li:nth-child(5n){
   margin-right:0;   
 }
 .sec_products.single .cord .color li:nth-child(-n+5){
   margin-top:0;
 }
}
 .sec_products.single .cord .color li .color{
   display: block;
   width: 100%;
   background: #ddd;
 }
 .sec_products.single .cord .color li .txt {
   font-size: 2rem;
  }
  .sec_products.single input[type="checkbox"]{
    width: 1.3em;
    height: 1.3em;
  }
 .sec_products.single .cord .color li .txt p {
   font-size: 2rem;
  }
 .sec_products.single .cord .color li .color_27 {
   background: #FB5200;
 }
 .sec_products.single .cord .color li .color_22 {
   background: #890E1D;
  }
 .sec_products.single .cord .color li .color_23 {
   background: #018A8E;
 }
 .sec_products.single .cord .color li .color_24 {
   background: #FCCE07;
 }
 .sec_products.single .cord .color li .color_34 {
   background: #467B04;
 }
 .sec_products.single .cord .color li .color_35 {
   background: #EE0C0D;
 }
 .sec_products.single .cord .color li .color_36 {
   background: #0A2859;
 }
 .sec_products.single .cord .color li .color_37 {
   background: #AC9E7C;
 }
 .sec_products.single .cord .color li .color_ow {
   background: #8F976F;
 }
 .sec_products.single .btn_wrap {
   max-width: 65rem;
   justify-content: space-between;
   margin: auto;
 }
 .sec_products.single .btn_wrap .btn_submit {
   width: 29rem;
   max-width: 100%;
  }
 .sec_products.single .btn_wrap .btn_01 a {

  }



/*============================
  会社案内　@company
============================*/
/* @ === sec_greeting === @ */

#company .sec_greeting .container {
  justify-content: space-between;
  align-items: flex-start;
}

#company .sec_greeting .img_box {
  position: relative;
  width: 42.75%;
  padding-bottom: 3rem;
}

#company .sec_greeting .img_box:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 3rem);
  background: #ebecf3;
  transform: translate(-3rem, 3rem);
}

#company .sec_greeting .img_box img {
  position: relative;
  max-width: 100%;
  height: auto;
  z-index: 2;
}

#company .sec_greeting .txt_box {
  width: 48%;
  line-height: 1.875;
}

#company .sec_greeting .txt_box p:not(:last-child) {
  margin-bottom: 1em;
}

#company .sec_greeting .txt_box .sign {
  text-align: right;
  line-height: 1;
  font-family: '游明朝', 'Times New Roman', 'YuMincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', serif;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

#company .sec_greeting .txt_box .sign .post {
  margin-right: 1em
}

#company .sec_greeting .txt_box .sign .name {
  font-size: 1.375em;
  margin-top: 1rem;
}

/* @ === sec_history === @ */
#company .sec_history {
  background: #ebecf3;
}

#company .sec_history .history_box li {
  font-size: 2rem;
  align-items: flex-start;
}

#company .sec_history .history_box .ymd {
  font-family: '游明朝', 'Times New Roman', 'YuMincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', serif;
  font-size: 2em;
  line-height: 1;
  align-items: flex-end;
  width: 22.8%;
}

#company .sec_history .history_box .year {
  margin-right: .625em;
}

#company .sec_history .history_box .year span,
#company .sec_history .history_box .month {
  font-size: .625em;
}

#company .sec_history .history_box .detail {
  position: relative;
  width: 77.2%;
  line-height: 1.4;
  padding-top: .6em;
  padding-left: 8rem;
  padding-bottom: 9rem;
}

#company .sec_history .history_box .detail:before {
  position: absolute;
  content: "";
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: #333;
  left: calc(-.275em + .5px);
  top: 1.05em;
}

#company .sec_history .history_box .detail:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #333;
}

#company .sec_history .history_box li:first-child .detail {
  padding-top: 0;
  margin-top: .6em;
}

#company .sec_history .history_box li:first-child .detail:before {
  top: .55em;
}

#company .sec_history .history_box li:first-child .detail:after {
  top: .55em;
  height: calc(100% - .55em);
}

#company .sec_history .history_box li:last-child .detail {
  padding-bottom: 0;
}

#company .sec_history .history_box li:last-child .detail:after {
  height: calc(100% - .5em);
}

/* @ === sec_info === @ */
#company .sec_info {}

#company .sec_info .info_box {
  justify-content: space-between;
}

#company .sec_info .info_box table {
  width: 47.2%;
}

#company .sec_info .info_box th,
#company .sec_info .info_box td {
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  line-height: 1.4;
  padding: 1.5em 0 1.45em;
  text-align: left;
  vertical-align: top;
}

#company .sec_info .info_box th {
  width: 23%;
  border-color: #333;
}

#company .sec_info .info_box td {}

/* @ === sec_access === @ */
#company .sec_access {
  background: #ebecf3;
}

#company .sec_access .access_box:not(:last-of-type) {
  margin-bottom: 10rem;
}

#company .sec_access .access_box:nth-of-type(odd) {
  flex-direction: row-reverse;
}

#company .sec_access .access_box:nth-of-type(even) {
  flex-direction: row;
}

#company .sec_access .access_box>div {
  width: 50%;
}

#company .sec_access .info_box {
  padding: 19.5rem 5rem;
  background: #fff;
}

#company .sec_access .access_box:nth-of-type(odd) .info_box .inner {
  margin-right: auto;
  padding-left: 11rem;
}

#company .sec_access .access_box:nth-of-type(even) .info_box .inner {
  margin-left: auto;
  padding-left: 3.5rem;
}

#company .sec_access .info_box .inner {
  max-width: 550px;
}

#company .sec_access .info_box h3 {
  font-size: 3rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: .5em;
}

#company .sec_access .map_box {
  position: relative;
}

#company .sec_access .map_box iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}


/*============================
  採用情報　@recruit
============================*/
/* @ === sec_requirement === @ */

#recruit .sec_requirement th,
#recruit .sec_requirement td {
  padding: 1.5em 0;
  vertical-align: top;
  border-style: solid;
  border-width: 1px 0 0 0;
  border-color: #ddd;
}

#recruit .sec_requirement tr:last-child th,
#recruit .sec_requirement tr:last-child td {
  border-bottom-width: 1px;
}

#recruit .sec_requirement th {
  width: 25%;
  text-align: left;
  border-color: #1c306f;
}

#recruit .sec_requirement td {
  width: 75%;
}

#recruit .sec_requirement h3 {
  font-size: 1.25em;
}

#recruit .sec_requirement .detail {
  line-height: 1.875;
}

#recruit .sec_requirement .detail>:not(:last-child) {
  margin-bottom: 1em;
}

#recruit .sec_requirement .detail dt {
  font-weight: bold;
  color: #1c306f;
}

#recruit .sec_requirement .detail dd:not(:last-child) {
  margin-bottom: 1em;
}

#recruit .sec_requirement .detail dt span:first-child {
  position: relative;
  padding-right: 3em;
}

#recruit .sec_requirement .detail dt span:first-child:before {
  position: absolute;
  content: "";
  width: 1em;
  height: 1px;
  background: #1c306f;
  right: 1em;
  top: .6em;
}

#recruit .sec_requirement p+.d_list {
  margin-top: -1em;
}

#recruit .sec_requirement .d_list {
  padding-left: .5em;
}

#recruit .sec_requirement .d_list li {
  position: relative;
  padding-left: 1.2em;
}

#recruit .sec_requirement .d_list li:before {
  position: absolute;
  content: "\025CE";
  left: 0;
  top: 0;
}

/*============================
  プライバシーポリシー　@privacy
============================*/
/* @ === sec_privacy === @ */
#privacy .sec_privacy .pp_box>p {
  margin-bottom: 3em;
}

#privacy .sec_privacy dt {
  color: #1c306f;
  line-height: 1;
  font-size: 2rem;
  margin-bottom: 1em;
}

#privacy .sec_privacy dd:not(:last-child) {
  margin-bottom: 3em;
}


#privacy .sec_privacy .d_list li {
  position: relative;
  padding-left: 1em;
  line-height: 1.6;
}

#privacy .sec_privacy .d_list li:before {
  position: absolute;
  content: "";
  width: 1em;
  height: 1em;
  background: #1c306f;
  border-radius: 50%;
  left: 0;
  top: .3em;
  transform: scale(.5);
}

#privacy .sec_privacy dd p:not(:last-child) {
  margin-bottom: 1em;
}

#privacy .sec_privacy p a {
  color: #216ad8;
}



/*----------------------------------------
      お問い合わせ　@contact
----------------------------------------*/

input,
select,
textarea {
  line-height: 1.6;
  border: 1px solid #e0e0e0;
  padding: 0.2rem 1rem;
  vertical-align: middle;
  width: 100%;
  font-size: 1.6rem;
  font-family: 'Noto Sans JP', sans-serif;
  width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

.short {
  width: 40%;
}

.short02 {
  width: 20%;
}

.middle {
  width: 60%;
}

.long {
  width: 100%;
}

#sec_form .secInner {
  max-width: 1100px;
  width: 92%;
  margin: auto;
}

#sec_form table {
  margin-bottom: 3rem;
  table-layout: fixed;
}

#sec_form td textarea {
  resize: none;
  height: 20rem;
}

#sec_form th {
  text-align: left;
  width: 25%;
  border-bottom: 1px solid #000000;
}

#sec_form td {
  width: 75%;
  border-bottom: 1px solid #F3F4F6;
  padding-left: 17%;
}

#sec_form tr {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

#sec_form th,
#sec_form td {
  padding: 2rem 1.5rem;
  vertical-align: top;
  font-size: 1.8rem;
  display: block;
}

@media screen and (min-width : 992px) {
#sec_form tr:first-child th,
#sec_form tr:first-child td {
  padding-top: 0;
}
}

#sec_form tr:last-child th,
#sec_form tr:last-child td {
  padding-bottom: 0;
}

#sec_form th {
  width: 25%;
}

#sec_form tr td {
  width: 70%;
}

#sec_form tr .flex_box label {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
#sec_form tr .flex_box span:last-child label{
  margin-bottom: 0;
}

#sec_form td span {
  font-size: 1.7rem;
  display: flex;
  margin-left: 0;
}

#sec_form td .support,
#sec_form td .support02 {
  font-size: 1.4rem;
  color: #818181;
}

#sec_form td .item {
  display: flex;
  margin-bottom: 1rem;
}

#sec_form td .item:last-child {
  margin-bottom: 0;
}

#sec_form td .item p {
  margin-right: 2rem;
}

#sec_form th .must-fill {
  color: #E35252;
  font-size: 1.3rem;
  margin-left: 2%;
  font-weight: 400;
}

#sec_form th .must-fill:before {
  content: "[";
}

#sec_form th .must-fill:after {
  content: "]";
}

#sec_form .postal_mark {
  margin-right: 0.5rem;
}

#sec_form .submit_area {
  max-width: 32.5rem;
  margin: auto;
}

#sec_form ol.address li .ttl {
  margin-right: 1.5%;
}

#sec_form ol.address li {
  margin-top: 2%;
}

#sec_form ol.address li:first-child {
  margin-top: 0;
}

/*注文フォーム*/
#sec_form .box{
  padding-bottom:1em;
  margin-bottom:1em;
  border-bottom:1px solid #ddd;
  font-size:1.5rem;
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
}
#sec_form .box:last-child{
  margin-bottom:0;
  border:none;
  position
  padding-bottom:0;
}
#sec_form .color_cord{
  display:flex;
  width: 50%;
}
#sec_form .quantity{
  display:flex;
  width: 50%;
}
#sec_form .color_cord .middle{
  width: 67%;
}
#sec_form .quantity .short{
  width: 27%;
  margin:0 1em 0;
}
.btn_submit,
#sec_form .submit_area .back {
  width: 100%;
  display: block;
  background: #1c2f6e;
  font-size: 1.8rem;
  font-weight: 300;
  text-align: center;
  padding: 1.8rem;
  line-height: 1;
  border: 3px solid #1c2f6e;
  color: #fff;
  transition-duration: 0.3s;
  font-family: 'Noto Serif JP', serif;
}

#sec_form .submit_area .btn_submit {
  margin-bottom: 1rem;
}

#sec_form .submit_area .back {
  background: #737373;
  border: 1px solid #737373;
}

#sec_form .btn_submit:disabled {
  opacity: 0.6;
  pointer-events: none;
}

#confirm ol.address li .ttl:after {
  content: ":";
  padding-left: 10%;
}

#confirm tr {
  border-bottom: 2px dotted #C6BD96;
  .btn_01 margin: auto;
}

#confirm tr td,
#confirm tr th,
#confirm tr:last-child td {
  padding: 2%;
}

#confirm ul.in_list02 {
  display: flex;
}

#confirm .ttl_02 {
  margin-bottom: 5rem;
}

#thanks .txt,
#not_found .text {
  text-align: center;
  margin-bottom: 2%;
}

#thanks .btn_01,
#not_found .btn_01 {
  margin: auto;
}

#thanks .thanks{
    text-align: center;
    margin-bottom: 2em;
}
/*-----------------------------------------------------
    ブログなどのページャー（Wordpress）
------------------------------------------------------*/
/* ナビゲーション全体のデザイン */
.wp-pagenavi {
  text-align: center;
  margin-top: 5em;
}

/* ボタン<a>タグのデザイン */
.wp-pagenavi a,
.wp-pagenavi span {
  display: inline-block;
  line-height: 34px;
  padding: 0 10px !important;
  text-align: center;
  font-weight: bold;
  border: solid 1px #404cbf;
  background: #eff4fb;
  color: #1c2f6e;
  vertical-align: middle;
  margin-top: 6rem;
}

.wp-pagenavi *:nth-child(n+2) {
  margin-left: -1px;
}

/* ボタン<a>タグのホバー時のデザイン */
@media screen and (min-width : 992px) {
  .wp-pagenavi a:hover {
    background: #1c2f6e;
    border-color: #1c2f6e;
    color: #fff;
  }
}

/* 表示中のページ番号のデザイン */
.wp-pagenavi .current {
  background: #1c2f6e;
  border-color: #1c2f6e;
  color: #fff;
}

/* 矢印（ < とか > ）のデザイン */
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {}

/*======================================================

  デスクトップ @ 1200px～

======================================================*/
/* @ 1200px～のみ*/
@media (min-width: 1200px) {}


/*======================================================

  ノートPC @ 992～1199px

======================================================*/
/* @ 1199px～ */
@media screen and (max-width : 1199px) {
  #top #sec_company .img_area:after {
    bottom: -52%;
    right: 2%;
  }

  /*--------------------------------------------
  下層MV
--------------------------------------------*/
  .under #mainimage .mv_ttl {
    width: 92%;
  }


}


/* @ 1199～992pxのみ */
@media (min-width : 992px) and (max-width : 1199px) {}