body{
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  line-height: 2;
  font-size: 16px;
}

img {
width:100%;
height: auto;
}

section{
  max-width: 1000px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
ul{
  padding-left: 0;
}

/* --- テキスト周り ---------------------------------------- */
.font-min{font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;}

.ib{display: inline-block;}

.t-center{text-align: center;}
.t-normal{font-weight: 100;}

.t-11{font-size: 1rem;}
.t-12{font-size: 1.2rem;}
.t-14{font-size: 1.4rem;}
.t-16{font-size: 1.6rem;}
.t-18{font-size: 1.8rem;}
.t-20{font-size: 2rem;}
.t-25{font-size: 2.5rem;}
.t-30{font-size: 3rem;}
.t-35{font-size: 3.5rem;}
.t-40{font-size: 4rem;}

a{
  text-decoration: none;
  position: relative;
}
a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #efd280;
  bottom: -10px;
  transform: scale(0, 1);
  transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: transform 0.3s;   /*変形の時間*/
  }
  
  a:hover::after {
  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
  }


p{padding: 0.5rem 0;}

.green{
  color: rgb(27, 145, 139);
}



/* --- 隙間周り ---------------------------------------- */

.m-1{margin: 1rem;}
.m-2{margin: 2rem;}
.m-3{margin: 3rem;}
.m-4{margin: 4rem;}
.m-5{margin: 5rem;}

.mt-1{margin-top: 1rem;}
.mt-2{margin-top: 2rem;}
.mt-3{margin-top: 3rem;}
.mt-4{margin-top: 4rem;}

.mb-1{margin-bottom: 1rem;}
.mb-2{margin-bottom: 2rem;}
.mb-3{margin-bottom: 3rem;}
.mb-4{margin-bottom: 4rem;}
.mb-5{margin-bottom: 5rem;}

.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}

.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}

/* --- header ---------------------------------------- */
header div,
footer div{
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-around;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
header h1,
footer h1{
  height: 75px;
}

.logo{
  max-width: 220px;
  margin-top: 10px;
}

.logof{
  background: url('../img/logo2.svg') no-repeat;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
header ul,
footer ul{
  flex: auto;
  display: flex;
  justify-content: space-around;
  justify-content: center;
  flex-wrap: wrap;
}
header li,
footer li{
  list-style: none;
  margin-top: 5px;
  padding-right: 2rem;
  font-size: 1.1rem;
  line-height: 0;
}

footer{
  margin-top: 2rem;
  padding-top: 1rem;
  color: #efd280;
}

@media screen and (max-width: 660px) {
  header div,
  footer div{
    flex-wrap: wrap;
  }
  header li{
    line-height: 1.2;
    padding-left: 8px;
  }
  footer div{
    margin-top: 0rem;
    padding-top: 1rem;
    flex-direction: column-reverse;
  }
  footer li:last-child{
    padding-right: 0;
  }
}
@media (max-width: 490px) {
  header li{
    font-size: 0.85rem;
    padding-right: 0.5rem;
  }
  header h1,
  footer h1{
  max-width: 100px;
  }
  footer {
    margin-top: 0;
  }
  footer li{
    font-size: 0.85rem;
  }
  footer nav{
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* --- 全体のBOX定義 ---------------------------------------- */
.box {
  position   : relative;
  max-width  : 100%;
  height     : 700px;
  margin     : auto;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.box .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 28s infinite;   /* 4画像 × 各5s = 20s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
  background-size: cover;
  background-image : url(../img/top_mv_01.jpg);   /* 背景の画像を指定 */
}
.box .src2 {
  background-size: cover;
  background-image : url(../img/top_mv_02.jpg);   /* 背景の画像を指定 */
  animation-delay  : 7s;
}
.box .src3 {
  background-size: cover;
  background-image : url(../img/top_mv_03.jpg);   /* 背景の画像を指定 */
  animation-delay  : 14s;
}
.box .src4 {
  background-size: cover;
  background-image : url(../img/top_mv_04.jpg);   /* 背景の画像を指定 */
  animation-delay  : 21s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}

/* --- 前面の文字定義（サンプルのため変更してください） ----- */
.box .boxString{
  position   : absolute;
  padding    : 1rem auto;
  color      : #fff;
  top        : 50%;                               /* 中央寄せ */
  left       : 50%;
  width: 100%;
  transform  : translate(-50%,-50%);
  z-index    : 11;
}



/* --- 共通設定 ------------------------------------------- */

.b-title{
  color: #1c3353;
  text-align: center;
  font-size: 3rem;
  font-weight: 100;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;
  padding-top: 6rem;
}
.b-title::before{
  content:"―";
  margin-right: 1rem;
}
.b-title::after{
  content:"―";
  margin-left: 1rem;
}

.bg-navy .b-title{
  color: #efd280;
}
.bg-navy p{
  color: #fff;
}

.s-title{
  background-color: #1c3353;
  text-align: center;
  padding: 0.8rem 1rem;
  color: #efd280;
}
.sb-title{
  font-size: 2.5rem;
  font-weight: 100;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;
  text-align: center;
}

.flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.flex1{
  flex: 1;
}
.flex2{
  flex: 2;
}
.flex3{
  flex: 3;
}
.flex4{
  flex: 4;
}
.flexa{
  flex: auto;
}
@media screen and (max-width: 660px) {
  .flex {flex-flow: column;}
  .b-title{
    font-size: 2.5rem;
   padding-top: 4rem;
  }
  .b-title::before{
    content:"";
  }
  .b-title::after{
    content:"";
  }
  .sb-title{
    font-size: 2rem;
  }
}

.bg_dia{
  background: url(../img/bg_sq.gif);
}
.bg-navy{
  background: #1c3353;
}
.bg-white{
  background-color: rgba(255,255,255,0.8);
}

/* --- 詳細設定 ----------------------------flex--------------- */

.aisatu {
  background: url(../img/bg_00.jpg) bottom center no-repeat;
  background-size: cover;
}

.aisatu p img{
  max-width: 180px;
  width: 100%;
  height: auto;
  padding-top: 2rem;
}

.bwbox{
  background: #fff;
  padding: 2rem 1rem 1rem;
  border: solid 2px #efd280;
}

.bg-sales{
  background: url(../img/bg_02.jpg) no-repeat center center;
  background-size: cover;
  padding-bottom: 4rem;
}
.bg-sales .bg-white{
  margin-top: 3rem;
  padding: 2rem;
}

.hukuri {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-items: stretch;
  width: 100%;
  }
.hukuri dt {
  flex-basis: 25%;
  padding: 20px;
  background-color: #4e6687;
  color: #fff;
  display: flex;
	align-items: center;
  border-bottom: 1px solid #ccc;
  }
.hukuri dd {
  flex-basis: 75%;
  padding: 20px;
  background-color: rgba(255,255,255,0.5);
  align-items: center;
  }
@media screen and (max-width: 660px) {
    .hukuri {flex-flow: column;}
    .hukuri dt{
      width: 100%;
      padding: 10px 20px;
    }
}

.company dl {
  display: flex;
  flex-flow: column;
  width: 100%;
  }
.company dt {
  flex-basis: 25%;
  padding: 0.3rem 20px;
  background-color: #4e6687;
  color: #fff;
  display: flex;
	align-items: center;
  border-bottom: 1px solid #ccc;
  }
.company dd {
  flex-basis: 75%;
  padding: 0.3rem 20px;
  background-color: rgba(255,255,255,0.5);
  align-items: center;
  }
.company .map {
    position: relative;
    padding-top: 430px;
    width: 100%;
    overflow: hidden;
    text-align: center;
  }
.company .map iframe {
    position: absolute;
    top: -150px;
    left: 0;
    height: calc(80% + 150px + 150px);
    pointer-events: none;
  }
  @media screen and (max-width: 660px) {
    .company .flex {
      margin-bottom: 0;
      gap:0;
    }
    .company .flex div{
      width: 100%;
    }
}


.sp{ display: none; }   /* ※1 */

/* ▼表示領域が600px以上の場合 */
@media (min-width: 660px) {
.sp { display: none; }  /* miniを非表示 */
.pc  { display: block; } /* bigを表示 */
}
/* ▼表示領域が600px未満の場合 */
@media (max-width: 659px) {
.sp { display: block; } /* miniを表示 */
.pc  { display: none; }  /* bigを非表示 */
  p{
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  h3{ margin-bottom: 0;}
  .t-18{font-size: 1.6rem;}
  .t-12{font-size: 1rem;}
  .aisatu p img{
    max-width: 140px;
    padding-top: 1rem;
  }
}
@media (max-width: 490px) {
  .t-14{
    font-size: 1rem;
  }
  .t-18{
    font-size: 1.5rem;
  }
  .t-35{
    font-size: 2.5rem;
  }
  .bwbox{
    padding: 0.5rem;
  }
  .bg-sales .bg-white{
    padding: 0.5rem;
  }
}