@charset "UTF-8";

/* 共有のスタイル（header、nav、page_title、footer） */
body {
    font-family: "hiragino-mincho-pron", "Noto Serif", serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    padding-top: 50px;
    background-color: #ffffff;
    width: 100%;
}

h1,
h2 {
    font-family: "toppan-bunkyu-midashi-min-st", "Noto Serif", serif;
}

p {
    font-size: 16px;
    line-height: 28px;
}

.wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* TOPのリンクテキスト文字色調整 */
a {
    color: #000;
    text-decoration: none;
}

.a-link-text {
    color: #000;
    text-decoration: none;
}

.a-top-results {
    color: #ffffff;
    text-decoration: none;
}

/* navigation */
.logo {
    margin: 0 10px;
}

.logo img {
	width: 70px;
	height: 60px;
}

.text-black {
    color: #000;
}

.nav-item-top {
    position: relative;
    padding-bottom: 3px;
    border-bottom: 1px solid #ccc;
}

.custom-navlink-top {
    display: flex;
    flex-direction: column;
    align-items: left;
    text-decoration: none;
    padding: 5px 0;
}

.nav-subtext {
    font-size: 0.6rem;
    color: #49B472;
    margin-top: 2px;
}

.padding_nav {
    padding: 20px 35px;
}
.navbar {
    max-width: 100%;
}
.navbar-light .navbar-nav .nav-link {
    color: #000;
}

/* hamburger menu */
.bg-nav {
    background-color: #F4F4F4;
    align-items: flex-start;
}

.bg-nav [aria-expanded="true"]~.navbar-collapse {
    height: 100vh;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.custom-toggler {
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
}

.menu-text {
    font-size: 12px;
    color: #000;
    width: 100%;
    text-align: center;
}

/* hamburger通常時のスタイル */
.menu-text::after {
    content: "MENU";
}

/* hamburgerが開いたときのスタイル */
.navbar-toggler[aria-expanded="true"] .menu-text::after {
    content: "CLOSE";
}

.navbar-light .navbar-toggler:not([aria-expanded="true"]) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2349B472' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-light .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M6 6L 24 24M24 6L6 24'/%3E%3C/svg%3E");
    margin: 7px 0 -6px 9px;
}

.close-icon {
    display: none;
    font-size: 20px;
    /* サイズを小さくする */
    color: #49B472;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* footer */
.footer {
    background-color: #49B472;
    padding: 20px 5px 0 10px;
}

.footer .logo img {
    margin: 10px 0 15px 0;
}

.custom-nav {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.custom-nav-item {
    margin: 2px 5px;
}

.custom-nav-item a {
    color: #ffffff;
    text-decoration: none;
}

.footer-bottom {
    background-color: #49B472;
    padding: 10px 0;
}

.main-visual {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.main-visual img {
    width: 100%;
    height: 315px;
    object-fit: cover;
}

.main-visual-top {
    overflow: hidden;
}

.main-visual-top img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 375 / 534;
    height: auto;
}

/* 各ページタイトル */
.title {
    margin: 50px 0 0 10px;
    padding-top: 10px;
}

.main-text {
    margin-top: 10px;
    font-size: 16px;
}

/* 各ページタイトル下の緑文字 */
.text-main-color {
    color: #49B472;
}

/* 各ページ緑の正方形用共通スタイル */
.bg1 {
    background-color: #49B472;
    padding: 50px 10px !important;
}

.bg2 {
    background-color: #47D97E;
    padding: 50px 10px !important;
}

/* company,contactの横並び部分のスタイル */
.bg-green-box {
    width: 100%;
    height: 450px;
    background-color: #47D87E;
    z-index: 2;
}

.bg-green-box2 {
    width: 100%;
    height: 450px;
    background-color: #83E0A6;
    z-index: 2;
}

.bg-white-box {
    width: 290px;
    height: 70%;
    background-color: #ffffff;
    z-index: 3;
}

.custom-back-to-top {
    display: none;
}

.company_text, .contact_text {
    font-family: "toppan-bunkyu-midashi-min-st", "Noto Serif", serif;
}

/* アニメーション */
/* 緑背景 */
.img-wrap {
    opacity: 0;
}

.img-animation {
    animation: img-opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    overflow: hidden;
    position: relative;
}

.img-animation::before {
    animation: img-animation 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    background: #fff;
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

@keyframes img-opacity {
    100% {
        opacity: 1;
    }
}

@keyframes img-animation {
    100% {
        transform: translateX(100%);
    }
}

/* company,contact アニメーション */
.img-wrap2 {
    opacity: 0;
}

.img-animation2 {
    animation: img-opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    overflow: hidden;
    position: relative;
}

.img-animation2::before {
    animation: img-animation 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    background: #F4F4F4;
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

@keyframes img-opacity {
    100% {
        opacity: 1;
    }
}

@keyframes img-animation2 {
    100% {
        transform: translateX(100%);
    }
}

/* テキストフェードアップ */
.animation_box {
    opacity: 0;
    transform: translateY(20px);
    transition: 1s ease;
  }
  

/* 560px以上のスタイル */
@media screen and (min-width: 561px) {
    body {
        font-family: "hiragino-mincho-pron", "Noto Serif", serif;
        font-size: 16px;
        margin: 0;
        padding: 0;
        background-color: #ffffff;
    }

    .pc-mt-10 {
        margin-top: 10px;
    }

    .pc-mt-20 {
        margin-top: 20px;
    }

    .pc-mt-30 {
        margin-top: 30px;
    }

    .pc-mt-40 {
        margin-top: 40px;
    }

    .pc-mt-50 {
        margin-top: 50px;
    }

    .pc-mt-60 {
        margin-top: 60px;
    }

    .pc-mt-70 {
        margin-top: 70px;
    }

    .pc-mt-80 {
        margin-top: 80px;
    }

    .pc-mt-90 {
        margin-top: 90px;
    }

    .pc-mt-100 {
        margin-top: 100px;
    }

    .pc-mb-10 {
        margin-bottom: 10px;
    }

    .pc-mb-20 {
        margin-bottom: 20px;
    }

    .pc-mb-30 {
        margin-bottom: 30px;
    }

    .pc-mb-40 {
        margin-bottom: 40px;
    }

    .pc-mb-50 {
        margin-bottom: 50px;
    }

    .pc-mb-60 {
        margin-bottom: 60px;
    }

    .pc-mb-70 {
        margin-bottom: 70px;
    }

    .pc-mb-80 {
        margin-bottom: 80px;
    }

    .pc-mb-90 {
        margin-bottom: 90px;
    }

    .pc-mb-100 {
        margin-bottom: 100px;
    }

    .pc-my-10 {
        margin: 10px 0;
    }

    .pc-my-20 {
        margin: 20px 0;
    }

    .pc-my-30 {
        margin: 30px 0;
    }

    .pc-my-40 {
        margin: 40px 0;
    }

    .pc-my-50 {
        margin: 50px 0;
    }

    .pc-my-60 {
        margin: 60px 0;
    }

    .pc-my-70 {
        margin: 70px 0;
    }

    .pc-my-80 {
        margin: 80px 0;
    }

    .pc-my-90 {
        margin: 90px 0;
    }

    .logo {
        margin: 0 20px;
    }
	
	.logo img {
		width: 105px;
		height: 90px;
	}

    /* navigation */
    .bg-nav {
        background-color: #F4F4F4;
        height: auto;
    }

    .custom-navlink-top {
        color: #000000 !important;
        font-weight: bold;
    }

    .custom-navlink-top:hover {
        opacity: 0.5;
    }

    header {
        margin-bottom: 75px;
    }

    .custom-nav {
        flex-direction: column;
    }

    .custom-nav-item {
        margin: 5px 0;
    }

    .main-visual-top {
        height: calc(100vh - 75px); /* 修正: 高さを計算式で指定 */
        overflow: hidden;
    }

    .main-visual-top img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
    } 

    .main-visual {
        width: 100%;
        height: auto;
        overflow: hidden;
        position: relative;
        margin-top: 30px;
    }

    .main-visual img {
        width: 100%;
        height: 350px;
        object-fit: cover;
    }

    /* 各ページタイトル */
    .title {
        margin-left: 80px;
        padding-top: 50px;
    }

    .main-text {
        font-size: 16px;
    }

    /* footer */
    .nav-footer {
        display: flex;
        justify-content: right;
    }

    .custom-nav {
        flex-direction: column;
    }

    .custom-nav-item {
        margin: 5px 0;
    }

    /* company,contact */
    .background-container {
        width: 100%;
        background-color: #F4F4F4;
    }

    .bg-green-box {
        width: 100%;
        height: 450px;
        background-color: #47D87E;
        z-index: 2;
    }

    .bg-green-box2 {
        width: 100%;
        height: 450px;
        background-color: #83E0A6;
        z-index: 2;
    }

    .bg-white-box {
        width: 290px;
        height: 70%;
        background-color: #ffffff;
        z-index: 3;
    }

    /* topへ戻る */
    .custom-back-to-top {
        display: block;
    }

    .back-to-top {
        display: none;
        position: fixed;
        right: 1%;
        bottom: 9%;
        color: #fff;
        padding: 2rem;
        text-decoration: none;
    }

    .back-to-top::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: #47DA7D;
        z-index: -1;
    }
}

/* 320以下でのみ適用のスタイル */
@media screen and (max-width: 320px) {
    .sp-wrapper {
        padding: 0 10px;
    }

    .sp-p0 {
        padding: 0;
    }
}

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

    /* navigation */
    .nav-subtext {
        display: none;
    }

    .nav-item-top {
        border-bottom: none;
    }

    /* ナビゲーションの緑下線 */
    .active {
        border-bottom: 1px solid #67b278;
    }

    .active a {
        color: #49B472 !important;
    }

    .custom-navlink-top {
        font-weight: initial;
    }

    /* topのmv */
    .main-visual-top {
        height: calc(100vh - 73px);
        overflow: hidden;
    }

    .main-visual-top img {
        height: 100vh;
        object-fit: cover;
    }

    /* top以外のmv */
    .main-visual {
        width: 100%;
        height: 350px;
        overflow: hidden;
        position: relative;
    }

    .main-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media screen and (min-width: 768px) {
    .nav-subtext {
        display: none;
    }

    .nav-item-top {
        border-bottom: none;
    }

    .active {
        border-bottom: 1px solid #67b278;
    }

    .active a {
        color: #49B472 !important;
    }
}

@media screen and (min-width: 992px) {
    /* top以外のmv */
    .main-visual {
        width: 100%;
        height: 600px;
        overflow: hidden;
        position: relative;
    }

    .main-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .active {
        border-bottom: 1px solid #67b278;
    }

    .active a {
        color: #49B472 !important;
    }
}