@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap');

/*---------

以下PC対応

---------------------*/
@media screen and (min-width: 801px) {
  html {
    font-size: 62.5%;
  }

  body {
    font-size: 1.4rem;
    text-align: center;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  .clearfix::after {
    content: '';
    display: block;
    clear: both;
  }

  .br::before {
    content: "\A";
    white-space: pre;
  }

  /*----------head------------*/
  #header_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100px;
    background-color: #333;
  }

  #header_logo a {
    font-size: 4rem;
    text-decoration: none;
    color: #fff;
    font-family: "Sorts Mill Goudy";
  }

  /*----------共通------------*/
  .container {
    margin: 0 auto;
    width: 100%;
    min-width: 650px;
    max-width: 1200px;
    height: 100%;
  }

  .title {
    margin: auto;
    padding-top: 120px;
  }

  .title img {
    width: 460px;
    height: 80px;
  }



  .text {
    margin: auto;
    width: 500px;
    height: 120px;
    padding-bottom: 30px;
    background-color: rgb(0,0,0, 0.5);
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .text p {
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    color: #fff;

  }

  .contact {
    padding-top: 20px;
  }

  .btn {
    margin: auto;
    width: 600px;
    height: 75px;
  }

  .btn img {
    width: 100%;
    height: 100%;
  }

  /*----------top-----------*/
  .top_box {
    margin: 0 auto;
    width: 100%;
    height: 980px;
    background-image: url(../img/top_1.jpg);
    background-size: 140% auto;
    background-position: top 65% left 80%;
    background-size: cover;
  }

  .copy img {
    width: 50%;
    height: 50%;
    width: 750px;
    max-height: 253px;
    position: relative;
    top: 300px;
    float: right;
  }

  .contact_box {
    margin: 0 auto;
    width: 100%;
    height: 100px;
    background-color: #2C0511;
  }

  /*----------ABOUT------------*/
  .about_box {
    margin: 0 auto;
    width: 100%;
    height: 600px;
    background-color: #565;
    background-image: url(../img/background_2.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .about_content {
    width: 650px;
    height: 400px;
  }

  .about_content img {
    width: 100%;
    width: 100%;
    float: left;
    padding-top: 100px;
  }

  /*----------point------------*/
  .point_box {
    height: 1680px;
    background-color: #434343;
  }

  .point_1_box {
    margin: 0 auto;
    width: 100%;
    height: 560px;
    background-color: #222222;
    background-image: url(../img/background_3.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .point_1_content {
    width: 650px;
    height: 560px;
    float: right;
    padding-top: 80px;
  }

  .point_1_content img {
    width: 100%;
    width: 100%;
  }

  .point_2_box {
    margin: 0 auto;
    width: 100%;
    height: 560px;
    background-color: #333333;
    background-image: url(../img/background_4.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .point_2_content {
    width: 650px;
    height: 560px;
  }

  .point_2_content img {
    width: 100%;
    width: 100%;
    float: left;
    padding-top: 80px;
  }

  .point_3_box {
    margin: 0 auto;
    width: 100%;
    height: 600px;
    background-color: #444;
    background-image: url(../img/background_5.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .point_3_content {
    width: 650px;
    height: 560px;
    float: right;
    padding-top: 80px;
  }

  .point_3_content img {
    width: 100%;
    width: 100%;
  }

  /*----------example------------*/
  .example_box {
    margin: 0 auto;
    width: 100%;
    height: 1530px;
    background-image: url(../img/background_6.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .example_flex {
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    max-height: 1032px;
  }

  .example_title {
    width: 33%;
    max-width: 400px;
    max-height: 270px;
  }

  .example_title img {
    width: 100%;
    max-height: 270px;
  }

  .example_content {
    width: 33%;
    max-width: 400px;
    max-height: 360px;
  }

  .example_content img {
    width: 100%;
    max-height: 360px;
  }

  /*----------product------------*/
  .product_box {
    margin: 0 auto;
    width: 100%;
    height: 900px;
    background-color: #666;
    background-image: url(../img/background_7.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .product_flex {
    display: flex;
    justify-content: space-between;
  }

  .product_content {
    max-width: 400px;
    max-height: 400px;
  }

  .product_content img {
    width: 100%;
    height: 100%;
    max-width: 400px;
    max-height: 400px;
  }

  /*----------contact_2------------*/
  .contact_2_box {
    margin: 0 auto;
    width: 100%;
    background-color: #777;
    background-image: url(../img/top_1.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
    padding-bottom: 50px;
  }

  .text_box {
    margin: auto;
    width: 40vw;
    height: 13vw;
    background-color: #000000;
    opacity: 0.8;
  }

  /*----------copyright------------*/
  #copyright {
    width: auto;
    height: 210px;
    background-color: #333;
    color: #FFF;
  }

  .copyright-box {
    display: flex;
    margin: auto;
    text-align: left;
    width: 960px;
  }

  .copyright_company {
    width: 50%;
    font-family: "Sorts Mill Goudy";
  }

  .copyright_name {
    padding-top: 50px;
    font-size: 2.5rem;
  }

  .copyright_copy {
    padding-top: 60px;
    font-size: 1.3rem;
  }

  .copyright_company_2 {
    padding-top: 30px;
    text-align: right;
  }

  .logo {
    width: 25%;
    height: 25%;
    margin-right: 13%;
  }

  .copyright_company_img_2 a img {
    padding-top: 3%;
    width: 50%;
    height: 50%;
  }
}

/*------------------------------以下タブレット対応------------------------------------------*/
@media screen and (max-width: 800px) and (min-width: 401px) {
  html {
    font-size: 62.5%;
  }

  body {
    font-size: 1.4rem;
    text-align: center;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  .clearfix::after {
    content: '';
    display: block;
    clear: both;
  }

  .br::before {
    content: "\A";
    white-space: pre;
  }

  /*----------head------------*/
  #header_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100px;
    background-color: #333;
  }

  #header_logo a {
    font-size: 4rem;
    text-decoration: none;
    color: #fff;
    font-family: "Sorts Mill Goudy";
  }

  /*----------共通------------*/
  .container {
    margin: 0 auto;
    width: 90%;
    height: 100%;
  }

  .title {
    margin: auto;
    padding-top: 120px;
  }

  .title img {
    width: 350px;
    height: 100%;
  }

  .text {
    margin: auto;
    width: 350px;
    height: 100%;
    padding-bottom: 30px;
    background-color: rgb(0,0,0, 0.5);
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .text p {
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    color: #fff;

  }



  .contact {
    margin: 0 auto;
    width: 90%;
    height: 90%;
    position: relative;
    top: 10px;
  }

  .btn {
    margin: auto;
    width: 100%;
    height: 100%;
  }

  .btn img {
    width: 100%;
    height: 100%;
  }


  /*----------top-----------*/
  .top_box {
    margin: 0 auto;
    width: 100%;
    height: 50vw;
    background-image: url(../img/top_1.jpg);
    background-size: 140% auto;
    background-position: top 65% left 80%;
    background-size: cover;
  }

  .copy img {
    width: 50%;
    height: 50%;
    width: 100%;
    max-height: 253px;
    position: relative;
    top: 10vw;
  }

  .contact_box {
    margin: 0 auto;
    width: 100%;
    background-color: #2C0511;
    padding-bottom: 10px;
  }
  /*----------ABOUT------------*/
  .about_box {
    margin: 0 auto;
    width: 100%;
    height: 65vw;
    background-color: #565;
    background-image: url(../img/background_2.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .about_content {
    width: 100%;
    height: 400vw;
    margin: 0 auto;
  }

  .about_content img {
    width: 100%;
    padding-top: 5vw;
  }

  /*----------point------------*/
  .point_box {
    width: 100%;
    background-color: #434343;
  }

  .point_1_box {
    margin: 0 auto;
    width: 100%;
    height: 65vw;
    background-color: #222222;
    background-image: url(../img/background_3.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .point_1_content {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .point_1_content img {
    width: 100%;
    height: auto;
    padding-top: 5vw;
  }

  .point_2_box {
    margin: 0 auto;
    width: 100%;
    height: 65vw;
    background-color: #333333;
    background-image: url(../img/background_4.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .point_2_content {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  .point_2_content img {
    width: 100%;
    height: auto;
    padding-top: 5vw;
  }

  .point_3_box {
    margin: 0 auto;
    width: 100%;
    height: 65vw;
    background-color: #444;
    background-image: url(../img/background_5.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .point_3_content {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  .point_3_content img {
    width: 100%;
    height: auto;
    padding-top: 5vw;
  }

  /*----------example------------*/
  .example_box {
    margin: 0 auto;
    width: 100%;
    background-image: url(../img/background_6.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .example_title {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 50px;
  }

  .example_title img {
    width: 100%;
    height: auto;
  }

  .example_content {
    display: none;
  }

  .example_content img {
    display: none;
  }

  /*----------product------------*/
  .product_box {
    margin: 0 auto;
    width: 100%;
    height: auto;
    background-color: #666;
    background-image: url(../img/background_7.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .product_flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 50px;
  }

  .product_content {
    width: 100%;
  }

  .product_content img {
    width: 100%;
  }

  /*----------contact_2------------*/
  .contact_2_box {
    margin: 0 auto;
    width: 100%;
    background-color: #777;
    background-image: url(../img/top_1.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
    padding-bottom: 50px;
  }

  /*----------copyright------------*/
  #copyright {
    width: auto;
    width: 100%;
    height: 210px;
    background-color: #333;
    color: #FFF;
  }

  .copyright-box {
    display: flex;
    margin: auto;
    text-align: left;
      width: 90%;
  }

  .copyright_company {
    width: 100%;
    font-family: "Sorts Mill Goudy";
  }

  .copyright_name {
    padding-top: 50px;
    font-size: 1.2rem;
  }

  .copyright_copy {
    padding-top: 60px;
    font-size: 1rem;
  }

  .copyright_company_2 {
    padding-top: 30px;
    text-align: right;
  }

  .logo {
    width: 50%;
    height: 50%;
    padding-top: 10px;
  }

  .copyright_company_img_2 a img {
    padding-top: 20px;
    width: 75%;
    height: 75%;
  }
}

/*------------------------------以下モバイル対応------------------------------------------*/
@media screen and (max-width:400px) {
  html {
    font-size: 62.5%;
  }

  body {
    font-size: 1.4rem;
    text-align: center;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  .clearfix::after {
    content: '';
    display: block;
    clear: both;
  }

  .br::before {
    content: "\A";
    white-space: pre;
  }

  /*----------head------------*/
  #header_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100px;
    background-color: #333;
  }

  #header_logo a {
    font-size: 3rem;
    text-decoration: none;
    color: #fff;
    font-family: "Sorts Mill Goudy";
  }

  /*----------共通------------*/
  .container {
    margin: 0 auto;
    width: 90%;
    height: 100%;
  }

  .title {
    margin: auto;
    padding-top: 50px;
  }

  .title img {
    width: 100%;
    height: 100%;
  }

  .text {
    height: 100%;
    padding-bottom: 30px;
    background-color: rgb(0,0,0, 0.5);
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .text p {
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    color: #fff;

  }

  .contact {
    margin: 0 auto;
    width: 90%;
    height: 90%;
    position: relative;
    top: 10px;
  }

  .btn {
    margin: auto;
    width: 100%;
    height: 100%;
  }

  .btn img {
    width: 100%;
    height: 100%;
  }

  /*----------top-----------*/
  .top_box {
    margin: 0 auto;
    width: 100%;
    height: 100vw;
    background-image: url(../img/top_1.jpg);
    background-size: 140% auto;
    background-position: top 65% left 80%;
    background-size: cover;
  }

  .copy img {
    display: none;
  }

  .copy {
    background-image: url(../img/pic_1_1_600.png);
    background-size: 100%;
    margin: auto;
    width: 100%;
    height: 100%;
    position: relative;
    top: 20px;
  }

  .contact_box {
    margin: 0 auto;
    width: 100%;
    background-color: #2C0511;
  }

  /*----------ABOUT------------*/
  .about_box {
    margin: 0 auto;
    width: 100%;
    height: 100vw;
    background-color: #565;
    background-image: url(../img/background_2.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .about_content {
    width: 650px;
    height: 400px;
    margin: 0 auto;
  }

  .about_content img {
    display: none;
  }

  .about_content {
    background-image: url(../img/pic_2_0_600.png);
    background-size: 100% auto;
    width: 100%;
    height: 100%;
    position: relative;
    top: 20px;
  }

  /*----------point------------*/
  .point_box {
    background-color: #434343;
  }

  .point_1_box {
    margin: 0 auto;
    width: 100%;
    height: 70vw;
    background-color: #222222;
    background-image: url(../img/background_3.jpg);
    background-size: cover;
  }

  .point_1_content {
    background-image: url(../img/pic_2_1_600.png);
    margin: auto;
    background-size: 100% auto;
    width: 100%;
    height: 100%;
    position: relative;
    top: 20px;
  }

  .point_1_content img {
    display: none;
  }

  .point_2_box {
    margin: 0 auto;
    width: 100%;
    height: 70vw;
    background-color: #333333;
    background-image: url(../img/background_4.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .point_2_content {
    background-image: url(../img/pic_2_2_600.png);
    margin: auto;
    background-size: 100% auto;
    width: 100%;
    height: 100%;
    position: relative;
    top: 20px;
  }

  .point_2_content img {
    display: none;
  }

  .point_3_box {
    margin: 0 auto;
    width: 100%;
    height: 70vw;
    background-color: #444;
    background-image: url(../img/background_5.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .point_3_content {
    background-image: url(../img/pic_2_3_600.png);
    margin: auto;
    background-size: 100% auto;
    width: 100%;
    height: 100%;
    position: relative;
    top: 20px;
  }

  .point_3_content img {
    display: none;
  }

  /*----------example------------*/
  .example_box {
    margin: 0 auto;
    width: 100%;
    background-image: url(../img/background_6.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
  }

  .example_flex {
    margin: auto;
    width: 100%;
  }

  .example_title {
    width: 100%;
  }

  .example_title img {
    width: 100%;
  }

  .example_content {
    display: none;
  }

  .example_content img {
    display: none;
  }

  /*----------product------------*/
  .product_box {
    margin: 0 auto;
    width: 100%;
    background-color: #666;
    background-image: url(../img/background_7.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
    padding-bottom: 50px;
  }

  .product_flex {
    margin: auto;
    width: 100%;
  }

  .product_content {
    margin: auto;
    width: 100%;
    height: 100%;
  }

  .product_content img {
    width: 100%;
    height: 100%;
    padding-bottom: 10px;
  }

  /*----------contact_2------------*/
  .contact_2_box {
    margin: 0 auto;
    width: 100%;
    background-color: #777;
    background-image: url(../img/top_1.jpg);
    background-size: 140% auto;
    background-position: top 65% left 90%;
    background-size: cover;
    padding-bottom: 50px;
  }

  /*----------copyright------------*/
  #copyright {
    width: auto;
    width: 100%;
    height: 100%;
    background-color: #333;
    color: #FFF;
  }

  .copyright-box {
    display: flex;
    margin: auto;
    text-align: left;
      width: 90%;
  }

  .copyright_company {
    width: 100%;
    font-family: "Sorts Mill Goudy";
  }

  .copyright_name {
    padding-top: 50px;
    font-size: 1.2rem;
  }

  .copyright_copy {
    padding-top: 60px;
    font-size: 1rem;
  }

  .copyright_company_2 {
    padding-top: 30px;
    text-align: right;
  }

  .logo {
    width: 50%;
    height: 50%;
    padding-top: 10px;
  }

  .copyright_company_img_2 a img {
    padding-top: 20px;
    width: 75%;
    height: 75%;
  }
}