@charset "utf-8";
/* CSS Document */
/*ヘッダー*/
/* Global styles and fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Barlow:wght@400;500;600&family=Baumans&family=Noto+Sans+JP:wght@400;500&display=swap');

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #333333;
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
  box-sizing: border-box;
  
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

p {
  line-height: 2.0;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  /* display: block; */ /* 1 */
  /* vertical-align: middle; */ /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

html { scroll-behavior: smooth;}

.sponly {
  display: none;
}

.pconly {
  display: block;
}



/* Header container */
.header {
  border-radius: 0;
}

/* Top bar section */
.top-bar {
  background-color: rgba(240, 241, 244, 1);
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.top-bar-container {
  display: flex;
  width: 100%;
  max-width: 1320px;
  align-items: stretch;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.company-description {
  color: rgba(81, 85, 91, 1);
  font-size: 11px;
  font-family: Inter, -apple-system, Roboto, Helvetica, sans-serif;
  font-weight: 400;
  margin: auto 0;
}

.top-bar-actions {
  display: flex;
  align-items: stretch;
  gap: 24px;
  font-family: Barlow, -apple-system, Roboto, Helvetica, sans-serif;
  font-size: 12px;
  white-space: nowrap;
}

.language-selector {
  display: flex;
  margin: auto 0;
  align-items: stretch;
  font-weight: 500;
}

.lang-btn {
  border: none;
  cursor: pointer;
  padding: 5px 13px;
}

.lang-btn-active {
  border-radius: 4px 0 0 4px;
  background-color: rgba(39, 77, 134, 1);
  border: 1px solid rgba(39, 77, 134, 1);
  color: rgba(255, 255, 255, 1);
}

.lang-btn-inactive {
  border-radius: 0 4px 4px 0;
  background-color: rgba(255, 255, 255, 1);
  border-top: 1px solid rgba(204, 204, 204, 1);
  border-right: 1px solid rgba(204, 204, 204, 1);
  border-bottom: 1px solid rgba(204, 204, 204, 1);
  padding: 5px 12px;
  color: rgba(81, 85, 91, 1);
}

.quicklinks-btn {
  background-color: rgba(255, 255, 255, 1);
  padding: 13px 36px;
  color: rgba(81, 85, 91, 1);
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* Main navigation section */
.main-nav {
  background-color: rgba(255, 255, 255, 1);
  border-bottom: 1px solid rgba(238, 238, 238, 1);
  display: flex;
  width: 100%;
/*  padding: 8px 0px;*/
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main-nav-container {
  display: flex;
  width: 100%;
  max-width: 1316px;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.logo-container {
  display: flex;
  align-items: stretch;
  gap: 5px;
}

.logo-circle {
  border-radius: 44px 0 0 44px;
  background-color: rgba(39, 77, 134, 1);
  display: flex;
  margin: auto 0;
  padding: 4px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.logo-circle-inner {
  border-radius: 44px 0 0 44px;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  padding: 1px 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.logo-circle-core {
  border-radius: 44px 0 0 44px;
  background-color: rgba(39, 77, 134, 1);
  z-index: 10;
  display: flex;
  margin-bottom: -5px;
  padding: 2px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.logo-circle-core::after {
  content: "";
  border-radius: 44px 0 0 44px;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  flex-shrink: 0;
  height: 20px;
}

.logo-letter {
  display: block;
  width: 174px;
  height: auto;
}



.quicklinks-btn svg {
  width: 1rem;
  height: 1rem;
}







/*
.logo {
  width: 174px;
  height: auto;
}
*/



.logo img {
  width: 174px;
  height: auto;
}

.logo span {
display: inline-block;
transform: translate(10px,-20px);
}

.logo span div {
display: inline-block;
font-size: 24px;
}


.nav-links {
  color: rgba(81, 85, 91, 1);
  font-size: 14px;
  font-family: Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 24px;
  text-align: right;
  text-transform: uppercase;
  margin: auto 0;
  display: flex;
  gap: 15px;
}

.nav-link {
  color: rgba(81, 85, 91, 1);
  text-decoration: none;
}

.nav-link-active {
  color: rgba(39, 77, 134, 1);
}


.topmenu {
  background: #274D86;
  border-radius: 5px;
  border-color: rgba(255, 255, 255, 0.24);
  border-width: 1px;
  border-style: solid;
  transform: translateY(-30px);
display: flex;
justify-content: center;
align-items: center;
max-width: 1320px;
margin: 0 auto;
}
.topmenu li {
  width: calc( 100% / 5 );
  text-align: center;
}
.topmenu li + li {
  border-left: rgba(255, 255, 255, 0.24) 1px solid;
}
.topmenu li a {
  color: #FFFFFF;
  display: block;
  padding: 19px;
}

.topmenu li:nth-of-type(1) {
  background: url(../img/menubg01.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.topmenu li:nth-of-type(2) {
  background: url(../img/menubg02.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.topmenu li:nth-of-type(3) {
  background: url(../img/menubg03.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.topmenu li:nth-of-type(4) {
  background: url(../img/menubg04.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.topmenu li:nth-of-type(5) {
  background: url(../img/menubg05.png);
  background-size: cover;
  background-repeat: no-repeat;
}





.topnews {
  display: flex;
  justify-content:space-between;
  align-items: center;
  max-width: 1266px;
  margin: 0 auto;
 
}
.topnews ul {
  width: 960px;
}
.topnews li {
border-bottom: 1px solid #CCCCCC;
padding: 14px 0;
display: flex;
justify-content: flex-start;
align-items: center;
}

.topnews li .barlow-medium {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #AAAAAA;
}

.topnews li p {
width: 100%;
}

.news__cate {
  color: #AAAAAA;
  font-size: 12px;
  border: #CCC solid 1px;
  border-radius: 3px;
  padding: 3px 8px;
margin-right: 20px;
width: 70px;
text-align: center;
}

.ms10 {
  margin: 0 10px;
}

.topnews img {
  margin-right: 20px;
}



.topnews__h2 {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #333333;
  font-size: 1.6rem;
  margin-bottom: 30px;

}
.topnews__link {
  color: #274D86;
  font-weight: 600;
font-size: 1rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.topnews__link--icon {
  background-color: #274d8614;
  border-radius: 0.25rem;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
  margin: 20px;
}
.topnews__link--icon svg {
  width: 1rem;
  height: 1rem;
}

.topnews__link--txt {
  padding-bottom: 0.2rem;
  border-bottom:1px solid rgba(0, 0, 0, 0.12);
}

.topwhoweare {
  display: flex;
  justify-content: flex-start;
  gap: 64px;
  padding-top: 80px;

}


.topwhoweare__txt {
  width: 500px;
}

.topwhoweare__txt--eng {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1rem;


}
.topwhoweare__txt--eng-line {
background-color: #e5e7eb;
width: 2rem;
height: 1px;

}

.topwhoweare__txt--eng-txt {
  color: #e5e7eb;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: "Barlow", sans-serif;

}

.topwhoweare__txt--h2 {
  line-height: 56px;
  font-weight: 700;
  font-size: 40px;
  margin-bottom: 2rem;

}

.topwhoweare__txt--btn {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  align-items: first baseline;
  margin-top: 30px;
}





.topwhoweare__txt--btn-red {
  border: rgba(0, 0, 0, 0.08) solid 1px;
  border-radius: 3px;
  padding: 5px;
  min-width: 210px;
}
.topwhoweare__txt--btn-red a {
  background: #DD5746;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0;
  color: #FFFFFF;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

.topwhoweare__txt--btn-red-txt {
  text-align: center;
  display: flex;
  justify-content: center;
  flex: 1;
  padding: 0 20px;
}

.topwhoweare__txt--btn-red-svg {
  background: #FFFFFF;
  padding: 10px;
  border-radius:0 3px 3px 0;
}
.topwhoweare__txt--btn-red a svg {

  color: #DD5746;
  width: 16px;
  height: 16px;

}


.topwhoweare__txt--btn-sns {
  border: #DDDDDD solid 1px;
  background: #F5F5F5;
  color: #AAAAAA;
  font-size: 14px;
  border-radius: 5px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 246px;
  line-height: 0;
}

.topwhoweare__txt--btn-sns span {
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.topwhoweare__txt--btn-sns img {
  padding: 14px;
  border-left: #DDDDDD solid 1px;
  background: #FFFFFF;
}

.topwhoweare__txt--btn-sns div:nth-of-type(3) img {
  border-radius: 0 5px 5px 0;
}

.topwhoweare__txt--btn-sns div:nth-of-type(1) {
  flex: 1;
}

.topwhoweare__img {
  max-width: 540px;
  height: auto;
}


.topnews-topwhoweare {
  background: url(../img/whoweare-bg.png);
  background-position: bottom center;
  padding-top: 70px;
  padding-bottom: 70px;
}

.g228 {
  display: flex;
  justify-content: flex-end;
  margin-top: 64px;
}

.inner {
  display: block;
  width: 1320px;
  margin: 0 auto;
}


.taa {
  background: url(../img/group-215.png) no-repeat bottom;
  background-size: contain;
}

.taa h2 {
  font-size: 80px;
  color: #274D86;
  font-weight: 700;
  font-family: "Barlow", sans-serif;
  line-height: 1;
  text-align: right;
  margin-bottom: 30px;
}


.taa .inner {
  display: flex;
  justify-content: space-around;
}
.taa__txt {
  align-items: flex-end;
}
.taa__txt .topwhoweare__txt--eng {
  justify-content: flex-end;
}


.taa__txt .topwhoweare__txt--btn-red {
  float: right;
}

.taa__img {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.taa__img img:nth-of-type(1) {
  margin-top: 10px;
}

.taa__img img:nth-of-type(2) {
  margin-top: 50px;
}


.taa__txt--d {
transform: translate(50px,100px);
}


.overview .topwhoweare__txt--eng {
  display: block;
  text-align: center;

}


.overview {
  background-image: linear-gradient(180deg, rgba(247, 247, 247, 1), rgba(255, 255, 255, 1));
  padding-top: 50px;
  position: relative;
  padding-bottom: 80px;
}



.overview .topwhoweare__txt--eng-line {
  transform: rotate(90deg);
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
}


.overview h2 {
  font-weight: 700;
  font-size: 40px;
  text-align: center;
}

.overview__p {
  max-width: 500px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 50px;
}


.overview__btn {
  display: flex;
  justify-content: flex-end;
  color: rgb(221 87 70 / var(--tw-text-opacity, 1));
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  margin-right: 0.5rem;
  text-align: right;
  display: flex;
  margin-top: 1.5rem;
}

.overview__btn--svg {
  background-color: #dd574614;
  border-radius: 0.25rem;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
  margin-left: 20px;
}

.overview__btn--svg svg{
  width: 16px;
  height: 16px;
}

.overview h3 {
  font-weight: 600;
  font-size: 26px;
  margin-bottom: 1rem;

}


.overview__h3--border {
  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
  flex-shrink: 0;
  width: 100%;
  height: 1px;
  margin-bottom: 1.5rem;
}

.overview__h3--border > div {
  background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));
  width: 3rem;
  height: 1px;
}


.overview__box {
  width: 100%;
  border-radius: 4px;
  border: rgba(0, 0, 0, 0.12) solid 1px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 10px;
  background: #FFFFFF;

}

.overview__box .overview__box--img {
  flex: 1;
  width: 50%;

}
.overview__box--txt {
  flex: 1;
  width: 50%;

  display: block;
  margin: 0 auto;

}

.overview__box--txtbox {
  width: 490px;
  display: block;
  margin: 0 auto;
}


.overview__box--txt--number {
  font-size: 140px;
  color: #FFFFFF;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.12); /* ベンダープレフィックス */
  text-stroke: 1px rgba(0, 0, 0, 0.12);
  position: absolute;
  bottom: 0;
  right: 380px;
  width: 200px;
  height: 120px;
  overflow: hidden;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
}




.overview__box--img {
  min-height: 360px;
  clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
}


.overview__box:nth-of-type(odd) {
  flex-direction:row-reverse;
}

.overview__box:nth-of-type(odd) .overview__box--txt--number {
  font-size: 140px;
  color: #FFFFFF;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.12); /* ベンダープレフィックス */
  text-stroke: 1px rgba(0, 0, 0, 0.12);
  position: absolute;
  bottom: 0;
  left: 70px;
  width: 200px;
  height: 120px;
  overflow: hidden;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
}

.overview__box:nth-of-type(odd) .overview__box--img {
  min-height: 360px;
  clip-path: polygon(0 0, 100% 0%, 100% 1000%, 0% 0%);

}


.overview__box01 .overview__box--img {
  background: url(../img/topworks01.jpg) no-repeat left;
}
.overview__box02 .overview__box--img {
  background: url(../img/topworks02.jpg) no-repeat left;
}
.overview__box03 .overview__box--img {
  background: url(../img/topworks03.jpg) no-repeat left;
}
.overview__box04 .overview__box--img {
  background: url(../img/topworks04.jpg) no-repeat left;
}
.overview__box05 .overview__box--img {
  background: url(../img/whisk_storyboard8a6d3a8f95fc4960a8e4f633dd0a3b2.jpg) no-repeat left;
}


.overview__box--over {
  background: url(../img/HozenENGINEERING.png) no-repeat;
  background-position: right top;
  max-width: 1500px;
  margin: 0 auto;

}

.overview__bgtxt {
  /*
  font-size: 200px;
  color: #FFFFFF;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.12); 
  text-stroke: 1px rgba(0, 0, 0, 0.12);
  position: absolute;
  right: -990px;
  top: 40%;
  overflow: hidden;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  transform: rotate( 90deg );
  z-index: 1;
  display: block;*/
}



.top__resuits .overview__btn {
  color: #274D86;


}

.top__resuits {
  background-image: linear-gradient(180deg, rgba(234, 245, 252, 1), rgba(247, 247, 250, 1));
  padding-top: 80px;
  padding-bottom: 80px;
}


.top__resuits .overview__btn {
  justify-content: flex-start;

}

.top__resuits .overview__btn--svg {
  background: rgba(39, 77, 134, 0.1);
}

.top__resuits--btn {
  display: flex;
  justify-content: flex-end;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}



.top__resuits--btn button {
    background-color: #dd574614;
    border-radius: 0.25rem;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    display: flex;
    margin-left: 10px;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: #FFFFFF;
}


.top__resuits--btn button svg {
  width: 24px;
  height: 24px;
}

.top__resuits--btn button:nth-of-type(1) svg {
  transform: scale(-1, 1);
}

.top__resuits--head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.top__resuits--head .top__resuits--btn {
  margin-left: auto;
}




.top__resuits--head .topwhoweare__txt--h2 {
  margin-bottom: 0;
  margin-right: 50px;

}


.top__resuits--head .overview__btn {
  margin-top: 0;
}



.top__ourcompany {

}

.top__ourcompany--box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  

}

.top__ourcompany--txt {
  width: 410px;
}


.top__ourcompany--img {
  text-align: center;
}



.top__ourcompany--txt h3 {
  font-weight: 600;
  font-size: 26px;
  margin-bottom: 1rem;

}


.top__ourcompany__h3--border {
  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
  flex-shrink: 0;
  width: 100%;
  height: 1px;
  margin-bottom: 1.5rem;
}

.top__ourcompany__h3--border > div {
  background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));
  width: 3rem;
  height: 1px;
}



.top__ourcompany--txt .topwhoweare__txt--btn-red {
  margin-left: auto;
  margin-top: 20px;
  display: inline-block;
}


.foot__our {
  padding: 2rem 0;
  border-top: #EBEBEB solid 1px;
  border-bottom: #EBEBEB solid 1px;
}
.foot__our--inner {
  padding: 0 6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 80rem;
  margin: 0 auto;
}


.foot__our--eng {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #9ca3af;
}

.foot__our--txt {
  padding-right: 2rem;
  margin-bottom: 0;
  line-height: 27px;
  font-size: 15px;
  border-right: #AAAAAA solid 1px;

}

.foot__our--txtbox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
}

.foot__our--txtbox a:nth-of-type(1) img {
  height: 38px;
}
.foot__our--txtbox a:nth-of-type(2) img {
  height: 50px;
}


footer {
  background: #F7F7FA;
  padding: 80px 0;
}


.footer__txt01 {
  font-size: 14px;
  color: #888888;

}
.footer__h2 {
  font-size: 32px;
  font-weight: 600;
  color: #51555B;
}

footer .topwhoweare__txt--btn-sns {
  display: inline-flex;
  width: auto;
}

footer .topwhoweare__txt--btn-sns div:nth-of-type(1) {
  flex: none;
  border-right: #DDDDDD solid 1px;
}

footer .topwhoweare__txt--btn-sns img {
  padding: 14px;
  border-left: none;
  background: #FFFFFF;
  border-radius: 4px;
}


footer .overview__btn {
  color: #274D86;
  justify-content: flex-start;
}

footer .overview__btn--svg {
  background: rgba(39, 77, 134, 0.1);
}

.footer__cont {
border: #E6E6E6 solid 1px;
border-radius: 4px;
background: #FFFFFF;
color: #51555B;
font-size: 18px;
font-family: Barlow, -apple-system, Roboto, Helvetica, sans-serif;
font-weight: 500;
display: inline-flex;
overflow: hidden;
}


.footer__box01 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}


.footer__cont div {
  padding: 20px 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  background: #FFFFFF;
}


.footer__cont div:nth-of-type(2) {
  border-left: #E6E6E6 solid 1px;
}

.footer__cont div:nth-of-type(1)::before {
  content: "";
  background: url(../img/mask-group-42.png) no-repeat;
  background-size: 100%;
  display: inline-block;
  width: 24px;
  height: 24px;
}


.footer__cont div:nth-of-type(2)::before {
  content: "";
  background: url(../img/mask-group-41.png) no-repeat;
  background-size: 100%;
  display: inline-block;
  width: 20px;
  height: 20px;
}



.footer__box02 {
display: flex;
margin-top: 50px;
justify-content: space-between;
}

.footer__box02--left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.footer__box02--left .overview__btn {
  margin-top: 0;
  margin-left: 30px;
}

.footer__box02--right {
  font-size: 13px;
  color: #888888;
  font-family: Barlow, -apple-system, Roboto, Helvetica, sans-serif;

}

.footer__box02--add {
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
  color: #888888;
}

address {
  font-style:normal;
}


.footer__box02--right .overview__btn {
  margin-left: 3rem;
  margin-top: 0;
}


.footer__box02--right .overview__btn--svg svg {
  width: 16px;
  height: 16px;
  transform: rotate(270deg);
}



.navbar .nav-container li {
  list-style: none;
}


.hamburger-demo-menulist {
  display: flex;
}

.input-hidden {
  display: none;
}



.topmainimage {
position: relative;
}



.topmainimage span {
display: inline-block;
position: absolute;
bottom: 10px;
right: 15vw;
}
.topmainimage span {
width: 20vw;
}




a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
}




















































/* Responsive styles */
@media (max-width: 991px) {

img, video {
    width: 100%;
    height: auto;
}
  .sponly {
    display: block;
  }
  
  .pconly {
    display: none;
  }

.topmainimage img {
width: 100%;
}

.topmainimage span {
width: 50vw;
}
.topmainimage span {
    right: 1vw;
    bottom: 20px;
}

  .top-bar {
    max-width: 100%;
    padding: 0 20px;
  }

  .top-bar-container {
    max-width: 100%;
    justify-content: end;
    gap: 0px;
  }

  .company-description {
    max-width: 100%;
    font-size: 10px;
  }

  .top-bar-actions {
    white-space: initial;
  }

  .language-selector {
    white-space: initial;
  }

  .lang-btn-active, .lang-btn-inactive {
    white-space: initial;
  }

  .quicklinks-btn {
    padding: 13px 20px;
    white-space: initial;
  }

  .main-nav {
    max-width: 100%;
    padding: 8px 20px;
    align-items: flex-start;
  }
  


  .main-nav-container {
    max-width: 100%;
    display: block;
    width: auto;
  }

  .logo-circle-core {
    margin-right: -6px;
  }

 
 

  .nav-links {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }



.inner {
  width: 100%;
}
.topwhoweare__txt {
  width: 100%;
}
.overview__box--txtbox {
  width: 100%;
}
.top__ourcompany--box {
  display: block
;
  justify-content: space-around;
  align-items: center;
}
.footer__box01 {
  display: block
;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto;
}
.footer__cont div {
   display: block;
   padding: 20px;
   text-align: center;
   flex: 1;
}
.footer__cont div:nth-of-type(1)::before {
  display: block;
  margin: 0 auto;
}
.footer__cont div:nth-of-type(2)::before {
  display: block;
  margin: 0 auto;
}

.footer__cont {
  margin: 0 auto;
  width: 90%;
  display: flex;
}



.taa h2 {
  font-size: 40px;
  color: #274D86;
  font-weight: 700;
  font-family: "Barlow", sans-serif;
  line-height: 1;
  text-align: right;
  margin-bottom: 30px;
}


.taa .inner {
  display: block
;
}

.taa__img {
  width: 100%;
  flex: 1;
}


.taa__img img:nth-of-type(1) {
  width: 40%;

}

.taa__img img:nth-of-type(2) {
  width: 40%;

}



.topwhoweare__txt--btn {
  display: block;
}

.top-bar,.main-nav {
  box-sizing: border-box;
  position: relative;
}


.overview__box {
  display: block;
}

.overview__box .overview__box--img {
  min-height: 150px;
  clip-path: none;
  width: 100%;
  background-size: 100%;
}
.overview__box:nth-of-type(odd) .overview__box--img {
  min-height: 150px;
  clip-path: none;
  width: 100%;
  background-size: 100%;
}

.logo-letter {
  width: 70px;
}


.topmenu {
  display: flex;
  width: 90%;
  flex-wrap: wrap;
}


.topmenu li {
  width: 49%;
}


.topmenu li + li {
  border-left: none;
  border-top: rgba(255, 255, 255, 0.24) 1px solid;
}
.topmenu li:nth-of-type(even) {
  border-left: rgba(255, 255, 255, 0.24) 1px solid;
  border-top: rgba(255, 255, 255, 0.24) 1px solid;
}
.topmenu li:nth-of-type(2) {
  border-left: rgba(255, 255, 255, 0.24) 1px solid;
  border-top: none;
}
.topmenu li:nth-of-type(5) {
  border-left: none;
  border-top: rgba(255, 255, 255, 0.24) 1px solid;
  width: 100%;
}

.topmenu li {
  background-size: 150px !important;
  background-position: left center !important;
  font-size: 10px;
}

.topmenu li a {
  padding: 8px;
}


.top__ourcompany--txt {
  width: 100%;
}

.logo img {
  width: 70px;
  height: auto;
  display: flex;
  align-items: center;
}


.logo span {
    position: absolute;
    left: 100px;
    font-size: 10px;
}

.topnews {
  display: block;
  max-width: 90%;
  margin: 0 auto;
}

.topnews ul {
  width: 100%;
}

.topnews li {
  display: block;
}


.news__cate {
  display: inline-block;
}


.topwhoweare {
  display: block;
}



.topwhoweare__txt--h2 {
  font-size: 30px;
}


.inner {
  width: 96%;
  margin: 0 auto;
}


.g228 {
  margin-top: 30px;
}

.topwhoweare__txt--btn-red {
  margin-left: auto;
}


.topwhoweare__txt--btn-sns {
  margin-left: auto;
  margin-top: 10px;
}


.topnews-topwhoweare {

}


.taa__txt--d {
  transform: translate(0px, 0px);
  position: absolute;
  top: -70px;
  left: 0;
  width: 70px;
}

.taa__txt {
  position: relative;
}


.taa__img {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 0px;
}



.overview h2 {
  font-weight: 700;
  font-size: 30px;
  text-align: center;
}


.overview__box {
  width: 96%;
}

.overview__box--txt {
  flex: 1;
  width: 90%;
  display: block;
  margin: 0 auto;
  padding: 20px 0;
}



.overview__box .overview__box--txt--number {
  font-size: 100px;
  color: #FFFFFF;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.12);
  text-stroke: 1px rgba(0, 0, 0, 0.12);
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 200px;
  height: 90px;
  overflow: hidden;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
}

.overview__box:nth-of-type(odd) .overview__box--txt--number {
  font-size: 100px;
  color: #FFFFFF;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.12);
  text-stroke: 1px rgba(0, 0, 0, 0.12);
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 200px;
  height: 90px;
  overflow: hidden;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
}



.overview {
  background-image: linear-gradient(180deg, rgba(247, 247, 247, 1), rgba(255, 255, 255, 1));
  padding-top: 50px;
  position: relative;
  padding-bottom: 30px;
}


.top__resuits {
  padding-top: 30px;
  padding-bottom: 30px;
}

.top__resuits--head {
  display: block
;
  justify-content: flex-start;
  align-items: center;
}



.pconly {
  display: none;
}


.foot__our--inner {
  padding: 0;
  display: block
;
  justify-content: space-between;
  align-items: center;
  max-width: 96%;
  margin: 0 auto;
}


.foot__our--txtbox {
  display: block
;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.foot__our--txtbox img {
  margin-top: 20px;
}



.footer__h2 {
  font-size: 22px;
  font-weight: 600;
  color: #51555B;
}

.footer__cont {
  margin: 0 auto;
  width: 100%;
  display: flex
;
}

.footer__box02 {
  display: block
;
  margin-top: 50px;
  justify-content: space-between;
}

.footer__box02--add {
  display: block;
  flex-wrap: wrap;
  font-size: 15px;
  color: #888888;
}


footer .overview__btn {
  color: #274D86;
  justify-content: flex-end;
}



.topwhoweare__txt--btn-sns {
  margin-left: auto;
  margin-top: 0px;
}

.footer__box02--left {
  margin-bottom: 20px;
}


.topnews__link {
  color: #274D86;
  font-weight: 600;
  font-size: 1rem;
  display: flex
;
  justify-content: flex-end;
  align-items: center;
}

.topnews__h2 {
  text-align: center;
}




.topnews-topwhoweare {
  background: url(../img/whoweare-bg.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 30px;
  padding-bottom: 30px;
}



































































.demobox-header{
  background: #ddd;
  height: 64px;
  padding: 1em;
  }
  /* headerのサイト名（デモの参考値） */
  .demobox-sitename{
  font-weight: 700;
  font-size: 18px;
  }
  /* 全体調整CSS */
  .hamburger-demo-menubox *{
    font-size: 16px;
  }
  .hamburger-demo-menubox li{
    font-size: 14px;
  }
  /* hamburgerここから */
    /* inputを非表示 */
  .input-hidden{
    display: none;
  }
    /* label */
  .hamburger-demo-switch{
    cursor: pointer;
    position: absolute;
    right: 3%;
    top: 5px; /* ハンバーガーアイコンの位置（上から） */
    z-index: 9999;
    width: 2em; /* アイコン（クリック可能領域）の幅 */
    height: 2em; /* アイコン（クリック可能領域の）高さ */
  }
  /* メニュー展開時にハンバーガーアイコンを固定 */
  #hamburger-demo1:checked ~ .hamburger-demo-switch{
    position: fixed;
  }
  /* ハンバーガーアイコン */
  .hamburger-switch-line1, .hamburger-switch-line1:before, .hamburger-switch-line1:after{
    width: 25px;
    height: 3px;
    background: #333; /* ハンバーガーアイコンの色 */
    position: absolute;
    top: 50%;
    left: 50%;
    transition: .3s;
    content: "";
  }
  .hamburger-switch-line1{
      transform: translate(-50%, -50%);
  }
  .hamburger-switch-line1:before{
    transform: translate(-50%, -300%);
  }
  .hamburger-switch-line1:after{
    transform: translate(-50%, 200%);
  }
  /* ハンバーガーアイコン･アニメーション */
  #hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1{
    width: 0;
  }
  #hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:before{
    transform: rotate(45deg) translate(-40%, 325%);
    background: #FFFFFF; /* ハンバーガーアイコンの色 */
  }
  #hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:after{
    transform: rotate(-45deg) translate(-40%, -325%);
    background: #FFFFFF; /* ハンバーガーアイコンの色 */
  }
  /* メニューエリア */
  .hamburger-demo-menuwrap{
    position: fixed;
    height: 100%;
    background: #274D86; /* メニューエリアの背景色 */
    padding: 5em 3% 2em;
    z-index: 9998;
    transition: .3s;
    overflow-y: scroll; /* メニュー内容が多い場合に縦スクロールする */
    top: 0;
    left: 100%;
    width: 70%;
  }
  /* メニューリスト */
  .hamburger-demo-menulist{

    list-style: none;
  }
  .hamburger-demo-menulist li a{
    text-decoration: none;
    color: #FFFFFF; /* メニューリストの文字色 */
    display: block;
    padding: .5em 0;
  }

  .hamburger-demo-menulist li + li {

    border-top: rgba(255, 255, 255, 0.24) 1px solid;
}
  /* メニューエリア･アニメーション */
    /* 右から */
  #hamburger-demo1:checked ~ .hamburger-demo-menuwrap{
    left: 30%;
  }
    /* コンテンツカバー */
  #hamburger-demo1:checked ~ .hamburger-demo-cover{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9997;
    background: rgba(3,3,3,.5);
    display: block;
  }



.hamburger-demo-menulist.nav-links {
  display: block;
          padding: 5em 3% 2em;
}


.nav-links {
  text-align: left;
}
.logo span div {
    display: inline-block;
    font-size: 16px;
}





.hamburger-demo-menuwrap {
padding: 0;
}


.foot__our--txtbox a:nth-of-type(1) img {
width: 181px;
}


.foot__our--txtbox a:nth-of-type(2) img {
width: 131px;
}


.foot__our--txtbox a {
display: block;
}

.foot__our--txt {
    padding-right: 0;
    border-right: none;
}

.topnews img {
width: 15px;
height: auto;
}

a[href^="tel:"] {
    pointer-events: auto;
    cursor: pointer;
}


}