@charset "UTF-8";

/* subページ：5つのメインコンテンツで使用 */

* {
  box-sizing: border-box;
}

body {
  font-family: 'Noto Serif JP', serif;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  /* box-shadow: 0px 6px 3px -3px rgba(4, 3, 22, 0.3); */
}

#header-nav .performance li.current {
  text-shadow: 1px 1px 1px rgba(1, 55, 173, 0.95);
  position: relative;
}

#header-nav .performance li.current::before {
  position: absolute;
  top: 38px;
  left: calc(50% - 10px);
  content: url(../images/arrow1.png);
}

#header-nav .inquiry li.inq_current {
  border-bottom: 1px #0137ad solid;
}

#kv {
  width: 100%;
  height: 220px;
  background: url(../images/kv_sub.jpg) no-repeat center center;
  background-color: #040310;
  margin-top: 110px;
  position: static;
}

main {
  width: 1024px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  border: 1px solid #ccc;
  padding: 25px 40px;
  margin: 130px auto 10px auto;
  background-image: url(../images/main_bg.png) repeat-y;
  background: #FFF;
  margin-bottom: 0;
  position: relative;
}

main .inner {
  width: 100%;
  margin-top: 10px;
}

main h1 {
  width: 240px;
  height: 240px;
  font-size: 2.1rem;
  font-weight: 600;
  color: #0c063d;
  text-shadow: 1px 1px 1px #aaa;
  position: absolute;
  top: -220px;
  left: calc(50% - 120px);
  z-index: 500;
  /* margin-top: -20px; */
  text-align: center;
  line-height: 240px;
  border-radius: 120px;
  background: #fff;
  box-shadow: 0 2px 2px rgba(1, 55, 173, 0.9);
  border: 1px #CCC solid;
}

/* h1を2行で */
main h1.double {
  line-height: 1.1;
  padding-top: 95px;
}

main h1.double_inquire {
  line-height: 1.6;
  padding-top: 86px;
}

main h1.double_special {
  line-height: 1.6;
  padding-top: 80px;
}

/* ねじりバネの文字小さく */
main h1.double span {
  font-size: 1.3rem;
}

main p {
  padding: 15px 40px 35px 40px;
}

main p.lead {
  font-size: 1.7rem;
  color: #000;
  font-weight: 600;
  position: absolute;
  z-index: 501;
  top: 9px;
  left: 22%;
  border-bottom: 2px dotted #5c5b66;
  line-height: 1.3;
  letter-spacing: 0.08em;
  padding-bottom: 2px;
  text-align: center;
  text-shadow: 1px 1px 1px #FFF, -1px -1px 1px #FFF;
  margin: 5px auto;
}

main p.lead span {
  background: rgba(255, 255, 255, 0.6);
}

/* 　↓　リード文の長さに応じて水平位置調整　2つ目のclass */
main p.totion {
  left: 23%;
}

main p.special {
  left: 22%;
}

main p.snap {
  left: 25%;
}

main p.inquire {
  left: 25%;
}

main p.faq {
  left: 28%;
}

/* main p.inquire span {
  color: rgb(255, 172, 172);
  text-shadow: 1px 1px 2px #0b102b;
} */

/* 各カテゴリの説明と画像 */
/* ココから下はmainを省略 */
#point {
  width: 100%;
  /* display: flex;
  flex-direction: column; */
  margin: 0 0 55px 0;
  padding: 0;
}

#point .description {
  margin: 70px 0 20px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
}

#point .description .text {
  flex-direction: column;
  width: 70%;
}

#point .description .text p {
  padding-right: 5px;
}

#point .description .add {
  flex-direction: column;
  padding-top: 20px;
  position: relative;
  width: 30%;
  text-align: center;
}

#point .description h2,
#point .case h2 {
  font-size: 1.7rem;
  font-weight: 600;
}

#point .description p {
  font-size: 1.5rem;
  line-height: 1.8;
  padding-top: 0;
}

#point .case ul {
  list-style-type: none;
  margin: -15px 0 10px 40px;
  width: 100%;
  /* clear: right; */
}

#point .case ul li {
  display: inline-block;
  padding-left: 16px;
  background-image: url(../images/list_mark-2.png);
  background-repeat: no-repeat;
  background-position: -8px 9px;
  margin-right: 20px;
}

#point h2 {
  font-size: 1.5rem;
  margin-left: 24px;
}

/* 自社開発「ペットブラ」の説明 */
p.moto {
  margin-left: 35%;
}

p.more {
  margin: 0 2% 0 25%;
}

.forsale::before {
  position: absolute;
  top: -20px;
  left: -2px;
  content: "販売品";
  color: #FFF;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 1.2rem;
  /* padding-top: 5px; */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #8098ce;
}

.arrow::after {
  content: url(../images/point_arrow.png);
  position: absolute;
  top: 290px;
  left: -110px;
  rotate: -40deg;
}

p.more a {
  font-weight: 600;
  display: inline-block;
  padding: 0px 8px;
  border: 1px solid #aaa;
  border-radius: 3px;

}

p.more a:hover {
  /* text-shadow: 1px 1px 1px #ff9a9a; */
  background: #e5ebf7;
}

.more img.mark {
  width: 30px;
  margin-bottom: -6px;
}

/* #point .description .addimg {
  position: absolute;
  right: 45px;
  top: 30px;
  width: 30%;
  text-align: center;
}

#point .description .addimg p {
  margin-top: -20px;
} */



/* -----事例（横3つのアイテム） */
#cases {
  margin: 0 -20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

main .inner h2 {
  font-size: 1.7rem;
  font-weight: 600;
  margin: 0 0 17px 0;
}

.main-item {
  width: 31%;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
  background: #fdfcfd;
  border-radius: 3px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  margin: 0 20px 30px 0;
  position: relative;
}

.main-item h2 {
  line-height: 2;
  text-align: center;
  margin: 0 0 17px 10px;
  font-weight: 600;
  font-size: 1.7rem;
}

.main-item img {
  width: 90%;
  margin-left: 5%;
}

.main-item p {
  width: 95%;
  font-size: 1.35rem;
  padding: 0 3px 6px 2%;
  height: 140px;
  overflow: hidden;
  overflow-y: auto;
}

/* 高さが140pxを超えたらスクロールバーを出す */
.main-item p::-webkit-scrollbar {
  width: 8px;
}

.main-item p::-webkit-scrollbar-thumb {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #c1ebf5), to(#d7e0e0));
  background: linear-gradient(to bottom, #c1ebf5 50%, #e6ecec);
  border-radius: 4px;
  border: 1px solid #d4d4d4;
}

.main-item p::-webkit-scrollbar-track {
  background: #ebebeb;
  border-radius: 4px;
}

.sp {
  display: none;
}

/* ------------------------------------------------------
　タブレット
------------------------------------------------------　 */
/* @media screen and (max-width: 768px) {
  body {
    background-color: #f10010;
  }
} */


/* ------------------------------------------------------
　スマホ
------------------------------------------------------　 */
@media screen and (max-width: 414px) {

  
  .sp {
    display: block;
  }

  .pc {
    display: none;
  }

  body {
    overflow-x: hidden;
  }

  * {
    box-sizing: border-box;
  }

  header {
    height: 78px;
    background: #fff;
  }

  #kv {
    margin-top: 78px;
    width: 100%;
  }

  main {
    width: 100%;
  }

  main .inner {
    margin: 55px 0 10px 0;
    background: #fff;
  }

  main .inner section {
    margin-bottom: 70px;
    background: #fff;
  }

  main {
    padding: 30px 0.5% 0px 0.5%;
    margin-bottom: -100px;
  }

  main h1 {
    position: absolute;
    top: -300px;
    left: calc(50% - 100px);
    width: 200px;
    height: 200px;
  }

  main h1.double_special, main h1.double {
    padding-top: 75px;
  }

  main h1.double_2 {
    padding-top: 0;
  }

  main p {
    top: -120px;
    margin-left: -18%;
    letter-spacing: 0;
    font-size: 1.4rem;
  }

  main p.lead {
    top: 12px;
  left: 3%;
    font-size: 1.55rem;
    width: 95%;
    text-align: center;
    /* margin: -50px auto 12px auto; */
  }


  /* 　↓　lead文の長さに応じて位置調整 */
  /* main p.totion {
    top: -55px;
    left: 28%;
  }

  main p.special {
    top: 15px;
    left: 86px;
  }

  main p.snap {
    top: -54px;
    left: 25%;
  } */


  /* --------　↓　製作例５ジャンル共通 */

  main h1 {
    top: -177px;
    line-height: 200px;
  }

  main .inner h2 {
    margin-left: 30px;
  }

  #point {
    width: 98%;
  }

  #point .description {
    display: block;
    width: 95%;
    padding: 0 8px 0 10px;
    margin: 0 auto;
  }

  #point .description .text, #point .case {
    width: 100%;
    margin: 0px 10px -20px 10px;
  }

  #point .description .text p {
    padding: 5px 5% 5px 22%;
  }

  #point .description .add {
    width: 100%;
    text-align: center;
  }

  #point .description .add img {
    max-width: 200px;
  }

  #point h2 {
    margin-left: 18px;
  }
  #point .description h2 {
    margin: 30px 0 4px 2px;
  }

  #point .case ul {
    width: 95%;
    margin-left: 18px;
  } 

  #cases {
    width: 95%;
    padding: 0 1% 0 9%;
  }

  .main-item {
    width: 100%;
  }

  .main-item h2 {
    margin: -30px auto 6px auto;
  }

  .main-item .photo img {
    max-width: 60%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .main-item p {
    /* overflow: visible; */
    width: 90%;
    margin-left: 5%;
  }

  /* 販売品（clip_snap）に関する記述 */

  #point .forsale::before {
    top: 30px;
    left: 35px;
  }

  #point .arrow::after {
  top: 245px;
  left: 160px;
  rotate: -90deg;
  }

  #point .more {
    width: 100%;
    margin-left: 8px;
  }

  #point .more span.hide {
    display: none;
  }


  /* 何故か調整が必要となった箇所（本来style.cssで書いた箇所） */
  #header-nav ul.us {
    top: 319px;
    left: 0px;
  }



}