@charset "utf-8";

/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("theme.css");
@import url("parts.css");
@import url("inview.css");

/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
  0% {
    right: -200px;
  }
  100% {
    right: 0px;
  }
}

/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*全体の設定
---------------------------------------------------------------------------*/
body * {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}

*,
::before,
::after {
  box-sizing: border-box;
}
html {
  font-size: clamp(14px, 0.585vw + 9.8px, 18px); /*画面幅375px〜1400pxの間で、12px〜18pxに可変。下でrem管理しているものも連動します。*/
  overflow-x: visible;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--base-font); /*フォント指定。theme.cssのbase-fontを読み込みます。*/
  -webkit-text-size-adjust: none;
  background: var(--bg-color); /*背景色。*/
  color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
  line-height: 2; /*行間*/
  overflow-x: hidden;
}

/*トップページのみ、背景画像を入れる*/
body.home {
  background: var(--bg-color) url("../images/bg1.png") no-repeat -7vw -7vw / 35vw; /*背景色、背景画像の読み込み。背景色はtheme.cssのbg-colorを読み込みます。*/
}

/*リセット*/
figure {
  margin: 0;
}
dd {
  margin: 0;
}
nav,
ul,
li,
ol {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
}

/*table全般の設定*/
table {
  border-collapse: collapse;
}

/*画像全般の設定*/
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*videoタグ*/
video {
  max-width: 100%;
}

/*iframeタグ*/
iframe {
  width: 100%;
}

/*他*/
input {
  font-size: 1rem;
}

/*section
---------------------------------------------------------------------------*/
section {
  padding: 100px 0;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  section {
    padding: 40px 0;
  }
}
section + section {
  padding-top: 0;
}
.inner {
  max-width: 1160px;
  margin: 0 auto;
  width: 90%;
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
  color: inherit;
  transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
  text-decoration: none;
}

/*マウスオン時*/
a:hover {
  filter: brightness(1.2); /*少しだけ明るくする*/
  text-decoration: none;
}

/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
  animation: opa1 0.2s 0.2s both; /*0.2(2つ目の数字)秒待機後、0.2(1つ目の数字)秒かけてフェードイン*/
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100vh;
}

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダー*/
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  height: 100px; /*ヘッダーの高さ。お好みで。*/
  padding-inline: var(--content-space-s); /*左右の余白。theme.cssのcontent-space-sを読み込みます*/
}
@media screen and (max-width: 768px) {
  header {
    height: 70px;
  }
}

/*ロゴ画像*/
header .logo {
  margin: 0;
  flex-shrink: 0;
}
header .logo img {
  display: block;
  width: 360px; /*ロゴの幅。お好みで。*/
}
/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
	header .logo img {
		display: block;
		width: 260px; /*ロゴの幅。お好みで。*/
	}
} /*追加指定ここまで*/

/*大きな端末で見たメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
.large-screen #menubar {
  font-weight: 500; /*文字の太さ*/
  font-size: 0.9rem; /*文字サイズ90%*/
}
.large-screen #menubar > nav > ul {
  display: flex;
  align-items: center;
  gap: 1.5rem; /*メニュー同士に空けるスペース。1.5文字分。*/
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li a {
  display: block;
  text-decoration: none;
  transition: color 0.3s ease;
}
.large-screen #menubar li:not(.btn) a:hover {
  color: var(--primary-color);
}

/*大きな端末で見た場合のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウン全体*/
.large-screen #menubar ul ul {
  text-shadow: none;
  position: absolute;
  z-index: 100;
  animation: opa1 0.5s 0.1s both; /*0.1秒待機後、0.5秒かけてフェードイン表示*/
}

/*メニュー１個あたり*/
.large-screen #menubar ul ul a {
  background: var(--bg-color); /*背景色。theme.cssのbg-colorを読み込みます。*/
  color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
  padding: 0.2rem 1rem; /*上下に0.2文字分、左右に1文字分の余白*/
  border-radius: 5px; /*角を少しだけ丸く。*/
  margin-top: 5px; /*メニュー同士の間に空けるスペース*/
  border: 1px solid #999; /*枠線の幅、線種、色*/
}

/*小さな端末で見たメニュー（開閉メニュー）
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
.small-screen #menubar {
  animation: animation1 0.2s both;
  position: fixed;
  overflow: auto;
  z-index: 100;
  right: 0px;
  top: 0px;
  width: 50%; /*画面の半分の幅*/
  height: 100%;
  padding: 100px var(--content-space-l) 50px; /*上下に100px、左右にtheme.cssのcontent-space-lで指定しているサイズ、下に50pxの余白*/
  background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
  color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

.small-screen #menubar {
  display: none;
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
  .small-screen #menubar {
    width: 100%; /*幅を100%に*/
  }
} /*追加指定ここまで*/

/*メニュー１個あたり*/
.small-screen #menubar a {
  display: block;
  text-decoration: none;
  margin-bottom: 1rem; /*下に１文字分のスペースを空ける*/
  padding: 1rem 2rem; /*メニュー内の余白。上下に１文字分、左右に２文字分。*/
  border-radius: 5px; /*角を少し丸くする*/
  background: #fff; /*背景色*/
  color: #333; /*文字色*/
  font-weight: 600;
  font-size: 1.2rem;
}

/*ボタンのテキストの太さを標準に*/
.small-screen #menubar .btn a {
  font-weight: 600;
}

/*子メニュー（ドロップダウンメニュー）*/
.small-screen #menubar ul ul a {
  margin-left: 2rem; /*左に２文字分のスペースを空ける*/
  padding: 0.5rem 1.5rem; /*メニュー内の余白。上下に0.5文字分、左右に1.5文字分。*/
}

/*ドロップダウンのアイコン*/
a.ddmenu::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f078"; /*このアイコンを使う*/
  margin-right: 1em; /*アイコンとメニューテキストとの間に空けるスペース。1文字分。*/
  font-size: 0.7em; /*アイコンサイズ。70%*/
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
}

/*ドロップダウン共通（デフォルトで非表示。チラつかないよう念の為。）
---------------------------------------------------------------------------*/
#menubar ul ul {
  display: none;
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
  display: none; /* デフォルトは非表示 */
  animation: opa1 0s 0.2s both;
  cursor: pointer;
  position: fixed;
  z-index: 101;
  right: 0px; /*右からの配置場所*/
  top: 0px; /*上からの配置場所*/
  width: 70px; /*ボタンの幅*/
  height: 70px; /*ボタンの高さ*/
  border-bottom-left-radius: 10px; /*左下の角だけ丸くする*/
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
  display: block;
  transition: 0.3s;
  position: absolute;
  left: 18px;
  width: 35px;
  height: 2px; /*線の高さ*/
  background: var(--bg-inverse-color); /*線の色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
  background: #fff; /*背景色*/
}
#menubar_hdr.ham span {
  background: #333; /*線の色*/
}

/*以下変更不要*/
#menubar_hdr span:nth-of-type(1) {
  top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
  top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
  top: 44px;
}
#menubar_hdr.ham span:nth-of-type(1) {
  transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
  opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
  transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
  display: flex;
}

/*メイン画像
---------------------------------------------------------------------------*/
/*ブロック全体*/
.mainimg {
  line-height: 1.8; /*行間を少し狭く*/
  margin-left: var(--content-space-l); /*左側に空けるスペース。theme.cssのcontent-space-lを読み込みます。*/
}
.mainimg .slide {
  display: flex;
  align-items: center;
  gap: 1vw;
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
  /*ブロック全体*/
  .mainimg {
    margin: 0 20px 2rem;
  }
  .mainimg .slide {
    flex-direction: column-reverse; /*縦積みにし、表示順を入れ替える。もし画像より先にテキストを出したいなら「column-reverse」ではなく「column」のみにする。*/
  }
} /*追加指定ここまで*/

/*写真ブロック*/
.mainimg picture {
  display: block;
  width: 57%; /*写真ブロックの幅。お好みで。*/
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%); /*斜めにくり抜く為のパス。15%を変更すると斜めの角度が変化します。*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
  /*写真ブロック*/
  .mainimg picture {
    width: 100%;
    clip-path: none;
  }
} /*追加指定ここまで*/

/*テキストブロック*/
.mainimg .text {
  flex-shrink: 0;
  flex: 1;
  margin-right: -5%; /*上のclip-path分のスペースが空白になるので、テキストブロックを少しだけ右側に食い込ませています。*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
  /*テキストブロック*/
  .mainimg .text {
    margin-right: 0;
  }
} /*追加指定ここまで*/

/*h2（大きな文字）*/
.mainimg .text h2 {
  margin: 0;
  padding: 0;
  line-height: 1.5; /*行間を少し狭く*/
  font-weight: 700; /*テキストの太さ。100〜900まで指定可能。*/
  font-size: max(1.7rem, 3vw);
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column-reverse; /*spanが先にくるように*/
}
/*h2内のspan（色付きのテキスト）*/
.mainimg .text h2 span {
  color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
  display: block;
  font-size: 0.4em; /*文字サイズ。親要素の40%。*/
}

/*p（説明テキスト部分）*/
.mainimg .text p {
  font-size: 1rem;
  font-weight: 500;
}

/*ボタンブロック*/
.mainimg .btn-container {
  display: flex;
  gap: 1rem; /*ボタン同士の間に1文字分のスペースを空ける。*/
  font-size: 1.1rem; /*文字サイズ1.1倍*/
}

/*ボタン
---------------------------------------------------------------------------*/
.btn a {
  display: inline-block;
  text-decoration: none;
  background: var(--primary-color); /*背景色。theme.csのprimary-colorを読み込みます。*/
  color: var(--primary-inverse-color); /*文字色。theme.csのprimary-inverse-colorを読み込みます。*/
  border: 1px solid var(--primary-color); /*枠線の幅、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
  padding: 0.4rem 1.2rem; /*上下に0.4文字分、左右に1.2文字分の余白*/
  border-radius: 3px; /*角を少しだけ丸く*/
  font-weight: 500; /*文字の太さ*/
}

/*背景が白いタイプのボタン*/
.btn.inverse a {
  background: var(--primary-inverse-color); /*背景色。theme.csのprimary-inverse-colorを読み込みます。*/
  color: var(--primary-color); /*文字色。theme.csのprimary-colorを読み込みます。*/
}

/*矢印アイコン*/
.btn a i {
  margin-left: 0.5em; /*テキストとの間に空けるスペース。0.5文字分*/
  transition: 0.3s;
}
.btn a:hover i {
  transform: translateX(3px); /*マウスオン時に、アイコンを少しだけ右に移動する。*/
}

/*contents
---------------------------------------------------------------------------*/
#contents {
  flex: 1;
  min-height: 0;
}

/*main
---------------------------------------------------------------------------*/
main {
  container-type: inline-size;
}

/*main内で使用するul,ol要素（リストタグ）*/
main ul,
main ol {
  margin-left: 2rem;
  margin-right: 2rem;
}

/*メニューオーバーレイ（メニュー領域外クリックで閉じる用）
---------------------------------------------------------------------------*/
#menubar-overlay {
  display: none;
  position: fixed;
  z-index: 99; /*#menubar(100)の下、ページの上*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /*半透明の黒。お好みで濃さを調整。*/
}

/*noscroll（メニュー表示中のスクロール禁止用）*/
body.noscroll {
  overflow: hidden;
}

/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
  text-decoration: none;
  display: block;
  background: rgba(0, 0, 0, 0.5);
  color: #ccc;
  text-align: right;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}
.pr a::before {
  font-family: "Font Awesome 6 Free";
  content: "\e2ca";
  font-weight: 900;
  margin-right: 0.5em;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
  display: block;
}

/*ボタンの設定*/
.pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  z-index: 99;
  animation: opa1 1s 0.4s both;
  position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/
  right: 20px; /*右からの配置場所指定*/
  bottom: 20px; /*下からの配置場所指定*/
  color: #fff; /*文字色*/
  font-size: 1.5rem; /*文字サイズ*/
  background: rgba(0, 0, 0, 0.2); /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
  width: 60px; /*幅*/
  line-height: 60px; /*高さ*/
  border-radius: 50%; /*円形にする*/
}

/*bg1-border-parts
---------------------------------------------------------------------------*/
.bg1-border-parts {
  border-top: 1px solid var(--bg-border-color); /*上の線の幅、線種、var以降は色の事でtheme.cssのbg-border-colorを読み込みます。*/
  border-bottom: 1px solid var(--bg-border-color); /*下の線の幅、線種、var以降は色の事でtheme.cssのbg-border-colorを読み込みます。*/
}

/*bg1-parts
---------------------------------------------------------------------------*/
.bg1-parts {
  background-color: var(--bg-inverse-color); /*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
  color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/
}

/*bg1-primary
---------------------------------------------------------------------------*/
.bg1-primary-parts {
  background-color: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
  color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*bg1-light
---------------------------------------------------------------------------*/
.bg1-light-parts {
  background-color: var(--light-color); /*背景色。theme.cssのlight-colorを読み込みます。*/
  color: var(--light-inverse-color); /*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*bg1-accent
---------------------------------------------------------------------------*/
.bg1-accent-parts {
  background-color: var(--accent-color); /*背景色。theme.cssのaccent-colorを読み込みます。*/
  color: var(--accent-inverse-color); /*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*bg-parts（bg1-primary-parts、bg1-light-parts、bg1-accent-partsとセットで使います）
---------------------------------------------------------------------------*/
.bg-parts {
  padding-top: var(--content-space-l); /*ボックス内の上に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
  padding-bottom: var(--content-space-l); /*ボックス内の下に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
  background: #ececec;
}

/*背景色が続く場合に隙間を空けない*/
.bg-parts + .bg-parts {
  margin-top: calc(-1 * var(--content-space-l)) !important;
}

/*section内で画面両サイドいっぱいまで広げる場合（marginのみでもいいが安定版に）
---------------------------------------------------------------------------*/
.bleed-x-parts {
  --bleed-x: var(--content-space-l); /*エイリアスに*/
  width: calc(100% + (var(--bleed-x) * 2)); /*section内容の幅＋両サイドpadding（対象要素の幅）*/
  margin-left: calc(var(--bleed-x) * -1);
  margin-right: calc(var(--bleed-x) * -1);
  max-width: none;
}

/*左右によせる専用
---------------------------------------------------------------------------*/
.bleed-left-parts {
  width: calc(100% + var(--content-space-l));
  margin-left: calc(-1 * var(--content-space-l));
}
.bleed-right-parts {
  width: calc(100% + var(--content-space-l));
  margin-right: calc(-1 * var(--content-space-l));
}

/*その他
---------------------------------------------------------------------------*/
.color-check,
.color-check a {
  color: #ff0000 !important;
}
.l {
  text-align: left !important;
}
.c {
  text-align: center !important;
}
.r {
  text-align: right !important;
}
.ws {
  width: 100%;
  display: block;
}
.wl {
  width: 100%;
  display: block;
}
.padding-x {
  padding: 0 var(--content-space-l);
}
.mt0 {
  margin-top: 0px !important;
}
.mt1rem {
  margin-top: 1rem !important;
}
.mt3rem {
  margin-top: 3rem !important;
}
.mb0 {
  margin-bottom: 0px !important;
}
.mb1rem {
  margin-bottom: 1rem !important;
}
.mb3rem {
  margin-bottom: 3rem !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.look {
  display: inline-block;
  padding: 0px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 3px;
  margin: 5px 0;
  word-break: break-all;
}
.small {
  font-size: 0.85em;
}
.large {
  font-size: 2em;
  letter-spacing: 0.1em;
}
.pc {
  display: none;
}
.dn {
  display: none !important;
}
.block {
  display: block !important;
}
.is-clip {
  overflow: hidden;
}

/*大きな画面の場合*/
.large-screen .ws {
  width: 50%;
}
.large-screen .sh {
  display: none;
}
.large-screen .pc {
  display: block;
}