@charset "UTF-8";
@import url(breakpoints.css);

:root {
  /* 見出し */
  --var-s-midashi-text: 2rem;
  --var-c-midashi-back-to: #6DA6D9;
  --var-c-midashi-back-from: #1F4F7B;
  --var-s-midashi-height: 5px;

  /* トップメッセージ */
  --var-c-top-back: #008ce9ec;
  --var-s-top-back-height: 750px;
  --var-s-topmidashi-text: 1.875rem;
  --var-c-topmidashi-text: #231815;
  --var-c-topnakami-text: #ffffff;
  --var-s-top-width: 43.33%;

  --var-c-topnakami-text-tbsp: #0093a7;
  --var-c-topnakami-back-tbsp: #e4fcff;
  --var-c-topnakami-bordertop-tbsp: #1dc1d6;
  --var-s-topnakami-bordertop-tbsp: 6px;

}

/* #region ===== 見出し ===== */
h2 {
  font-size: var(--var-s-midashi-text);
  position: relative;
  padding: 1.5em 0.5em 0 0;
}

h2:after {
  background: linear-gradient(to right, var(--var-c-midashi-back-to), var(--var-c-midashi-back-from));
  height: var(--var-s-midashi-height);
  content: "";
  display: block;
}

/* #endregion */

/* #region ===== トップメッセージ ===== */
/* #region PC対応 */
.main {
  margin-bottom: 50px;
}

.container_pc {
  width: 960px;
  margin: 0 auto;
}

.topMessage {
  width: 100%;
  padding: 36px 0;
  position: relative;
}

.topMessage .bg {
  height: var(--var-s-top-back-height);
  background-color: var(--var-c-top-back);
  width: 90%;
  margin: 0 auto;
}

.topMessage .itemBoxWrap {
  position: absolute;
  top: 0;
  right: 0;
}

.topMessage .itemBoxWrap .itemBox {
  width: 100%;
  margin-bottom: 80px;
}

.topMessage .itemBoxWrap .itemBox .itemFigure {
  float: right;
  height: auto;
}

.topMessage .itemBoxWrap .itemBox .itemFigure img {
  max-width: 349px;
  max-height: 50vh;
  height: auto;
  vertical-align: bottom;
}

.topMessage .itemBoxWrap .itemBox .itemDescription .itemHeading {
  font-size: var(--var-s-topmidashi-text);
  color: var(--var-c-topmidashi-text);
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  padding: 64px 0 16px;
}

.topMessage .itemBoxWrap .itemBox .itemDescription .itemTxt {
  color: var(--var-c-topnakami-text);
}

.topMessage .itemBoxWrap .itemBox .itemDescription {
  width: var(--var-s-top-width);
  float: left;
  margin-left: 9.375%;
}

/* #endregion */

/* #region 携帯・タブレット対応 */
.container,
.item-list {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 20px;
}

.centered-image {
  max-width: 100%;
  max-height: 50vh;
}

.text-center {
  color: var(--var-c-topnakami-text-tbsp);
  background: var(--var-c-topnakami-back-tbsp);
  border-top: solid var(--var-s-topnakami-bordertop-tbsp) var(--var-c-topnakami-bordertop-tbsp);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
  text-align: center;
  margin-top: 20px;
  padding: 0.5em 1em;
  margin: 2em 0;
}

.text-center p {
  margin: 0;
  padding: 0;
}
/* #endregion */

/* #endregion */