@charset "UTF-8";

body {
   display: grid; /*bodyタグに指定でよこ画面いっぱい*/
   min-height: 100vh;  /*たて画面いっぱい*/
   min-height: -webkit-fill-available;/* Chrome、iOS/iPad/macOSのSafariで機能 */
 }
 p,.li-a span{ 
   word-break: keep-all;
 }

 html {
   height: -webkit-fill-available;/* Chrome、iOS/iPad/macOSのSafariで機能 */
 }
 /* .grid{
   max-width:100%;
 } */
/*! サイト幅 */

header,.main-aria{
   max-width: 1080px;
   width: 100%;
   box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), -32px 3px 0px -1px #fff;
}

/* ! main footer*/
.main-aria{
   width: 100%;
   margin: 0 auto;
   padding: 0 5%  0 3%;
}
footer{
   /* max-width: 1080px; */
   width: 100%;
}
.footer ul{
   max-width: 1140px;
   width: 100%;
   margin: 0 auto;
}


/* ! デフォルト指定 */
 a{
   text-decoration:none;
   cursor: pointer;
}
a:active{
   color:  #5d65f0 
}


/* TODO  GRID ━━━━━━━━━━━━━━━━━━━━━━━▽━ */
/*! 第一グリッドコンテナ*/
.grid{
   display:grid;
   width: 100%;
   min-height: 100vh;
   margin: auto;
   overflow: hidden;
   justify-items: center;
   /* grid-template: ⇒a-top.css */
   "head" 731px
   "main" 1fr
   "foot" auto;
   /* grid-template: ⇒a-sub-common.css */
}
/* m-1-list */
.grid_j-cen{
   display: grid;
   justify-content: center;
}
/* TODO  GRID ━━━━━━━━━━━━━━━━━━━━━━━△━ */


.list-style-1{
   display: flex;
   align-items: center;
   margin-top: 50px;
}
/* FLEX ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━▽━*/
/*flex X(よこ)方向*/
.flex-X{display: flex;}
.flex-X-0,
.flex-X-1,
.flex-X-2,
.flex-X-3,
.flex-X-4,
.flex-X-5,
.flex-X1-X3-medla,
.flex-X1-Y-medla,
.flex-X1-Y-align{
   display: flex;
   flex-wrap: wrap;
}

.flex-X-1{justify-content: flex-start }/*──── 左よせ */
.flex-X-2{justify-content: center }/*──────── センター */
.flex-X-3{justify-content: space-around; }/*── 均等割り付け */
.flex-X-4{justify-content: space-between }/*─ 両端そろえ */
.flex-X-5{justify-content: end }/*─────────── 右よよせ */
.flex-X1-X3-medla{
   justify-content: flex-start;
   /* ⇔ 864から均等割り付け */
}

.flex-X1-Y-align{
   align-items: center;
}

.flex-X-column-reverse-medla{
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}
/* FLEX ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━△━ */

/* FONT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━▽━*/
.area-company-name {
   /* https://websemantics.uk/tools/responsive-font-calculator/ */
   /* font-size: min(max(最小値px, calc(1.25rem + (最大値 - 最小値) * ((100vw - 最小画面幅px) / (最大画面幅 - 最小画面幅)))), 最大値px); */
   font-size: min(max(20px, calc(1.25rem + (36 - 20) * ((100vw - 280px) / (1080 - 280)))), 38px);min-height: 0vw;
 }
.lead-Sentence-1 ul li{
   font-size: min(max(20px, calc(1.25rem + ((1vw - 2.8px) * 2.25))), 34px);
   /* font-size: clamp(22px, 3.6vw, 34px); */
}


 li p,dd p.span-font-s {
     font-size: calc(1rem + (19 - 16) * ((100vw - 280px) / (1080 - 280)));
     min-height: 0vw;
     /* font-size: clamp(18px, 3.2vw, 24px); */
     /* ⇒@media min 1080以上22pxで固定*/
   }

/* FONT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━▽━*/



/* //////////5/////////////////////////////////////////////////// */
/* TODO ━━ HEADER ━━━━━━━━━━━━━━━━━━━▽━ */
/*! H .grid 【headコンテナ】━━━━━━━━━━━━━━━━━ 親*/


.h-grid{
   grid-column: 1/9;
   grid-row: 6/7;
   display:grid;
   grid-template-columns:repeat(6, 1fr) ;
   grid-template-rows:repeat(2, 1fr) ;
} 
.header-boder{
   display: grid;
}
.header-boder sapn{
   display: grid;
   background-color: #ff960d;
   height: 10px;
}


/*! H ロゴエリア━━━━━━━━━━━━━━━━━━━━━━━━━━━ 親*/
.sel-1{
   grid-column: 1;
	grid-row: 1/3;
   /* border: solid 1px #00ff00; */
}

.area-rogo{
  padding-left: 1%;
  padding-top: 5px;
  position: relative;
  left: 8px;
}

/*! H ロゴ白楕円背景────────── 子 */
   .area-rogo img{
      /* background-color: #fff; */
      /* filter: drop-shadow(0px 4px 8px  #ffffff); */
      border-radius:95% 45% 95% 45% ;
      padding: 6px;
      width: 100%;
      min-width: 110px;
      height: auto;
   }


/*! H 社名とinfo のラップエリア━━━━━━━━━━━━ 親 */
.sel-2{
   grid-column: 2/9;
	grid-row: 1;
   padding: 3% ;
}
   /*! H  社名 ─────────────── 子 */
   .area-company-name {
      padding: 0 2% ;
      line-height: 1.5;
      font-weight: 900;
      color: #333;
    }

   
/*! H info エリア ──────── 子 */


/*! H  NAVメニュー */
.sel-3{
   grid-column: 2/9;
	grid-row: 2/3;
   margin-right: 2%;
   /*※ margin-top ⇒ top.css ⇒  */
   /*※ margin-top ⇒ sub.common.css ⇒  */
}

.nav-deco{
   font-size: 1.3em;
   font-weight: bold;
}

.nav-deco li a{
   display: block;
   line-height: 1.8;
   padding:0 12px;
   letter-spacing: 1px;
}

.nav-deco li:nth-last-child(-n+2){
   display: block
}
.nav-deco li:last-child img{
   width: 90px;
   height: 90px;
   text-align: center;
    margin:20px auto;
}



/*! H  ヘッダーのヘッダー背景*/
.header-background{
	grid-column: 1 / 9;
	grid-row:1 /2;
   text-align: center;
   background-repeat: no-repeat;
   display: grid;
	align-items: center;
   background-color: rgba(255, 255, 255, 0.654);
   height: 105px;
}


/* TODO ━━ HEADER ━━━━━━━━━━━━━━━━━━━△━ */
/* ///////////////////////////////////////////////////////////// */
/* TODO ━━ MAIN ━━━━━━━━━━━━━━━━━━━━━▽━ */


/*! M コンテンツタイトル */
.title-deco-1{
	line-height: 1.1;
   margin: 0 0 50px 4% ;
   padding-left:2em;
	text-indent:-3em;
}
.title-deco-1::before{
	content: '■';
	font-size: 2.8em;
	color: #fbc00b ;
	position: relative;
	left:11px;
	top:3px;
	text-shadow: 10px 9px 0px #0009b5;
}
.title-deco-1 span{
	border-bottom: 4px solid #fbc00b;
	padding:0 30px 0 28px;
	position: relative;
	bottom: 10px;
}

/*! M 各項目のテキスト */
.contents-deco-1 {
	line-height: 2;
} 

.contents-deco-2 {
	line-height: 2;
} 
.img-staff-sub1{
margin-top: 120px;
margin-bottom: -105px;
}
/* TODO ━━ MAIN ━━━━━━━━━━━━━━━━━━━━━△━ */
/* ///////////////////////////////////////////////////////////// */
/* TODO ━━ FOOTER ━━━━━━━━━━━━━━━━━━━▽━ */


footer{
   background-color: #ffbc00;
   grid-area:foot;
   position: relative;
   text-align: center;
   min-height: 120px;
}
footer small{
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   line-height: 4.2;
}
.footer{
   background-color:#0d2986;
   margin: auto;
   margin-bottom: 100px;
   text-align: center;
   z-index: 9;
}
.footer-nav{
   padding: 0 2%;
}
.footer-nav a{ 
   color: #fff;
   line-height: 2.5;
   padding: 15px;
}
.sel-2{
   padding: 5px 2%;
}


   /*! H  ヘッダーのヘッダー背景*/
.header-background{
   height: 130px;
   }
   /*! H info エリア ──────── 子 */
   .info-area{
      width: 55%;
  }
  .info-area > p{
   width: 140px;
   margin:0 10px;
}
.info-area-title{
   font-size: 1.3em;
   }

/* TODO ━━ FOOTER ━━━━━━━━━━━━━━━━━━━━━△━ */
/*! H  2色ボーダー ──────── 親疑 */

/* フォントサイズ　p */
/*MEDIA__863▼＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿863▼＿＿＿*/
@media screen and (min-width:514px){
   /*! M 各項目のテキスト */


.footer{
   margin-bottom: 100px;
}
   .footer-nav{
      width: 100%;
         margin-top: -5px;
   }
   .footer-nav a{ 
      color: #fff;
      line-height: 2;
   }
   .footer-nav li{
      padding:4px 10px;
   }

}
/*MEDIA__863▼＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿863▼＿＿＿*/
@media screen and (max-width:863px){

   /*! H info エリア ──────── 子 */
   .info-area{
      width: 75%;
      padding-left: 5%;
   }
   .header-background{
      border-bottom:  solid 6px #273e81;
      box-shadow: 0px 3px 0px rgb(126, 202, 214);
   }
   /*! H info エリア ──────── 子 */
   .flex-Y-X4{
      margin: auto;
   }
}

/*MEDIA__864▲＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿864▲＿＿＿ */
@media screen and (min-width: 864px) {
   .nav-deco li:nth-last-child(-n+2){
      display: none
   }
   .footer{
      background-image: url(../image/common-img/footer-bottom.jpg);
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      top: 0;
      text-align: center;
      height: 60px;
   }

   .flex-Y-X3{
      display: flex;
      width: 88%;
      margin:0 auto;
   }

   .contents-deco-1 {width: 100%;
      padding:5% 1% 0px 2%;
   } 
   .info-area{
      display: flexl;
      align-items: center;
      justify-content: space-between; 
   }
/*! H info エリア ──────── 子 */
   .flex-Y-X4{
      display: flex;
      justify-content: space-between;
      justify-content: center;
      margin: auto;
   }



/*MEDIA＿965▲＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿795▲＿＿＿*/

@media screen and (min-width: 795px) {

   .two-tone-border{
      border-bottom: solid 9px #273e81;
      box-shadow: 0px 3px 0px rgb(126, 202, 214);
      margin-left: 3%;
   }
   .h-grid::before{
         grid-column: 1 /-1;
         grid-row: 1;
         align-self: end;
         content: '';
         border-top: solid 9px #273e81;
         box-shadow: 10px 3px 0px rgb(126, 202, 214); 
         margin: 0 calc(50% - 100vw);
         padding: 0 calc5(50vw - 100%);
         z-index:-1 ;
      }
}


/*MEDIA＿965▲＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿965▲＿＿＿*/

   @media screen and (min-width: 965px) {
      /*! H info エリア ──────── 子 */
      .info-area{
         width: 53%;
      }
      .catch-copy ul li{
         text-align: end;
         margin-right: 5%;
      }

   }



/*MEDIA＿1080▲＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿1080▲＿＿*/
@media screen and (min-width: 1080px) {
   p {
     font-size: 22px;
   }
 }


 /* 〓 基本色 〓*/
/* 基本紺色   */
/* 明るい青  #0009b5 四角重ね*/
/* オレンジ  #ffbc0  四角重、ボーダー*/
/* オレンジ  #ff960d アンダーライン */
/* 薄青グレー#c0ddf2 ボーダー*/
/* 黒に近い青#003d67 ビシュアルエリアテキスト */