/* ページ共通部分 */
body div{
  font-family: 'Noto Sans JP', 游ゴシック体, YuGothic, YuGothic M, 游ゴシック Medium, Yu Gothic Medium, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, Osaka, ＭＳ Ｐゴシック, MS PGothic, sans-serif !important;
}

body{
  background-color: #F5F8FA;
}

body .global__main_content{
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding: 110px 16px 16px 16px;
}

.global__bg_white{
  background-color: white;
}

.global__searchbar{
  width: 60%;
  margin: 0px auto 30px auto;
}

.global__main_content h2{
  padding-top: 8px !important;
  color: #000000;
  font-size: 16pt;
  padding-bottom: 8px !important;
  margin: 18px 0px 0px;
  font-family: "Arial";
  line-height: 0 !important;
  page-break-after: avoid;
  orphans: 2;
  widows: 2;
  text-align: left;
}

.global__main_content h3{
  color: #434343;
  font-size: 14pt;
  font-family: "Arial";
  line-height: 1 !important;
  page-break-after: avoid;
  orphans: 2;
  widows: 2;
  text-align: left;
  margin: 20px 0px 10px !important;
  padding: 0px !important;
}

.global__main_content h3 > span:nth-child(3) {
  display: none !important;
}

.global__main_content h4 {
  color: #666666;
  font-size: 12pt;
  padding-bottom: 4pt;
  font-family: "Arial";
  line-height: 1.1500000000000001;
  page-break-after: avoid;
  orphans: 2;
  widows: 2;
  text-align: left;
  padding: 0px !important;
  margin: 10px 0px 16px !important;
}

/* スマートフォン */
@media screen and (max-width: 768px) { 
  body div.global__main_content{
    padding: 120px 16px 16px 8px;
  }

  body div.global__main_content img{
    overflow: hidden;
    max-width: 100%;
  }

  div.global__searchbar{
    width: 90%;
  }
}

/* ページ共通部分 */


/* ヘッダーの設定 */

header{
  height: 60px;
  background: linear-gradient(to right, #09083C, #162E6E);
  width: 100%;
  position: fixed;
  z-index: 100;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .16);
}

.header__content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0px 16px 0px;
  width: calc(100% - 64px);
  max-width: calc(100% - 64px);
  height: 60px;
}

.header__logo{
  height: auto;
  margin: 5px 0px 0px 0px;
  width: 300px;
  cursor: pointer;
}

.header__menu{
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 0px;
}

.header__menu a{
  padding: 0px 16px 0px;
  width: auto;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  color: white; 
}

div.header__menu a:hover{
  opacity: 0.5;
}

.header__menu a:visited{
  text-decoration: none;
  color: white;
}

.header__hamburger_menu{
  display: none;
}

.header__phone_menu{
  width: 100%;
  height: 370px;
  background-color: #000530 !important;
}

.header__phone_title{
  display: flex;
  justify-content: space-between;
}

.header__phone_contents{
  display: flex;
  flex-direction: column;
}

.header__phone_contents a{
  padding: 10px 0px 10px 10px;
  width: auto;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  color: white;
}

.header__phone_contents a:hover{
  opacity: 0.5;
}

.header__phone_contents a:visited{
  text-decoration: none;
  color: white;
}

/* スマートフォン */
@media screen and (max-width: 768px) { 
  
  img.header__logo{
    width: 70%;
  }

  .header__phone_title img.header__logo{
    height: 70%;
  }

  div.header__content{
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    margin: 0px 10px 0px 10px;
  }

  div.header__menu{
    display: none;
  }

  div.header__hamburger_menu{
    display: block;
  }
}


/* ヘッダーの設定(ここまで) */


/* フッターの設定 */

.footer__background{
  background-color: #000530;
  padding: 50px 24px 30px 24px;
}

.footer__contents{
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

.footer__wrappers{
  display: flex;
  justify-content: center;
}

.footer__left_wrapper{
  width: 70%;
}

.footer__right_wrapper{
  width: 30%;
}

.footer__logo{
  width: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.footer__wrappers a{
  color: white;
  text-decoration: none;
}

.footer__wrappers a:visited{
  color: white;
  text-decoration: none;
}

.footer__wrappers a:hover{
  color: #ff6f00 !important;
}

hr.footer__separator{
  margin-top: 20px;
  margin-bottom: 20px;
}

.footer__copyright{
  text-align: left;
  color: white;
  font-size: 10px;
}

/* スマートフォン */
@media screen and (max-width: 768px) { 
  
  div.footer__wrappers{
    display: block;
  }

  div.footer__left_wrapper{
    width: 100%;
  }

  div.footer__right_wrapper{
    width: 100%;
  }
}

/* フッターの設定(ここまで) */


/* TOPページの設定 */

.top__speech_bubble{
  position: relative;
  margin-bottom: 24px;
  padding: 8px 16px 8px 16px;
  border-radius: 40px;
  background-color: #00084d;
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  width: 40%;
}

.top__speech_bubble::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 0 0 20px;
  border-color: #00084d transparent transparent;
  translate: -180% 100%;
}

.top__speech_bubble::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 8.6px 8.6px 0 8.6px;
  border-width: 15.2px 0 0 15.2px;
  border-color: #00084d transparent transparent;
}

.top__title{
  font-size: 28px;
  font-weight: bold;
  color: #00084d;
  margin: 0px 0px 14px 0px;
  text-align: center;
  position: relative;
  line-height: 50px;
}

.top__title:after {
  background-color: #00084d;
  bottom: 0;
  content: "";
  height: 3px;
  left: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 30px;
}

.top__caption{
  font-size: 14px;
  font-weight: bold;
  color: black;
  margin: -20px 0px 60px 0px;
  text-align: center;
}

.top__notice_container{
  display: flex;
  justify-content: center;
  align-items: left;
  flex-direction: column;
  width: 60%;
  background-color: white;
  border-radius: 0.5rem;
  margin: 0px auto 60px auto;
  padding: 20px 40px 10px 40px;
}

.top__notice_text{
  font-size: 16px;
  color: #00084d;
  margin: 0px 0px 10px 0px;
  text-decoration: none;
}

.top__notice_text:hover{
  opacity: 0.8;
  text-decoration: underline;
}

.top__notice_button{
  width: 200px !important;
  margin: 0px auto 0px auto;
}

.top__startguide_container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  background-color: #00084d;;
  border-radius: 4rem;
  margin: 0px auto 60px auto;
  padding: 0px 50px 0px 50px;
  text-decoration-line: none;
}

.top__startguide_container:hover{
  opacity: 0.8;
}

.top__startguide_text{
  color: white;
  text-decoration: none;
  font-size: 25px;
  font-weight: bold;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.top__startguide_img{
  height: 40px;
  margin: 10px 20px 10px 0px;
}

.top__startguide_arrow{
  color: white;
  width: 10%;
}

.top__category_container{
  display: flex;
  flex-wrap: wrap;
  margin: 0px 0px 80px 0px;
  width: 80%;
  margin: 0px auto 0px auto;
}

.top__category_card_container{
  width: calc(100% / 3);
  padding: 16px 24px 16px 24px;
}

.top__category_card{
  background-color: white;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 40px 0px 40px 0px;
  text-decoration: none;
}

.top__category_img{
  width: 25%;
  padding: 10px 0px 10px 0px;
}

.top__category_title{
  font-size: 20px;
  font-weight: bold;
  color: #00084d;
  margin: 0px 0px 8px 0px;
}

.top__category_card_container:hover{
  opacity: 0.8;
}

.top__category_subtitle{
  font-size: 14px;
  color: #516F90;
  text-align: center;
}

/* スマートフォン */
@media screen and (max-width: 768px) { 
  
  div.top__notice_container{
    width: 100%;
  }
  a.top__startguide_container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    background-color: #00084d;;
    border-radius: 4rem;
    margin: 0px auto 30px auto;
    padding: 10px 20px 10px 20px;
    text-decoration-line: none;
  }
}

/* TOPページの設定(ここまで) */


/* 問い合わせページの設定 */

.request__container{
  max-width: 700px;
  margin: 0px auto 50px auto;
  padding: 30px 30px 30px 30px;
  background-color: white;
  border: 1px solid lightgray;
  border-radius: 4px;
}

.request__contact_title{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.request__contact_subtitle{
  font-size: 18px;
  text-align: center;
  margin: 0px 0px 30px 0px;
}

.request__contact_anotation{
  font-size: 10px;
  margin-bottom: 20px;
}

.request__contact_submit{
  width: 300px !important;
  height: 60px !important;
  margin-top: 20px;
}

.request__contact_submit span{
  font-size: 18px !important;
  color: white !important;
  font-weight: bold !important;
}

.request__contact_notsubmit{
  width: 300px !important;
  height: 60px !important;
  margin-top: 20px;
  cursor: not-allowed !important;
}

.request__contact_notsubmit span{
  font-size: 18px !important;
  color: white !important;
  font-weight: bold !important;
}

.request__contact_submit:hover{
  background-color: white !important;
  border: 1px solid #ff6f00 !important;
}

.request__contact_submit:hover span{
  color: #ff6f00!important;
}

.request__completed_container{
  max-width: 700px;
  margin: 0px auto 50px auto;
  padding: 30px 30px 30px 30px;
  background-color: white;
}

.request__completed_text{
  font-size: 18px;
  margin: 30px 0px 10px 0px;
  text-align: center;
}

.f-modal-alert .f-modal-icon {
	border-radius: 50%;
	border: 4px solid gray;
	box-sizing: content-box;
	height: 80px;
	margin: 20px auto;
	padding: 0;
	position: relative;
	width: 80px;
}
.f-modal-alert .f-modal-icon.f-modal-success,
.f-modal-alert .f-modal-icon.f-modal-error {
	border-color: #A5DC86;
}
.f-modal-alert .f-modal-icon.f-modal-success:after,
.f-modal-alert .f-modal-icon.f-modal-error:after,
.f-modal-alert .f-modal-icon.f-modal-success:before,
.f-modal-alert .f-modal-icon.f-modal-error:before {
	background: #fff;
	content: '';
	height: 120px;
	position: absolute;
	transform: rotate(45deg);
	width: 60px;
}
.f-modal-alert .f-modal-icon.f-modal-success:before {
	border-radius: 120px 0 0 120px;
	left: -33px;
	top: -7px;
	transform-origin: 60px 60px;
	transform: rotate(-45deg);
}
.f-modal-alert .f-modal-icon.f-modal-success:after {
	border-radius: 0 120px 120px 0;
	left: 30px;
	top: -11px;
	transform-origin: 0 60px;
	transform: rotate(-45deg);
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-placeholder,
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-placeholder {
	border-radius: 50%;
	border: 4px solid rgba(165, 220, 134, 0.2);
	box-sizing: content-box;
	height: 80px;
	left: -4px;
	position: absolute;
	top: -4px;
	width: 80px;
	z-index: 2;
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-fix,
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-fix {
	background-color: #fff;
	height: 90px;
	left: 28px;
	position: absolute;
	top: 8px;
	transform: rotate(-45deg);
	width: 5px;
	z-index: 1;
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-line,
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line {
	background-color: #A5DC86;
	border-radius: 2px;
	display: block;
	height: 5px;
	position: absolute;
	z-index: 2;
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-line.f-modal-tip,
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-tip {
	left: 14px;
	top: 46px;
	transform: rotate(45deg);
	width: 25px;
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-line.f-modal-long,
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-long {
	right: 8px;
	top: 38px;
	transform: rotate(-45deg);
	width: 47px;
}

.animateSuccessTip {
	animation: animateSuccessTip .75s;
}

.animateSuccessLong {
	animation: animateSuccessLong .75s;
}

.f-modal-icon.f-modal-success.animate:after {
	animation: rotatePlaceholder 4.25s ease-in;
}

.f-modal-icon.f-modal-error.animate:after {
	animation: rotatePlaceholder 4.25s ease-in;
}

.animateErrorIcon {
	animation: animateErrorIcon .5s;
}

.animateXLeft {
	animation: animateXLeft .75s;
}

.animateXRight {
	animation: animateXRight .75s;
}

.scaleWarning {
    animation: scaleWarning 0.75s infinite alternate;
}

.pulseWarningIns {
    animation: pulseWarningIns 0.75s infinite alternate;
}

@keyframes animateSuccessTip {
	0%,54% {
		width: 0;
		left: 1px;
		top: 19px;
	}

	70% {
		width: 50px;
		left: -8px;
		top: 37px;
	}

	84% {
		width: 17px;
		left: 21px;
		top: 48px;
	}

	100% {
		width: 25px;
		left: 14px;
		top: 45px;
	}
}

@keyframes animateSuccessLong {
	0%,65% {
		width: 0;
		right: 46px;
		top: 54px;
	}

	84% {
		width: 55px;
		right: 0;
		top: 35px;
	}

	100% {
		width: 47px;
		right: 8px;
		top: 38px;
	}
}

@keyframes rotatePlaceholder {
	0%,5% {
		transform: rotate(-45deg);
	}

	100%,12% {
		transform: rotate(-405deg);
	}
}

@keyframes animateErrorIcon {
	0% {
		transform: rotateX(100deg);
		opacity: 0;
	}

	100% {
		transform: rotateX(0deg);
		opacity: 1;
	}
}

@keyframes animateXLeft {
	0%,
	65% {
		left: 82px;
		top: 95px;
		width: 0;
	}

	84% {
		left: 14px;
		top: 33px;
		width: 47px;
	}

	100% {
		left: 17px;
		top: 37px;
		width: 47px;
	}
}

@keyframes animateXRight {
	0%,
	65% {
		right: 82px;
		top: 95px;
		width: 0;
	}

	84% {
		right: 14px;
		top: 33px;
		width: 47px;
	}

	100% {
		right: 16px;
		top: 37px;
		width: 47px;
	}
}

@keyframes scaleWarning {
	0% {
		transform: scale(1);
	}
	
	30% {
		transform: scale(1.02);
	}
	
	100% {
		transform: scale(1);
	}
}

@keyframes pulseWarning {
	0% {
		background-color: #fff;
		transform: scale(1);
		opacity: 0.5;
	}

	30% {
		background-color: #fff;
		transform: scale(1);
		opacity: 0.5;
	}

	100% {
		background-color: #F8BB86;
		transform: scale(2);
		opacity: 0;
	}
}

@keyframes pulseWarningIns {
    0% {
        background-color: #F8D486;
    }

    100% {
        background-color: #F8BB86;
    }
}

/* 問い合わせページの設定(ここまで) */


/* サイドバーの設定 */
.sidebar__contents{
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.sidebar__contents a{
  color: #00084d;
  text-decoration: none;
}

.sidebar__contents a:visited{
  color: #00084d;
  text-decoration: none;
}

.sidebar__contents a:hover{
  background-color: rgb(230, 233, 255);
}

.sidebar__upper_category{
  font-size: 18px;
  padding: 8px;
}

.sidebar__middle_category{
  font-size: 16px;
  padding: 8px;
  background-color: white;
  font-weight: bold;
  color: #00084d;
}

.sidebar__lower_category{
  font-size: 16px;
  padding: 8px 16px 8px 16px;
}

.sidebar__active{
  background-color: rgb(230, 233, 255);
  font-weight: bold;
}

/* スマートフォン */
@media screen and (max-width: 768px) { 

  div.top__category_card_container{
    width: 100%;
  }
}


/* サイドバーの設定(ここまで) */


/* マニュアルページの設定 */

.manual__contents{
  display: flex;
  padding: 0px 0px 80px 0px;
}

.manual__sidebar{
  width: 20%;
}

.manual__space{
  width: 5%;
}

.manual__main_contents span{
  font-family: 'Noto Sans JP', 游ゴシック体, YuGothic, YuGothic M, 游ゴシック Medium, Yu Gothic Medium, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, Osaka, ＭＳ Ｐゴシック, MS PGothic, sans-serif !important;
}

.manual__main_contents{
  width: 75%;
}

.manual__error_comment{
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold !important;
  color: black !important;
}

.manual__index_title{
  font-size: 32px;
  font-weight: bold;
  color: #00084d;
  margin: 30px 0px 40px 0px;
}

.manual__index_subtitle{
  font-size: 20px;
}

.manual__index_container{
  display: flex;
  flex-direction: column;
}

.manual__category_container{
  display: flex;
  margin-bottom: 40px;
}

.manual__category_title{
  width: 30%;
  font-size: 18px;
  font-weight: bold;
  color: #00084d;
  padding: 4px 4px 8px 4px;
  text-decoration: none;
}

.manual__category_contents{
  width: 70%;
  display: flex;
  flex-direction: column;
}

.manual__category_contents a{
  font-size: 16px;
  color: #00084d;
  padding: 12px 4px 12px 4px;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
  position: relative;
}

.manual__category_contents a:hover{
  background-color: #f1f5ff;
}

.manual__category_contents a::after{
  content: "›";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #555;
}

/* スマートフォン */
@media screen and (max-width: 768px) { 
  
  div.manual__sidebar{
    display: none;
  }

  div.manual__main_contents{
    width: 100%;
  }

  div.manual__main_contents span{
    height: auto !important;
  }

  div.manual__main_contents img{
    width: calc(100vw - 16px) !important;
    height: auto !important;
  }

  div.manual__main_contents > p:has(img) {
    overflow: hidden;
  }
}

/* マニュアルページの設定(ここまで) */


/* pagefindプラグインの設定 */

.pagefind-ui__result{
  background-color: white !important;
  padding: 22px !important;
}

/* pagefindプラグインの設定(ここまで) */


/* Google Docs形式HTMLファイルのレスポンシブ対応 */

/* 全ページでの横スクロール防止 */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* すべての要素のbox-sizingを統一 */
*, *::before, *::after {
  box-sizing: border-box !important;
}

/* 全体のコンテナ最大幅を制限 */
body.doc-content {
  max-width: 100% !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* 画像の レスポンシブ対応 */
body.doc-content img {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
  box-sizing: border-box !important;
}

/* テーブルのレスポンシブ対応 */
body.doc-content table {
  max-width: 100% !important;
  table-layout: fixed !important;
  word-wrap: break-word !important;
}

body.doc-content table td,
body.doc-content table th {
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* インライン要素のレスポンシブ対応 */
body.doc-content span[style*="width"] {
  max-width: 100% !important;
  width: auto !important;
  display: block !important;
}

/* Google Docsの特定クラスに対する対応 */
body.doc-content .c9 {
  max-width: 100% !important;
  padding: 16px !important;
}

/* すべてのインライン画像コンテナ */
body.doc-content span[style*="display: inline-block"] {
  max-width: 100% !important;
  width: auto !important;
  display: block !important;
}

/* 固定幅を持つすべての要素に対する対応 */
body.doc-content *[style*="width: "] {
  max-width: 100% !important;
  width: auto !important;
}

/* スマートフォン対応 */
@media screen and (max-width: 768px) {
  body.doc-content {
    padding: 8px !important;
    font-size: 14px !important;
  }

  body.doc-content h1 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  body.doc-content h2 {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  body.doc-content h3 {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  body.doc-content p {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }

  /* より小さな画面での画像調整 */
  body.doc-content img {
    max-width: calc(100vw - 24px) !important;
  }

  /* テーブルの横スクロール対応 */
  body.doc-content table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    max-width: calc(100vw - 24px) !important;
  }

  body.doc-content .c21 {
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    padding: 8px !important;
  }

  /* Google Docsの固定サイズクラスをレスポンシブ化 */
  body.doc-content .c9 {
    padding: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }

  /* 特定のポイント単位の幅を持つ要素の対応 */
  body.doc-content *[style*="451.5pt"],
  body.doc-content *[style*="601.70px"] {
    max-width: calc(100vw - 24px) !important;
    width: auto !important;
  }
}

/* 超小型デバイス対応 */
@media screen and (max-width: 480px) {
  body.doc-content {
    padding: 4px !important;
    font-size: 13px !important;
  }

  body.doc-content h1 {
    font-size: 16px !important;
  }

  body.doc-content h2 {
    font-size: 15px !important;
  }

  body.doc-content h3 {
    font-size: 14px !important;
  }

  body.doc-content p {
    font-size: 13px !important;
  }

  body.doc-content img {
    max-width: calc(100vw - 16px) !important;
  }

  body.doc-content table {
    max-width: calc(100vw - 16px) !important;
  }
}

/* Google Docs形式HTMLファイルのレスポンシブ対応(ここまで) */