/* style.css */

@font-face {
  font-family: 'MyInconsolata';
  src: url('../fonts/Inconsolata_Expanded-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MyPlemolJP35-Regular';
  src: url('../fonts/PlemolJP35-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html {
    scroll-behavior: smooth;
}

.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

.logo {
  width: 100%;
  height: auto;
  max-width: 200px; /* ロゴの最大幅を設定 */
  margin: 0 auto; /* 中央寄せ */
}

.textbold {
  font-weight: bold;
  font-size: 150%;
  /* color: #ff00dd; 落ち着いたブルー系に合わせた色 */
}

.textbold2 {
  font-weight: bold;
  font-size: 120%;
  /* color: #ff00dd; 落ち着いたブルー系に合わせた色 */
}

.textheaderbig {
  font-weight: bold;
  font-size: 240%;
  /* color: #ff00dd; 落ち着いたブルー系に合わせた色 */
  /* color: #23272f; */
  color: #333300;
  text-shadow: 0 0 8px #999;
}

html {
  width: 100%;
  height: 100%;
}

body {
  background-color: #333333;
  background-image: url('../resources/Circuit_Board_Traces_Silhouette-by-GDJ_lineGray.png');
  /* background-image: url('../resources/Circuit_Board_Traces_Silhouette-by-GDJ_lineWhite.svg'); */
  /* background-image: url('../resources/Circuit_Board_Traces_Silhouette-by-GDJ.svg'); */
  /* background-repeat: no-repeat; */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* color: #e0e0e0; */
  /* color: #23272f; */
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

header, nav, main, footer {
  width: 100%;
  max-width: 900px;
  /* max-width: 600px; */
  margin: 0 auto;
  /* padding: 1.5rem; */
  /* padding: 0rem 2rem; */
  box-sizing: border-box;
}

header {
  height: 600px;
  background: #ffffff75;
  /* border-bottom: 1px solid #44495a; */
  text-align: center;
  color: #e0e0e0;
  background-image: url('../resources/business-partners-handshake-global-corporate-with-technology-concept_small.png');
  background-size: 900px 600px;
  background-position: top center;
  background-attachment: local;
  background-repeat: no-repeat;
}

nav {
  margin: 1rem 0;
  text-align: center;
}

nav a {
  color: #90caf9;
  text-decoration: none;
  margin: 0 1rem;
  font-weight: 500;
  transition: color 0.2s;
}

nav a:hover {
  color: #ff00dd;
  text-decoration: underline;
}

main {
  background: #282c36;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.05);
  /* padding: 2rem; */
}

/* h1, h2, h3 {
  color: #90caf9;
  margin-top: 2em;
} */

h1, h2, h3 {
  color: #ffff00; /* header/nav/ボタンに合わせて落ち着いたブルー系 */
  margin-top: 2em;
}

h2 {
  position: relative;
  text-align: center;
  display: inline-block;
  /* padding: 0.3em 0.8em; */
  /* padding: 0em 0.2em; */
  margin-top: 3em;
  /* margin-bottom: 0.8em; */
  border-radius: 6px;
  color: #444444;
  z-index: 1;
  /* 背景用の擬似要素を使う */
  font-size: 1.5em;
}

h2::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 7%;
  background: #ffff99;
  border-radius: 6px;
  z-index: -1;
}

h3 {
  position: relative;
  text-align: center;
  display: inline-block;
  /* padding: 0.3em 0.8em; */
  /* padding: 0em 0.2em; */
  margin-top: 3em;
  /* margin-bottom: 0.8em; */
  border-radius: 6px;
  color: #444444;
  z-index: 1;
  /* 背景用の擬似要素を使う */
  font-size: 1.5em;
}

h3::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 7%;
  background: #ffff99;
  border-radius: 6px;
  z-index: -1;
}

main {
  position: relative;
  background: #282c36;
  background: rgba(255, 255, 255, 0.85); /* 半透明白に変更してbodyの背景を見える様にする */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.05);
  padding: 2rem;
  overflow: hidden; /* 擬似要素のはみ出し防止 */
}

/* 背景画像だけを別のレイヤーで表示 */
main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-image: url('../resources/p0040_m.png'); */
  /* background-repeat: no-repeat; */
  /* background-size: contain; */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* opacity: 0.1; 背景画像だけにopacityを適用 */
  pointer-events: none; /* 背景がクリックなどに反応しないように */
  z-index: 0;
}

/* main内の実際の内容は前面に表示 */
main > * {
  position: relative;
  z-index: 1;
}

button, input[type="submit"] {
  background: #ff00dd50;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.5em 1.2em;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover, input[type="submit"]:hover {
  /* background: #283593; */
  background: #ffff0050;
}

footer {
  background: #2c3140;
  border-top: 1px solid #44495a;
  text-align: center;
  font-size: 0.95em;
  color: #b0b0b0;
  margin-top: 2rem;
  /* padding: 1rem; */
  padding: 0.5rem;
}

a {
  color: #90caf9;
  text-decoration: none;
}

a:hover {
  color: #ff00dd;
  text-decoration: underline;
}

a.button-44 {
    display: inline-flex;
    justify-content: center; /* use flex-end to right-align content */
    align-items: center;
    vertical-align: middle;
    width: fit-content;
    margin: 0 1em 0 auto; /* right-align the button */
    padding: .5em 1em;
    border: 1px solid #333333;
    border-radius: 5px;
    background-image: repeating-linear-gradient(-45deg, #eee, #eee 1px, #ffffff 1px, #ffffff 4px);
    color: #333333;
    font-weight: 600;
    /* font-size: 1em; */
    font-size: 0.75em;
    /* transition: box-shadow .3s; */
    text-decoration: none;
}

a.button-44:hover {
    box-shadow: 0 7px 30px -5px rgb(0 0 0 / 20%);
}

a.button-44::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    content: '';
}

.box-021 {
    position: relative;
    max-width: 400px;
    /* margin: 1em auto; */
    margin: 1em auto;
    padding: 1em 1.5em;
    border: 2px solid #666666;
    border-radius: 3px;
    color: #333;
}

.box-021::before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -1em;
    left: -1em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: #666666;
    color: #fff;
    font-weight: 600;
    content: attr(data-number);
}

.balloon4 {
  position: relative;
  margin: 2em 0 2em 40px;
  padding: 15px;
  background: #fff0c6;
  border-radius: 30px;
}

.balloon4:before {  
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #fff0c6;
  border-radius: 50%;
}

.balloon4:after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #fff0c6;
  border-radius: 50%;
}
.balloon4 p {
  margin: 0; 
  padding: 0;
}

.heading-7 {
    display: inline-block;
    position: relative;
    color: #333;
}

.heading-7:before {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #2589d0;
}

.icon-external-link {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-color: currentColor; /* テキスト色と同じ色になる */

  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'>\
<path d='M376 64C366.3 64 357.5 69.8 353.8 78.8C350.1 87.8 352.2 98.1 359 105L430 176L263 343C253.6 352.4 253.6 367.6 263 376.9C272.4 386.2 287.6 386.3 296.9 376.9L463.9 209.9L534.9 280.9C541.8 287.8 552.1 289.8 561.1 286.1C570.1 282.4 576 273.7 576 264L576 88C576 74.7 565.3 64 552 64L376 64zM528 206.1L433.9 112L528 112L528 206.1zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 408C480 394.7 469.3 384 456 384C442.7 384 432 394.7 432 408L432 496C432 513.7 417.7 528 400 528L144 528C126.3 528 112 513.7 112 496L112 240C112 222.3 126.3 208 144 208L232 208C245.3 208 256 197.3 256 184C256 170.7 245.3 160 232 160L144 160z'/>\
</svg>") no-repeat center / contain;

  mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'>\
<path d='M376 64C366.3 64 357.5 69.8 353.8 78.8C350.1 87.8 352.2 98.1 359 105L430 176L263 343C253.6 352.4 253.6 367.6 263 376.9C272.4 386.2 287.6 386.3 296.9 376.9L463.9 209.9L534.9 280.9C541.8 287.8 552.1 289.8 561.1 286.1C570.1 282.4 576 273.7 576 264L576 88C576 74.7 565.3 64 552 64L376 64zM528 206.1L433.9 112L528 112L528 206.1zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 408C480 394.7 469.3 384 456 384C442.7 384 432 394.7 432 408L432 496C432 513.7 417.7 528 400 528L144 528C126.3 528 112 513.7 112 496L112 240C112 222.3 126.3 208 144 208L232 208C245.3 208 256 197.3 256 184C256 170.7 245.3 160 232 160L144 160z'/>\
</svg>") no-repeat center / contain;
}