@charset "utf-8";
* {
  box-sizing: border-box;
}

/* reset */
ul,li,ol{
  margin: 0;
  padding: 0;
  list-style: none;
}
main{
  font-weight: 700;
}
.show_pc{
  display: none;
}
.show_sp{
  display: block;
}

body {
  color: #333333;
  font-family: "游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px;
}
.hdg-00{
  color: var(--color-light-blue);
  font-size: 28px;
  margin-bottom: 24px;
}
.hdg-01{
  color: #fff;
  font-size: clamp(1.25rem, 1.099rem + 0.75vw, 1.75rem);
  line-height: 1.4;
}
.hdg-01 > span{
  display: block;
  font-size: clamp(0.75rem, 0.675rem + 0.38vw, 1rem);
  color: #fff;
  font-weight: 400;
  letter-spacing: 1.2px;
}  
.hdg-square::before{
  display: block;
  content: "";
  background-color: var(--color-light-blue);
  margin-right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 1px;
}

.normal-txt{
  margin-bottom: 34px;
}

/*-----------------------------
 メインビジュアル 
------------------------------- */
/* TOP */
.main-visual-00{
  background:#2562B2;
  position: relative;
  margin-bottom: 0;
}
.box-text{
  padding: 40px 20px;
  background:linear-gradient(299deg, #EBC06A 0%, #42A2DA 45.97%, #2562B2 97.18%);
}

/* パンくず */
.box-Breadcrumb{
  position: absolute;
  right: 16px;
  top:16px;
  display: flex;
  font-size: 10px;
  gap: 8px;
  color: #50A2D2;
  z-index: 50;
}

.box-Breadcrumb a{
  text-decoration: underline;
}
.box-Breadcrumb :not(:first-child){
  align-items: center;
  display:flex;
  gap: 8px;
}
.box-Breadcrumb :not(:first-child)::before{
    background: var(--color-gray-line);
    content: "";
    display: block;
    height: 14px;
    rotate: 22deg;
    transform-origin: center;
    width: 1px;
}

/* セクション */
.section-lead-text{
  display: flex;
  margin-bottom: 16px;
}
.section-lead-text::before {
  content: '';
  width: 20px;
  height: 1px;
  display: inline-block;
  border: 1px solid #707070;
  margin-right: 16px;
  margin-top: 14px;
}
.section-lead-text p{
  font-size: 18px;
}
p.tex-r{
  text-align: right;
  font-size: 12px;
}
.diagram{
  margin:24px 0 32px;
}
.diagram picture{
  text-align: center;
}
.diagram img{
  width: 100%;
}

.section-title-text {
  font-weight: bold;
  font-size: clamp(1.125rem, 0.974rem + 0.75vw, 1.625rem);
  white-space: nowrap;
  padding-left: 34px;
}
/* サブセクションタイトル */
.subsection-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.subsection-icon {
  width: 22px;
  height: 22px;
  rotate: 90deg;
}
.subsection-text {
  font-weight: bold;
  font-size: (0.875rem, 0.837rem + 0.19vw, 1rem);
  letter-spacing: 0.64px;
  white-space: nowrap;
}

/* ナビゲーション */
.navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 32px;
}

/* 区切り線 */
.divider {
  width: 100%;
  height: 1px;
  background-color: #dfdfdf;
  margin: 32px 0;
}

/* セクション */
.benefit-section {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #dfdfdf;
  font-size: 14px;
}
.benefit-section .m-Heading{
  margin-bottom: 24px;
}
.section-description {
  font-size: 14px;
  letter-spacing: 0.56px;
  margin-bottom: 32px;
}

/* 2カラムグリッド */
.benefit-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 福利厚生項目 */
.benefit-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.benefit-item-title {
  display: flex;
  align-items: center;
  position: relative;
}
.benefit-item-title::before{
  position: absolute;
  content: '';
  display: block;  
  width: 4px;
  height: 20px;
  background-color: #50a2d2;
  border-radius: 2px;
}

.benefit-item-title-text {
  font-weight: bold;
  font-size: clamp(1rem, 0.962rem + 0.19vw, 1.125rem);
  letter-spacing: 1.8px;
  padding-left: 12px;
}

.benefit-item-description {
  letter-spacing: 0.56px;
}

.benefit-item-description p {
  margin-bottom: 0;
}

.benefit-item-description p:last-child {
  margin-bottom: 0;
}

.btn-box .m-Button{
  width: 100%;
  justify-content: center;
  font-size: 16px;
}

/* フッター */
.footer-notes {
  font-size: 12px;
  letter-spacing: 0.48px;
  margin-top: 32px;
}

.footer-notes p {
  margin-bottom: 8px;
}

.footer-notes a {
  color: #2562b2;
  text-decoration: none;
  cursor: pointer;
}

.footer-notes a:hover {
  text-decoration: underline;
}

/* ボタン */
.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: white;
  border: 1px solid #e3e3e3;
  border-radius: 100px;
  padding: 19px 53px;
  margin: 64px auto 0;
  max-width: 335px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cta-button:hover {
  background-color: #f5f5f5;
}

.cta-button-text {
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 0.64px;
  white-space: nowrap;
}

.cta-button-icon {
  width: 12px;
  height: 12px;
  background-color: #50a2d2;
  border-radius: 50%;
  position: relative;
}

.small-text {
  font-size: 14px;
}

/* 矢印 */
[class^="arrow-r-"]{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding-right: 28px;
}

[class^="arrow-r-"]::before,
[class^="arrow-r-"]::after{
  position: absolute;
	top: 0;
	bottom: 0;
  right:0;
	margin: auto;
	content: "";
	vertical-align: middle; 
}

[class^="arrow-r-"]::before{
	width: 12px;
	height: 12px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #50A2D2;
}

[class^="arrow-r-"]::after{
	right: 5px;
	width: 4px;
	height: 4px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.arrow-r-01::before{
	background: #fff;
}

.arrow-r-01::after{
	border-top: 1px solid #50A2D2;
	border-right: 1px solid #50A2D2;
}

.area-floating-banner .box-btn-01 .arrow-r-01::before,
.area-floating-banner .box-btn-02 .arrow-r-00::before{
  width: 20px;
	height: 20px;
}

.area-floating-banner .box-btn-01 .arrow-r-01::after,
.area-floating-banner .box-btn-02 .arrow-r-00::after{
	width: 6px;
	height: 6px;
	right: 8px;
  border-top-width: 2px;
  border-right-width: 2px;
}

/* ---------------------
フローティング エリア
------------------------*/
.area-floating-banner{
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  position: fixed; 
  z-index: 50;
  bottom: 0;
}
.area-floating-banner .box-btn-group{
  display: flex;
  justify-content: space-between;
}
.area-floating-banner .box-btn-group [class^="box-btn-"] a{
  font-weight: 700;
  width: 160px;
  height: 44px;
  display: flex;
  border-radius: 8px;
  font-size: 14px;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding-left: 14px;
}

.area-floating-banner .box-btn-group .box-btn-01 a{
  background: linear-gradient(96deg, #0C7DAD 0%, #368CC3 51.77%, #F2CC34 119.97%);
  color: #fff;
}
.area-floating-banner .box-btn-group .box-btn-02 a{
  background: #fff;
  border-radius: 8px;
  border: 1px solid #2994D3;
  color: #50A2D2;
}
.area-floating-banner .box-btn-group [class^="box-btn-"] a{
  position: relative;
}
.area-floating-banner .box-btn-group [class^="box-btn-"] a > [class^="arrow-r-"]{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  right: 14px;
}

/* -------------------
 PC 
----------------------*/
/* レスポンシブ対応 */
@media (min-width: 768px) {
  .show_pc{
    display: block;
  }
  .show_sp{
    display: none;
  }
  .container {
    padding: 64px 32px;
  }
  .box-Breadcrumb{
    right: 100px;
    font-size: 12px;      
  }
  .main-visual-00 .main-visual-00-inner{
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    background: var(--Linear, linear-gradient(299deg, #EBC06A 0%, #42A2DA 45.97%, #2562B2 80%));
  }
  .hdg-main-visual-00 > span{
    font-size: 16px;
  }  
  .main-visual-00 .box-image{
    width: 58%;
  }
  .hdg-01{
    font-size: 36px;
    line-height:1;
  }
  .hdg-01 > span{
    margin-top: 12px;
  }
  .box-text{
    background:none;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
  }
  .section-lead-text{
    margin-bottom: 24px;
  }
  .section-title {
    margin-bottom: 48px; 
  }
  .section-title::after{
    width: 40px;
    height: 40px;
    background-size: 40px 40px;
  }
  .section-title-text {
    padding-left: 50px;
  }
  .section-description {
    font-size: 16px;
  }

  .benefit-grid {
    flex-direction: initial;
    flex-wrap: wrap;
  }

  .benefit-item {
    flex-basis: calc(50% - 16px);
  }

  .benefit-item-description {
    font-size: 16px;
  }

  .benefit-section {
    font-size: 16px;
  }

  .benefit-section .m-Heading{
    margin-bottom: 48px;
  }

  .btn-box .m-Button{
    width: 100%;
    width: 335px;
    margin: 0 auto;
  }

  .diagram{
    max-width: 1000px;
    margin: 24px auto 32px; 
  }

  .area-floating-banner{
    width: 202px;
    right:0;
    bottom:5%;      
  }
  .area-floating-banner .box-btn-group{
    flex-flow: column;
    row-gap: 10px;
  }
}
/* -------------------
 SP
----------------------*/
@media (max-width: 767px) {
  .navigation {
    justify-content: flex-start;
  }

  .subsection-title {
    font-size: 14px;
  }
}