@charset "UTF-8";
/**
 * python page base style
 * NOTE: 2026.09.11
 * Based on: python/assets/css/python.css
**/

:root {
  --site-header-h: 83px;
  --site-footer-h: 96px;
  --site-navbar-w: 192px;
  --python-base-bg-white-line-height: 96px;
  --python-code-font-c: #009d00;
  --python-code-font-ff: Menlo, Monaco, Consolas, "Courier New", monospace;
  --python400-product-name: 96px;
  --python400-product-lead: 72px;
  --python400-lead-indent: 32px;
  --python400-section-margin-top: 56px;
}
@media screen and (max-width: 767px) {
  :root {
    --site-navbar-w: 190px;
    /* NOTE: ただし640px以下では--site-navbar-wに横100% */
  }
}

body {
  background: #FAFAFA;
  margin: 0;
  padding: 0;
  position: relative;
}
body::before {
  content: '';
  display: block;
  background: #fff;
  width: auto;
  height: var(--python-base-bg-white-line-height);
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  pointer-events: none;
}
body.python::before {
  height: var(--python-base-bg-white-line-height);
}


/*------------------------------------------
header 帯の色
------------------------------------------*/
.grdContainer.grdContainer {
  background-color: #b6288a;
  background-image: none;
}


/*------------------------------------------
footer
------------------------------------------*/
footer {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: stretch;
  background: linear-gradient(-45deg, #b6288a, #b6288a);
  height: var(--site-footer-h);
  margin: 0;
  padding: 0 0 0 var(--site-navbar-w);
}
body.python footer {
  margin-top: var(--python400-section-margin-top);
}

footer p {
  font-size: 30px;
}
body.python footer p {
  font-size: 20px;
  margin: 0;
}

body.python footer .rights {
  margin: 0;
}


/*------------------------------------------
.wrapper
------------------------------------------*/
.wrapper {
  margin-top: var(--site-header-h);
}
@media screen and (max-width: 640px) {
  .wrapper {
    margin-top: var(--python-base-bg-white-line-height);
  }
  .wrapper>section {
    padding-left: 0;
  }
}


/*------------------------------------------
side navi
------------------------------------------*/
.navbar {
  width: var(--site-navbar-w);
  margin-top: var(--site-header-h);
}
@media screen and (min-width: 768px) {
  .navbar {
    height: calc(100% - var(--site-header-h));
    min-height: 70px;
  }
}
@media screen and (max-width: 767px) {
  .navbar,
  .navbar-header {
    width: var(--site-navbar-w);
  }
}
@media screen and (max-width: 640px) {
  .navbar,
  .navbar-header {
    width: 100%;
  }
  .navbar-toggle {
    margin-bottom: 0;
  }
}


/*---------------------- ヘッダーナビ (#Python_nav) ------------------------*/

#Python_nav .navbar-default {
  background: #ffffff !important;
  border: none !important;
  transition: all 0.25s ease-in-out !important;
  overflow-y: auto;
  max-height: 100vh;
  overflow-x: hidden;
}

header .navbar-default ul.navbar-nav li {
  float: none !important;
  border-bottom: 1px dotted #ffffff;
  background-color: #b6288a;
  padding-left: 22px;
  height: auto;
  color: #ffff;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 13px;
}

header .navbar-default ul.navbar-nav li.sub {
  background-color: #ffffff !important;
  color: #666;
  padding: 0;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 0.5px solid #CECDCD;
  height: auto;
}

header .navbar-default ul.navbar-nav li:nth-child(1):hover {
  background: #b6288a;
}

header .navbar-default ul.navbar-nav li.sub a:hover {
  background-color: rgb(182 40 138 / 20%);
}

header .navbar-default ul.navbar-nav li:last-child:hover {
  background: rgb(182 40 138 / 50%);
}
/* HIGHLIGHT.js */
header .navbar-default ul.navbar-nav li.sub.active a {
  background-color: rgb(182 40 138 / 20%);
}

.navbar-header {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #ffffff;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  width: 191px;
}

.navbar-nav li.sub:nth-child(2) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image01.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(3) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image02.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(4) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image03.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(5) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image04.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(6) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image05.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(7) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image06.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(8) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image07.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(9) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image08.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(10) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image09.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(11) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image10.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(12) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image11_1.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(13) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image11.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(14) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image12.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li.sub:nth-child(15) a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image13.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

.navbar-nav li a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../img/Python/icon/Python-image14.png') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

/*------------------------------------------
bootstrap container
------------------------------------------*/

@media (min-width: 1510px) {
  .container {
    width: 1420px;
  }
}
@media (max-width: 1700px) {
  .container {
    width: 90%;
  }
}

/*------------------------------------------
section style
------------------------------------------*/
body.python section {
  letter-spacing: 0.2125ex;
  color: #000;
}

.page-section {
  margin: 0;
  padding: 0 0 0 var(--site-navbar-w);
}

.page-section+.page-section {
  margin-top: var(--python400-section-margin-top);
}

.page-section--type-ppt {
  /* min-height: calc(100dvh - var(--site-header-h)*1); */
  padding-bottom: 32px;
}

.page-section--type-ppt.page-section--on-window-high {
  /* min-height: calc(50dvh - var(--site-header-h)*0.5); */
}

@media (min-height: 1024px) {
  .page-section--type-ppt.page-section--on-window-high {
    /* min-height: calc(33dvh - var(--site-header-h)*0.33); */
  }
}

.page-section--type-ppt .container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: stretch;
  /* height: 100%; */
}

/* section text-and-img group */
.page-section__text-and-img {
  --text-and-img-img-width: 300px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0;
}

*+.page-section__text-and-img {
  margin-top: var(--python400-lead-indent);
}

.page-section__text~.page-section__text-and-img {
  padding-left: var(--python400-lead-indent);
}

@media (min-width: 1440px) {
  .page-section__text-and-img {
    --text-and-img-img-width: 320px;
  }
}

@media (min-width: 1600px) {
  .page-section__text-and-img {
    --text-and-img-img-width: 360px;
  }
}

/* section text */
.page-section__text {
  font-size: 20px;
  line-height: 1.7;
  padding: 0 0 0 var(--python400-lead-indent);
}

.section-heading>*+.page-section__text {
  margin-top: var(--python400-lead-indent);
}
.section-heading>.page-section__text.type--no-margin-top {
  margin-top: 0.5em;
}

@media (max-width: 1510px) {
  .page-section__text {
    font-size: 20px;
  }
}

.page-section__text-and-img .page-section__text {
  width: calc(100% - var(--text-and-img-img-width));
}
.page-section__text-and-img:has(.item--illust-s) .page-section__text {
  width: calc(100% - 144px);
}
.page-section__text-and-img:has(.item--profile) .page-section__text {
  width: calc(100% - 240px);
}
.page-section__text-and-img:has(.item--wizard) .page-section__text {
  width: calc(100% - 400px);
}

.page-section__text p {
  font-size: inherit;
  line-height: 1.7;
  max-width: none;
  margin: 0;
  float: none;
}
.page-section__text ul+p,
.page-section__text ol+p,
.page-section__text pre+p,
.page-section__text p+p {
  margin-top: var(--python400-lead-indent);
}

/* section image */
.page-section__img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-heading>.page-section__img {
  display: block;
  margin: 0 calc( var(--python400-lead-indent) * 3 ) 0 var(--python400-lead-indent);
  padding-left: var(--python400-lead-indent);
}
.section-heading>*+.page-section__img {
  display: block;
  margin-top: var(--python400-lead-indent);
  margin-left: var(--python400-lead-indent);
  padding-left: var(--python400-lead-indent);
}

.page-section__text-and-img .page-section__img {
  width: var(--text-and-img-img-width);
}

.page-section__text-and-img:has(.item--illust-s) .page-section__img {
  width: 144px;
}
.page-section__text-and-img:has(.item--wizard) .page-section__img {
  width: 400px;
}
.page-section__text-and-img:has(.item--wizard) .page-section__img {
  width: 400px;
}

.page-section__img img {
  width: 100%;
  height: auto;
  margin: 0;
  float: none;
}

.page-section__img .item--illust {
  max-width: 280px;
  object-fit: contain;
}
.page-section__img .item--illust-s {
  max-width: 144px;
  object-fit: contain;
}
.page-section__img .item--code {
  max-width: 720px;
  object-fit: contain;
}
.page-section__img .item--wizard {
  max-width: 400px;
  object-fit: contain;
}
.page-section__img .item--profile {
  max-width: 240px;
  object-fit: contain;
}
.page-section__img .item--illust-offset-top {
  margin-top: -2em;
}
.page-section__img .item--illust-translate-bottom {
  transform: translate(0,1em);
}


/* 画像アイコン付きリスト（画像はimgタグ） */
.page-section__list-icon-and-text {
  font-size: inherit;
}
.page-section__list-icon-and-text>li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: inherit;
  gap: 1em;
  margin: 0;
  padding: 0;
}
.page-section__list-icon-and-text>*+li {
  margin-top: 0.5em;
}
.page-section__list-icon-and-text>li>i {
  display: block;
  width: 1lh;
}
.page-section__list-icon-and-text>li>i>img {
  width: 1lh;
  height: 1lh;
  object-fit: contain;
  transform: translate(0,-6.666%);
}
.page-section__list-icon-and-text>li>p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* 大見出し */
.product-name {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 36px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto calc(var(--python400-product-name) - 16px);
  color: #000;
  line-height: 1.1;
  white-space: nowrap;
  min-height: var(--python400-product-name);
  margin: 0;
  padding: 0 0 0 120px;
}

/* 各セクションインナー */
.section-heading {
  margin: 0;
  text-align: left;
}

/* 各セクション中見出し装飾 */
.divider::after {
  background: #b6288a;
  margin-bottom: 30px;
  width: 100%;
}
.section-heading .divider::after {
  content: '';
  position: relative;
  height: 4px;
  width: 200px;
  display: block;
  text-align: left;
  margin: 12px 0;
  border-radius: 5em;
}
section .section-heading .divider::after {
  margin-bottom: 32px;
  width: 100%;
}

.section-heading ul {
  margin: 0 0 0 var(--python400-lead-indent);
  padding: 0;
}
.section-heading *+ul {
  margin-top: 1em;
}
.section-heading ul li {
  font-size: 17px;
  list-style: none;
}

.open .section-heading {
  margin: 40px 0 40px;
  text-align: left;
  padding-right: 40px;
  padding-left: 40px;
}

/* section footer image */
.section-footer-image {
  container-type: inline-size;
  margin: 0 calc( var(--python400-lead-indent) * 5 ) 0 var(--python400-lead-indent);
}
*+.section-footer-image {
  margin-top: var(--python400-lead-indent);
}
.section-footer-image img {
  width: 100%;
  height: auto;
}
.section-footer-image .item--illust-s {
  max-width: 80%;
}


/*------------------------------------------
UI style
------------------------------------------*/

@media screen and (max-width: 640px) {
  .main-visual {
    margin-bottom: -148px;
  }
  .main-visual .autoweblogo {
    margin-left: 0 !important;
  }
}

.autoweblogo {
  bottom: 9.5%;
}
@media screen and (max-width: 1550px) {
  .autoweblogo {
    margin-left: 112px;
  }
}

@media screen and (max-width: 1500px) {
  .top.main-visual .autoweblogo {
    margin-left: 80px;
    bottom: 20px;
  }
}

@media (min-width: 1700px) {
  .autoweblogo {
    bottom: 11.5%;
  }
}
@media (max-width: 1510px) {
  .top.main-visual .autoweblogo {
    bottom: 60px;
  }

  .top.main-visual {
    margin-top: 10px;
  }

  .autoweblogo {
    bottom: 9%;
  }
}



.main-visual .autoweblogo-inner {
  width: 90%;
  max-width: 830px;
  margin: 0 auto;
  padding-left: 8px;
}
@media screen and (min-width: 1281px) {
  .main-visual .autoweblogo-inner {
    width: 600px;
    float: left;
    margin-top: 290px;
    color: #fff;
    padding-left: 0;
    font-size: 23px;
  }
}
@media screen and (max-width: 1800px) {
  .main-visual .autoweblogo-inner {}
}
@media screen and (max-width: 1600px) {
  .main-visual .autoweblogo-inner {}
}
@media screen and (max-width: 1300px) {
  .main-visual .autoweblogo-inner {
    font-size: 14px;
    color: #fff;
    width: 100%;
  }
}


/* NOTE: 2026.09.08 ページ大見出し */
.PythonBase {
  font-size: 36px;
  background-repeat: no-repeat;
  background-position: left;
  background-size: 120px auto;
  color: #000;
  line-height: 81px;
  white-space: nowrap;
  padding-left: 120px;
}
.PythonBase.white {}
@media (max-width: 1510px) {
  .PythonBase {
    font-size: 35px;
  }
}


/*---------------------- リモーダル用 ------------------------*/

.remodal-close::before {
  font-size: 38px;
}

/*---------------------- END リモーダル用 ------------------------*/

/*---------------------- カルーセル用 ------------------------*/

.slick-dots li.slick-active button::before {
  color: #222;
}

/*---------------------- END カルーセル用 ------------------------*/

@media screen and (min-width: 641px) and (max-width: 1399px) {
  .wrapper>section {
    padding-left: 196px;
  }
}

@media screen and (min-width: 641px) and (max-width: 767px) {
  .navbar-header {
    padding-top: 0;
  }

  header .navbar-default .logo {
    width: 190px;
  }
}

/*==========================================
  2. 汎用セレクタ (セクションに依存しない共通パーツ)
  ------------------------------------------
  同じ詳細度で競合するものは後ろに書いた方が優先されるため、
  「※」付きの並び順は入れ替えないこと。
==========================================*/

/*---------------------- ページ共通 ------------------------*/

.top.main-visual {
  margin-top: 0;
}

/*---------------------- ページ大見出し (.Python01〜12 / .PythonBase) ------------------------*/

/* ※ .PythonBase(共通) の後に .Python01〜12(個別アイコン) を置き、background 等を上書きする */
.Python01 {
  background: url(../img/Python/Python-image03.png) no-repeat left;
  padding-left: 140px;
  line-height: 120%;
}

.Python02 {
  position: relative;
  list-style: kannada;
  font-size: 50px;
  background: url(../img/Python/Python-image02.png) no-repeat left;
  background-size: 81px;
  padding-left: 191px;
  line-height: 75px;
  border-radius: 70px;
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  width: max-content;
  padding-right: 110px;
  background-position: 75px center;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 7px;
  color: #000;
  margin-top: 0;
}

.Python02::after {
  content: "▲";
  position: absolute;
  background-position: right;
  right: -15px;
  z-index: 99999999999999999999999;
  top: 54px;
  color: #fff;
}

.Python03 {
  background-image: url(../img/Python/Python-image06.png);
}

.Python04 {
  background-image: url(../img/Python/Python-image13.png);
}

.Python05 {
  background-image: url(../img/Python/Python-image10.png);
}

.Python06 {
  background-image: url(../img/Python/Python-image12.png);
}

.Python07 {
  background-image: url(../img/Python/AS400/AS400-icon.png);
}

.Python08 {
  background-image: url(../img/Python/AS400/Wizard-icon.png);
}

.Python09 {
  background-image: url(../img/Python/AS400/ILE-RPG-icon.png);
}

.Python10 {
  background-image: url(../img/Python/AS400/record-icon.png);
}

.Python11 {
  background-image: url(../img/Python/AS400/daikou-icon.png);
}

.Python12 {
  background-image: url(../img/Python/AS400/py-icon.png);
}


@media (max-width: 1700px) {
  [id="section06"] .flexBox img {
    right: -25px;
  }
}

@media (max-width: 1600px) {
  [id="section02"] .gray_box p {
    width: 710px;
    margin-left: 30px;
  }

  [id="section02"] img.pronto_screen {
    float: left;
    margin-left: 4%;
  }
}

@media (max-width: 1510px) {
  [id="section02"] .gray_box p {
    font-size: 18px;
  }

  [id="section06"] .flexBox img {
    right: 5px;
  }

  [id="section007"] .marker-line {
    padding: 0;
  }
}

@media screen and (min-width: 1000px) {
  [id="section03"] .Python06-1 {
    width: 320px;
  }
}

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

}

/*---------------------- テーブル ------------------------*/

.faq_table td,
.faq_table th,
.faq_table td,
.faq_table td {
  padding: 8px 10px;
}

table.product_table {
  width: 73%;
  margin: auto;
  margin-bottom: 30px;
  font-size: 16px;
  margin-left: 97px;
}

table.product_table td {
  padding-top: 20px;
  padding-bottom: 20px;
}

table.product_table td span.number {
  display: inline-block;
  font-size: 26px;
  margin-right: 5px;
  text-align: right;
  color: #337ab7;
}

table.operating_environment {
  width: 550px;
  font-size: 16px;
  margin-top: 60px;
}

/*---------------------- マーカー線 (.marker-line) ------------------------*/

.marker-line .special-paragraph {
  margin-top: 4px;
  margin-bottom: 25px;
  box-shadow: inset 0 -0.6em 0 #FFE6F7;
  font-size: 30px;
}

.marker-line .special-paragraph span {
  display: block;
  box-shadow: inset 0 -0.6em 0 #FFE6F7;
}

.marker-line p {
  display: inline-block;
  box-shadow: inset 0 -0.6em 0 #FFE6F7;
  font-size: 28px;
  width: auto;
}

.marker-line {
  /* padding-left: 160px; */
  display: block;
}

@media (max-width: 1510px) {
  .marker-line .special-paragraph {
    font-size: 22px;
  }
}

/*---------------------- 吹き出し / ボックス / ピラミッド文 ------------------------*/

.hukidashi {
  float: none;
  font-size: 19px;
  background-color: #f5f5f5;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  padding-bottom: 30px;
  padding-top: 30px;
  outline: 25px solid #f5f5f5;
  outline-offset: 2px;
  width: calc(100% - 50px);
  margin: auto;
  display: block;
  overflow: hidden;
  margin-top: 60px;
  margin-bottom: 50px;
}

/* ※ .section-hukidashi は .hukidashi の width を上書きする */
.section-hukidashi {

  width: auto;
}

.box {
  border: 1px solid #7A7A7A;
  position: relative;
  max-width: 1130px;
  margin: auto;
  width: 100%;
}

.box h3 {
  position: absolute;
  background-color: #ffffff;
  width: max-content;
  display: block;
  margin: auto;
  left: 0;
  right: 0;
  top: -15px;
  padding: 0 30px;
}

.pyramid-text {
  line-height: 1.4;
  margin: 0 auto;
  max-width: 940px;
  font-size: 20px;
  margin-left: 0%;
  width: 100%;
}
@media (max-width: 1510px) {
  .pyramid-text {
    font-size: 22px;
  }
}

.pyramid-text .line {
  text-align: center;
  white-space: nowrap;
}

.pyramid-text .line:nth-child(1) {}

.pyramid-text .line:nth-child(2) {}

.pyramid-text .line:nth-child(3) {}

.pyramid-text .line:nth-child(4) {}

.pyramid-text .highlight-block {
  margin-top: 2em;
  text-align: center;
}

.pyramid-text .highlight-block .line {
  width: 80%;
}

.pyramid-text .highlight {
  font-weight: bold;
  letter-spacing: 1px;
  display: block;
  margin-top: 0.5em;
}


/*---------------------- .IBM-i ------------------------*/

[id="section01"] .IBM-i .box p {
  max-width: 976px;
  width: 80%;
}

[id="section01"] .IBM-i p {
  font-size: 20px;
  text-align: left;
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 40px;
}

.IBM-i .purple {
  color: #b6288a;
  font-size: 43px;
  text-align: center;
}
@media (max-width: 1600px) {
  .IBM-i .purple {
    font-size: 36px;
  }
}
@media (max-width: 1510px) {
  .IBM-i .purple {
    font-size: 30px;
  }
}

/* ※ .container img は、後ろの .flexBox img (margin:0) に上書きされる */

.IBM-i .container img {
  display: block;
  margin: 0 auto;
}

.kawasemi {
  position: absolute;
  top: 1135px;
  right: 0;
  width: 25%;
  z-index: 10;
}

.IBM-i .container img.kawasemi {
  top: -210px;
}

/* ※ .kawasemi_r は .kawasemi の position を上書きする */
.kawasemi_r {
  position: relative;
}

/*---------------------- flexBox / gray_box ------------------------*/

/* flexBox */

.flexBox {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: auto;
  margin-right: 0;
  padding-left: 60px;
  padding-top: 40px;
  gap: 70px;
}

.flexBox.max1182 {
  position: relative;
  align-items: center;
  margin: auto;
  margin-bottom: 50px;
  max-width: 1273px;
  margin-left: auto;
  margin-right: 0;
}

.flexBox p,
.flexBox img {
  margin: 0;
}

.flexBox p {
  display: block;
  font-size: 25px;
  max-width: 100%;
  width: auto;
  overflow: hidden;
}
@media (max-width: 1510px) {
  .flexBox p {
    font-size: 20px;
  }
}


.gray_box {
  display: flex;
  margin: auto;
  width: 1200px;
}
@media (max-width: 1510px) {
  .gray_box {
    width: 90%;
  }
}

/*------------------------------------------
矢印
------------------------------------------*/
.arrowWrap {
  margin: 1em var(--python400-lead-indent);
}

.arrowWrap img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/*------------------------------------------
強調ボックス
------------------------------------------*/
.emBox {
  display: block;
  border: 2px solid #F1A58A;
  background: #FCFFE6;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.7;
  max-width: 900px;
  width: 100%;
  padding: 0.75em 1em;
}
p>.emBox {
  width: calc( 100% - 1em );
  margin-left: 1em;
}
.emBox.type--yellow {
  border: 2px solid #F1A58A;
  background: #FCFFE6;
}
.emBox.type--pink {
  border: 2px solid #f28a8f;
  background: #fcf7fa;
}


/*------------------------------------------
番号付き小セクション
------------------------------------------*/

body.python .numberList {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  list-style: none;
  font-size: inherit;
  gap: 0;
  margin: 0 1em;
  padding: 0;
}
body.python *+.numberList {
  margin-top: 1em;
}
body.python .numberList>li {
  display: flex;
  align-items: center;
  font-size: inherit;
  line-height: 1.4;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.python .numberList>*+li {
  margin-top: 0.5em;
}
body.python .numberList>li>i {
  display: block;
  font-style: normal;
  font-size: inherit;
  line-height: inherit;
  width: 1.25em;
}
body.python .numberList>li>dl,
body.python .numberList>li>pre,
body.python .numberList>li>p,
body.python .numberList>li>div {
  font-size: inherit;
  line-height: inherit;
  width: calc( 100% - 1.25em );
}
body.python .numberList:has(:nth-child(10))>li>i {
  width: 2.25em;
}
body.python .numberList:has(:nth-child(10))>li>dl,
body.python .numberList:has(:nth-child(10))>li>pre,
body.python .numberList:has(:nth-child(10))>li>p,
body.python .numberList:has(:nth-child(10))>li>div {
  width: calc( 100% - 2.25em );
}
body.python .numberList:has(:nth-child(100))>li>i {
  width: 3.25em;
}
body.python .numberList:has(:nth-child(100))>li>dl,
body.python .numberList:has(:nth-child(100))>li>pre,
body.python .numberList:has(:nth-child(100))>li>p,
body.python .numberList:has(:nth-child(100))>li>div {
  width: calc( 100% - 3.25em );
}


/*------------------------------------------
チェックアイコン付き小セクション
------------------------------------------*/

body.python .checkWrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border: 1px solid #707070;
  background: #fff;
  max-width: 992px;
  margin: 40px 40px 0;
  padding: 32px 40px;
}

body.python .checkWrap .checkList {
  padding: 0;
  margin: 0;
}

body.python .checkWrap .checkList>li {
  display: flex;
  align-items: center;
  font-size: 22px;
}
body.python .checkWrap .checkList>*+li {
  margin-top: 0.5em;
}

body.python .checkWrap .checkList>li::before {
  content: '';
  display: block;
  background: url(../img/about/check-icon.png) no-repeat;
  background-size: contain;
  width: 1.25em;
  height: 1.25em;
  margin: 0 1em 0 0;
}

body.python .checkWrap>img {
  margin: 0;
}

/*------------------------------------------
下矢印付き小セクション
------------------------------------------*/

body.python .imageWithCaptionWrap {
  margin: 0 calc( var(--python400-lead-indent) * 5 ) 0 var(--python400-lead-indent);
}
body.python *+.imageWithCaptionWrap {
  margin-top: var(--python400-lead-indent);
}

body.python .imageWithCaptionWrap>dt {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 0.5em;
}
body.python .imageWithCaptionWrap>dt .pinMark {
  display: inline-block;
  font-size: 17px;
  line-height: 1.7;
  width: 1lh;
  height: 1lh;
  margin: 0 6px 0 -6px;
}
body.python .imageWithCaptionWrap>dt .pinMark img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  transform: translate(0,-8.333%) scale(1);
}

body.python .imageWithCaptionWrap>dd {
  font-size: 20px;
  margin: 0;
}
body.python .imageWithCaptionWrap img {
  width: 100%;
  height: auto;
  margin: 0 1em;
}

/*------------------------------------------
解説小セクション
------------------------------------------*/

body.python .descWrap {
  margin: 0 0 0 var(--python400-lead-indent);
}
body.python *+.descWrap {
  margin-top: var(--python400-lead-indent);
}
body.python .descWrap>dt {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 0.5em;
}
body.python .descWrap>dd {
  font-size: 20px;
  margin: 0 0 0 1em;
}
body.python .descWrap>dd dl+*,
body.python .descWrap>dd ol+*,
body.python .descWrap>dd ul+*,
body.python .descWrap>dd pre+*,
body.python .descWrap>dd div+*,
body.python .descWrap>dd p+* {
    margin-top: 1em;
}


/*------------------------------------------
ピンアイコン付き小セクション
------------------------------------------*/

body.python .pinBox {
  margin: 0 0 0 var(--python400-lead-indent);
}
body.python *+.pinBox {
  margin-top: var(--python400-lead-indent);
}

body.python .pinBox .flexBox {
  display: grid;
  justify-content: start;
  grid-template-columns: 4fr 1fr;
  align-items: start;
  gap: 24px;
  margin: 0;
  padding: 0;
}
body.python .pinBox *+.flexBox {
  margin-top: 32px;
}

body.python .pinBox .pin {
  display: flex;
  align-items: flex-start;
}
body.python .pinBox .pin:only-child {
  grid-column: 1 / -1;
}
body.python .pinBox .pin:not(.noTtl) {
  flex-wrap: wrap;
}
body.python .pinBox .pin>.pinMark {
  display: block;
  margin: 0 0 0 -1lh;
}
body.python .pinBox .pin>.pinMark>img {
  width: 1lh;
  height: 1lh;
  padding: 0;
  object-fit: contain;
  transform: translate(0,0) scale(1);
  transform-origin: right center;
}
body.python .pinBox .pin .pinTtl {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.4;
  width: auto;
  margin: 0 0 0 6px;
}

body.python .pinBox .pin .pinTtl--inline {
  display: block;
  line-height: inherit;
  align-self: center;
}
body.python .pinBox .pin .pinDots {
  display: block;
  flex: 0 0 auto;
  align-self: center;
  background-image: radial-gradient(circle closest-side, #000 0.085em, transparent 0.115em);
  background-size: 1em 1em;
  background-position: left center;
  background-repeat: repeat-x;
  width: 8em;
  height: 1em;
  margin: 0 1em;
}
body.python .pinBox .pin p:has(.pinTtl--inline):has(.pinDots) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* NOTE: 文字関連、幅、高さ、margin、paddingなどの記載は不可 */
}
body.python .pinBox .pin p:has(.pinTtl--inline) {
  margin-top: -0.25em;
  /* NOTE: 文字関連、幅、高さ、margin、paddingなどの記載は不可 */
}
body.python .pinBox *+.flexBox:has(.pinTtl--inline) {
    margin-top: 16px;
}

body.python .pinBox pre,
body.python .pinBox ol,
body.python .pinBox ul,
body.python .pinBox dl,
body.python .pinBox p {
  font-size: 20px;
  line-height: 1.7;
  width: calc( 100% - 1em );
  margin-left: 1em;
}
body.python .pinBox *+dl,
body.python .pinBox *+pre,
body.python .pinBox *+ol,
body.python .pinBox *+ul,
body.python .pinBox *+dl,
body.python .pinBox p+p {
  margin-top: 0.75em;
}
body.python .pinBox .pin>img {
  margin-left: 1em;
}
body.python .pinBox .pin~img {
  width: 300px;
  height: auto;
  object-fit: contain;
}

/*------------------------------------------
コード
------------------------------------------*/

body.python .code {
  border-left: solid 6px #558ABB;
  background-color: #F3F4F5;
  color: #006B00;
  font-size: 16px;
  font-family: var(--python-code-font-ff);
  line-height: 1.4;
  white-space: pre;
  max-width: max-content;
  min-width: 530px;
  margin: 0 0 0 var(--python400-lead-indent);
  padding: 1em 1em;
  overflow: auto;
}
body.python *+.code {
  margin-top: var(--python400-lead-indent);
}

body.python .code-inline {
  display: inline-block;
  color: var(--python-code-font-c);
  font-size: 16px;
  font-family: var(--python-code-font-ff);
  line-height: 1.4;
  white-space: pre;
  transform: translate(0,-6.666%);
}

/*------------------------------------------
メニュー画面の重なり表示
------------------------------------------*/

body.python .layer-stage {
  height: 500px;
  position: relative;
}

body.python .layer-panel {
  max-width: none;
  width: 620px;
  position: absolute;
  z-index: 1;
  cursor: pointer;
  user-select: none;
}
body.python .layer-panel--back {
  left: 40px;
}
body.python .layer-panel--front {
  left: 320px;
  top: 160px;
}
body.python .layer-panel img {
  border: 1px solid #ccc;
  width: 100%;
  height: auto;
  margin: 0;
}
body.python .layer-panel__label--right {
  text-align: right;
}

/*------------------------------------------
Copilotセクション
------------------------------------------*/

body.python .copilot-section {
  border-radius: 8px;
  border: 2px solid #4a90e2;
  max-width: 940px;
  margin: 32px auto 32px var(--python400-lead-indent);
  padding: 20px;
}

body.python .copilot-demo-area {
  margin: 0;
  position: relative;
}

body.python .copilot-background {
  border-radius: 8px;
  background: #e8f4f8;
  padding: 8px;
  margin-bottom: 16px;
}

body.python .copilot-foreground {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 8px;
  border: 2px solid #4a90e2;
  background: #fff;
  padding: 20px;
  min-height: 200px;
}

body.python .copilot-demo-body {
  text-align: center;
  padding: 0;
}

body.python .copilot-demo-body img {
  max-width: 440px;
  width: 100%;
  height: auto;
}

body.python .copilot-icon {
  display: inline-block;
  color: #4a90e2;
  margin-left: 10px;
}

body.python .copilot-feature-item {
  margin: 0;
  padding-left: 1em;
}
body.python *+.copilot-feature-item {
  margin-top: 20px;
}
body.python .copilot-feature-item h4 {
  color: #2c5aa0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 0.5em;
}
body.python .copilot-feature-item p {
  font-size: inherit;
  line-height: 1.7;
}

/*------------------------------------------
utility
------------------------------------------*/

body.python .page-utility-indent {
  margin-left: var(--python400-lead-indent);
}
body.python .page-section__text>.page-utility-indent {
  margin-left: calc( var(--python400-lead-indent) + 1em );
}