html {
    height: -webkit-fill-available;
}

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

.videoIframeWrap {
  position: relative;
  padding-top: calc( 100% * 3 / 4);
}
.videoIframeWrap>iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


@media screen and (max-width: 1300px) {
    html {
        font-size: 90%;
    }
}

@media screen and (max-width: 1080px) {
    html {
        font-size: 80%;
    }
}

@media screen and (max-width: 750px) {
    html {
        font-size: 70%;
        overflow-x: hidden;
    }
}

body {
    font-family: 'Noto Sans JP', serif;
    font-weight: 400;
    min-width: 320px;
    margin: 0 auto;
    font-size: 14px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
}

:focus {
    outline: none;
}

a {
    outline: none;
}

a:focus {
    outline: none !important;
    outline-style: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: transparent;
}


/*-- layout
-------------------------------------------------------*/

/*#header{
	padding: 40px;
	background:#666;
    color: #fff;
	text-align: center;
}*/

/** header
*******************************************************************/
#header {
    position: fixed;
    padding:0;
    width: 100%;
    background-color:rgb(250 227 0 / 56%);/* #fae300*/
    opacity: 1;
    z-index: 10;
    height: 90px;
    z-index: 999;
    top: 0;
    padding: 1px;
}

#header.Moveup {
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-animation: UpAnime 0.5s forwards;
    animation: UpAnime 0.5s forwards;
}

@-webkit-keyframes UpAnime {
    from {
        opacity: .8;
        -webkit-transform: translateY(-90px);
        transform: translateY(-90px);
    }

    to {
        opacity: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes UpAnime {
    from {
        opacity: .8;
        -webkit-transform: translateY(-90px);
        transform: translateY(-90px);
    }

    to {
        opacity: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}


#header.Movedown {
    top: 0;
    position: fixed;
    width: 100%;
    -webkit-animation: DownAnime 0.5s forwards;
    animation: DownAnime 0.5s forwards;

}


@-webkit-keyframes DownAnime {
    from {
        opacity: 0;
        -webkit-transform: translateY(-90px);
        transform: translateY(-90px);
    }

    to {
        opacity:1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}


@keyframes DownAnime {
    from {
        opacity: 0;
        -webkit-transform: translateY(-90px);
        transform: translateY(-90px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

#header h1{position: absolute;font-size: 14px;color: #000;font-weight: normal;}


header nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.hd__navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    height: 90px;
    margin:0;
}
.hd__logo{padding-left: 66px;padding-top: 16px;}

@media screen and (max-width: 899.9px) {
   .hd__logo{padding-left: 20px;padding-top: 16px;} 
}


.hd__navigation > li{
    width: 106px;
    text-align: center;
    height: 90px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    margin-right: 1px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.hd__navigation > li a {
    text-decoration: none;
    font-weight: 500;
    font-size: .7rem;
    color: #000;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    padding: 31px 0;
}




.box{
    color: #333333;
    padding: 40px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
}


#box1{
    background-color: #fae300;
    background-image:url(../image/slide01.jpg);
    background-repeat: no-repeat; no-repeat;
    background-size:cover;
    background-position: center;
    position: relative;
    padding:0;
}

.swiper{height: 100vh;width: 100vw;}
.swiper-slide{background-repeat: no-repeat;background-position: center;background-size: cover;}
.s01{background-image: url(../image/slide01.jpg);}
.s02{background-image: url(../image/slide02.jpg);}
.s03{background-image: url(../image/slide04.jpg);}
.s04{background-image: url(../image/slide03.jpg);}

@media screen and (max-width: 899.9px){
 .s03{background-image: url(../image/slide03sp.jpg);} 
 .s04{background-image: url(../image/slide01.jpg);}
}


#box1 h1{position: absolute;z-index: 3;width: 100%;text-align: center;padding: 40px;}

.top_scroll{position: absolute;bottom:40px;z-index: 3}


#box2{
    background-color:#efefef;
    background-image:url(../image/bg_policy.jpg);
    background-repeat: no-repeat; no-repeat;
    background-size:1200px;
    background-position:center bottom;
    padding-top: 80px;
}

@media screen and (max-width: 899.9px) {
    #box2{background-size: 150%;
        background-position:center bottom 60px;
        padding: 90px 20px 40px;
        height: 100vh;
    }
}

.inner_center{max-width: 885px;justify-content: flex-start;width: 100%;text-align:center;padding-bottom: 300px;}
.inner_center p{font-size: 16px;line-height: 2.4;}

@media screen and (max-width: 899.9px) {
    .inner_center{padding-bottom: 200px;}
    .inner_center p{font-size: 13px;line-height: 2.3;}
}

#box3{
    background-color: #fae300;
    background-image:url(../image/bg_service.jpg);
    background-repeat:  no-repeat;
    background-size:1200px;;
    background-position: top center;
    height: 640px;
    position: relative;
}

#bg_FFF{width: 100%;height: 411px;}

.inner_left{max-width: 885px;justify-content: flex-start;width: 100%;text-align: left;margin-top:98px;padding-bottom: 120px;
position: absolute;top:0;}
.text__area{width: 100%;font-size: 16px;line-height: 2.2;}

.box__area{display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 80px;}
.box_inner{width: 47%;}
.inner_image{margin-bottom: 28px;}
.inner_text h3{font-size: 19px;}


@media screen and (max-width: 899.9px){
    #box3{background-image:url(../image/bg_service_sp.jpg);background-size: cover;background-position: bottom center;padding-bottom: 30%;height: auto;padding: 40px 20px;}
    #bg_FFF{display: block;height: auto;padding: 40px 20px;}
    .inner_left{text-align: center;position: relative;margin-top: 0;padding-bottom: 290px;}
    .text__area{font-size: 13px;}
    .box__area{flex-direction: column;margin-top:-100px;text-align: center;}
    .box_inner{width: 100%;padding-bottom: 64px;z-index: 10;}
    .inner_text p{font-size: 11.5px;}
}

.box_nomal{
    color: #333333;
    padding: 40px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
    height: 100svh;
}


#box4{
    background: #EFEFEF;
    color: #333;
    display: block;
    padding: 80px 40px;
    width: 100%;
}

.bg__area{
    width: 316px;
    height: 250px;
    background-image: url(../image/bg_contact.png);
    background-size:316px;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 50px;
    padding-right: 26px;
    padding-bottom: 72px;margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom{display: flex;
flex-wrap: wrap;align-content: center;align-items: center;}

.company{font-size: 20px;line-height: 2.1;margin-top:30px;width: 100%; }
.names{font-size: 18px;line-height: 1.5;margin-top: 10px;width: 100%;}
.names span{font-size: 12px;display: block;width: 100%;}
.address{font-size: 14px;line-height:1.7;margin-top:10px;width: 100%; }
.btn{text-align: center;justify-content: center;width: 100%;}




#footer{
	background-color: #fae300;
	color:#333;
	padding:40px;
	text-align:center;
}

.footer__inner{display: flex;max-width: 1000px;margin: auto;
    flex-wrap: wrap;align-items: center;align-content: center;}
#footer .logo{width:220px;margin-right: 12%; }
#footer ul{display: flex;}
#footer ul li{margin-right: 24px;}

#footer a{
	 color:#333;
    text-decoration: none;
}

#footer small{width: 100%;text-align: center;font-size: 9px;line-height:2;}

@media screen and (max-width: 899.9px){
    #footer .logo{width:130px;margin-right:0; }
    #footer ul{margin-top: 24px;}
    #footer ul li{font-size: 11px;margin-right:11px;}
    #footer small{font-size: 8px;}
}


/*========= ページネーションCSS ===============*/

.pagination {
	position:fixed;
	right:20px;
	top: 50%;
  	-webkit-transform: translateY(-50%);
  	transform: translateY(-50%);
	font-size:1em;
	z-index: 10;
	list-style: none;
}

.pagination a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:#fff;
	position:relative;
	padding:4px;
}

.pagination a.active:after {
	-webkit-box-shadow:inset 0 0 0 5px;
	box-shadow:inset 0 0 0 5px;
}

/*現在地表示のテキストの設定*/
.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:0;
	opacity:0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
}

.pagination a:hover .hover-text {
	opacity: 1;
}

.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	-webkit-transition:-webkit-box-shadow 0.5s ease;
	transition:-webkit-box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease, -webkit-box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:"";
	position: absolute;
	margin:auto;
	top:0;
	right:3px;
	bottom:0;
}

/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
	.pagination a .hover-text{
		display: none;
	}	
}


.sub__title{font-size: 22px;display: block;margin-bottom: 30px;}





.copy{text-align: center;color: #FFF; padding: 17px 0;color: #B0B0B0;}

/** Utility
***************************************************************/
.u-fs-2em {
    font-size: 2em;
}

.u-fs-1_9em {
    font-size: 1.9em;
}

.u-fs-1_8em {
    font-size: 1.8em;
}

.u-fs-1_7em {
    font-size: 1.7em;
}

.u-fs-1_6em {
    font-size: 1.6em;
}

.u-fs-1_5em {
    font-size: 1.5em;
}

.u-fs-1_4em {
    font-size: 1.4em;
}

.u-fs-1_3em {
    font-size: 1.3em;
}

.u-fs-1_2em {
    font-size: 1.2em;
}

.u-fs-1_1em {
    font-size: 1.1em;
}

.u-fs-1em {
    font-size: 1em;
}

.u-fs-09em {
    font-size: .9em;
}

.u-fs-08em {
    font-size: .8em;
}

.u-fs-07em {
    font-size: .7em;
}

.u-fs-06em {
    font-size: .6em;
}

.u-fs-05em {
    font-size: .5em;
}

.u-lh--2 {
    line-height: 2;
}

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

.u-mt-63 {
    margin-top: 63px;
}

.u-mt-56 {
    margin-top: 56px;
}

.u-mt-48 {
    margin-top: 48px;
}

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

.u-mt-24 {
    margin-top: 24px;
}

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

.u-mt-24 {
    margin-top: 24px;
}

.u-mt-16 {
    margin-top: 16px;
}
.u-mt-16 {
    margin-top: 16px;
}
.u-mt-8 {
    margin-top: 8px;
}

.u-mt-0 {
    margin-top: 0;
}

.u-mb-32 {
    margin-bottom: 32px;
}

.u-mb-64 {
    margin-bottom: 64px;
}
.u-pb-64 {
    padding-bottom: 64px;
}

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

.u-mb-0 {
    margin-bottom: 0px;
}

.u-pd_0 {
    padding-bottom: 0;
}

.u-pt_0 {
    padding-top: 0;
}
.u-pl-0{padding-left: 0;}

.u-min-h-200 {
    min-height: 200px;
}

.u-over__hidden {
    overflow: hidden;
}

.text__center {
    text-align: center;
}

.text__left {
    text-align: left;
}

.text__right {
    text-align: right;
}

.dash {
    letter-spacing: -2px;
    margin-right: 4px;
}

.bold {
    font-weight: 700;
}

.u-c-red {
    color: #d7003a;
}

.u-c-blue{
    color: #425a70;
}

.u-c-fff {
    color: #fff;
}


.ds_frame {
    padding: 2%;
    background: #FFF;
    text-align: left;
    -webkit-box-shadow: 0 5px 10px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 10%);
}


.u-min-h120{ min-height: 120px;}

/* media Query
========================================================= */
@media screen and (max-width: 899.9px) {
    .u-pconly {
        display: none !important;
    }
}

@media screen and (min-width:900px) {
    .u-sponly {
        display: none !important;
    }

}

@media screen and (max-width:889px) {
    .hd__navigation {
        display: none !important;
    }
}


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

    .u-sponly__nav {
        display: none !important;
    }
}