body {
    font-size: 62.5%; /* 10px */
    font-family: "Noto Sans JP", "Roboto Condensed", serif;
    font-optical-sizing: auto;
    user-select: none;
}

h1 {
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: bold;
    text-align: center;
}
h3 {
    font-size: 1.2rem;
}

p {
    font-size: 1rem;
    line-height: 1.4rem;
}

.content {
    padding-top: 100vh;
}
.Block {
    background-image: url(../../assets/img/common/back.png);
    background-position: center top;
}

/* ----------------------------
Header
---------------------------- */
.Header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.8);
}
.Header .HeaderInner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:left;
    align-items: center;
    padding: .5rem 1rem;;
}
.Header .HeaderInner .Logo img {
    height: 2rem;
}

.Header .HeaderInner .Menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-left: 2rem;
}
.Header .HeaderInner .Menu li {
    
    margin-right: 1rem;
}
.Header .HeaderInner .Menu li a {
    color: #fff;
    font-size: .7rem;
    text-decoration: none;
    cursor: pointer;
}
.Header .HeaderInner .Menu li a:hover {
    border-bottom: 3px solid #fff;
}
.Header .HeaderInner .Menu li .lang {
    border: 1px solid #fff;
    padding-left: 10px;
    padding-right: 10px;
}

/* ----------------------------
SlideArea
---------------------------- */
.SlideArea {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    z-index: -1;
}
.SlideArea .swiper-container {
    width: 100%;
    height: 100%;
}
.SlideArea .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.SlideArea .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2rem;
    width: 4rem;
    opacity: .8;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@keyframes blink {
    0% {
        opacity: .2;
    }
    100% {
        opacity: .8;
    }
}

/*----------------------------
BlockWrap
----------------------------*/
.BlockWrap-all {
    padding-top: 2rem;
    padding-bottom: 2rem;
    overflow: hidden;
}
.BlockFirst {
    padding-top: 100vh;
}

.BlockWrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.BlockItem {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
}
.BlockItemS {
    display: flex;
    flex-direction: row;
    justify-content: top;
    align-items: left;
}
.BlockInfo {
    position: absolute;
    padding: 1rem;
}

.BlockInfoA {
    padding: 1rem;
}
.BlockInfoA .BlockTitleInner h2 {
    line-height: 1.5rem;
}
.BlockInfoA .BlockTitleInner p {
    line-height: 1.05rem;
}
.BlockImage {
    width: 40%;
}
.BlockWrapInfo {
    width: 60%;
    min-width: 0;
}
.BlockImage img {
    max-width: 100%;
}
.BlockInfoAText {
    font-size: 0.9rem;
    overflow-wrap: break-word;
}


/*----------------------------
Block Wrap Width
----------------------------*/
.BW-w0 {
    width: 100%;
}

.BW-w1 {
    max-width: 900px;
    margin: auto;
}


/*----------------------------
Block Item Image
----------------------------*/
.BI-Image {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.BI-Image img {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*----------------------------
Block Item Symbol
----------------------------*/
.BlockSymbol {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.BlockSymbol img {
    height: 90%;
}

/*----------------------------
Block Item Position
----------------------------*/
.BI-p1 {
    top: 0;
    left: 0;
}
.BI-p2 {
    top: 0;
    right: 0;
}

/*----------------------------
Block Item Width
----------------------------*/
.BI-w1 {
    width:calc(100%/3);
}
.BI-w1::before {
    padding-top: 100%;
    content: "";
    display: block;
}
.BI-w1h {
    width:calc(50%);
}
.BI-w1h::before {
    padding-top: 75%;
    content: "";
    display: block;
}
.BI-w2 {
    width: calc(100%/3*2);
}
.BI-w2::before {
    padding-top: 50%;
    content: "";
    display: block;
}

/*----------------------------
Block Item Text
----------------------------*/
.BI-t0 {
    font-size: 1rem;
    line-height: 1.5rem;
}
.BI-t1 {
    font-size: 1rem;
    line-height: 1.5rem;
    color: #ccc;
}

/*----------------------------
Block Item BackgroundColor
----------------------------*/
.BI-bg0 {
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 1), rgba(240, 240, 240, 1));
}
.BI-bg1 {
    background-image: linear-gradient(150deg, rgba(35, 35, 35, 1), rgba(0, 0, 0, 1));
}

/*----------------------------
Block Item Title
----------------------------*/
.BlockTitleInner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    align-items: end;
    padding-bottom: .3rem;
}
.BlockTitleInner h2 {
    line-height: .5rem;
    font-size: 1.5rem;
    font-weight: bold;
}
.BlockTitleInner p {
    font-size: .9rem;
    color: #666;
    font-weight: bold;
    line-height: 0rem;
}
.BlockTitle .Tag {
    font-size: .6rem;
    line-height: .8rem;
    color: #eee;
    font-weight: bold;
    background-color: #000;
    margin: auto;
    display: inline-block;
    padding: 0rem .5rem;
}

/*----------------------------
BackgroundColor
----------------------------*/
.bg1 {
    background-image: url(../../assets/img/common/back_bk.png);
    background-position: center top;
}

/*----------------------------
Text Color
----------------------------*/
.tc0 {
    color: #000;
}
.tc1 {
    color: #fff;
}

/*----------------------------
Padding
----------------------------*/
.pl01 {
    padding-left: .1rem;
}
.pl02 {
    padding-left: .2rem;
}

.pl1 {
    padding-left: 1rem;
}
.pl2 {
    padding-left: 2rem;
}
.pt1 {
    padding-top: 1rem;
}
.pt2 {
    padding-top: 2rem;
}
.pb03 {
    padding-bottom: .3rem;
}
.pb05 {
    padding-bottom: .5rem;
}
.pb1 {
    padding-bottom: 1rem;
}
.p1 {
    padding: 1rem;
}
.pt3 {
    padding-top: 3rem;
}
.pt10 {
    padding-top: 10rem;
}
    

/*----------------------------
Margin
----------------------------*/
.mt1 {
    margin-top: 1rem;
}
.mt2 {
    margin-top: 2rem;
}
.mt3 {
    margin-top: 3rem;
}
.mb1 {
    margin-bottom: 1rem;
}
.mb2 {
    margin-bottom: 2rem;
}
.mb3 {
    margin-bottom: 3rem;
}

/*----------------------------
Text Align
----------------------------*/
.center {
    text-align: center;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}

/*----------------------------
FadeIn
----------------------------*/
.FadeIn {
    opacity: 0;
    transition-duration: 800ms;
    transition-property: opacity, transform;
}
.FadeIn-up{
    transform : translate(0, 20px);
}
.FadeIn-left{
    transform : translate(20px, 0);
}
.FadeActive {
    opacity: 1;
    transform: translate(0, 0);
}
.FadeDelay1 {
    transition-delay: 100ms;
}
.FadeDelay2 {
    transition-delay: 200ms;
}
.FadeDelay3 {
    transition-delay: 300ms;
}

/*----------------------------
Humberger
----------------------------*/
.Humberger {
    display: none;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    cursor: pointer;
}
.Humberger img {
    width: 2.5rem;
}
.HumbergerMenu {
    position:fixed;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    transition-duration: 400ms;
    transition-property: opacity, transform;
    transform: translateY(-200px);
}
.HumbergerMenuActive {
    opacity: 1;
    transform: translateY(0);
}
.HumbergerMenuInner {
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100vh;
}
.CloseBtn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #fff;
    width: 2.5rem;
    cursor: pointer;
}
.HumbergerMenuList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 5rem;
}
.HumbergerMenuList li {
    text-align: center;
    width: 100%;
}
.HumbergerMenuList a {
    text-align: center;
    display: block;
    width: 100%;
    color: #fff;
    text-decoration: none;
    font-size: 2.5rem;
    font-weight: 900;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    cursor: pointer;
}
.langn {

    width: auto !important;
    margin: auto;
    margin-top: 2rem;
    padding-top: .5rem !important;
    padding-bottom: .8rem !important;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    border: 1px solid #fff;
    font-size: 1.8rem !important;
    display: inline-block !important;
}
/*----------------------------
Contact
----------------------------*/
.ContactWrap {
    align-items: normal;
}
.ContactWrapA {
    width: 40%;
}
.ContactWrapA p {
}
.ContactWrapB {
    width: 60%;
}
.ContactWrapB ul {
    list-style-type: disc;
    list-style-position:outside;
    font-size: .8rem;
    line-height: 1rem;
}
.ContactWrapB ul li {
    margin-left: 1rem;
}
.ContactOpen {
    font-weight: 900;
    display: inline-block;
    font-size: 1rem;
    border: 3px solid #333;
    border-radius: 50px;
    margin: auto;
    padding: .2rem 1rem;
    transition-duration: 200ms;
    transition-property: background-color, color;
    text-decoration: none;
    color: #333;
}
.ContactOpen:hover {
    background-color: #333;
    color: #fff;
}
.ContactForm {
    position:fixed;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    transition-duration: 400ms;
    transition-property: opacity, transform;
    cursor: pointer;

    transform: translateY(200px);
}
.ContactFormActive {
    opacity: 1;
    transform: translateY(0);
}
.ContactFormInner {
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100vh;
    text-align: center;
}
.ContactFormTitle {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 500;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.ContactFormBody {
    max-width: 900px;
    margin: auto;
}
.ContactFormBody input,
.ContactFormBody textarea {
    width: 50%;
    padding: .5rem;
    margin-bottom: .5rem;
    border-radius: 5px;
}
.ContactFormBody textarea {
    height: 5rem;
}
.ContactFormBody button {
    width: 30%;
    padding: .5rem 1rem;
    background-color: rgba(0, 0, 0, 0);
    border: 3px solid #fff;
    color: #fff;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 900;

    transition-duration: 200ms;
    transition-property: background-color, color;
}
.ContactFormBody button:hover {
    background-color: rgba(255,255,255,1);
    color: #000;
}
/*----------------------------
ScrollTop
----------------------------*/
.ScrollTop {
    position: fixed;
    bottom: 0;
    right: 1rem;
    z-index: 900;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);

    opacity: 0;
    transform: translateY(100px);
    transition-duration: 400ms;
    transition-property: opacity, transform;
}
.ScrollTop img {
    width: 2.5rem;
    padding: 1rem .5rem 2.5rem;
}
.ScrollTopActive {
    opacity: 1;
    transform: translateY(0);
}
/*----------------------------
Footer
----------------------------*/
.Footer {
    background-color: #999;
    color: #fff;
    text-align: center;
    padding: 1rem;
}

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

    .Header .HeaderInner {
        padding: 1rem 1rem;;
    }
    .Header .HeaderInner .Logo img {
        height: 2.5rem;
    }
    .Humberger  {
        display: block;
    }
    .mob {
        display: none;
    }
    .Header .HeaderInner .Menu {
        display: none;
    }
    .BlockItem {
        flex-wrap: unset;
    }
    .BlockInfo {
        position: relative;
    }
    .BlockImage {
        width: 30%;
        background-color: #fff;
    }
    .BlockWrapInfo {
        width: 70%;
    }
    .BI-w1h {
        width: 100%;
    }
    .BI-w1h::before {
        padding-top: 0;
    }
    .swiper-icon {
        bottom: 7rem;
    }
    .ContactFormBody input,
    .ContactFormBody textarea {
        width: 80%;
    }
    .ContactFormBody button {
        width: 60%;
    }
    .ContactWrapA {
        width: 100%;
        padding: 1rem;
        text-align: center;
    }
    .ContactWrapB {
        width: 100%;
        padding: 1rem;
    }
    .BlockSymbol img {
        height: auto;
        width: 80%;

    }
}