/*メインカラー*/
:root {
  --main-color: #ff0063;
  --light-color:#fdedf3;
  --fs-36:36px;
  --fs-24:24px;
  --fs-18:18px;
}
.main-color{
    background: var(--main-color);
}
.main_fc{
    color: var(--main-color);
}
.fc_red {
    color: var(--main-color);
}
section{margin: 0;padding: 0;}

.fade-in-left {
  opacity: 0; /* 初期状態では透明 */
  transform: translateX(-300px); /* 左にオフセット */
  animation: fadeInLeft 1.5s ease-out forwards; /* アニメーションを適用 */
}

/* アニメーションの定義 */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-300px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*サブカラー*/


/*トラッキングバナー*/
.track_bnr {
    position: fixed;
    right: 20px;
    bottom: 20px;
    border: 4px solid #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 4px rgba(0, 0, 0, 0.1);
}


/* FV */
.fv {
  display: flex;
  justify-content: flex-start;
  background: var(--light-color);
  text-align: left;
  position: relative;
  padding-bottom: 60px;
  overflow: hidden;
}
.fv_catch {
  position: absolute;
  left: 5vw;
  z-index: 2;
  bottom: -0;
}
.fv_catch_img {
  width: 26vw;
}
h1.fv_catch_txt {
  font-size: 5vw;
  line-height: 2;
}
h1.fv_catch_txt span {
  background: #fff;
  padding: 0.2em;
}

/* 
FV slide */

/* FV slide */
.slideshow {
  display: flex;
  animation: slide 20s linear infinite; /* スライドアニメーション (速度調整) */
  padding: 0;
  margin: 0;
}

.slideshow li {
  flex: 0 0 50%; /* アイテムの横幅を50%に調整（適宜調整可能） */
  list-style: none;
  margin-right: 2%; /* 右側に2%の余白 */
}

.slideshow li img {
  width: 100%; /* 画像がアイテムに合わせて表示される */
    border-radius: 40px;
}
.slideshow li:nth-child(even) {
  margin-top: 40px; /* 偶数番目に上の余白を追加 */
}

/* スライドアニメーション */
@keyframes slide {
  0% {
    transform: translateX(0); /* 最初は最初の位置 */
  }
  25% {
    transform: translateX(-25%); /* 1番目のアイテムが左に移動 */
  }
  50% {
    transform: translateX(-50%); /* 2番目のアイテムが左に移動 */
  }
  75% {
    transform: translateX(-75%); /* 3番目のアイテムが左に移動 */
  }
  100% {
    transform: translateX(-100%); /* 4番目のアイテムが左に移動し、最初のアイテムに戻る */
  }
}
@media (max-width: 768px) {
  .fv {
    flex-direction: column-reverse;
    padding-bottom: 0;
    overflow: hidden;
}

  .fv_catch {
    position: relative;
    top: -8vh;
    margin-bottom: -8vh;
}
.fv_catch_img {
  width: 50vw;
}
h1.fv_catch_txt {
  font-size: 8vw;
  text-align: center;
  line-height: 1.6;
}

  .slideshow {
    width: 100%; /* スライドショー幅を100%に調整 */
  }

  .slideshow li {
    flex: 0 0 70%; /* スライドショーアイテムを100%の幅に */
    margin-top: 2vh; /* 偶数番目に上の余白を追加 */
  }
}
/* 
service */
.service_list {
  display: flex;
  flex-wrap: nowrap; /* 必要に応じてwrapに変更可 */
  gap: 20px; /* 要素間のスペースを設定（任意） */
}
.service_box h3 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 1em;
}
.service_box h3 span {
    text-align: center;
    color: #333;
    font-size: 18px;
    display: block;
}
.service_img {
    border-radius: 20px;
    overflow: hidden;
}
.service_txt {
    margin: 1em 0;
    text-align: center;
}
.service_txt p{
    font-size: var(--fs-18);
}
.service_txt .material-icons {
  font-size: 1em; /* テキストと同じ大きさにする */
  vertical-align: middle; /* テキストと縦位置を揃える */
  margin-right: 1em; /* テキストとの間に少し余白 */
}
.service_btn a {
    background: var(--main-color);
    border:solid 4px var(--main-color);
    font-size: var(--fs-24);
    padding: 0.5em 2em;
    border-radius: 1em;
    text-align: center;
    display: table;
    color: #fff;
    margin: 1em auto 0;
}
.service_btn a:hover{
    background: #fff;
    color: var(--main-color);
    transition: 0.4s;
}

/*news*/
#news table {
    display: table;
    margin: 0 auto;
    font-size: 1.2em;
}
#news table th ,
#news table td{
    font-weight: normal;
    border-bottom: dotted 1px #ccc;
}
#news table th{
    padding-right: 2em;
}
#news table td {
    padding: 0.5em;
}
#news span.cat a {
    background: #2b3357;
    color: #fff;
    display: inline-block;
    font-size: 0.6em;
    padding: 0.2em 1em;
    margin-left: 1em;
    border-radius: 10px;
}

/*company*/
#company{background: var(--light-color);}
#company table {
    margin: 0 auto;
    font-size: 1.4em;
}
#company table th {
    text-align: right;
    padding: 1em 3em 1em 0em;
    font-weight: normal;
    border-bottom: 1px solid #000;
    font-size: 18px;
}
#company table td{
    text-align: left;
    padding: 1em 0;
    border-bottom: 1px solid #000;
    font-size: 18px;
}
.map {
    margin-top: 80px;
}

.map ul li p {
    background: #000;
    color: #fff;
    text-align: center;
    margin: 1em 0;
}

/*contact*/
#contact{
    background: #fff;
}


section#contact table {
    margin: 0 auto;
}
section#contact table th {
    font-size: 1.4em;
    font-weight: normal;
    text-align: right;
    padding: 0 2em 0 0;
}
section#contact table td {
    padding: 0.6em 0;
}
section#contact input[type="text"] ,
section#contact input[type="url"],
section#contact input[type="email"],
section#contact input[type="tel"]{
    font-size: 1em;
    padding: 0.5em 1em;
    border-radius: 10px;
    border: 1px solid #ccc;
    min-width: 250px;
    background: #fff;
}
section#contact select {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 0.5em;
}
section#contact textarea {
    padding: 0.5em 1em;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 1.2em;
    line-height: 1.5;
    font-weight: normal;
    min-width: 400px;
    background: #fff;
}
section#contact input[type="submit"] {
    background: #d42323;
    border:4px solid #d42323;
    color: #fff;
    text-align: center;
    padding: 0.5em 3em;
    border-radius: 30px;
    font-size: 1.4em;
    display: table;
    margin: 4vh auto;
}
section#contact input[type="submit"]:hover{
    background: #fff;
    color: #d42323;
    cursor: pointer;
    transition: 0.4s;
}
section#contact span.icon_req {
    margin-left: 1em;
    font-size: 0.8em;
    padding: 0.1em 0.5em;
    background: red;
    color: #fff;
    border-radius: 10px;
}
span.required {
    font-size: 0.6em;
    background: red;
    color: #fff;
    padding: 0.5em 1em;
    border-radius: 20px;
    margin-left: 1em;
}

@media (max-width: 1600px) {
.fv{
background-size: 200%;}

.fv {
    position: relative; /* .fv_txt_bg の絶対位置指定をサポート */
    width: 100%; /* 親要素に合わせてフル幅 */
}
}
@media (max-width: 1000px) {

section#contact textarea {
    min-width: auto;
}
.service_txt {
    width: 100%;
    float: none;
}
.service_img {
    width: 100%;
    float: none;
    text-align: center;
    margin-top: 4vh;
}
section#contact input[type="text"], section#contact input[type="url"], section#contact input[type="email"], section#contact input[type="tel"]{
    min-width: auto;
}


}

@media (max-width: 750px) {

/*company*/
#company table {
    font-size: 1em;
    width: 100%;
}
#company table td, #company table th {
    display: block;
    text-align: left;
}
#company table th {
    border-bottom: none;
    padding: 0;
    background: #ccc;
    color: #000;
    padding: 0.5em 1em;
    font-weight: bold;
    font-size: 4vw;
}
#company table td {
    border-bottom: none;
    padding: 1em;
    font-size: 14px;
}
.map {
    margin-top: 4vh;
}
.map ul {
    display: block;
}
.map ul li {
    display: block;
    padding: 0;
}
.map ul li p {
    background: #000;
    color: #fff;
    text-align: center;
    margin: 0 0 2em;
}
.map iframe {
    height: 30vh;
}

/*contact*/
section#contact table {
    margin: 0 auto;
    max-width: 74vw;
}
section#contact table th, 
section#contact table td {
    display: block;
}
section#contact table th{
    text-align: left;
    padding: 0;
    font-size: 1rem;
}
section#contact input{
    min-width: auto;
    max-width: 74vw;
}
section#contact textarea {
    max-width: 74vw;
} 

}