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;
    color: #333;
}

: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:#FFF;
    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;}

.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: 1rem;
    color: #333;
    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:#f1eaea;
    background-repeat: no-repeat; 
    background-size:cover;
    background-position: center;
    position: relative;
    padding:0;
}


#box1 h1{width: 100%;text-align: center;padding:8px;}

.kakomi{border: 1px solid #333;padding: 16px;background: #FFF;}

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


#box2{
    background-color:#FFF;
}

@media screen and (max-width: 899.9px) {
    #box2{background-size: 150%;
        height: 100vh;
    }
}

.inner_center{max-width: 885px;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;width: 100%;text-align:center;}
.inner_center p{font-size: 16px;line-height: 1.6;}

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

#box3{
    background-color:#f1eaea;
    position: relative;
}


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

.box__area{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;margin-top: 24px;}
.box_inner{width: 32%;}
.inner_image{margin-bottom: 28px;}
.inner_text h3{font-size: 17px;line-height: 1.7}
.inner_text p{font-size: 14px;text-align: left;line-height: 1.67;}

@media screen and (max-width: 899.9px){
    .box_inner{width: 100%;margin-bottom: 32px;}
.inner_text h3{font-size: 16px;}
.inner_text p{font-size: 14px;text-align: left;line-height: 1.67;}
}

#box4{
    background: #FFF;
    color: #333;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}


.address{font-size: 14px;line-height: 2.1;margin-top:30px; }

.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;
}


#footer{
    border-top: 1px solid #333;
	background-color:#FFF;
	color:#333;
	padding:40px;
	text-align:center;
}

.footer__inner{display: -webkit-box;display: -ms-flexbox;display: flex;max-width: 1000px;margin: auto;
    -ms-flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
    flex-wrap: wrap;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-line-pack: center;align-content: center;}
#footer .logo{}
#footer ul{display: -webkit-box;display: -ms-flexbox;display: flex;}
#footer ul li{margin-right: 24px;}

#footer a{
	 color:#FFF;
    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;width: 100%; }
    #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:#333;
	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;}

table{display: inline-block;margin-top: 40px;}
table tr{border-bottom: 1px solid #333;}
table tr td{padding: 8px;}
table tr td:first-child{padding-right: 24px;}

/** 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;
    }
}