/* screens smaller than 1024---------------------------------------------------------- */
@media only screen and (max-width:1024px) {


}

/* screens smaller than 800---------------------------------------------------------- */
@media only screen and (max-width:800px) {

.SP_nav { display: block; }


}

/* screens smaller than 690---------------------------------------------------------- */
@media only screen and (max-width:690px) {

.cont_header {  z-index: 100; position: fixed; background: #ffffff; left: 50%;  top: 0%; transform: translateX(-50%) translateY(0%); width: 100%; }
.top_header {  z-index: 100; background: #ffffff; }
header h1 { width: 70%; float: none; padding: 1em 0; margin: 0 auto; }
.header_btn { display: none; width: 60%; float: left; padding: 1.3em 0 0 3em; }
.header_btn img { height: 40px; width: auto; margin-right: 2em; }
.header_btn_en { display: none; }
.header_language { display: none; width: 10%; float: right; padding: 1em 1em 0; font-size: 120%; text-align: right; }
#wrapper { margin: 0; width: 100%; position: relative; }
.container { width: 100%; margin: 0 auto; position: relative; }
.top_btn { text-align: center; padding: 2.3em 0; }
.top_btn img { width: 90%; margin-bottom: 0.5em; }
.container h1 {  }
.container h1 img { width: 100%; }
.sp_top_image { width: 100%; }
.sp_top_image img { width: 100%; }
.top_banner { position: absolute; top: 280px; left: 12%; }

.content_title {  z-index: 10; position: absolute; margin-top: 70px; height: 47px; background: url(../images/icon01.svg) no-repeat left center; background-size: auto 47px; padding: 1em 0 3.5em 4em; color: #ffffff; font-size: 14px; font-weight: 600; }
.content_title2 {  z-index: 10; position: absolute; margin-top: 70px; height: 47px; background: url(../images/icon02.svg) no-repeat left center; background-size: auto 47px; padding: 2em 0 3.5em 4em; color: #ffffff; font-size: 14px; font-weight: 600; }
.content_title3 {  z-index: 10; position: absolute; margin-top: 70px; height: 47px; background: url(../images/icon03.svg) no-repeat right center; background-size: auto 47px; padding: 2em 4em 3.5em 0em; color: #ffffff; font-size: 14px; font-weight: 600; text-align: right; width: 100%; }

.content_box { position: relative; z-index: 1; padding-top: 120px; margin-bottom: 2em; }
.content_left { width: 100%; float: none; padding: 0 1em; border-right: none; color: #ffffff; letter-spacing: 0.1em; }
.content_left_text { padding: 0; }
.content_left h2 { font-size: 60px; font-weight: 600; font-family: "Arial"; }
.content_left h3 { font-size: 28px; font-weight: 600; margin-bottom: 1em; }
.content_left_image { letter-spacing: 0.03em; }
.content_image { text-align: center; width: 100%; float: none; font-size: 18px; margin-right: 0px; margin-bottom: 1em }
.content_image img { margin-bottom: 10px; width: 100%; }
.content_right { width: 100%; float: none; font-size: 16px; font-weight: 600; color: #ffffff; line-height: 260%; letter-spacing: 0.05em; padding: 0 1em!important; }

.content_left_en { width: 100%; float: none; padding: 0 1em; border-right: none; color: #ffffff; letter-spacing: 0.1em; }
.content_left_text { padding: 0 ; }
.content_left_en h2 { font-size: 60px; font-weight: 600; font-family: "Arial"; }
.content_left_en h3 { font-size: 30px; font-weight: 600; }
.content_left_en h4 { font-size: 22px; font-weight: 600; }
.content_right_en { width: 100%; float: none; font-size: 16px; font-weight: 600; color: #ffffff; line-height: 200%; letter-spacing: 0.01em; padding: 0 1em!important; }

.content_left_ar { width: 100%; float: none; padding: 0 1em; border-right: none; border-left: none; color: #ffffff; letter-spacing: 0.1em; }
.content_left_text  { padding: 0 ; }
.content_left_ar h2 { font-size: 60px; font-weight: 600; font-family: "Arial"; }
.content_left_ar h3 { font-size: 33px; font-weight: 600; }
.content_left_ar h4 { font-size: 22px; font-weight: 600; }
.content_left_image { letter-spacing: 0.03em; }
.content_image { text-align: center; width: 100%; float: none; font-size: 10px; margin-right: 15px; }
.content_image img { margin-bottom: 10px; width: 100%; height: auto; }
.content_image_ex { text-align: center; width: 95%; float: left; font-size: 10px; margin-right: 15px; }
.content_image_ex img { margin-bottom: 10px; width: 100%; height: auto; }
.content_right_ar  { width: 100%; float: none; font-size: 16px; font-weight: 600; color: #ffffff; line-height: 200%; letter-spacing: 0.01em; padding: 0 1em!important; }

.content_left_fr { width: 100%; float: none; padding: 0 30px 0px; border-right: solid 3px #ffffff; color: #ffffff; letter-spacing: 0.05em; }
.content_left_text { padding: 0 0 70px 30px; }
.content_left_fr h2 { font-size: 60px; font-weight: 600; font-family: "Arial"; }
.content_left_fr h3 { font-size: 30px; font-weight: 600; }
.content_left_fr h4 { font-size: 22px; font-weight: 600; }

.pt156 { padding-top: 0px; }
.pt130 { padding-top: 0px; }
.pt100 { padding-top: 0px; }
.pt90 { padding-top: 0px; }
.pt70 { padding-top: 0px; }
.pt50 { padding-top: 0px; }
.pt30 { padding-top: 0px; }
.pt10 { padding-top: 0px; }
.pl110 { padding-left: 0px; }
.pl60 { padding-left: 0px; }
.pl40 { padding-left: 0px; }
.pl20 { padding-left: 0px; }
.pt15 { padding-top: 0px; }
.pl90 { padding-left: 0px; }
.mt90 { margin-top: 0px; }
.mt40 { margin-top: 0px; }
.mt30 { margin-top: 0px; }


.scroll_area { overflow: auto; scroll-snap-type: none; height: 100vh; }
.area { scroll-snap-align: start; }

footer { position: relative; border-top: solid 1px #e5e5e5; margin-top: 4em; }
.footer_page_link { width: 100%; float: none; font-size: 100%; padding: 1em 1em; }
.footer_page_link li { margin-bottom: 0.3em; }
.footer_page_link a { text-decoration: underline; }
.footer_outside_link { width: 100%; float: none; font-size: 100%; padding: 1em 1em; }
.footer_outside_link a { text-decoration: underline; }
.footer_privacy_description { font-size: 70%; }
.footer_notice { width: 100%; font-size: 70%; text-align: center; background: #000000; color: #ffffff; padding: 0.5em 0; }
.content_footer { color: #ffffff; }
.content_footer a { color: #ffffff; }

.pc_none { display: block; }
.sp_none { display: none; }
.SP_nav { display: block; position: fixed; z-index:9999; width: 100%; }

/* SP メニュー */
/* Nav items */
.menu {
  list-style: none;
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  margin-top: 52px;
  padding: 0 0 10px 0;
  clear: both;
  background: var(--background-navbar);
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  transform: scale(1, 0);
  transform-origin: top;
  background: #ffffff;
}

.menu img { height: 50px; width: auto; }

/* Hamburger menu button */
.menu-btn:checked ~ .menu {
  transform: scale(1, 1);
  transform-origin: top;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

/* Hamburger menbu text */
.menu a {
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 16px;
  text-transform: capitalize;
  color: #000000;
  opacity: 0;
  transition: 0.5s;
}

.menu li {
  border-top: 1px solid rgb(75, 75, 75);
  padding: 15px 0;
  margin: 0 54px;
  opacity: 0;
  transition: 0.5s;
}

.menu-btn:checked ~ .menu a,
.menu-btn:checked ~ .menu li {
  opacity: 1;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
}

.menu-btn {
  display: none;
}

.menu-icon {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 24px 14px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.navicon {
  background: #ddd;
  display: block;
  height: 3px;
  width: 26px;
  position: relative;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before,
.navicon:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background: #ddd;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before {
  top: 9px;
}

.navicon:after {
  bottom: 9px;
}

/* Hamburger Menu Animation Start */
.menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
  top: 0;
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  bottom: 0;
}

.menu-btn:checked ~ .menu-icon .navicon {
  background: rgba(0, 0, 0, 0);
  transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
/* Hamburger Menu Animation End */

/* Navbar Container */
.navtext-container {
  width: 100%;
  height: 52px;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Navbar Text */
.navtext {
  position: absolute;
  text-transform: uppercase;
  color: #ddd;
  letter-spacing: 4px;
  font-size: 20px;
}
    
}