@charset "utf-8";
/* ------------------------------------------ */
/* header */
/* #index page ヘッダー */
#index header{
    position: relative;
    top: calc(100vh - 55px); 

}
/* ヘッダー（中身の設定） */
#index .header {
    /* headerに対しての絶対位置 */
    position: absolute;
    transition: 0.5s;
}  
/* 【JS】 */
/* /* #index page ヘッダー  ヘッダー上部固定 */
#index .fixed{
    position: fixed;
    top:0;    
}
#index .fixed .header{
    max-width: 100%;
    
}

/* ------------------------------------------ */
/* kv */
#kv {
    position: relative;
    width: 100%;
    height: 100vh; 
    color: rgba(0, 0, 0, 0.4);
    margin-bottom: 143px;
}
/* 背景動画 */
.kv-video {
    width: 100%;
    height: 100vh;

}
/* 背景動画スライドショー */
.slide{
    display: none;
}
.active{
    display: block;
    object-fit: cover;
  object-position: right 70% top 0;
  width: 100%;
  height: 100%;
}

/* kv全体を半透明へ */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); 
    z-index: 5;
}

/* 文字のスタイル */
.kv__overlay{
    position: absolute;
    z-index: 10;
}
.kv__main {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    text-align: center;
    color: rgba(0, 0, 0, 0.12);
    width:100vw;
    justify-content: center;
    display: flex;
    font-size: 23vw;
}
.kv__sub {
    color: white;
    font-size: 64px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    writing-mode: vertical-rl;
    top: 18%;
    right: 8%;
    letter-spacing: 20px;
}
.kv__sub>span {
    text-align: justify;
}
.kv__en {
    color: white;
    font-size: 36px;
    display: flex;
    flex-direction: column;
    top: 61%;
    right: 15%;
}
.kv__en>span {
    font-family: "Padyakke Expanded One", serif;
}

/*スクロール*/
.scroll{
	position:absolute;
	left: 3.5%;
	bottom: 178px;
	width: 20px;
}
.scroll span{
	position: absolute;
	left:10px;
	bottom:10px;
	color: #fff;
    writing-mode: vertical-rl;
	z-index: 1000;
}

.scroll:before {
    content: "";
    position: absolute;
    bottom:0;
    left:-4px;
	width:10px;
	height:10px;
	border-radius: 50%;
	background:white;
	animation:circle 3s ease-in-out infinite;
    z-index: 1000;
}

/*黒丸の動き*/
@keyframes circle{
    0%{bottom:90px;}
    100%{bottom:-140px;}
 }
.scroll:after{
	content:"";
    /*描画位置*/
	position: absolute;
	top:-90px;
	left:0;
    /*線の形状*/
	width:1px;
	height:220px;
	background:white;
	z-index: 1000;
}
/* ------------------------------------------ */
/* kv mobile */

@media (max-width: 767px){
       #index header {
    top: 100vh;
  }
      #index .header {
    height: 40px;
    padding-right: 0;
  }
    .kv__overlay{
        position: absolute;
    }
    .kv__sub {
        font-size: 42px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        justify-content: center;
        white-space: nowrap;
    }
  .kv__en {
    font-size: 24px;
    top: 74%;
    left: 3%;
 
  
    text-align: left;
  }
    .kv__scroll {
        display: none;
    }
    .scroll{
        display: none;
    }
 
}
    


/* news */
/* ------------------------------------------ */
.news__inner {
    color: #262626;
    padding-top: 60px;
}
.news__list {
    justify-content: space-between;
    margin-bottom: 33px;
}
.news__item {
    display: flex;
    text-align: center;
    gap: 24px;
    margin-bottom: 1rem;
}
.news__title {
    display: flex;
    text-align: center;
    gap: 23px;
}
.news__title time {
    letter-spacing: 4.16px;
    color: #262626;
}

.news__label {
    color: #fff;
    display: flex;
    background-color: #64A2B3;
    width: 106px;
    height: 25px;
    align-items: center;
    justify-content: center;
}
.label-news{
    background-color: #64A2B3;
}
.label-info{
    background-color: #B2E063;
}
.label-other{
    background-color: #A0A0A0;
}
.news__text {
    letter-spacing: 1.6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #fff;
}

.news__text a:hover{
    border-bottom: 1px solid #262626;
}
/* news mobile*/
/* ------------------------------------------ */

@media (max-width: 767px){
.news__list {
    justify-content: space-between;
    margin-bottom: 33px;
}
.news__item {
    margin-bottom: 24px;
    flex-direction: column;
    gap: 8px;
}
.news__title {
    display: flex;
    text-align: center;
    gap: 23px;
}
.news__title time {
    letter-spacing: 4.16px;
}
.news__label {
    display: flex;
    width: 106px;
    height: 25px;
    align-items: center;
    justify-content: center;
}
.news__text {
    text-align: start;
    display: inline;
}
.news__text a {
  display: inline; 
}

}

/* service */
/* ------------------------------------------ */
#service.wrapper{
    width: 100%;
    max-width: 100%;
    position: relative;
    padding-top: 80px;
}
.service__section,
.about__section{
    max-width: 1200px;
    margin: 0 auto;
  
    width: 90%;
}
.about__section{
    width: 100%;
}
#service::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 130%;
    top:-5%;
    background-color:#64a2b3;
    clip-path: polygon(0px 24%,100% 0px,100% 23%,0 93%);
    z-index: -1
        
        
}
.service__list{
    padding-top: 60px;
}
.service__list-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}
.service__item-top {
    width: 50%;
}
.service__item-bottom{
    width: calc(100% / 3);
}
.service__img{
    overflow: hidden;
}
.service__img img,
.service__item-bottom img {
    height: auto;
    transition: transform 0.5s ease;
}
.service__img img:hover,
.service__item-bottom img:hover {
     transform: scale(1.1);
}
.card__contents {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
    padding-left: 20px;
    height: 55px;
    background-color: #F7F7F7;
}
.card__label {
    color: #262626;
}
.service__list-bottom .card__label{
    margin: 0 auto;
}
.card__label--en {
    color: #64A2B3;
}
.service__list-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
} 
.service__btn{
    margin-right: 100px;
}



/* service mobile */
/* ------------------------------------------ */
@media (max-width: 767px){

#service::before{
    top:0;
    height: 100%;
}
#service.wrapper{
    padding-top:0;
}
#service.wrapper{
    margin: 0 auto;
    margin-bottom: 64px;
}
.service__section{
    width: 100%;
}
.service__list-top {
    gap: 16px;
    flex-direction: column;
}
.service__item-top {
    width: 100%;
}
.service__item-bottom{
    width: 100%;
}
.card__contents {
    height: 30px;
}
.service__list-top .card__label{
    margin: 0 auto;
}
.service__list-bottom {
    gap: 16px;
    flex-direction: column;
} 
.card__label--en {
    display: none;
}
}

/* feature */
/* ------------------------------------------ */
#feature{
    margin-right: 0;
    padding: 0;
    margin-left: 8.3%;
    background-image: url(../images/images/feature-bg.svg),linear-gradient(90deg, #bcd6e1, #68b0c4);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}
.feature__section{
    padding: 0 20px;
    padding-bottom: 238px;
    max-width: 1100px;
    margin: 0 auto 0 8.3%;

    margin-bottom: 60px;
}
.feature__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1000px;
    padding-top: 120px;
}
.feature__img {
    position: relative;
    width: 50%;
}
.img-top {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(87.5% - 60px);
    height: 100%;
    object-fit: cover;
}
.img-bottom {
    position: absolute;
    right: 60px;
    z-index: 1;
    width: calc(50.4% - 60px);
    top: 300px;
    height: 100%;
}
.feature__title{
    max-width: 1100px;
    padding-top: 58px;
}

.feature__text-area{
    width: 50%;
}
.feature__sub-title{
    margin-right: -100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 40px;
}
.feature__sub-title span{
    background-color: #fff;
    display: inline-block;
    padding: 2px 10px;
    color: #64A2B3;
    font-size: 2rem;
    font-family:"Noto Sans JP", sans-serif; 
    margin-bottom: 24px;
    text-align: center;
}
.feature__sub-title p{
    font-size: 2rem;
    background-color: #FFFFFF;
    display: inline-block;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    margin-bottom: 25px;
    color: #64A2B3;
    height: 60px;
}
.feature__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.feature__text p{
    color: #FFFFFF;
}
/* ------------------------------------------ */
/* feature mobile */
@media (max-width: 1345px){
    .feature__section{
        margin: 0 auto;
        padding: 0 20px;
        padding-bottom: 238px;
        margin-bottom: 80px;
    }
    .feature__sub-title{
        margin-right: 0;
    }
    .feature__sub-title span{
        white-space: nowrap;
    }
    }
    
@media (max-width: 1000px){
    #feature{
        margin: 0 auto;
        
    }
.feature__section {
    padding: 14px 16px;
    margin-bottom: 64px;
}
    .feature__sub-title p{
font-size: 18px;
    }
.feature__inner {
    flex-direction: column;
    padding-bottom: 96px;
}
    @media (max-width: 767px) {
.feature__inner {
    padding-top: 36px;
    }
.feature__title{
    padding-top: 40px;
}
}
.feature__img {
    width: auto;
    position: initial;
    display: flex;
    padding: 0;
    align-items: center;
    margin: 0 auto 18px;
}
.img-top {
    position: initial;
    height: auto;
    width: 50%;
}
.img-bottom {
    position: initial;
    width: 50%;
    height: auto;
}
.feature__text-area {
    width: 100%;
}
    .feature__sub-title{
    margin: 0;
    align-items: flex-end;
    }
.feature__text {
    width: auto;
    line-height: 24px;
    gap: 24px;
    }
    .feature__text p{
        font-size: 16px;
    }   
    .feature__sub-title span{
    font-size: 18px;
    padding: 8px;
    }
}

/* about */
/* ------------------------------------------ */
.about__contents{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 60px;
}
.about__list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 50%;
}
.about__item-left {
    background-image: url(../images/images/about-us-bg01.jpg);
}

.about__item-right{
    background-image: url(../images/images/about-us-bg02.jpg);
}
.about__item-left,
.about__item-right {
    width: 100%;
    background-repeat: no-repeat;
    max-width: 600px;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
}

.about__subtitle {
    margin: 32px auto 24px 32px;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}
#about .about__link-box{
    margin: 0 45px 0 32px;
    gap:1rem;
    color: #64A1B3;
}
.about__text{
    flex: 1;
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-weight: 700;
}
.about__link{
    margin-bottom: 102px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* about mobile */
/* ------------------------------------------ */

@media (max-width: 767px){
.about__title{
    padding: 0 16px;
    }
.about__contents{
    flex-direction: column;
    padding-top: 2rem;
}
.about__list {
    width: 100%;
}
.about__item-left {
    width: 100%;
    margin: 0 auto;
}
.about__item-right{
    width: 100%;
}
.about__subtitle {
    margin: 1rem auto 10px 20px;
    font-size: 24px;
}
#about .about__link-box{
    margin: 0 16px;
    height: 36px;
}
.about__text{
    flex: 1;
}
.about__link{
    margin-bottom: 1rem;
    gap: 0.5rem;
}
}

/* -------------------------------------------------------------- */
/* 【NEWS ページ】 */
#news-page .news__inner{
    /*! margin-top: 48px; */
    /*! margin-bottom: 80px; */
    /*! margin-left: 15%; */
    max-width: 1000px;
    margin: 48px auto 80px;
    /*! padding: 0 16px; */
}
#news-page .pagination{
    display: flex;
    text-align: center;
    justify-content:center; 
    gap: 1rem;
    margin-bottom: 120px;
    color: #fff;
    font-size: 20px;
    font-family:"Anton", sans-serif;
    font-weight: 400;
}
#news-page .pagination .now,
#news-page .pagination a{
    width: 45px;
    height: 45px;
    background-image: linear-gradient(90deg, #64a2b3, #9bc1cc);;
    padding-top: 4px;
    border-radius: 50%;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    
}
/* ------------------------------------------------- */

/* 【NEWS ページ mobile】 */

@media (max-width: 767px){
    #news-page .news__inner{
        margin: 40px 16px;
        padding: 0;
    }
    #news-page .pagination{
        margin-bottom: 40px;
    }
    
}
/* ------------------------------------------------- */
/* 【SERVICE ページ】 */
#service-page #service.wrapper{
    margin: 40px auto;
}
#service-page #service::before{
    display: none;
}
#service-page .service__section{
    max-width: 1000px;
    width: 100%;
}

#service-page .service__list-top{
    flex-direction: column;
    gap: 40px;
}
#service-page .service__item-top{
    width: 100%;
}
#service-page .service__item-top:nth-child(even){
    flex-direction: row-reverse;
}
#service-page .service__item-top{
    display: flex;
    height: 250px;
    width: 100%;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.15);
}
#service-page .service__img {
    width: 50%;
}
#service-page .card__contents {
    width: 50%;
    background-color: #fff;
    flex-direction: column;
    height: auto;
    justify-content: center;
    padding: 0;
    text-align: center;
}
#service-page .card__label {
    font-size: 22px;
    margin-bottom: 16px;
}
#service-page .card__label--en {
    font-size: 14px;
    margin-bottom: 14.5px;
}
#service-page .service__list-bottom {
    flex-direction: column;
}

/* 【SERVICE ページ mobile】 */
@media (max-width: 767px){
    .service__img img,
.service__item-bottom img {
    height: auto;
}
    #service-page .service__section{
        margin: 40px auto;
    }
    #service-page .service__list-top{
        gap: 24px;
    }
    #service-page .service__item-top:nth-child(even){
        flex-direction: column;
    }
    #service-page .service__item-top{
        flex-direction: column;
        height: auto;
    }
    #service-page .service__img {
        width: 100%;
    }
    #service-page .card__contents {
        width: 100%;
    }
    #service-page .card__contents p{
        font-size: 14px;
        margin-bottom: 15px;
    }
    #service-page .card__label {
        font-size: 16px;
        margin-bottom: 6px;
        display: initial;
    }
    #service-page .card__label--en {
        margin: 15px auto 5px;
        display: initial;
    }
    #service-page .service__list-bottom {
        flex-direction: column;
    }
    .service__item-top:hover,
    .service__item-bottom:hover{
        transform: none;
    }
    
}
/* ------------------------------------------------- */
/* 【FEATURE ページ】 */
#feature-page #feature{
    margin-left: 0;
        
}
#feature-page .feature__section {
    max-width: 100%;
    background-image: linear-gradient(90deg, #bcd6e1, #68b0c4);
    margin-bottom: 0;
}
#feature-page #feature .wrapper{
    max-width:1000px;
    padding: 80px 0;
    margin: 0 auto;
    }    
#feature-page .feature__list {
    display: flex;
    flex-direction: column;
    gap: 80px;
}
#feature-page .feature__item {
    display: flex;
    align-items: center;
}
#feature-page .feature__item:nth-child(even){
    flex-direction: row-reverse;
}
#feature-page .feature__text-area {
    width: 50%;
    padding-left: 40px;
    flex-wrap: nowrap;
}
#feature-page .text-area-right{
    padding-left: 0;
    padding-right: 40px;

}
#feature-page .feature__sub-title {
    margin: 0;
    display: inline-block;
    text-align: initial;
    vertical-align: middle;
    margin-bottom: 40px;
}
#feature-page .feature__sub-title p{
    font-size: 24px;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin: 0 100px 0 0;
}
#feature-page .feature__text {
    max-width: 100%;
}

/* JSアニメーション */
.js-animation{
    opacity: 0;
    transform: translateX(-200px);
    transition: transform 2s,opacity 0.5s ;
}
.slide-left{
    opacity: 1;
    transform: translateX(0);
}


/* 【FEATURE ページ mobile】 */
@media (max-width: 767px){
    #feature-page .feature__sub-title{
        margin-bottom: 0;
    }
    #feature-page .feature__section {
        padding: 40px 16px;
    }
    #feature-page #feature .wrapper{
        padding: 0;
    }    
    #feature-page .feature__list {
        gap: 40px;
    }
    #feature-page .feature__item {
        flex-direction: column;
    }
    #feature-page .feature__item:nth-child(even){
        flex-direction: column;
    }
    #feature-page .feature__img {
        width: 100%;
    }
    #feature-page .feature__text-area {
        width: 100%;
        padding: 0;
    }
    #feature-page .feature__sub-title p{
        margin: 24px 0 16px;
        font-size: 18px;
        padding: 8px;
        height: 34px;
    }
    #feature-page .feature__text p {
        line-height: 2;
    }
    
}

/* ------------------------------------------------- */
/* 【ABOUT US ページ】 */
#about-page .about__contents {
    /*! max-width: 1200px; */
    margin: 80px auto 0;
    flex-direction: column;
    padding: 0 16px;
}
#about-page .about__contents h5{
    padding: 0 ;
}

#about-page .about__section h4{
    font-size: 2rem;
    color: #64A1B3;
    margin-bottom: 64px;
}
#about-page .about__section h5{
    font-size: 24px;
    color: #4D6A72;
    margin-bottom: 40px;
    display: flex;
    white-space: nowrap;
}
#about-page h4,
#about-page h5,
#about-page .section-p{
    max-width: 1200px;
    margin: 0 auto;
}
#about-page h5::before,
#about-page h5::after{
    content:"";
    height: 1px;
    background-color: #4D6A72;
    top: 22px;
    position: relative;
}
#about-page h5::before{
    margin-right: 8px;
    width: 24px;
}
#about-page h5::after{
    margin-left: 8px;
    width: 73.6%;
}

#about-page .about__item h6{
    font-size: 24px;
    color:#4D6A72;
    text-align: center;
}
#about-page .about__list {
    max-width: 1000px;
    margin: 0 auto;
    display: initial;
}
#about-page .about__item{
    max-width: 1000px;
    margin: 0 auto 80px;
}
#about-page .about__item-top{
    margin-bottom: 80px;
}
#about-page .about__item-top ul{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#about-page .about__item-top li {
    display: flex;
    align-items: center;
    justify-content: initial;
    padding-bottom: 24px;
    border-bottom: 1px solid #64A2B3;
    gap: 5px;
}
#about-page .about__item-top li span{
    width: 24%;
    color: #64A2B3;
}
#about-page .about__item-top li p{
    margin-bottom: 0;
    color: #262626;
    width: 76%;
}
#about-page .about__item-image ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}
#about-page .about__item-image{
    margin-bottom: 120px;
}
#about-page .about__item-image p,
#about-page .about__item-network p{
    margin-bottom: 40px;
    text-align: center;
}
#about-page .section__bottom h5{
    margin-bottom: 64px;
}
#about-page .greeting-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 46px;
}
#about-page .greeting-img {
    width: 35%;
}
#about-page .greeting-text {
    width: 65%;
}
#about-page .greeting-text p {
    margin-bottom: 24px;
    max-width: 650px;
    line-height: 24px;
}
#about-page .greeting-name {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 24px;
    text-align: right;
}
#about-page .greeting-text-p{
    margin-bottom: 40px;
}
#about-page .about__item-top h6{
    margin-bottom: 88px;
}
#about-page .about__item-greeting h6{
    margin-bottom: 80px;
}
#about-page .about__item-image h6,
#about-page .about__item-mission h6,
#about-page .about__item-network h6{
    margin-bottom: 66px;
}
#about-page h6{
    position: relative;
}
#about-page h6::after{
    content: "";
    background-color: #4D6A72;
    width: 64px;
    height: 5px;
    display: block;
    left: 50%;
    bottom: -24px;
    position: absolute;
    transform: translateX(-50%);
}
#about-page .about__item-mission p{
    margin-bottom: 80px;
    text-align: center;
}

#about-page .about__item-network li p{
    text-align: left;
    margin-bottom: 0;
}
#about-page .section-p{
    margin-bottom: 64px;
    padding-left: 24px;
}
#about-page .slider li{
    width: 300px;
    margin: 0 25px;
}
    #about-page .slider-contents{
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
/* 【ABOUT US ページ mobile】 */
@media (max-width: 767px){
    #about-page .about__contents {
        margin-top: 40px;
    }
    #about-page .about__item-greeting{
        margin-bottom: 24px;
    }

    #about-page .about__section h4{
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 24px;
    }
    #about-page .about__section h5{
        font-size: 18px;
        margin-bottom: 16px;
    }
    #about-page h5::before{
        top:17px;
        left: -16px;    
        margin-right: 0px;
    }
    #about-page h5::after{
        top: 17px;
        right: -16px;
        margin-left: 0;
    }
    #about-page h6::after{
        bottom: -16px;
        
    }
    #about-page .about__item h6{
        font-size: 18px;
        margin-bottom: 40px;
    }
    #about-page .about__section p{
        text-align: initial;
        line-height: 2;
    }
    #about-page .about__item-top li {
        flex-direction: column;
        padding-bottom: 16px;
    }
    #about-page .about__item-top li span{
        width: 100%;
    }
    #about-page .about__item-top li p{
        font-size: 14px;
        width: 100%;
    }
    #about-page .about__item-image{
        margin-bottom: 0;
    }
    #about-page .about__item-image ul{
        gap: 18px;
    }
    #about-page .about__item-image p{
        font-size: 14px;
        margin-bottom:24px;
        
    }
        #about-page .about__item-network p{
            font-size: 16px
        }
    #about-page .greeting-top {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 24px;
    }
    #about-page .greeting-img {
        width: 37%;
        margin: 0 auto;
    }
    #about-page .greeting-text {
        width: 100%;
    }
     #about-page .about__item-mission p{
        margin-bottom: 24px; 
    }
    #about-page .about__item-top h6{
        margin-bottom: 48px;
    }
    #about-page .greeting-text-p{
        margin-bottom: 32px;
    }
    #about-page .section-p{
        margin: 0 auto 40px;
        line-height: 1.5;
    }
    #about-page .slider li{
        width: 260px;
        padding: 0 16px;
        margin: 0 auto;
    }
    
}

/* ------------------------------------------------- */
/* 【404 ページ】 */
#warning .breadcrumb{
    margin-top: 110px;
}
.warning__item{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0 auto;
}
#warning .warning__title{
    font-size: 64px;
    background-color: #64A1B3;
    color: #fff;
    width: 100%;
    text-align: center;
    margin-bottom: 40px
}
#warning .warning__text{
    color: #64A1B3;
    letter-spacing: 1.75px;
    margin-bottom: 100px;
}
/* 【404 ページ】mobile */
@media (max-width: 767px){
    .warning__item{
        width: 100%;
        padding: 0 16px;
        height: 100%;
        margin: 50px auto;
    }
    #warning .warning__title{
        margin-bottom: 20px;
        font-size: 20px;
    }
    #warning .warning__text{
        font-size: 14px;
        letter-spacing: 1px;
        margin-bottom: 20px;
    }
    
}