@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500&display=swap');
li{
  transform: translateX(-1em);
}
body{
  position: relative;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  display: grid;
  grid-template: 
      "... container-top ..."
      "... container-main ..."
      "... footer ..."
      / auto minmax(800px,1920px) auto;
}

/* MAIN PAGE(背景：青) */
.container-top{
  grid-area: container-top;
  display: grid;
  grid-template: 
    "... ....... ... img" calc(280px * var(--window_ratio))
    "... privacy ... img" calc(137px * var(--window_ratio))
    "... ...     ... img" calc(20px * var(--window_ratio))
    "... line    ... img" calc(40px * var(--window_ratio))
    "... ...     ... img" calc(20px * var(--window_ratio))
    "... top     ... img" calc(40px * var(--window_ratio))
    "... ....... ... img" calc(63px * var(--window_ratio))
    "... ....... ... img" calc(140px * var(--window_ratio))
    "... ....... ... ..." calc(240px * var(--window_ratio))
    "... ....... ... ..." calc(150px * var(--window_ratio))
    /* 80 20     280 1220*/
    /calc(80px * var(--window_ratio)) calc(20px * var(--window_ratio)) calc(280px * var(--window_ratio)) calc(1220px * var(--window_ratio));
  color: #ffffff;
  background-color:#191970;
  overflow-x: hidden;
}
.privacy-side-service{
  grid-area: privacy;
  display: flex;
  align-items: center;
  margin: 0;
  width: max-content;
  transform: rotate(270deg) translateY(-44%);
  color: #f3f4f5;
  font-size: calc(20px * var(--window_ratio));
  font-weight: 500;
}
.privacy-side-line{
  grid-area: line;
  display: flex;
  border-top: 1px solid #ffffff;
  opacity: 0.5;
  width: calc(0px * var(--window_ratio));
  height: calc(40px * var(--window_ratio));
  transform: translateY(-20%);
}
.privacy-side-top{
  grid-area: top;
  display: flex;
  align-items: center;
  margin: 0;
  transform: rotate(270deg) translateX(-50%);
  color: rgba(243, 244, 245, 0.5);
  font-size: calc(20px * var(--window_ratio));
  font-weight: 500;
}
.privacy-top-img-bg{
  grid-area: img;
  opacity: 0.5;
  background-color: #191970;
  z-index: 3;
}
.privacy-top-img{
  grid-area: img;
  width: 100%;
  z-index: 3;
}
.privacy-bg-parent{
  grid-column: 1/-1;
  grid-row: 8/9;
  z-index: 1;
}
.privacy-bg{
  margin: 0;
  color: #ffffff;
  mix-blend-mode: normal;
  font-size: calc(400px * var(--window_ratio));
  font-weight: 100;
  line-height: calc(100px * var(--window_ratio));
  letter-spacing: calc(-32px * var(--window_ratio));
  white-space: nowrap;
  text-overflow: clip;
}
@keyframes hscroll {
  0% { transform:translateX(10px); }
  100% { transform:translateX(-100%); }
}
.privacy-bg ul {
  display:inline-block;
  margin: calc(100px * var(--window_ratio)) 0;
  padding:0;
  animation:hscroll 60s linear infinite;
}
.privacy-bg li {
  display:inline-block;
}
.privacy-info-parent{
  grid-area: info;
}




/* MAIN PAGE(背景：白) */
.container-main{
  grid-area: container-main;
  display: grid;
  grid-template:
      "... ........ ..." calc(150px * var(--window_ratio))
      "... overview ..." calc(94px * var(--window_ratio))
      "... ........ ..." calc(200px * var(--window_ratio))
      "... first-hr ..." calc(3px * var(--window_ratio))
      "... ........ ..." calc(100px * var(--window_ratio))
      "... first-article ..." calc(22px * var(--window_ratio))
      "... ........ ..." calc(60px * var(--window_ratio))
      "... first-text ..." auto
      "... ........ ..." calc(100px * var(--window_ratio))
      "... second-hr ..." calc(3px * var(--window_ratio))
      "... ........ ..." calc(100px * var(--window_ratio))
      "... second-article ..." calc(22px * var(--window_ratio))
      "... ........ ..." calc(60px * var(--window_ratio))
      "... second-text ..." auto
      "... ........ ..." calc(100px * var(--window_ratio))
      "... third-hr ..." calc(3px * var(--window_ratio))
      "... ........ ..." calc(100px * var(--window_ratio))
      "... third-article ..." calc(22px * var(--window_ratio))
      "... ........ ..." calc(60px * var(--window_ratio))
      "... third-text ..." auto
      "... ........ ..." calc(100px * var(--window_ratio))
      "... fourth-hr ..." calc(3px * var(--window_ratio))
      "... ........ ..." calc(100px * var(--window_ratio))
      "... fourth-article ..." calc(22px * var(--window_ratio))
      "... ........ ..." calc(60px * var(--window_ratio))
      "... fourth-text ..." auto
      "... ........ ..." calc(100px * var(--window_ratio))
      "... fifth-hr ..." calc(3px * var(--window_ratio))
      "... ........ ..." calc(100px * var(--window_ratio))
      "... fifth-article ..." calc(22px * var(--window_ratio))
      "... ........ ..." calc(60px * var(--window_ratio))
      "... fifth-text ..." auto
      "... ........ ..." calc(100px * var(--window_ratio))
      "... sixth-hr ..." calc(3px * var(--window_ratio))
      "... ........ ..." calc(100px * var(--window_ratio))
      "... sixth-article ..." calc(22px * var(--window_ratio))
      "... ........ ..." calc(60px * var(--window_ratio))
      "... sixth-text ..." auto
      "... ........ ..." calc(100px * var(--window_ratio))
      "... seventh-hr ..." calc(3px * var(--window_ratio))
      "... ........ ..." calc(100px * var(--window_ratio))
      "... seventh-article ..." calc(22px * var(--window_ratio))
      "... ........ ..." calc(60px * var(--window_ratio))
      "... seventh-text ..." auto
      "... ........ ..." calc(100px * var(--window_ratio))
      "... eighth-hr ..." calc(3px * var(--window_ratio))
      "... ........ ..." calc(100px * var(--window_ratio))
      "... eighth-article ..." calc(22px * var(--window_ratio))
      "... ........ ..." calc(60px * var(--window_ratio))
      "... eighth-text ..." auto
      "... ........ ..." calc(100px * var(--window_ratio))
      "... nineth-hr ..." calc(3px * var(--window_ratio))
      "... ........ ..." calc(100px * var(--window_ratio))
      "... nineth-article ..." calc(22px * var(--window_ratio))
      "... ........ ..." calc(60px * var(--window_ratio))
      "... nineth-text ..." auto
      "... ........ ..." calc(100px * var(--window_ratio))
      "... tenth-hr ..." calc(3px * var(--window_ratio))
      "... ........ ..." calc(100px * var(--window_ratio))
      "... tenth-article ..." calc(22px * var(--window_ratio))
      "... ........ ..." calc(60px * var(--window_ratio))
      "... tenth-text ..." auto
      "... ........ ..." calc(60px * var(--window_ratio))
      "... contact ..." calc(200px * var(--window_ratio))
      "... ........ ..." calc(320px * var(--window_ratio))
      /calc(370px * var(--window_ratio)) calc(860px * var(--window_ratio)) calc(370px * var(--window_ratio));
  background-color:#ffffff;
}
.privacy-overview{
  grid-area: overview;
  margin: 0;
  font-family: YuGothic;
  font-size: calc(16.9px * var(--window_ratio));
  font-weight: 500;
  line-height: 2.11;
  color: #272d3d;
}
.privacy-hr{
  border: solid 3px #191970;
  background-color: #191970;
  width: calc(48px * var(--window_ratio));
  margin: 0 auto 0 0;
  transform: scaleY(0.5);
}
.privacy-article{
  font-family: YuGothic;
  margin: 0;
  font-size: calc(22px * var(--window_ratio));
  font-weight: bold;
  line-height: 1.82;
  letter-spacing: -0.22px;
  text-align: justify;
  color: #272d3d;
  z-index: 0;
}
.privacy-text{
  font-family: YuGothic;
  margin: 0;
  font-size: calc(16.7px * var(--window_ratio));
  font-weight: 500;
  line-height: 2.11;
  text-align: justify;
  color: #272d3d;
}
.privacy-first-hr{
  grid-area: first-hr;
}
.privacy-first-article{
  grid-area: first-article;
}
.privacy-first-text{
  grid-area: first-text;
}
.privacy-second-hr{
  grid-area: second-hr;
}
.privacy-second-article{
  grid-area: second-article;
}
.privacy-second-text{
  grid-area: second-text;
}
.privacy-third-hr{
  grid-area: third-hr;
}
.privacy-third-article{
  grid-area: third-article;
}
.privacy-third-text{
  grid-area: third-text;
}
.privacy-fourth-hr{
  grid-area: fourth-hr;
}
.privacy-fourth-article{
  grid-area: fourth-article;
}
.privacy-fourth-text{
  grid-area: fourth-text;
}
.privacy-fifth-hr{
  grid-area: fifth-hr;
}
.privacy-fifth-article{
  grid-area: fifth-article;
}
.privacy-fifth-text{
  grid-area: fifth-text;
}
.privacy-sixth-hr{
  grid-area: sixth-hr;
}
.privacy-sixth-article{
  grid-area: sixth-article;
}
.privacy-sixth-text{
  grid-area: sixth-text;
}
.privacy-seventh-hr{
  grid-area: seventh-hr;
}
.privacy-seventh-article{
  grid-area: seventh-article;
}
.privacy-seventh-text{
  grid-area: seventh-text;
}
.privacy-eighth-hr{
  grid-area: eighth-hr;
}
.privacy-eighth-article{
  grid-area: eighth-article;
}
.privacy-eighth-text{
  grid-area: eighth-text;
}
.privacy-nineth-hr{
  grid-area: nineth-hr;
}
.privacy-nineth-article{
  grid-area: nineth-article;
}
.privacy-nineth-text{
  grid-area: nineth-text;
}
.privacy-tenth-hr{
  grid-area: tenth-hr;
}
.privacy-tenth-article{
  grid-area: tenth-article;
}
.privacy-tenth-text{
  grid-area: tenth-text;
}
.privacy-contact{
  grid-area: contact;
  background-color: #f6f6fa;
  padding: calc(50px * var(--window_ratio));
  z-index: 0;
}
.privacy-contact p{
  margin: 0;
  font-family: YuGothic;
  font-size: calc(18px * var(--window_ratio));
  font-weight: 500;
  line-height: 2.11;
  text-align: left;
  color: #272d3d;
}
.privacy-contact p a{
  margin: 0;
  font-family: YuGothic;
  font-size: calc(18px * var(--window_ratio));
  font-weight: 500;
  line-height: 2.11;
  text-align: left;
  color: #272d3d;
  text-decoration: none;
}
.privacy-contact p a:hover{
  text-decoration: underline;
}
.privacy_hr {
  border: solid 3px #191970;
  background-color: #191970;
  height:3px;
  width: 48px;
  border: none;
  position: absolute;
  bottom: 0;
  left:0;
 }
 .privacy_text_top{
  font-family: YuGothic;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.08;
  letter-spacing: normal;
  color: #272d3d;
  width:100%;
  margin: 150px auto 200px auto;
}
 .privacy_text{
  font-family: YuGothic;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.08;
  letter-spacing: normal;
  color: #272d3d;
  width:100%;
}
.privacy_text_p{
  margin-bottom: 100px;
}
.privacy_text_list{
  margin-left:30px;
  margin-bottom: 100px;
  padding: 0;
}
.list_child{
  margin-bottom: 0px;
}
.privacy_text_list ul{
  margin-left:0;
  padding: 0;
  list-style-type: disc
}
.privacy_text_inquiry_sub{
  margin-left: 30px;
}
.privacy_text_inquiry_bottom{
  margin-top: 55px;
}
.privacy_title{
  font-family: YuGothic;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: -0.08px;
  color: #272d3d;
  width:100%;
  margin-top: 95px;
}
.privacy_overview{
  grid-column: 1/-1;
  grid-row: 1/2;
  width:50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position:relative;
  margin: auto ;
  padding: 150px auto 200px auto;
}
.privacy_personal{
  grid-column: 1/-1;
  grid-row: 2/3;
  width:50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}
.privacy_collection{
  grid-column: 1/-1;
  grid-row: 3/4;
  width:50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}
.privacy_purpose{
  grid-column: 1/-1;
  grid-row: 4/5;
  width:50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}
.privacy_change{
  grid-column: 1/-1;
  grid-row: 5/6;
  width:50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}
.privacy_offer{
  grid-column: 1/-1;
  grid-row: 6/7;
  width:50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}
.privacy_disclosure{
  grid-column: 1/-1;
  grid-row: 7/8;
  width:50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}
.privacy_revision{
  grid-column: 1/-1;
  grid-row: 8/9;
  width:50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}
.privacy_ban{
  grid-column: 1/-1;
  grid-row: 9/10;
  width:50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}
.privacy_alteration{
  grid-column: 1/-1;
  grid-row: 10/11;
  width:50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}
.privacy_contact{
  grid-column: 1/-1;
  grid-row: 11/12;
  width:50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}
.privacy_contact_to{
  grid-column: 1/-1;
  grid-row: 12/13;
  width:50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position:relative;
  background-color: #f6f6fa;
  margin: 45px auto 320px auto; 
}
.privacy_text_contact_to{
  font-family: YuGothic;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.11;
  letter-spacing: normal;
  color: #272d3d;
  width:100%;
  margin: 50px;
}
/* 背景の罫線 */
.v-line-gray-1{
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: calc(135/1600 * 100%);
  border-right: 1px solid rgba(46, 46, 46, 0.03);
}
.v-line-gray-2{
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: calc(685/1600 * 100%);
  border-right: 1px solid rgba(46, 46, 46, 0.03);
}
.v-line-gray-3{
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: calc(1524/1600 * 100%);
  border-right: 1px solid rgba(46, 46, 46, 0.03);
}

/* FOOTER */
.footer{
  display: grid;
  grid-template-columns: calc(135/1600 * 100%) calc(635/1600 * 100%) calc(470/1600 * 100%) calc(360/1600 * 100%);
  grid-template-rows: 290px 490px 120px;
  background-color: #26263b;
}
.footer p{
  color: #ffffff;
}
.footer_company{
  grid-column: 2/3;
  grid-row: 2/3;
}
.footer_logo_img{
  display: inline;
  width: 90px;
  vertical-align: middle;
}
.footer_company_name{
  display: inline;
  font-family: Montserrat;
  margin-left: 25px;
  font-size: 16px;
  line-height: 3.75;
  vertical-align: middle;
  font-weight: bold;
}
.footer_postcode{
  margin: 60px 0 0 0;
  font-family: '游ゴシック体', yuGothic, sans-serif;
  font-size: 14px;
  line-height: 1.71;
  opacity: 0.5;
}
.footer_address{
  margin: 0 0 50px 0;
  font-size: 14px;
  line-height: 1.71;
  font-family: '游ゴシック体', yuGothic, sans-serif;
  opacity: 0.5;
}
.footer_contact{
  margin: 0 0 0 15px;
  font-family: '游ゴシック体', yuGothic, sans-serif;
  color: #f3f4f5;
}
.footer_copyright{
  grid-column: 2/3;
  grid-row: 3/4;
  font-size: 12px;
}
.footer_copyright_link{
  display: inline-block;
  margin-left: 39px;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
}
.footer_copyright_sentence{
  display: inline-block;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
}
.footer_sitemap{
  grid-column: 3/4;
  grid-row: 2/3;
  text-align: left;
}
.footer_sitemap table{
  width:100%;
}
.footer_sitemap tr{
  height:62px;
}
.footer_sitemap th{
  border: 0px none;
  width:40%;
}
.footer_sitemap_link_th{
  color: #ffffff;
}
.footer_sitemap td{
  border: 0px none;
  width:60%;
}
.footer_sitemap_link_td{
  opacity: 0.5;
  color: rgba(255, 255, 255, 0.5);
}