/*  -------------------------------------------------------
Theme Name:買取専門店パイプ堂
Theme URL:https://
Description: 買取専門店パイプ堂のテーマ
Author:Riho Isobe
Version:1.0.0
PC版
----------------------------------------------------------- */

/* デフォルトのフォント指定 */
.shippori-mincho-regular {
	font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
}
body {
	padding: 0;
	margin: 0;
	background-color: #A58F86; 
	overflow-x: hidden;
}
  
  body, h1, h2, h3, h4, h5, a, p, label, select, option, button, span, textarea, input {
      font-family: "Shippori Mincho", serif;
      margin: 0;
      padding: 0;
      color: black;
      text-decoration: none;
  }
  
  section {
      margin: 0;
      /*side-button space section space */
      /* 24vw        3vw    70vw    3vw */
  /* 	width: 66vw;
      padding-left: 2vw;
      padding-right: 2vw;
      margin-top: 4vw;
      margin-left: 27vw; */
  }
  
  h1 { font-size: 2vw;}
  h2 { font-size: 2.0vw; }
  h3 { font-size: 2vw; }
  h4 { font-size: 1.6vw; }
  h5 { font-size: 1.4vw; }
  p, a, label, span, input, textarea, select, option, button { font-size: 1.2vw; }
  .underline {
      position: relative;
      padding-bottom: 1vw;
      margin-bottom: 4vw;
      border-bottom: 3px solid black;
  }
  .underline::before{
        content: '';
       position: absolute;
        position: absolute;
      width: 50%;
      left: 0%;
      bottom: -3px;
      height: 3px;
      background-color: orange;
  }
  /*  
   *---------------------------------- HEADER 
  */
  header {
      position: fixed;
      padding: 0.5vw 0;
      bottom: 0;
      left: 0;
      width: 100vw;
      height: 6vw;
      display: flex;
      background-color: #4D1A06;
      z-index: 101;
  }
  header > a {
      width: calc(33% - 2px);
      padding-top: 1.5vw;
      margin: 0.5vw;
      border: 1px solid #D6C6AF;
      text-align: center;
      border-radius: 1vw;
  }
  header > a > p {
      color: white;
  }
  header > img {
      position: fixed;
      bottom: 7vw;
      width: 20vw;
      height: 93vw;
  }
  header > img:nth-of-type(1) {
      right: 0;
  }
  header > img:nth-of-type(2) {
      left: 0;
  }
  
  /*  
   *---------------------------------- TOP SECTION
  */
  .top_sec, #top_sec_id {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 26vw;
      background-color: white;
      z-index:100;
  }
  .top_sec_an {
    animation-name: top_sec_anm;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
  }
  @keyframes top_sec_anm{
        from{
          height: 26vw;
        }
        to{
          height: 5vw;
        }
  }
  #top_sec_a {
      font-size: 8vw;
      color: black;
      position: absolute;
      top: 2vw;
      left: 46vw;
  }
  .top_sec_a_a {
    animation-name: top_sec_a_anm;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
  }
  @keyframes top_sec_a_anm{
        from{
          top: 2vw;
          left: 46vw;
           font-size: 8vw;
        }
        to{
          top: 0.1vw;
          left: 12vw;
          font-size: 3.2vw;
        }
  }
  #top_sec_h1 {
      border: none;
      position: absolute;
      top: 13vw;
      left: 42.6vw;
      color: black;
  }
  .top_sec_h1_a {
    animation-name: top_sec_h1_anm;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
  }
  @keyframes top_sec_h1_anm{
        from{
          top: 13vw;
          left: 42.6vw;
          font-size: 2vw;
        }
        to{
          top: 1vw;
          left: 16vw;
          font-size: 2vw;
        }
  }
  #top_sec_label {
      position: absolute;
      top: 17vw;
      left: 49vw;
      color: black;
  }
  .top_sec img {
      position: fixed;
      bottom: 7vw;
      width: 20vw;
      height: 93vw;
  }
  .top_sec > img:nth-of-type(1) {
      right: 0;
  }
  .top_sec > img:nth-of-type(2) {
      left: 0;
  }
  #top_sec_insta {
      position: absolute;
      display: block;
      width: 2.4vw;
      height: 2.4vw;
      right: 10vw;
      top: 1.3vw;
      background-image: url("http://pipekaitori.com/wp-content/uploads/2025/06/Instagram_Glyph_Black-scaled.png");
      background-size: cover;
      background-size: 2.4vw 2.4vw;
      opacity: 0;
  }
  .top_sec_sns_a {
    animation-name: top_sec_sns_anm;
    animation-duration: 1.6s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
  }
  @keyframes top_sec_sns_anm{
        from{
          width: 2.4vw;
          height: 2.4vw;
          background-size: 2.4vw 2.4vw;
          opacity: 0;
        }
        to{
          width: 2.4vw;
          height: 2.4vw;
          background-size: 2.4vw 2.4vw;
          opacity: 1;
        }
  }
  #top_sec_x {
      position: absolute;
      display: block;
      width: 2.4vw;
      height: 2.4vw;
      right: 15vw;
      top: 1.3vw;
      background-image: url("http://pipekaitori.com/wp-content/uploads/2025/06/logo-black.png");
      background-size: 2.4vw 2.4vw;
      opacity: 0;
  }
  /*  
   *---------------------------------- TOP SECTION
  */
  .top_img_sec {
      background-image: url('http://pipekaitori.com/wp-content/uploads/2025/06/quitting-time-1096409_1280.jpg');
      background-size: cover;
      height: 95vh;
      padding-bottom: 5vh;
      text-align: center;
  }
  .top_img_sec > img {
      top: 5vw;
      display: block;
      position: sticky;
      width: 100vw;
      height; 100vh;
      z-index: 0;
  }
  .top_img_sec > h2 {
      position: sticky;
      top: 30vw;
      color: white;
      text-shadow: 0 0 8px black,0 0 8px black,0 0 8px black;
  }
  /*  
   *---------------------------------- ONE NEWS SECTION
  */
  .one_news_sec {
      width: 76vw;
      padding: 0.4vw 0 0.5vw 12vw;
      display: flex;
  }
  .one_news_sec > h4 {
      font-size: 1.4vw;
      margin-right: 1vw;
  }
  .one_news_sec > p {
      font-size: 1.4vw;
  }
  /*  
   *---------------------------------- TOP COMMENT SECTION
  */
  .top_comment_sec {
      width: 52%;
      padding: 5vw 24%;
      background-color: white;
      text-align: center;
  }
  .top_comment_sec > h2 {
      font-size: 1.4vw;
  }
  .top_comment_sec > div {
      margin-top: 4vw;
      display: flex;
  }
  .top_comment_sec > div > div {
      width: 50%;
  }
  .top_comment_sec > div > div > a {
      padding: 1vw 2vw;
      border-bottom: 1px solid;
  }
  
  /*  
   *---------------------------------- PRICE SECTION
  */
  .price_sec {
      background-color: yellow;
      width: 76vw;
      text-align: center;
      padding: 6vw 12vw 2vw 12vw;
  }
  .price_sec > h3 {
      width: 30%;
      margin-left: 35%;
  }
  .price_sec > div {
      width: 100%;
      display: flex;
  }
  .price_sec > div > a { 
      display:  block;
      width: calc(24% - 2px);
      margin: 1vw 0.5%;
      height: 20vh;
      border: 1px solid black;
      background-color: white;
  }
  /*  
   *---------------------------------- NAGARE SECTION
  */
  .nagare_sec {
      padding: 0 14vw;
      width: calc(100% - 28vw);
      text-align: center;
  }
  .nagare_sec > h3 {
      width: 46%;
      margin: 6vw 0 4vw 20vw;
  }
  .nagare_sec > div > h4 {
      padding: 2vw 0 1vw 0;
  }
  /*  
   *---------------------------------- FORM SECTION
  */
  .form_sec {
      padding: 0 15vw;
      width: 70vw;
      text-align: center;
  }
  .form_sec > h3 { 
      margin: 10vw 10% 2vw 10%;
      width: 80%;
  }
  .fc {
      margin-top: 4vw;
  }
  .fc > h4 {
      margin: 2vw 0;
  }
  .fc > input[type='radio'] {
      margin: 0 0.5vw 0 2vw;
  }
  .fc > label {
      display: block;
      margin: 1vw 0 0.5vw 0;
  }
  .fc > p > label {
      color: red;
  }
  .fc > input[type='text'],input[type='tel'],input[type='number'],input[type='email'],textarea {
      width: 50%;
      background-color: rgba(0,0,0,0.3);
      border: none;
      padding: 1vw;
      margin-bottom: 2vw;
      margin-top: 0.5vw;
  }
  .fc > input[type='text']:focus, input[type='tel']:focus,input[type='number']:focus,input[type='email']:focus,textarea:focus {
      width: calc(50% - 4px);
      outline: 2px solid rgba(0,0,0,0.4);
  }
  .fc > textarea {
      height: 16vw;
  }
  .fc > input[type='number'] {
      width: 20%;
      text-align: center;
  }
  .fc > input[type='number']:focus {
      width: calc(20% - 4px);
  }
  .fc > input[type='file'] {
      position: relative;
      display: block;
      width: 20vw;
      height: 3vw;
      margin-top: 1vw;
      margin-left: 24vw;
      margin-bottom: 1vw;
  }
  .fc > input[type='file']::before {
      position: absolute;
      content: 'ファイルを選択';
      width: 20vw;
      height: 2vw;
      background-color: white;
      padding: 1vw;
      text-align: center;
      display: grid;
      cursor: pointer;
      color: gray;
      box-shadow: 0 0 4px rgba(0,0,0,0.8);
      border-radius: 1vw;
  }
  #submit_check_id {
      display: none;
 }
  .fc > a {
      width: 80%;
      padding: 3% 5%;
      display: block;
      text-align: center;
      margin: 4vw 5%;
      background-color: rgba(200,0,0,0.1);
}
  
.fc > button {
      width: 80%;
      margin-top: 2vw;
      padding-top: 2vw;
      padding-bottom: 2vw;
      background-color: rgba(200,200,200,0.2);
      border: none;
      border-radius: 1vw;
  }
::placeholder {
	color: white;
}
/*  
*---------------------------------- FOOTER
*/
 
footer {
	width: 60%;
	padding: 10vw 20% 10vw 20%;
}
footer > div >  a {
	display: inline-block;
	padding: 1vw;
	margin: 1vw;
	border-bottom: 1px solid black;
}
/*  
*---------------------------------- MAIL SECTION
*/
.mail_sec {
	width: 80%;
	padding; 10vw 10% 5vw 10%;
	text-align: center;
}
.mail_sec > p {
	margin-bottom: 2vw;
}
.mail_sec > a {
	border-bottom: 1px solid black;
	padding: 1vw;
}
/*  
*---------------------------------- QUESTION SECTION
*/
.question_sec , .policy_sec {
	width: 70%;
	padding: 7vw 15% 5vw 15%;
}

.question_sec > h1, .policy_sec > h1 {
	font-size: 1.8vw;
}
.question_sec > h2,  .policy_sec > h2 {
	font-size: 1.4vw;
	margin-top: 3vw;
}
.question_sec > h3 {
	font-size: 1.2vw;
	margin-top: 1vw;
}
.question_sec > p {
	font-size: 1.2vw;
}