@charset "UTF-8";
/* -------- webフォント コード一覧

Noto Sans JP ----------------------
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;

Noto Serif JP ----------------------
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

Poppins ----------------------
font-family: "Poppins", sans-serif;
font-weight: 100;
font-style: normal;

*/

/*--------------------    デフォルトスタイル    --------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:1.6rem;
	vertical-align:baseline;
	background:transparent;
}
html {
	font-size: 62.5%;
}
body, table, input, textarea, select, option {
    font-family: "Noto Sans JP", sans-serif;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}
ul {
	list-style:none;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
a {
	margin:0;
	padding:0;
	font-size:100%;
	color: #000;
	vertical-align:baseline;
	background:transparent;
	text-decoration: none;
    transition: all .3s;
}
ins {
	text-decoration:none;
}
del {
	text-decoration: line-through;
}
mark {
	background-color:#ff9;
	color:#171717;
	font-weight:bold;
}
img {
	vertical-align: top;
	max-width: 100%;
	height: auto;
}
abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}
input, select {
	vertical-align:middle;
}
input[type="submit"] {
	-webkit-appearance: none;
	border-radius: 0;
}

/*------------------------------------------------------------
    レイアウト
------------------------------------------------------------*/
body {
	position: relative;
	color: #000;
    font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size: 1.6rem;
    font-feature-settings: "palt";
	line-height: 1;
    letter-spacing: 0.05rem;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	background-color: #fff;
	box-sizing: border-box;
    padding-top: 115px;
}

a[href^="tel:"] {
	cursor: default;
	pointer-events: none;
}

@media all and (min-width: 835px) {
	.sp {
		display: none !important;
	}
}
@media all and (max-width: 834px) {
	body {
		min-width: inherit;
        padding-top: 73px;
	}
	body.open {
		overflow: hidden;
	}
	a:hover,
	a:hover img {
		opacity: 1 !important;
	}
	.pc {
		display: none !important;
	}
	a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}
}


/*------------------------------------------------------------
    共通
------------------------------------------------------------*/
:root {
    --title-deco-width: 183px;/* タイトル 筆 装飾 幅 */
    --title-deco-height: 48px;/* タイトル 筆 装飾 高さ */
}
@media all and (max-width: 834px) {
    :root {
        --title-deco-width: 147px;/* タイトル 筆 装飾 幅 */
        --title-deco-height: 38px;/* タイトル 筆 装飾 高さ */
    }
}


/*----- 共通 */
/*body.body-bg:before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: url(../img/common/body-bg-1.png) no-repeat top 50% left 50%;
    background-size: 205% 205%;
    transform: translate(-50%, -50%);
    z-index: -3;
}*/

/**/

#bg-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
    z-index: -3;
}

.bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
background-size: 100%;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
    mix-blend-mode: multiply;
}

.bg-slide.active {
  opacity: 1;
}
.slide-1 {
    background-position: -560px -560px;
    background-repeat: no-repeat;
}
.slide-2 {
    background-position: 300px -300px;
    background-repeat: no-repeat;
}
.slide-3 {
    background-position: -250px 250px;
    background-repeat: no-repeat;
}
.slide-4 {
    background-position: 300px 300px;
    background-repeat: no-repeat;
}

@media all and (max-width: 834px) {
    .bg-slide {
        width: 145%;
        background-size: 140%;
    }

    .slide-1 {
        background-position: -110vw -41vh;
    }
    .slide-2 {
        background-position: 6vw -13vh;
    }
    .slide-3 {
        background-position: -95vw 32vh;
    }
    .slide-4 {
        background-position: -2vw 38vh;
    }
}


/**/

main#main {
    overflow: hidden;
}

.pTxt {
    font-size:1.6rem;
    font-weight:400;
    text-align:justify;
    line-height:1.8;
}
.flexBox {
    display:flex;
}
li a:hover, p a:hover {
    opacity:0.6;
}

.headline01 {
    position: relative;
    padding-bottom: calc(2px + var(--title-deco-height));
    text-align: center;
    line-height: 1;
}
.headline01:before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    background: url("../img/common/title-deco.svg")no-repeat top left;
    background-size: 100%;
    width: var(--title-deco-width);
    height: var(--title-deco-height);
    transform: translateX(-50%)rotate(2deg);
}
.headline01 .txt {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
}
.headline01 .color {
    color: #0a6e3c;
    font-size: 3rem;
}
.headline01 .en {
    font-family: "Poppins", sans-serif;
    font-size: 4.4rem;
    font-weight: 600;
    line-height: 1;
}

.headline02 {
    position: relative;
    padding-top: calc(2px + var(--title-deco-height));
    text-align: center;
    line-height: 1;
}
.headline02:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    background: url("../img/common/title-deco.svg")no-repeat top left;
    background-size: 100%;
    width: var(--title-deco-width);
    height: var(--title-deco-height);
    transform: translateX(-50%);
}
.headline02 .txt {
    display: inline-block;
    font-size: 3rem;
    font-weight: 600;
    text-align: left;
    line-height: 1.2;
}
.headline02 .color {
    color: #0a6e3c;
    font-size: 3rem;
}
.headline02 .en {
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-size: 4.4rem;
    font-weight: 600;
    text-align: left;
    line-height: 1;
}

.headline03 {
    position: relative;
    text-align: center;
    line-height: 1;
}
.headline03 .en {
    position: relative;
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-size: 5.2rem;
    font-weight: 600;
    padding-bottom: calc(5px + 22px);
    line-height: 1;
}
.headline03 .en:before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    background: url("../img/common/title-deco.svg")no-repeat top left;
    background-size: 100%;
    width: 164px;
    height: 22px;
    transform: translateX(-50%);
}
.headline03 .txt {
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 600;
    text-align: left;
    line-height: 1;
}

.lBtn {
}
.lBtn a {
    display: inline-block;
    width: 100%;
    padding: 16px 0;
    border-radius: 100px;
    background: #0a6e3c;
    border: 2px solid #0a6e3c;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    box-sizing: border-box;
    letter-spacing: 0.15rem;
}
.lBtn a:hover {
    background: #fff;
    color: #0a6e3c;
    opacity: 1;
}


@media all and (max-width: 834px) {
    .pTxt {
        font-size:1.4rem;
    }
    .flexBox {
        flex-flow: column;
    }

    .headline01 {
        padding-bottom: calc(2px + var(--title-deco-height));
        text-align: center;
        line-height: 1;
    }
    .headline01:before {
        bottom: -10px;
        left: 50%;
    }
    .headline01 .txt {
        font-size: 2.4rem;
    }
    .headline01 .color {
        font-size: 2.4rem;
    }
    .headline01 .en {
        font-size: 4rem;
    }

    .headline02 {
        position: relative;
        padding-top: calc(11px + var(--title-deco-height));
        text-align: center;
        line-height: 1;
    }
    .headline02:before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        background: url("../img/common/title-deco.svg")no-repeat top left;
        background-size: 100%;
        width: var(--title-deco-width);
        height: var(--title-deco-height);
        transform: translateX(-50%);
    }
    .headline02 .txt {
        font-size: 2.4rem;
    }
    .headline02 .color {
        font-size: 2.4rem;
    }
    .headline02 .en {
        font-size: 4rem;
    }

    .headline03 .en {
        font-size: 4.2rem;
    }
    .headline03 .txt {
        font-size: 2.2rem;
    }

    .lBtn {
    }
    .lBtn a {
        padding: 18px 0;
        font-size: 1.5rem;
    }
}


/*------------------------------------------------------------
    TOPに戻るボタン
------------------------------------------------------------*/
.returnBtn {
    position: fixed;
    top: auto;
    left: auto;
    bottom: 20px;
    right: 40px;
    z-index: 98;
}
.returnBtn.btn-bg:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 16px;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 100px;
    z-index: -1;
    transform: translate(-50%, -50%);
}
.returnBtn a {
    display: block;
    width: 54px;
    height: 54px;
    background: #28733c;
    border-radius: 100px;
}
.returnBtn a .arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 22px;
    transform: translate(-50%, -50%);
}
.grecaptcha-badge {
	bottom: 0 !important;
    z-index: 1;
    transition: all .8s !important;
}
.grecaptcha-badge.is-return-visible {
	bottom: 130px !important;
    z-index: 1;
}


@media all and (max-width: 834px) {
    .returnBtn {
        bottom: 10px;
        right: 4.5%;
        z-index: 98;
    }
    .returnBtn.btn-bg:before {
        padding: 10px;
    }
    .returnBtn a {
        width: 50px;
        height: 50px;
    }
    .returnBtn a .arrow {
        width: 16px;
        height: 16px;
    }
    .grecaptcha-badge.is-return-visible {
        bottom: 81px !important;
        z-index: 1;
    }
}



/*------------------------------------------------------------
    Header
------------------------------------------------------------*/
#gHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 33px 81px 25px 52px;
    z-index: 100;
    box-sizing: border-box;
    transition: all .9s;
}

#gHeader .headBox {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#gHeader .logo {
    max-width: 127px;
    transition: all .9s;
}
#gHeader .logo a {
}
#gHeader .logo img {
    width: 100%;
}
#gHeader .logo img.big {
    display: block;
}
#gHeader .logo img.min {
    display: none;
}
#gHeader .nav {
    margin-top: 12px;
}
#gHeader .nav .navUl {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#gHeader .nav .navUl > li {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    margin-left: 32px;
    letter-spacing: 0.05rem;
}
#gHeader .nav .navUl > li:first-child {
    margin-left: 0;
}
#gHeader .nav .navUl > li > a {
    position: relative;
}

#gHeader .nav .navUl > li.parent-menu > a {
    padding-right: 18px;
}
#gHeader .nav .navUl > li.parent-menu > a:before {
    content: "";
    position: absolute;
    right: 50%;
    bottom: -11px;
    transform: translateX(-50%);
    width: 10px;
    height: 7px;
    background: url("../img/common/arrow-headNav.svg")no-repeat top left;
    background-size: 100%;
}

/*　scrolled 付与時　*/
#gHeader.scrolled .logo {
    max-width: 83px;
}
#gHeader.scrolled {
    padding: 21px 81px 19px 52px;
    background: #fff;
}
#gHeader.scrolled .headBox {
    align-items: center;
}
#gHeader.scrolled .logo img.big {
    display: none;
}
#gHeader.scrolled .logo img.min {
    display: block;
}
#gHeader .nav {
    margin-top: 0;
}

/*  */
.parent-menu .childWrap {
    position: absolute;
    top: 61px;
    left: 0;
    width: 100%;
    padding-top: 42px;
    opacity: 0;
    visibility: hidden;
    transition: 300ms;
}
.parent-menu .childWrap .child-menu {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 46px 150px;
    background: #F5F5F5;
    box-sizing: border-box;
    border-bottom: 1px solid #c6c6c6;
}
.parent-menu .childWrap .child-menu li {
    margin-right: 30px;
}
.parent-menu .childWrap .child-menu li:last-child {
    margin-right: 0;
}
/* jsでクラスを付けて表示 */
.parent-menu .childWrap.active {
  opacity: 1;
  visibility: visible;
}


@media all and (max-width: 834px){
    #gHeader {
        padding: 0;
    }
    #gHeader .headBox {
    }
    #gHeader .logo {
        max-width: 100%;
        width: 23%;
        margin: 12px 0 0 11px;
        transition: all .3s;
    }

    #gHeader .barBox {
        position: relative;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        width: 72px;
        height: 72px;
        background: #28733c;
        border-radius: 0 0 0 23px;
        transition: all .9s;
    }
    #gHeader .barBox .bar {
        width: 36px;
        height: 2px;
        background: #fff;
        transition: all .3s;
    }
    #gHeader .barBox .bar.bar01,
    #gHeader .barBox .bar.bar02 {
        margin-bottom: 7px;
    }

/*　open オープン時　*/
    #gHeader .barBox.open {
        border-radius: 0;
    }
    #gHeader .barBox.open .bar {
        width: 34px;
    }
    #gHeader .barBox.open .bar01 {
        transform: rotate(45deg);
        margin: 3px 0 0;
    }
    #gHeader .barBox.open .bar02 {
        display: none;
    }
    #gHeader .barBox.open .bar03 {
        transform: rotate(-45deg);
        margin-bottom: 4px;
    }
    .open #gHeader .logo {
        max-width: 70px;
        margin: 0 0 0 2%;
    }
    .open #gHeader .logo img.big {
        display: none;
    }
    .open #gHeader .logo img.min {
        display: block;
    }
    .open #gHeader .headBox {
        align-items: center;
    }


/*　scrolled 付与時　*/
    #gHeader.scrolled .logo {
        max-width: 70px;
        margin: 0 0 0 2%;
    }
    #gHeader.scrolled {
        padding: 0;
    }
    #gHeader.scrolled .barBox {
        border-radius: 0;
    }


    .menuHam {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        overflow: scroll;
        z-index: 99;
    }
    .menuHam .inBox {
        width: 86%;
        margin: 0 auto;
        padding: 79px 0 62px;
    }
    .menuHam .navUl {
        margin-bottom: 37px;
    }
    .menuHam .navUl > li {
        border-bottom: 1px solid #000;
        line-height: 1.4;
    }
    .menuHam .navUl > li > a {
        position: relative;
        display: block;
        padding: 16px 55px 16px 12px;
        font-size: 1.4rem;
    }
    .menuHam .navUl > li > a:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 18px;
        width: 9px;
        height: 9px;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        transform: translateY(-50%)rotate(-45deg);
    }
    .menuHam .navUl > li.sp-parent-menu > a:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 13px;
        width: 15px;
        height: 1px;
        background: #000;
        border: none;
        transform: translateY(-50%);
    }
    .menuHam .navUl > li.sp-parent-menu > a:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 19px;
        width: 1px;
        height: 15px;
        background: #000;
        border: none;
        transform: translateY(-50%);
        transition: all .3s;
    }
    .menuHam .navUl > li.sp-parent-menu.open > a:after {
        opacity: 0;
        transform: translateY(-50%)rotate(90deg);
    }
    .menuHam .navUl > li .sp-child-menu > li {
        border-bottom: 1px solid #F5F5F5;
    }
    .menuHam .navUl > li .sp-child-menu > li:last-child {
        border-bottom:none;
    }
    .menuHam .navUl > li .sp-child-menu > li > a {
        position: relative;
        display: block;
        padding: 14px 10% 14px 11%;
    }
    .menuHam .navUl > li .sp-child-menu > li > a:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 18px;
        width: 9px;
        height: 9px;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        transform: translateY(-50%)rotate(-45deg);
    }

    .menuHam .bottomUl {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .menuHam .bottomUl li {
        line-height: 1;
    }
    .menuHam .bottomUl > li > a {
        font-size: 1.4rem;
    }

}



/*------------------------------------------------------------
    footer
------------------------------------------------------------*/
#gFooter {
    padding: 76px 0 0;
    background: #fff;
}
#gFooter .footBox {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1138px;
    margin: 0 auto;
    padding: 0 62px 31px 0;
    box-sizing: border-box;
}
#gFooter .officeBox {
    padding-left: 38px;
}
#gFooter .officeBox .logo {
    width: 134px;
    margin-bottom: 29px;
}
#gFooter .officeBox .officeUl {
}
#gFooter .officeBox .officeUl li {
    margin-bottom: 19px;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.5;
}
#gFooter .officeBox .officeUl li:last-child {
    margin-bottom: 0;
}
#gFooter .officeBox .officeUl li .bold {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.15rem;
}
#gFooter .officeBox .iconUl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 37px;
}
#gFooter .officeBox .iconUl li {
    margin-right: 11px;
}
#gFooter .officeBox .iconUl li:last-child {
    margin-right: 0;
}
#gFooter .officeBox .iconUl li img.insta {
    width: 21px;
}
#gFooter .officeBox .iconUl li img.line {
    width: 22px;
}
#gFooter .officeBox .iconUl li img.youtube {
    width: 22px;
}
#gFooter .officeBox .iconUl li img.contact {
    width: 20px;
}

#gFooter .navBox {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 50px 0 91px 97px;
    border-left: 1px solid #e6e6e6;
}
#gFooter .navBox .navUl {
}
#gFooter .navBox .navUl.nav01 {
    margin-right: 84px;
}
#gFooter .navBox .navUl > li {
    margin-bottom: 31px;
    font-size: 1.4rem;
    line-height: 1;
}
#gFooter .navBox .navUl > li:last-child {
    margin-bottom: 0;
}
#gFooter .navBox .navUl > li:last-child {
    margin-bottom: 0;
}
#gFooter .navBox .navUl > li > a {
    position: relative;
    padding-left: 15px;
    font-size: 1.4rem;
    font-weight: 600;
}
#gFooter .navBox .navUl > li > a:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 10px;
    height: 10px;
    background: url("../img/common/arrow-navi-bk.svg")no-repeat top left;
    background-size: 100% 100%;
}
#gFooter .navBox .navUl > li .inUl {
    margin-top: 15px;
}
#gFooter .navBox .navUl > li .inUl li {
    margin-bottom: 14px;
    padding-left: 14px;
    font-size: 1.3rem;
    font-weight: 400;
}
#gFooter .navBox .navUl > li .inUl li:last-child {
    margin-bottom: 0;
}
#gFooter .navBox .navUl > li .inUl li > a {
    position: relative;
    padding-left: 14px;
}
#gFooter .navBox .navUl > li .inUl li > a:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 8px;
    height: 1px;
    background: #000;
}

#gFooter .navBox .nav-bottomUl li {
    margin-bottom: 14px;
    padding-left: 14px;
    font-size: 1.3rem;
    font-weight: 400;
}

#gFooter .bottomBox {
    display: flex;
}
#gFooter .bottomBox .text {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 55%;
    padding: 48px 0;
    background: #28733c;
    border-radius: 0 100px 100px 0;
    color: #fff;
    z-index: 1;
}
#gFooter .bottomBox .text p {
    width: 100%;
    max-width: 600px;
    font-size: 1.8rem;
    text-align: center;
}
#gFooter .bottomBox .copy {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 50%;
    margin-left: -5%;
    padding-left: 5%;
    background: #29abe2;
    color: #fff;
}
#gFooter .bottomBox .copy small {
    width: 100%;
    max-width: 600px;
    font-size: 1.3rem;
    text-align: center;
}



@media all and (max-width: 834px){

    #gFooter {
        padding: 44px 0 0;
    }
    #gFooter .footBox {
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0 auto 48px;
        padding: 0;
        text-align: center;
    }
    #gFooter .officeBox {
        padding-left: 0;
    }
    #gFooter .officeBox .logo {
        width: 100%;
        max-width: 134px;
        margin: 0 auto 32px;
    }
    #gFooter .officeBox .copy {
        display: block;
        margin-top: 44px;
        text-align: center;
    }

    #gFooter .officeBox .iconUl {
        justify-content: center;
        align-items: center;
        margin: 37px 0 54px;
    }
    #gFooter .officeBox .iconUl li {
        margin-right: 24px;
    }
    #gFooter .officeBox .iconUl li img.insta {
        width: 33px;
    }
    #gFooter .officeBox .iconUl li img.line {
        width: 35px;
    }
    #gFooter .officeBox .iconUl li img.youtube {
        width: 37px;
    }
    #gFooter .officeBox .iconUl li img.contact {
        width: 32px;
    }

    #gFooter .bottomBox {
        flex-flow: column;
    }
    #gFooter .bottomBox .text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 20px 0;
        border-bottom: 8px solid #29ABE2;
        border-radius: 0;
    }
    #gFooter .bottomBox .text p {
        width: 100%;
        max-width: auto;
        font-size: 1.4rem;
    }
    #gFooter .bottomBox .copy {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 16px 0;
        padding: 0;
        background: transparent;
        color: #000;
        text-align: center;
    }
    #gFooter .bottomBox .copy small {
        width: 100%;
        max-width: auto;
        font-size: 1.2rem;
    }

}





/*------------------------------------------------------------
    フェードイン
------------------------------------------------------------*/
.show {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in {
  opacity: 0;
}
.fade-in-bottom {
  opacity: 0;
  transform: translateY(10px);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(10px);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-10px);
}



.first-fade {
    opacity: 0; /* 初期状態（見えない） */
    animation: fadeIn 2s ease-in-out forwards; /* 2秒かけてフェードイン */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}








/*----------------------- end */