/*Oswaldの読み込み
---------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");

/*以下追記CSS
---------------------------------------------------------------------------*/
/* p {
    font-size: larger;
} */

h1,
h2 {
    font-family: "Oswald", sans-serif;
}

.title-font {
    font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}

.top-font {
    font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    font-size: 8vw;
}

@media screen and (max-width:600px) {
	.top-font {
        font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
        font-size: 50px;
    }
}

.btn {
    border-radius: 290px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: transparent;
    border: 2px solid #f0f0f0;
}

.logo img {
    display: block;
}

.logo {
    padding-left: 1vw;
    top: 5vh;
    width: 150px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

body #container header {
    z-index: 5;
    border-bottom: 1px solid black;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.8);
    /* 白色で80%の不透明度 */
}

#svg-box video {
    height: 90vh;
    object-fit: cover;
    border-radius: 60px;
}

.top-svg {
    position: absolute;
    width: 20vw;
    left: -7vw;
    top: 3vw;
    z-index: 1;
}
@media screen and (max-width:600px) {
    .top-svg {
        position: absolute;
        width: 50vw;
        left: -6vw;
        top: -10vw;
        z-index: 1;
    }
}

.text-overlay {
    position: absolute;
    top: 15vh;
    left: 20vw;
    transform: translate(-25%, 10%);
    color: black;
    text-align: left;
    font-family: Arial, sans-serif;
    background-color: rgba(255, 255, 255, 0);
    padding: 0px;
    margin: 0px;
    border-radius: 10px;
    width: 70vw;
    font-size: 2vw;
    line-height: 1.3;
}

.text-overlay h1,
.text-overlay h2 {
    margin: 5px;
}

#company-info {
    color: white;
    background-color: #333;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}

#company-info h2 {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 20px;
}

.company-details {
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.company-details ul {
    margin-left: 20px;
    list-style-type: disc;
}

.company-details ul li {
    margin: 5px 0;
}

.text-right {
    text-align: right;
}

ul.font-header li a {
    font-family: "";
    /* font-weight: bold; */
    opacity: 1;
    line-height: 1.2;
    text-align: center;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.startAnimation {
    position: fixed;
    width: 101vw;
    height: 101vh;
    background-color: rgb(255, 255, 255);
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300;
}

.startAnimation video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.startAnimation div {
    z-index: 9999;
}

body.no-scroll {
    overflow: hidden;
}

.fadedown {
    opacity: 0;
    animation: fadedown 3s cubic-bezier(0.33, 1, 0.68, 1) 8s forwards;
}

@keyframes fadedown {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.mask-bg {
    color: transparent;
    display: inline-block;
    font-weight: bold;
    overflow: hidden;
    position: relative;
    transition: color 0ms 9s;
    visibility: hidden;
}

.mask-bg::after {
    background: linear-gradient(to right, #000000 0%, #333333 50%, #666666 100%);
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-100%, 0);
    visibility: visible;
}

.mask-bg.is-animated {
    color: #000000;
}

.mask-bg.is-animated::after {
    animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1) 0s forwards;
}

@keyframes mask-bg {
    0% {
        transform: translate(-101%, 0);
    }

    40%,
    60% {
        transform: translate(0%, 0);
    }

    100% {
        transform: translate(101%, 0);
    }
}

@media screen and (max-width:600px) {

    .logo {
        top: 0;
        width: 15vh;
    }

    .text-overlay {
        position: absolute;
        top: 40vh;
        left: 30vw;
        width: 250px;
        transform: translate(-50%, -50%);
        color: black;
        text-align: left;
        font-family: Arial, sans-serif;
        background-color: rgba(255, 255, 255, 0);
        padding: 10px;
        border-radius: 15px;
        font-size: 20px;
        line-height: 1.2;
    }

    .text-overlay h1 {
        width: 390px;
    }

    #svg-box video {
        height: calc(100vh - 60px);
        object-fit: cover;
        border-radius: 60px;
    }
}


@media screen and (min-width:500px) {
    .top-video {
        height: 90vh;
    }
    .startAnimation video {
        width: 25%;
        height: 25%;
        object-fit: contain;
    }
}

@media screen and (max-width:600px) {
    .startAnimation video {
        width: 35%;
        height: 35%;
        object-fit: contain;
    }
}

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

    #menubar_hdr {
        display: none;
    }

}

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

    .top-svg {
        position: absolute;
        width: 10vw;
        left: -2vw;
        top: 1vw;
        z-index: 1;
    }
}

/* ===文章のslide=== */
.scroll-infinity {
    opacity: 0.1;
    margin: 0;
    padding: 0;
    height: 5vh;
    overflow: visible;
}

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.scroll-infinity__wrap {
    display: flex;
    position: relative;
    /* overflow: hidden; */
    /* left: 0; */
    overflow: visible;
}

.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0;
}

.scroll-infinity__list--left {
    animation: infinity-scroll-left 15s infinite linear 0.5s both;
}

.scroll-infinity__item {
    width: 270vw;
    z-index: -1;
}

.scroll-infinity__item img {
    width: 100%;
    transform: translateY(-25vh);

}

@media screen and (max-width: 1700px) {
    .scroll-infinity__item img {
        transform: translateY(-20vh);
    }
}

@media screen and (max-width: 1500px) {
    .scroll-infinity__item img {
        transform: translateY(-15vh);
    }
}

@media screen and (max-width: 1200px) {
    .scroll-infinity__item img {
        transform: translateY(-10vh);
    }
}

@media screen and (max-width: 1000px) {
    .scroll-infinity__item img {
        transform: translateY(-5vh);
    }
}

@media screen and (max-width: 768px) {
    .scroll-infinity__item img {
        transform: translateY(-2vh);
    }
}


/* ===背景動画=== */
.back-ground {
    z-index: -1;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: white;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    /* opacity: 0.5; */
    /* opacity: 0.1; */
    /* opacity: 0; */
}

.text-color_gray {
    color: #7a7a7a;
    font-size: 10px;
}
.header-title{
    display: block;
}

#koe,
#news {
    background: rgb(255, 255, 255, 0.5);
}

.img-wrapper {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.img-wrapper img {
    object-fit: cover;
}

.circle {
    border-radius: 50%;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-width: 0;
    aspect-ratio: 1/1;
}

.iframe-box h2 {
    margin-bottom: 10px;
}

.iframe-text {
    width: 100% !important;
    position: absolute;
    top: 5vw;
    left: 0px;
    width: 30%;
    padding-left: 5vw;
    padding-right: 10px;
    display: block;
    font-size: 0.9rem;

}

@media screen and (max-width: 900px) {
  .iframe-box {
    flex-direction: column;  /* 上下レイアウトに */
    align-items: flex-start !important;  /* 子要素を上詰め */
    overflow: visible !important;   
  }

    .iframe-text div {
    white-space: normal !important;
    word-break: break-word !important;
  }
}

@media screen and (max-width: 800px) {
    .iframe-text h2 {
    font-size: 30px;
    }
     .iframe-text {
    font-size: 13px;
}  
}

@media screen and (max-width: 750px) {
    .iframe-text h2 {
    font-size: 20px;
    }
     .iframe-text {
    font-size: 9px;
}  
}

@media screen and (max-width: 480px) {
    .iframe-text h2 {
    font-size: 15px;
    }
     .iframe-text {
    font-size: 12px;
}  
}

.list-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto;
    text-align: center;
}

.gradation {
    background: linear-gradient(30deg, #000000, #000000, #9c9c9c, #000000, #000000);
}

.bg-clip {
    background-clip: text;
    color: transparent;
}

@keyframes move-background {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.overflow-hidden {
    overflow: hidden;
}

/* .zoom{
    overflow:hidden;
} */

.zoom img {
    transition: 1s all;
}

.zoom img:hover {
    transform: scale(1.2, 1.2);
    transition: 1s all;
}



.bg_fixed1 {
    background-image: url('../images/list1.jpeg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 3;
    position: relative;
    overflow: visible;
    height: auto;
    min-height: 1000px;
    padding-top: 100px;
    padding-bottom: 100px;
}

@media screen and (max-width: 1400px) {
    .bg_fixed1 {
    min-height: 900px;
  }
}

@media screen and (max-width: 1200px) {
    .bg_fixed1 {
    min-height: 600px;
  }
}
@media screen and (max-width: 600px) {
    .bg_fixed1 {
    padding-top: 20px;
    min-height: 0px;
  }
}

.bg_fixed2 {
    background-image: url('../images/list2.jpeg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
    position: relative;
    overflow: visible;
    height: auto;
    min-height: 1200px;
    padding-top: 100px;
    padding-bottom: 100px;
}

@media screen and (max-width: 1400px) {
    .bg_fixed2 {
    min-height: 900px;
  }
}

@media screen and (max-width: 1200px) {
    .bg_fixed2 {
    min-height: 800px;
  }
}

@media screen and (max-width: 600px) {
    .bg_fixed2 {
    padding-top: 20px;
    min-height: 0px;
  }
}

.bg_fixed3 {
    background-image: url('../images/list3.jpeg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
    position: relative;
    overflow: visible;
    height: auto;
    min-height: 1200px;
    padding-top: 100px;
    padding-bottom: 100px;
}

@media screen and (max-width: 1400px) {
    .bg_fixed3 {
    min-height: 900px;
  }
}

@media screen and (max-width: 1200px) {
    .bg_fixed3 {
    min-height: 800px;
  }
}
@media screen and (max-width: 600px) {
    .bg_fixed3 {
    padding-top: 20px;
    min-height: 0px;
  }
}

.bg_fixed1::after,
    .bg_fixed3::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
    }

    .bg_fixed2::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
    }

@media screen and (max-width:600px) {

    .bg_fixed1,
    .bg_fixed2,
    .bg_fixed3 {
        height: auto;
        background-attachment: initial;
    }

    .bg_fixed1::after,
    .bg_fixed3::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
    }

    .bg_fixed2::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
    }

}

.scroll {
    height: 10vh;
    background-color: rgba(255, 255, 255, 0.8);
    /* z-index: 2; */
}
@media screen and (max-width:600px) {
    .scroll {
    height: 10vh;
    background-color: rgba(255, 255, 255, 0.8);
    }
}

/* ＝＝＝以下モーダル表示用＝＝＝ */
.modal {
    display: none;
    /* 初期状態では非表示 */
    position: fixed;
    z-index: 102;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* 背景のぼかし */
    overflow-y: auto;
    max-height: 100vh;
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 25px;
    /* cursor: pointer; */
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    /* cursor: pointer; */
}

/* ＝＝＝モーダル表示用END＝＝＝ */

#brand {
    overflow: hidden;
}

.deco-text2 {
    margin: 0;
    transform: translateY(1vw);
    color: #5E5C5A;
    /*文字色*/
    font-size: 7vw;
    /*下の.boxのmargin-topと合わせる*/
    line-height: 1;
}

@media screen and (min-width:600px) {
    .max-width_none {
        display: none;
    }
}

.pt-5{
    padding-top: 5px;
}
.pl-50{
    padding-left: 50px;
}
@media screen and (max-width:600px) {
    .pl-50 {
        padding-left: 0px;
    }
}

/* スマホ版のみ経営理念の位置調節するためのクラス */
.sp-pt{
    padding-top: 0px;
}
/* スマホ版のみ経営理念の位置調節するためのクラス */
@media screen and (max-width:600px) {
    .sp-pt{
        padding-top: 40px;
    }
}
.pt-20{
    padding-top: 20px;
}
.line-bottom{
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.pb-3rem{
    padding-bottom: 3rem;	/*下に空ける余白*/
}
.font-header li{
	line-height: 1;
    flex: 1;
    min-width: 95px;
}

@media screen and (max-width:1300px) {
    .font-header li{
        min-width: 85px;
    }
}
@media screen and (max-width:1100px) {
    .font-header li{
        min-width: 70px;
    }
}

.text h4{
	line-height: 1.2;
}

section{
    padding-top: 70px;
}

section #kodawari .box{
    padding: 0;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  row-gap: 12px;
}

.label {
  font-weight: 600;
  text-align: center;
}

.value ul {
  margin: 0;
  padding-left: 1.2em;
}

.info-grid div{
    margin: 5px 0;
    font-size: 0.9rem;
}

.value a{
    font-size: 0.7rem;
}