@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap');
body,.top_cms_box .cms_title, .more, #info_title_box, #page_title, a[href^="tel:"], header #header #header_menu ul, #bottom_menu, #info .info_txt h3, .drawer-menu, #page10, #intro .intro_no, #con_h .con_no{font-family: 'Noto Serif JP', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"!important;font-weight: 400;}
.font_bold{font-weight: 600;}

/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
#top1,.intro_img,#contents,#contents .con_box{position: relative;}
/*リピートなし*/
#top1:before,.intro_img:before,.intro_img:after,#contents:before,#contents .con_box:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

.intro_img:before{
background-image: url(./Dup/img/obj4.png);
width: 300px;
height: 300px;
bottom: -60px;
left: -65px;
transform: scale(-1, -1);
}
.intro_img:after{
background-image: url(./Dup/img/obj4.png);
width: 400px;
height: 400px;
top: -60px;
right: -65px;
}

#top1:before,#contents:before{
background-image: url(./Dup/img/obj5.png);
width: 500px;
height: 270px;
top: -110px;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
z-index: 1;
}
#contents .con_box:before{
width: 200px;
height: 200px;
top: 0;
z-index: 1;
}
#contents .fadein:nth-of-type(1) .con_box:before{background-image: url(./Dup/img/obj1.png);right: 0;}
#contents .fadein:nth-of-type(2) .con_box:before{background-image: url(./Dup/img/obj2.png);left: 0;}
#contents .fadein:nth-of-type(3) .con_box:before{background-image: url(./Dup/img/obj3.png);right: 0;}
/*--------------------------------
全体
--------------------------------*/
header{background-color: rgba(255,255,255,0.7);}

.fix_banner{
width: 300px;
position: fixed;
bottom: 10px;
right: 85px;
z-index: 5;
}

/* スマホ時真ん中へ */
@media  screen and (max-width: 667px){
.fix_banner{
width: 250px;
}
}
/*--------------------------------
TOP
--------------------------------*/
#main_img{padding-top: 0;}
#main_img .main_img_wrap{height: 100vh;}
#main_img .main_img_wrap:before{background-color: transparent;}
.main1{
width: 32vw;
height: 42vw;
overflow: hidden;
margin: 0 auto;
margin-top: -7vw;
}
.main1 > span{
width: 100%;
height: 100%;
position: absolute;
top:50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.main1 img{
width: auto;
height: 100%;
}
.main2{
width: 20vw;
height: 20vw;
overflow: hidden;
position: absolute;
opacity: 0;
}
.main2 img{
width: auto;
height: 100%;
}
.main2.active{animation: anim1 3s ease 0s forwards;}
@keyframes anim1{
	0% {opacity: 0;top: 15vw;left: 39vw;}
	70% {opacity: 1;top: 11vw;left: 5vw;}
	100% {opacity: 0;top: 11vw;left: 5vw;}
}

.main3{
width: 25vw;
height: 25vw;
overflow: hidden;
position: absolute;
opacity: 0;
}
.main3 img{
width: auto;
height: 100%;
}
.main3.active{animation: anim2 3s ease 0s forwards;}
@keyframes anim2{
	0% {opacity: 0;top: 10vw;right: 37vw;}
	70% {opacity: 1;top: 0;right: 0;}
	100% {opacity: 0;top: 0;right: 0;}
}

.main4{
width: 30vw;
height: 13vw;
overflow: hidden;
position: absolute;
opacity: 0;
}
.main4 img{
width: 100%;
height: auto;
}
.main4.active{animation: anim3 3s ease 0s forwards;}
@keyframes anim3{
	0% {opacity: 0;bottom: 17vw;left: 35vw;}
	70% {opacity: 1;bottom: 3vw;left: 15vw;}
	100% {opacity: 0;bottom: 3vw;left: 15vw;}
}

.main5{
width: 16vw;
height: 8vw;
position: absolute;
opacity: 0;
}
.main5.active{animation: anim4 3s ease 0s forwards;}
@keyframes anim4{
	0% {opacity: 0;bottom: 20vw;right: 42vw;}
	70% {opacity: 1;bottom: 1vw;right: 20vw;}
	100% {opacity: 0;bottom: 1vw;right: 20vw;}
}

.catch{
width: 39vw;
height: 8vw;
position: absolute;
bottom: 18vw;
right: 1vw;
}
.catch img{
filter: blur(7px);
transform: scale(1.2);
opacity: 0;
}
.catch img.active{animation: blur 2s ease 0s forwards;}
@keyframes blur {
	0% {filter: blur(7px);transform: scale(1.2);opacity: 0;}
	100% {filter: blur(0);transform: scale(1.0);opacity: 1;}
}

.top_img1{
max-width:  800px;
width: 100%;
box-sizing: border-box;
}
.youtube{
	position: relative;
	max-width: 780px;
	width: 100%;
	text-align: center;
}
.youtube:before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 56.25%;
}
.youtube iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#intro{padding-bottom: 50px;}
#intro .intro_img{transform: none;}
#intro_bg{height: 500px;background-position: center center;}
#contents .con_box,#contents .con_box .con_img{border-radius: 0;}
#contents .con_box .con_img{height: 500px;}

.svg_wrap{display: none;}

#info_title_box{position: relative;}
#info_title_box:before{
content: "";
display: block;
background-color: #afbec8;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
mix-blend-mode: multiply;
opacity: 0.6;
}
.blue_bg{
margin-top: -55px;
margin-bottom: 100px;
}
#top1 .left{padding-right: 5%;}
/*--------------------------------
下層
--------------------------------*/

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

.main1{
width: 45vw;
height: 55vw;
}

}

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

.blue_bg{
display: block;
padding-bottom: 50px;
margin-bottom: 50px;
}
#top1 .left{
width: 60%!important;
padding-right: 0;
margin: 0 auto;
}
#top1 .right{
width: 60%!important;
margin: 0 auto;
}
#top1 .box3 p{
width: 60%!important;
margin: 0 auto;
}

}

/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){

#main_img .main_img_wrap{height: 70vh;}
.main1{margin-top: 14vw;}
.main2.active{animation: anim1-2 3s ease 0s forwards;}
.main3.active{animation: anim2-2 3s ease 0s forwards;}
.main4.active{animation: anim3-2 3s ease 0s forwards;}
.main5.active{animation: anim4-2 3s ease 0s forwards;}
.catch{
width: 46vw;
height: 9vw;
bottom: auto;
right: auto;
top: 54vw;
left: 2vw;
}
#top1:before, #contents:before{
width: 300px;
height: 165px;
top: -75px;
}
.intro_img:after{
width: 250px;
height: 250px;
top: -50px;
right: -55px;
}
.intro_img:before{
width: 250px;
height: 250px;
bottom: -50px;
left: -55px;
}
#intro_bg,#intro_sp{height: 250px;}

#contents .con_box .con_img{
height: 400px;
border-radius: 0!important;
}
#contents .fadein:nth-of-type(2) .con_img{height: auto;}

#top1 .left,#top1 .right,#top1 .box3 p{width: 80%!important;}


}
@keyframes anim1-2{
	0% {opacity: 0;top: 25vw;left: 39vw;}
	70% {opacity: 1;top: 19vw;left: 5vw;}
	100% {opacity: 0;top: 19vw;left: 5vw;}
}
@keyframes anim2-2{
	0% {opacity: 0;top: 25vw;right: 37vw;}
	70% {opacity: 1;top: 22vw;right: 0;}
	100% {opacity: 0;top: 22vw;right: 0;}
}
@keyframes anim3-2{
	0% {opacity: 0;bottom: 17vw;left: 35vw;}
	70% {opacity: 1;bottom: 10vw;left: 10vw;}
	100% {opacity: 0;bottom: 10vw;left: 10vw;}
}
@keyframes anim4-2{
	0% {opacity: 0;bottom: 20vw;right: 42vw;}
	70% {opacity: 1;bottom: 8vw;right: 20vw;}
	100% {opacity: 0;bottom: 8vw;right: 20vw;}
}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){
#main_img .main_img_wrap{height: 470px;}
.main1 {
width: 60vw;
height: 70vw;
}
.main2.active{animation: anim1-3 3s ease 0s forwards;}
.main3.active{animation: anim2-3 3s ease 0s forwards;}
.main4.active{animation: anim3-3 3s ease 0s forwards;}
.main5.active{animation: anim4-3 3s ease 0s forwards;}
.main2{
width: 29vw;
height: 20vw;
}
.main4{
width: 30vw;
height: 19vw;
}
.main5{
width: 24vw;
height: 16vw;
}
.catch{
width: 58vw;
height: 11vw;
left: auto;
right: 1vw;
top: 65%;
}

#top1:before, #contents:before{
width: 250px;
height: 140px;
top: -60px;
}
#contents:before{top: -75px;}

#intro{padding-bottom: 0;}
.intro_img:before{
width: 150px;
height: 150px;
bottom: -30px;
left: -30px;
}
.intro_img:after{
width: 150px;
height: 150px;
top: -30px;
right: -30px;
}
#contents .con_box:before{
width: 120px;
height: 120px;
}
#contents .con_box .con_img{height: 250px;}

#top1 .left,#top1 .right,#top1 .box3 p{width: 95%!important;}


#page_title{background-position: center right -70px;}
#page_title #filter_white{padding-top: 90px;}

}
@keyframes anim1-3{
	0% {opacity: 0;top: 40vw;left: 39vw;}
	70% {opacity: 1;top: 25vw;left: 5vw;}
	100% {opacity: 0;top: 25vw;left: 5vw;}
}
@keyframes anim2-3{
	0% {opacity: 0;top: 40vw;right: 37vw;}
	70% {opacity: 1;top: 22vw;right: 0;}
	100% {opacity: 0;top: 22vw;right: 0;}
}
@keyframes anim3-3{
	0% {opacity: 0;bottom: 40vw;left: 35vw;}
	70% {opacity: 1;bottom: 15vw;left: 5vw;}
	100% {opacity: 0;bottom: 15vw;left: 5vw;}
}
@keyframes anim4-3{
	0% {opacity: 0;bottom: 40vw;right: 42vw;}
	70% {opacity: 1;bottom: 30vw;right: 5vw;}
	100% {opacity: 0;bottom: 30vw;right: 5vw;}
}

/*IE*/
@media all and (-ms-high-contrast: none) {}




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #333; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #333;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #333;}
.bg_color3 .linkStyle{color: #fff;}
.bg_color4 .linkStyle{color: #333;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block;}
}

/*--------------------------------
カラー
--------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #333333;}
.txt_black,.hvr_txt_black:hover{color: black;}
.txt_white,.hvr_txt_white:hover{color: white;}
.txt_red,.hvr_txt_red:hover{color: red;}
.txt_color1,.hvr_txt_color1:hover{color: #AFBEC8;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #EBEFF3;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #32649b;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #F6F5F5;} /* アクセントカラー2 */

/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: black;} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #AFBEC8;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #EBEFF3;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #32649b;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #F6F5F5;} /* アクセントカラー2 */
.bg_color5{background-color: #ebeff3;}
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color */
.border_white,.hvr_border_white:hover{border-color: white;}
.border_black,.hvr_border_black:hover{border-color: black;}
.border_color1,.hvr_border_color1:hover{border-color: #AFBEC8;}
.border_color2,.hvr_border_color2:hover{border-color: #EBEFF3;}
.border_color3,.hvr_border_color3:hover{border-color: #32649b;}
.border_color4,.hvr_border_color4:hover{border-color: #F6F5F5;}