@charset "utf-8";

@import url("header.css");
@import url("nav.css");
@import url("footer.css");

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
/*
body * { border:0.02px solid #000000; background:rgba(000,000,000,0.1)}
*/

html,
body {
  width: 100%;
  font-size: 62.5%;
  color: #333;
}

html {}

body {}

#wrap {
  position: relative;
  min-width: 1024px !important;
  overflow-x: hidden !important;
}

.showPc {}

.showSp {
  display: none;
}

@media only screen and (max-width: 1024px) {

  html,
  body {}
}

@media only screen and (max-width: 640px) {

  html,
  body {
    width: 640px;
    min-width: 640px;
    /*font-size: 106.67%;*/
    font-size: 90%;
  }

  #wrap {
    width: 640px !important;
    min-width: 640px !important;
  }

  .showPc {
    display: none !important;
  }

  .showSp {
    display: block;
  }
}

/* --------------------------------------------

変数設定

---------------------------------------------- */
:root {}

/* --------------------------------------------

fonts

---------------------------------------------- */
body,
input,
select,
select option,
textarea,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Kozuka Gothic Pr6N", "Kozuka Gothic Pro", "Kozuka Gothic",
    Meiryo, "MS PGothic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

body,
input,
select,
select option,
textarea,
table,
th,
td,
p {
  font-weight: 500;
  font-style: normal;
  font-feature-settings: "palt";
  text-align: justify;
  text-justify: inter-ideograph;
}

p {
  line-height: 2;
}

b,
strong {
  font-weight: 700;
}

small {
  display: inline-block;
  font-size: 0.85em;
}

a {
  color: #333;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {}

a img {}

a:hover img {}

/* セレクト時の色指定 */
::selection {
  background: rgba(222, 198, 11, 0.25);
}

::-moz-selection {
  background: rgba(222, 198, 11, 0.25);
  /*Firefox*/
}

.ff-en {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "wdth"<width>;
}


.flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

@media only screen and (max-width: 640px) {

  body,
  input,
  select,
  select option,
  textarea,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------

#main

---------------------------------------------- */
#index main {
  padding-top: 70px;
}

@media only screen and (max-width: 640px) {}

/* --------------------------------------------

ボタン

---------------------------------------------- */
.btn {
  position: relative;
  z-index: 3;
  background-color: #f36200;
  transition: 0.2s;
}

.btn-def {
  display: inline-block;
  width: 16em;
  margin: 0 12px;
  padding: 1.2em;
  font-size: 1.6rem;
  color: #fff;
  text-align: center;
  border-radius: 5em;
}

.btn:hover {
  background-color: rgb(250, 127, 44);
}

.btn-p {
  display: inline-block;
  width: 330px;
  padding-bottom: 15px;
  line-height: 150px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  background-image: url(../_image/common/btn.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  background-color: rgba(243, 98, 0, 0);
}

.btn-p:hover {
  color: #f36200;
  background-color: rgba(243, 98, 0, 0);
}

.btn::after {
  content: "";
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  margin: -0.2em 0 0 0.5em;
  vertical-align: middle;
  background-image: url(../_image/common/icon-arrow.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.btn-text {
  background-color: rgba(243, 98, 0, 0);
}

.btn-text::after {
  display: none;
}

.btn-text::before {
  content: "";
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  margin: -0.2em 0.5em 0 0;
  vertical-align: middle;
  background-image: url(../_image/common/icon-arrow.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.btn-text:hover {
  color: #f36200;
  background-color: rgba(243, 98, 0, 0);
}

.btn span {}

@media only screen and (max-width: 640px) {
  .btn-p {
    width: calc(330px * 1.2);
    line-height: calc(150px * 1.2);
    font-size: 1.6rem;
  }
}

/* --------------------------------------------

下層ページ共通　ページタイトル

---------------------------------------------- */
.pageTitle {
  display: flex;
  width: 94%;
  max-width: 1200px;
  height: 158px;
  margin: 80px auto;
  background: linear-gradient(180deg, #08368b 43%, #1b1464);
}

.pageTitle h1 {
  margin: auto;
  font-size: 2.8rem;
  font-weight: bold;
  color: #fff;
}

@media only screen and (max-width: 640px) {}


/* --------------------------------------------

下層ページ共通　contents

---------------------------------------------- */
.contentsWrap {
  width: 80%;
  max-width: 1000px;
  margin: auto;
}

.contents_title {
  display: inline-block;
  font-size: 2.8rem;
  font-weight: bold;
  color: #182987;
  border-bottom: 2px solid #182987;
}


/* --------------------------------------------

校正用　制作中ページ

---------------------------------------------- */
.pendPagesBody {
  height: 100vh;
  background: #000;
}

.pendPagesBody #wrap::before,
.pendPagesBody #wrap::after {
  display: none !important;
}

/*html,body {
 background-image: url(../_00/mockup.jpg);
 background-size: 1780px;
 background-position: top center;
 background-repeat: no-repeat;
 background-color: #fff;
 }*/

.pendPages {
  position: fixed;
  z-index: 1;
  top: 150px;
  right: 10%;
  width: 80%;
  font-size: 1.8rem;
  color: red;
  font-weight: 500;
  line-height: 50px;
  color: #fff;
  text-align: center;
  border: 2px solid #fff;
  background: rgba(255, 0, 0, 0.65);
  z-index: 10;
}

.pendImageWrap {
  position: relative;
  left: 50%;
  width: 1366px;
  height: 760px;
  top: 65px;
  margin-left: calc(-1366px / 2);
  margin-bottom: 150px;
  overflow: scroll;
  overflow-y: scroll;
}

.pendImage {
  display: block;
  /*position: relative;
 left: 50%;
 width: 1366px;
 margin-left: calc(-1366px / 2);*/
}

.pendImage img {}

@media only screen and (max-width: 640px) {
  .pendImage {
    /*width: 120vw;
  margin-left: -60vw;*/
  }
}