@charset "UTF-8";

/*=====================================================================
 HTML display definitions  2022.01 Re-check 
=====================================================================*/

*, *::before, *::after {box-sizing: border-box;}
* {margin: 0;}

html {
  background: #070F1A;
  color: #222;
  scroll-behavior: smooth;
  scroll-padding-top: 140px; /* スムーススクロールのジャンプ位置 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size:62.5%; /* remベースで 10px */
}

body {
	font-size: 16px;
  font-size: 1.6rem; /* 16px */
	line-height: 1.6;
	letter-spacing: .1em;
  -webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
  font-feature-settings: "palt";
}

html:has(.page-id-12) {scroll-padding-top: 310px!important; } /* 成果等ページ　スムーススクロールのジャンプ位置 */
html:has(.page-id-12.logged-in) {scroll-padding-top: 340px!important; } /* 成果等ページ＋ログイン状態　スムーススクロールのジャンプ位置 */
html:has(.page-id-3198) {scroll-padding-top: 310px!important; } /* 成果等ページ　スムーススクロールのジャンプ位置 */
html:has(.page-id-3198.logged-in) {scroll-padding-top: 340px!important; } /* 成果等ページ＋ログイン状態　スムーススクロールのジャンプ位置 */

/*======================================================================
 タイポグラフィ
======================================================================*/
body {
  font-family: "Noto Sans JP", "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1 {font-size: clamp(3rem, 2.816rem + 0.78vw, 3.6rem); font-weight: 600} /* min375px max1600px */
h2 {font-size: clamp(2.8rem, 2.678rem + 0.52vw, 3.2rem); font-weight: 600} /* min375px max1600px */
h3 {font-size: clamp(2rem, 1.816rem + 0.78vw, 2.6rem); font-weight: 600} /* min375px max1600px */
h4 {font-size: clamp(1.4rem, 1.216rem + 0.78vw, 2rem); font-weight: 600} /* min375px max1600px */
h5 {font-size: clamp(1.4rem, 1.339rem + 0.26vw, 1.6rem); font-weight: 600} /* min375px max1600px */
h6 {font-size: clamp(1.4rem, 1.339rem + 0.26vw, 1.6rem); font-weight: 600} /* min375px max1600px */
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
p,li,dl,dt,dd {font-size: clamp(1.4rem, 1.339rem + 0.26vw, 1.6rem); margin-top: 0; text-align: justify;}
p {margin-bottom: 1em;}

b, strong {font-weight: bold;} /* Chrome, Edge, Safari用、strongにフォントのウェイトを定義 */
pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;} /* 全ブラウザ：整形テキストの最適化 */

/* 全ブラウザ：subとsupが「line-height」に影響を与えるのを妨げる */
sub,sup {font-size: 6px; font-size: 0.6rem; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* rem size utility */
.text09 {font-size: 0.9rem !important} /* =9px */  .text10 {font-size: 1.0rem !important} /* =10px */
.text11 {font-size: 1.1rem !important} /* =11px */ .text12 {font-size: 1.2rem !important} /* =12px */
.text13 {font-size: 1.3rem !important} /* =13px */ .text14 {font-size: 1.4rem !important} /* =14px */
.text15 {font-size: 1.5rem !important} /* =15px */ .text16 {font-size: 1.6rem !important} /* =16px */
.text17 {font-size: 1.7rem !important} /* =17px */ .text18 {font-size: 1.8rem !important} /* =18px */
.text19 {font-size: 1.9rem !important} /* =19px */ .text20 {font-size: 2.0rem !important} /* =20px */
.text21 {font-size: 2.1rem !important} /* =21px */ .text22 {font-size: 2.2rem !important} /* =22px */
.text23 {font-size: 2.3rem !important} /* =23px */ .text24 {font-size: 2.4rem !important} /* =24px */
.text25 {font-size: 2.5rem !important} /* =25px */ .text26 {font-size: 2.6rem !important} /* =26px */
.text27 {font-size: 2.7rem !important} /* =27px */ .text28 {font-size: 2.8rem !important} /* =28px */
.text29 {font-size: 2.9rem !important} /* =29px */ .text30 {font-size: 3.0rem !important} /* =30px */


/*======================================================================
 フォーム
======================================================================*/
input, button, textarea, select {font: inherit;} /* フォームのfontに関するデフォルトを削除 */


/*======================================================================
 テーブル
======================================================================*/
table {border-collapse: collapse; border-spacing: 0;width: 100%; margin-bottom: 30px; background: white}
table tr th,table tr td {margin: 0; text-align: left; padding: 1em 1.2em; border: 1px solid #cdcdcd !important; font-size: 1.6rem}
table tbody, table thead, table tfoot {border: 1px solid #cdcdcd !important;}
table thead {background: #ededed;}
table tfoot {background: #ededed;}
table caption {margin-bottom: 0.3em; text-decoration: none; text-align: left; font-size: 1.6rem}

table.zebra tbody tr:nth-child(even) {border-bottom: 0; background: #f8f8f8}
table.no_sideline tbody, table.no_sideline thead, table.no_sideline tfoot {border: none !important}
table.no_sideline tr th, table.no_sideline tr td {border-top: none !important; border-left: none !important; border-bottom: 1px #cdcdcd solid; border-right :none !important; }


/*======================================================================
 リンク
======================================================================*/
a:active, a:hover {outline-width: 0;} /* 全ブラウザ：リンクのアクティブ・ホバー時にフォーカス要素のアウトライン回避 */
a {color:#000; text-decoration: none; outline:none; transition: all 0.3s ease; -webkit-text-decoration-skip: objects; word-break: break-all;} /* リンクされた文字 */
a:link {color:inherit} /* 未訪問 */
a:visited {color:inherit} /* 訪問後 */
a:hover {text-decoration: none;} /* マウスオーバー */
a:active {color:inherit} /*クリック中*/
a:focus {outline: none;}
a:focus-visible {outline: 2px solid blue !important;} /* キーボード操作時にフォーカスされた要素（タブ移動時） */
a img {transition: all 0.3s ease; backface-visibility: hidden; } /* 1pxのズレ防止 */
a.unlink {pointer-events: none;}

a.fade {transition: all 0.3s ease;}
a.fade:hover {opacity: 0.9}

a.box_btn {color: white; display: inline-block; padding: 10px 30px; background: silver; max-width: 300px}
a.box_btn:hover {opacity: 0.9}

a.round_btn {color: black; display: inline-block; padding: 10px 50px; background: #e1e1e1; border-radius: 30px; max-width: 300px}
a.round_btn:hover {background: silver;}

a.ghost_btn {color: gray; display: inline-block; padding: 10px 30px; border: 1px solid silver; max-width: 300px}
a.ghost_btn:hover {border: 1px solid black;}

a.ghost_round_btn {color: #2B4088; display: inline-block; padding: 15px 50px; background: white; border-radius:30px; border: 1px solid gray; max-width: 300px}
a.ghost_round_btn:hover {background: gray; color: white}

a.move_arrow_btn {display: inline-block; position: relative; padding: 20px 40px; border: 2px solid silver; text-decoration: none; color: black; transition: all 0.3s ease; background: #f3f3f3; max-width: 300px}
a.move_arrow_btn span {position: absolute; top: auto; right: -30px; transition: transform 0.3s ease; background: url(../img/common/bg_arrow.svg) no-repeat left top; width: 50px; height: 12px;}
a.move_arrow_btn:hover {border: 2px solid black; background: #ff7474; color: white; border-radius:50px}
a.move_arrow_btn:hover span {transform: translate3d(10px, 0, 0);}

a.move_r:hover {margin-left: 30px}


/*======================================================================
 効果 装飾
======================================================================*/
.zoom {overflow: hidden;} 
.zoom img {transition: transform 0.5s, filter 0.5s;}
.zoom:hover img {transform: scale(1.05);}

.zoom_ex img {transition: transform 0.5s, filter 0.5s;} /* 画像の枠を外れて拡大 */
.zoom_ex:hover img {transform: scale(1.05);}

.blink {animation:blink 1.5s ease-in-out infinite alternate;} /* 点滅 */
@keyframes blink {0% {opacity:0;} 100% {opacity:1;}}

.red {color: red} .black {color: black} .white {color: white}
.underline {text-decoration: underline}
b.marker {background: linear-gradient(transparent 40%, #ffff4f 40%);}


/*======================================================================
 Utility Style
======================================================================*/
img, picture, video, canvas, svg {display: block; max-width: 100%;} /* レスポンシブ対応 */
img {border-style: none; vertical-align: bottom; border:0; height: auto; display: inline-block} 
em {color: red; font-weight: bold; font-style: normal}
hr {border: 0; height: 0; border-top: 1px solid silver; margin-left: 1px;} /* 中央揃えにする場合は margin-left を削除 */
hr.rich {border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, .6); border-bottom: 1px solid rgba(255, 255, 255, .5); margin-left: 1px;}
dd {margin-left: 0}
.cf:after {content:""; display: block; clear: both;} /* clearfix */
.none {display: none !important}
.in_site_link {text-align: center; margin-bottom: 0}

ul,ol {margin: 0px; padding: 0px; list-style-type: none}
ul.buret {list-style: none; padding-left: 0; display: table;}
ul.buret li:after {content: ""; display: block; margin-bottom: 0.3em;}
ul.buret li {display: table-row;}
ul.buret li:before {content: "•"; display: table-cell; padding-right: 0.4em;}
ul.kome {list-style: none; padding-left: 0; display: table;}
ul.kome li:after {content: ""; display: block; margin-bottom: 0.3em;}
ul.kome li {display: table-row;}
ul.kome li:before {content: "※"; display: table-cell; padding-right: 0.4em;}
ol.buret {list-style: none; padding-left: 0; display: table;}
ol.buret li:after {content: ""; display: block; margin-bottom: 0.3em;}
ol.buret li {display: table-row; counter-increment: table-ol;}
ol.buret li:before {content: counter(table-ol) "."; display: table-cell; padding-right: 0.4em; text-align: right;}
ol.circle {counter-reset: my-counter;}
ol.circle li {margin-bottom: 10px; padding-left: 24px; position: relative; font-size: 1.3rem} /* 丸数字のol */
ol.circle li:before {content: counter(my-counter); counter-increment: my-counter; background: #ececec; color: #222; display: block; float: left; line-height: 18px; margin-left: -24px; text-align: center; height: 18px; width: 18px; border-radius: 50%; font-size: 1.2rem}

/* 行による文字制限 */
.omit_one {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.omit_two {overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} 
.omit_three {overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} 
.omit_four {overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;}

/* flexbox */
.flex {display: flex; flex-wrap: wrap;} /* 左寄せ */
.flex_end {display: flex; justify-content: flex-end; flex-wrap: wrap;} /* 右寄せ */
.flex_center {display: flex; justify-content: center; flex-wrap: wrap;} /* 中央揃え */
.flex_between {display: flex; justify-content: space-between; flex-wrap: wrap;} /* 両端揃え（余白無し） */
.flex_around {display: flex; justify-content: space-around; flex-wrap: wrap;} /* 均等配置 */

/* text-align */
.text_center {text-align: center !important}
.text_left {text-align: left !important}
.text_right {text-align: right !important}
.text_justify {text-align: justify !important}

/* margin-padding */
.margin0 {margin: 0} .padding0 {padding: 0}

.mb0  {margin-bottom: 0 !important;}    .mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;} .mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;} .mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;} .mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;} .mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;} .mb55 {margin-bottom: 55px !important;}
.mb60 {margin-bottom: 60px !important;} .mb65 {margin-bottom: 65px !important;}
.mb70 {margin-bottom: 70px !important;} .mb75 {margin-bottom: 75px !important;}
.mb80 {margin-bottom: 80px !important;} .mb85 {margin-bottom: 85px !important;}
.mb90 {margin-bottom: 90px !important;} .mb95 {margin-bottom: 95px !important;}
.mb100{margin-bottom: 100px !important;}

.mt-10 {margin-top: -10px !important;} .mt-15 {margin-top: -15px !important;}
.mt-20 {margin-top: -20px !important;} .mt-25 {margin-top: -25px !important;}
.mt-30 {margin-top: -30px !important;} .mt-35 {margin-top: -35px !important;}
.mt-40 {margin-top: -40px !important;} .mt-45 {margin-top: -45px !important;}
.mt-50 {margin-top: -50px !important;}

 /* PCモニター（1025px以降 iPad 12.9 含まない ） */
@media only screen and (min-width : 1025px) {
.ml0_pc  {margin-left: 0 !important;}    .ml5_pc  {margin-left: 5px !important;}
.ml10_pc {margin-left: 10px !important;} .ml15_pc {margin-left: 15px !important;}
.ml20_pc {margin-left: 20px !important;} .ml25_pc {margin-left: 25px !important;}
.ml30_pc {margin-left: 30px !important;} .ml35_pc {margin-left: 35px !important;}
.ml40_pc {margin-left: 40px !important;} .ml45_pc {margin-left: 45px !important;}
.ml50_pc {margin-left: 50px !important;}

.pl0_pc  {padding-left: 0 !important;}    .pl5_pc  {padding-left: 5px !important;}
.pl10_pc {padding-left: 10px !important;} .pl15_pc {padding-left: 15px !important;}
.pl20_pc {padding-left: 20px !important;} .pl25_pc {padding-left: 25px !important;}
.pl30_pc {padding-left: 30px !important;} .pl35_pc {padding-left: 35px !important;}
.pl40_pc {padding-left: 40px !important;} .pl45_pc {padding-left: 45px !important;}
.pl50_pc {padding-left: 50px !important;} .pl55_pc {padding-left: 55px !important;}
.pl60_pc {padding-left: 60px !important;} .pl65_pc {padding-left: 65px !important;}
.pl70_pc {padding-left: 70px !important;} .pl75_pc {padding-left: 75px !important;}
.pl80_pc {padding-left: 80px !important;} .pl85_pc {padding-left: 85px !important;}
.pl90_pc {padding-left: 90px !important;} .pl85_pc {padding-left: 95px !important;}
.pl100_pc {padding-left: 100px !important;} 

.pr0_pc  {padding-right: 0 !important;}    .pr5_pc  {padding-right: 5px !important;}
.pr10_pc {padding-right: 10px !important;} .pr15_pc {padding-right: 15px !important;}
.pr20_pc {padding-right: 20px !important;} .pr25_pc {padding-right: 25px !important;}
.pr30_pc {padding-right: 30px !important;} .pr35_pc {padding-right: 35px !important;}
.pr40_pc {padding-right: 40px !important;} .pr45_pc {padding-right: 45px !important;}
.pr50_pc {padding-right: 50px !important;} .pr55_pc {padding-right: 55px !important;}
.pr60_pc {padding-right: 60px !important;} .pr65_pc {padding-right: 65px !important;}
.pr70_pc {padding-right: 70px !important;} .pr75_pc {padding-right: 75px !important;}
.pr80_pc {padding-right: 80px !important;} .pr85_pc {padding-right: 85px !important;}
.pr90_pc {padding-right: 90px !important;} .pr95_pc {padding-right: 95px !important;}
.pr100_pc {padding-right: 100px !important;} 
}

/*======================================================================
 メディアクエリー（表示 or 非表示） display hide  max-width（以下）min-width（以上）
 small：デフォルト
 medium：640px以上
 large：1024以上（iPad 12.9インチは縦位置は含まれる）
======================================================================*/

@media screen and (max-width: 39.99875em) {
.hide-for-small-only {display: none !important;}
}

@media screen and (max-width: 0em), screen and (min-width: 40em) {
.show-for-small-only {display: none !important;} 
}

@media print, screen and (min-width: 40em) {
.hide-for-medium {display: none !important;}
}

@media screen and (max-width: 39.99875em) {
.show-for-medium {display: none !important;}
}

@media screen and (min-width: 40em) and (max-width: 63.99875em) {
.hide-for-medium-only {display: none !important;}
}

@media screen and (max-width: 39.99875em), screen and (min-width: 64em) {
.show-for-medium-only {display: none !important;}
}

@media print, screen and (min-width: 64em) {
.hide-for-large {display: none !important;}
}

@media screen and (max-width: 63.99875em) {
.show-for-large {display: none !important;}
}

@media screen and (min-width: 64em) {
.hide-for-large-only {display: none !important;}
}

@media screen and (max-width: 63.99875em), screen and (min-width: 75em) {
.show-for-large-only {display: none !important;}
}


/* レイアウト */
.grid {display: grid; grid-template-columns: 1fr; gap: 20px}


@media screen and (max-width:639px) {
.small-1 {grid-template-columns: 1fr !important} /* スマホ時に1列になる */
.small-2 {grid-template-columns: 1fr 1fr;}
.small-3 {grid-template-columns: 1fr 1fr 1fr;}
}

@media screen and (min-width : 640px) {
.medium-2 {grid-template-columns: 1fr 1fr;}
.medium-3 {grid-template-columns: 1fr 1fr 1fr;}
.medium-4 {grid-template-columns: 1fr 1fr 1fr 1fr;}
.medium-5 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.medium-6 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
} /* iPad Pro 縦位置（1024pxまでは、mediumに含まれる） */

@media screen and (min-width : 1025px) {
.large-2 {grid-template-columns: 1fr 1fr;}
.large-3 {grid-template-columns: 1fr 1fr 1fr;}
.large-4 {grid-template-columns: 1fr 1fr 1fr 1fr;}
.large-5 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.large-6 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
}


/*======================================================================
 SCROLL TRIGGER Animations
======================================================================*/
/* transition: 対象のプロパティ アニメーションにかかる時間 イージング 遅延時間; */
/* https://www.flapism.jp/html/416/ */

.fadeIn {transition: opacity 1.5s ease; opacity: 1;}
.fadeOut {transition: opacity 1.5s ease; opacity: 0;}

.fromTopIn {transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0;}
.fromTopOut {transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,-10px); opacity: 0.0;}

.fromBottomIn {transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0;}
.fromBottomOut {transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,10px); opacity: 0.0;}

.fromLeftIn {transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0;}
.fromLeftOut {transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(-10px,0); opacity: 0.0;}

.fromRightIn {transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0;}
.fromRightOut {transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(10px, 0); opacity: 0.0;}

.scaleUpIn {transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(1.0,1.0); opacity: 1.0;}
.scaleUpOut {transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(1.1,1.1); opacity: 0.0;}

.scaleDownIn {transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(1.0,1.0); opacity: 1.0;}
.scaleDownOut {transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(0.9,0.9); opacity: 0.0;}

.blurIn {transition: filter 1.0s ease, opacity 1.0s ease; filter: blur(0); opacity: 1.0;}
.blurOut {transition: filter 1.0s ease, opacity 1.0s ease; filter: blur(10px); opacity: 0;}

/* 次点 */
/* 回転しながら表示 */
.rotateIn {transition: transform 1.0s ease, opacity 1.0s ease; transform: rotate(0deg); opacity: 1.0; }
.rotateOut {transition: transform 1.0s ease, opacity 1.0s ease; transform: rotate(2deg); opacity: 0.0; }

/* 3D回転するような */
.flipIn {transition: transform 1.0s ease, opacity 1.0s ease; transform: rotateY(0deg); opacity: 1.0; }
.flipOut {transition: transform 1.0s ease, opacity 1.0s ease; transform: rotateY(20deg); opacity: 0.0; }

/* 弾むような動きで表示 */
.bounceIn {animation: bounceIn 1s ease; opacity: 1.0;}
.bounceOut {animation: bounceOut 1s ease; opacity: 0.0; }
@keyframes bounceIn {
  0% { transform: scale(0.95); opacity: 0; }
  50% { transform: scale(1.02); opacity: 0.5; }
  100% { transform: scale(1.0); opacity: 1; }
}
@keyframes bounceOut {
  0% { transform: scale(1.0); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.5; }
  100% { transform: scale(0.95); opacity: 0; }
}

/* 要素の背後がぼやけるスタイリッシュなエフェクト */
.scaleRotateIn {transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(1.0) rotate(0deg); opacity: 1.0; }
.scaleRotateOut {transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(1.05) rotate(3deg); opacity: 0.0; }

/* 波打つような動きで出現するアニメーション */
.waveIn {animation: waveIn 1.2s ease-out; opacity: 1.0; }
.waveOut {animation: waveOut 1.2s ease-out; opacity: 0.0; }
@keyframes waveIn {
  0% {transform: skewX(-3deg) scale(0.99); opacity: 0; }
  50% {transform: skewX(1deg) scale(1.005); opacity: 0.5; }
  100% {transform: skewX(0deg) scale(1.0); opacity: 1; }
}
@keyframes waveOut {
  0% { transform: skewX(0deg) scale(1.0); opacity: 1; }
  50% { transform: skewX(-1deg) scale(0.995); opacity: 0.5; }
  100% { transform: skewX(3deg) scale(0.99); opacity: 0; }
}

/* 要素の背後がぼやけるスタイリッシュなエフェクト */
.backdropBlurIn {transition: backdrop-filter 1s ease, opacity 1s ease; backdrop-filter: blur(0px); opacity: 1; }
.backdropBlurOut {transition: backdrop-filter 1s ease, opacity 1s ease; backdrop-filter: blur(20px); opacity: 0; }