@charset "utf-8";
/*全体のフォント指定*/
@font-face {
  font-family: "Meiryo";
  src: local("Meiryo");
}



body {
  width      : 100%;
  height     : 100%;
  margin     : 0;
  text-align : center;
  font-family: "BIZ UDMincho", serif;
  font-weight: 400;
  font-style : normal;
  background-color: #5fa4c4;
}
.biz-udmincho-regular {
  font-family: "BIZ UDMincho", serif;
  font-weight: 400;
  font-style : normal;
}

/* Main Visual画面設定 */
.main_visual {
  width      : 100%;
  height     : 700px;
  display    : flex;
  align-items: center;
  justify-content: center;

  background-image: url("../img/t-main.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  animation : zoomBg 20s ease-in-out infinite alternate;
}
.content{
  min-height : 100vh;
  width      : 100%;
  height     : 100%;
  background-color: #5fa4c4;
}

.main_visual .container {
  width       : 100%;
  height      : auto;
  max-width   : 1100px;
  margin      : 0 auto;
  padding     : 0 50px;

}

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

.main_visual .title_view {
  text-align  : center ;
  z-index     : 1;
}

.catch-wrap {
  display     : flex;
  flex-direction: column;
  align-items : center;
  text-align  : center;
  gap         : 24px;
}
.eyecatch-label {
  display   : inline-block;    /* ← 帯の長さを文字に合わせる */
  height    : 100%;
  margin-bottom: 32px;
  font-size : 14px;
  color     : #ffffff;
  background: rgba(0, 0, 0, 0.45); /* ← 半透明の帯 */
  letter-spacing: 0.25em;
  backdrop-filter: blur(2px);
}

main .comment1{
  padding     : 5px;
  width       : 100%;
  max-width   : 600px;
  font-size   : 35px;
  line-height : 1.3;
  letter-spacing: 0.08em;
  margin-top  : 0;
  color       : #ffffff;
  text-shadow : 0 1px 1px rgba(255, 255, 255, 0.3),
                0 2px 3px rgba(2,1,0,0.3);
  background-color: rgba(250, 213, 1, 0.4);
}
main .comment2{
  position    : relative;
  padding     : 5px;
  padding-left: 14px;
  margin-top  : 20px;
  font-size   : 30px;
  font-weight : bold;
  color       : #fff;
  background-color: rgba(250, 213, 1, 0.4);
  text-shadow : 0 2px 4px rgba(0,0,0,0.25);
}
main .comment2:hover {
  text-shadow : 0 3px 6px rgba(0,0,0,0.3);
}


/* フェードイン */
.main_visual .fade-item {
  opacity   : 0;
  transform : translateY(24px);
  transition: opacity 1.2s ease,
              transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.main_visual .fade-item.is-show {
  opacity   : 1;
  transform : translateY(0);
}
.main_visual .fade-item:nth-child(2) {
  transition-delay: 0.8s;
}
.main_visual .fade-item:nth-child(3) {
  transition-delay: 1.6s;
}


.sp-only { display: none; }

/* footerの電話番号が青く見えるのを防ぐ */
.phone a { color:#fff; }

@media (max-width: 768px) {
  /* Main Visual画面設定 */
  .main_visual {
    width      : 100%;
    height : 390px;

    background-image: url("../img/t-main.png");
    background-size: cover;
    background-position: bottoms;
    background-repeat: no-repeat;

    
    animation : zoomBg 20s ease-in-out infinite alternate;
  }
  .content{
    min-height : 100vh;
    width      : 100%;
    height     : 100%;
    background-color: #5fa4c4;
  }

  .main_visual .container {
    width       : 100%;
    height      : auto;
    max-width   : 1100px;
    margin      : 0 auto;
    padding     : 0 50px;

  }

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

  .main_visual .title_view {
    height : 100%;
    top : 0;
    position    : relative;
    text-align  : center ;
    z-index     : 1;
  }

  .catch-wrap {
    display   : flex;
    flex-direction: column;
    align-items: center;
    gap       : 36px;
  }
  .eyecatch-label {
    height : 100%;
    top : 10px;
    margin-bottom: 32px;
    font-size : 14px;
    color     : #ffffff;
    background: rgba(0, 0, 0, 0.45); /* ← 半透明の帯 */
    letter-spacing: 0.25em;
    backdrop-filter: blur(2px);
  }

  main .comment1{
    padding     : 5px;
    width       : 500px;
    font-size   : 18px;
    line-height : 1.3;
    letter-spacing: 10px;
    margin-top  : 0;
    color       : #ffffff;
    text-shadow : 0 1px 1px rgba(255, 255, 255, 0.3),
                  0 2px 3px rgba(2,1,0,0.3);
    background-color: rgba(250, 213, 1, 0.4);
    word-break: keep-all;
  }
  main .comment2{
    position    : relative;
    margin-top: 20px;
    font-size   : 22px;
    letter-spacing: 5px;
    font-weight : bold;
    color       : #fff;
    background-color: rgba(250, 213, 1, 0.4);
    text-shadow : 0 2px 4px rgba(0,0,0,0.25);
    word-break: keep-all;
  }
  main .comment2:hover {
    text-shadow : 0 3px 6px rgba(0,0,0,0.3);
  }
  /*section3 */
.section3 {
 padding: 5px;
 font-size: 17px;
 }
}

@media (max-width: 1024px) {
  .main_visual {
    min-height: 500px; /* タブレットは少し低く */
  }

  .catch-wrap {
  /*  gap: 16px;*/
  }
  .comment1 {
    font-size: 20px;
  }
  .comment2 {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  /* Main Visual画面設定 */
  .main_visual {
    width      : 100%;
    height : 300px;

    background-image: url("../img/t-main.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    animation : zoomBg 20s ease-in-out infinite alternate;
  }
  .content{
    min-height : 100vh;
    width      : 100%;
    height     : 100%;
    background-color: #5fa4c4;
  }

  .main_visual .container {
    width       : 100%;
    height      : auto;
    max-width   : 1100px;
    margin      : 0 auto;
    padding     : 0 50px;

  }

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

  .main_visual .title_view {
    height : 100%;
    top : 5px;
    position    : relative;
    text-align  : center ;
    z-index     : 1;
  }

  .catch-wrap {
    display   : flex;
    flex-direction: column;
    align-items: center;
    gap       : 36px;
  }
  .eyecatch-label {
    height : 100%;
    top : 50px;
    margin-bottom: 32px;
    font-size : 14px;
    color     : #ffffff;
    background: rgba(0, 0, 0, 0.45); /* ← 半透明の帯 */
    letter-spacing: 0.25em;
    backdrop-filter: blur(2px);
  }

  main .comment1{
    padding     : 5px;
    width       : 250px;
    font-size   : 15px;
    line-height : 1.3;
    letter-spacing: 0.08em;
    margin-top  : 0;
    color       : #ffffff;
    text-shadow : 0 1px 1px rgba(255, 255, 255, 0.3),
                  0 2px 3px rgba(2,1,0,0.3);
    background-color: rgba(250, 213, 1, 0.4);
    word-break: keep-all;
  }
  main .comment2{
    position    : relative;
    margin-top: 10px;
    font-size   : 20px;
    font-weight : bold;
    color       : #fff;
    background-color: rgba(250, 213, 1, 0.4);
    text-shadow : 0 2px 4px rgba(0,0,0,0.25);
    word-break: keep-all;
  }
  main .comment2:hover {
    text-shadow : 0 3px 6px rgba(0,0,0,0.3);
  }
}

@keyframes zoomBg {
  from { background-size: 100%; }
  to   { background-size: 110%; }
}


/*ヘッダーの指定*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  font-size : 15px;
  background: rgba(255, 255, 255, 0.0); /* 最初は透明 */
  transition: opacity 0.7s cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}
header .container {
    position: relative;
    max-width: none;
    width: 100%;
    margin: 0 auto;
    font-weight: 700;
    padding: 0 50 10px 50px;
}
header .row {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
header ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

header ul > * {
    display: flex;
    align-items: center;
}
header ul li {
    margin: 5px;
}
header ul li a {
  text-decoration: none;
  color          : #fdfeff;
}
header ul li a:hover {
  transition     : .2s;
}
header.is-solid {
  background: rgba(61, 59, 59, 0.5);
  backdrop-filter: blur(6px);
}


.link {
  position        : relative;
  align-items     : center;
  gap             : 5px;
  padding         : 10px 10px;
  transition      : color .15s;
}
.link:hover,
.link:focus {
  position        : relative;
  color           : rgb(97, 86, 86);
}

.link-hover::after {
  font-size       : 13px;
}
.nav-link {
  position: relative;
  text-decoration: none;
  color: #ffffff;
}

/* 下線 */
.nav-link::after {
  content: "";
  position: absolute;
  left    : 0;
  bottom  : -2px;
  width   : 100%;
  height  : 2px;
  background: currentColor;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0.05s;
}

/* hover時 */
.nav-link:hover::after {
  transform: scaleX(1);
}
ul {
  list-style: none;
}

/*ドロップダウンの指定*/
.dropDown {
  position        : absolute;
  width           : 110px;
  height          : 110px;
  bottom          : 0;
  padding         : 0;
  display         : none;
  background-color: #fff;
  box-shadow      : 0px 3px 8px -2px #777;
  transform       : translate(0%,100%);
  z-index         : 2;
}
.dropDown__item {
  width         : 100%;
}


.link:hover > .dropDown,
.link:focus > .dropDown {
  display         : block;
}

.dropDown__list {
  padding         : 10px;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
}

.dropDown__link {
  display         : inline-block;
  position        : relative;
  bottom          : -2px;
  padding         : 0;
  line-height     : 10px;
  color           : #28385E;
  transition      : color .15s;
  font-size       : 15px;
  margin          : 5px;
}
.dropDown__link:hover,
.dropDown__link:focus {
  color           : #516C8D;
}
.dropDown__link::after {
  content   : "";
  position  : absolute;
  left      : 0;
  bottom    : -4px;
  width     : 100%;
  height    : 2px;
  background: currentColor;
  transform : scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0.05s;
}
.dropDown__link:hover::after {
  transform: scaleX(1);
}










/*フッターの指定*/
footer {
  margin-top    : 150px; 
  font-size     : 11px;
}

footer .container {
  position      : relative;
  max-width     : none;
  width         : 100%;
  margin        : 0 auto;
  padding       : 0 50px 10px 50px;
/*  text-align    : right;*/
  background-color: #2e3136;
}
footer .row {
  width         : 100%;
  display       : flex;
  justify-content: space-between;
  align-items   : center;
  height        : auto;
  margin-top    : 20px;
}
footer ul {
  display       : flex;
  align-items   : center;
  padding       : 0;
  margin        : 0;
  justify-content: flex-end;
}

footer ul > * {
  display       : flex;
  align-items   : center;
}
footer ul li {
  font-size     : 11px;
  margin        : 5px;
}
footer ul li a {
  text-decoration : none;
  color         : white;
}
footer ul li a:hover,
footer ul li a:forcus {
  transition      : .2s;
  opacity         : 0.3;
}

footer .co1 .title_view {
  color           : #fff;
  background-color: #2e3136;
  margin      : 20px;
  height      : auto;   /*360px;*/
  overflow    : hidden;
  padding-bottom: 20px;
}


.Copyright {
  font-size       : 10px;
  padding         : 0 0 10px 0;
  color           : white;
  background-color: #2e3136;
}







/*スマホ対応*/

@media (max-width:768px) {
  header .row {
    flex-wrap: wrap;
    height: auto;
  }

  header .logo {
    width: 100%;
    text-align   : left;   /* or center */
    margin-bottom: 6px;
    margin       : 5px;
  }

  header ul {
    width: 100%;
    justify-content: flex-start;
  }

  header .nav-link {
    padding   : 0 5px 0 0;
    z-index : 3;
  }


  footer .container {
    padding   : 5px;
    margin-top: 5px;
    text-align: left;
  }
  footer ul li {
    margin: 2px 4px;   /* ← 縦 横 */
  }
  footer .row {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom   : 10px;
  }

  footer ul {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  footer .co1 {
    margin-left: auto;
    text-align: right;
  }
}



@media (max-width:480px) {

  header .nav-link {
    padding   : 0 5px 0 0;
    z-index : 3;
  }
}