﻿@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@font-face {
font-family: "RM1c_bol";
  src: url("./Dup/img/RM1c_bol.ttf") format("ttf"),url("./Dup/img/RM1c_bol.eot") format("eot"),url("./Dup/img/RM1c_bol.woff") format("woff"),url("./Dup/img/RM1c_bol.woff2") format("woff2");
}
body{
font-family: 'Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
font-weight: 400;
}
.font1,.font_bold{font-family: 'RM1c_bol', sans-serif;}
/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
.main_wrap,#contents .con_video h3,#contents .box .txt_wrap,#top_cms .cms_title{position: relative;}
/*リピートなし*/
.main_img_wrap:before,.main_wrap:before,#contents .con_video h3:before,#contents .box .txt_wrap:before,#contents .box figure:before,#contents .box figure:after,
#top_cms .cms_title:before,.page_title_box:before,#title_img:after{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

.menu .nav ul li a::before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 24px;
display: block;
text-align: center;
margin-bottom: 7px;
color: #96cdcd;
}
.menu .nav ul li:nth-of-type(1) a::before{content: "\f1ea";}
.menu .nav ul li:nth-of-type(2) a::before{content: "\f1b0";}
.menu .nav ul li:nth-of-type(3) a::before{content: "\f157";}
.menu .nav ul li:nth-of-type(4) a::before{content: "\f007";}
.menu .nav ul li:nth-of-type(5) a::before{content: "\f4ad";}
.menu .nav ul li:nth-of-type(6) a::before{content: "\f095";}

.main_img_wrap:before{
background-image: url(./Dup/img/catch.png);
background-size: 100%;
width: 45vw;
height: 22vw;
bottom: 16%;
left: 0;
z-index: 1;
}

.main_wrap:before{
background-image: url(./Dup/img/bubble.png);
background-size: 100%;
width: 100%;
height: 10vw;
top: -8vw;
left: 0;
}

#contents .con_video h3:before{
content: '';
position: absolute;
bottom: -10px;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
display: inline-block;
width: 35px;
border-bottom: 2px solid;
}
#contents .box .txt_wrap:before{
background-image: url(./Dup/img/t1.png);
width: 200px;
height: 125px;
top: -100px;
left: -75px;
}
#contents .box:nth-of-type(3) .txt_wrap:before{background-image: url(./Dup/img/t2.png);left: 30px;}
#contents .box:nth-of-type(5) .txt_wrap:before{background-image: url(./Dup/img/t3.png);}

#contents .box .t_cms_img1:before{
background-image: url(./Dup/img/obj1.png);
background-size: 100%;
width: 15vw;
height: 12vw;
bottom: -10px;
right: 0;
z-index: 3;
}
#contents .box .t_cms_img2:before{
background-image: url(./Dup/img/obj2.png);
background-size: 100%;
width: 15vw;
height: 12vw;
bottom: -20px;
left: 10px;
z-index: 3;
}
#contents .box .t_cms_img3:before{
background-image: url(./Dup/img/obj3.png);
background-size: 100%;
width: 15vw;
height: 12vw;
bottom: 0;
right: -10px;
z-index: 3;
}

#contents .box:nth-child(odd) figure:after,
#contents .box:nth-child(even) figure:after{
background-size: 101% 101%;
width: 101%;
height: 101%;
border: none;
bottom: auto;
top:50%;
right: auto;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 2;
opacity: 1;
}
#contents .box .t_cms_img1:after{background-image: url(./Dup/img/frame1.png);}
#contents .box .t_cms_img2:after{background-image: url(./Dup/img/frame2.png);}
#contents .box .t_cms_img3:after{background-image: url(./Dup/img/frame3.png);}

#top_cms .cms_title:before{
background-image: url(./Dup/img/obj4.png);
width: 100px;
height: 105px;
top: -23px;
left: -50px;
opacity: 0.5;
}

#title_img:after{
background-image: url(./Dup/img/bubble.png);
background-size: 100%;
width: 100%;
height: 8vw;
bottom: -1px;
left: 0;
}
.page_title_box:before{
background-image: url(./Dup/img/obj4.png);
width: 100px;
height: 105px;
bottom: auto;
top: -15px;
left: -50px;
border-bottom: none;
}
/*--------------------------------
全体
--------------------------------*/
#loading_logo{max-width: 300px;}

.menu .nav ul li{border: none;}
.nav1.font_bold{font-family: 'Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}
.nav2{color: #96cdcd;}
.button_container span.bg_black{
height: 2px;
background-color: #21a1ad;
}

.more_box .more:hover .txt_color_nomal{color: white;}
.more_box .more:hover:before,.more_box .more:hover span:before{background-color: white;}
.more_box .more:hover span:after{border-left: 5px solid white;}

footer{background-color: #c0e3e3;}
footer .txt_white{color: #644b41;}

/* 角丸 */
.v_type3 .cate_box,.more_box .more,.box_img1{border-radius: 30px;}
#tel_CONTACT a{border-radius: 15px;}
#title_img{border-top-left-radius: 30px;border-top-right-radius: 30px;}
/*--------------------------------
TOP
--------------------------------*/
.other .box{background-color: #fff;}
.other .box:hover{background-color: #fff;}
.other .box figure{opacity: 0.3;}
.other .box:hover figure{opacity: 0.1;}
.other .box p, .other .box h2 span,
.other .box:hover p, .other .box:hover h2 span{color: #333;}

.vegas-overlay{opacity: 0.3!important;}
.main_wrap .menu.pd_t-10px{padding-top: 50px;}
.main_img_wrap .navi{display: none;}

#contents{background-color: #eaf3f3;}
.con_video .video{
max-width: 900px;
box-sizing: border-box;
margin: 0 auto 100px;
}
.con_video .txt_color_nomal{color: #21a1ad;}

#contents .box .txt_wrap{z-index: 1;width: 35%;}
#contents .box .txt_wrap h3 .txt_color_nomal{color: #21a1ad;}
#contents .box figure{width: 50%;}

#top_cms .cms_title .txt_color3{color: #21a1ad;}

/* TOP NEWS */
.topcms_news_type2 .cate_box {
	width: 46.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	margin-bottom: 30px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 0);
	/* padding: 20px; */
	/* border-radius: 20px; */
	/* background-color: #f5f5f5; */
}
.topcms_news_type2 .cate_box:hover {
	transform: translateY(-5px);
}
.topcms_news_type2 .cate_box .box_item {
	cursor: pointer;
}
.topcms_news_type2 .txt_height {
	height: 5em
}
.topcms_news_type2 .box_img1 {
	border-radius: 10px;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_news_type2 .cate_box {width: 100%!important;}
.topcms_news_type2 .txt_height {height: 3em}
}


/* TOP VOICE */
.v_type3 .cate_box{border: 1px solid #c9baa9;background-color: rgba(255,255,255,0.8);}
.v_type3 .box_title1{color: #a67c52;}


/*--------------------------------
下層
--------------------------------*/
.all_page.bg_color4{background-color: #eaf3f3;}

#title_img,#title_img span{height: 350px;}
#page_title p.txt_shadow-l{text-shadow: none;color: #644b41;}
#page_title p.font_25{color: #21a1ad;}
#page_title p.font_45{
text-shadow:
2px  2px 0px #ffffff,
-2px  2px 0px #ffffff,
2px -2px 0px #ffffff,
-2px -2px 0px #ffffff,
2px  0px 0px #ffffff,
0px  2px 0px #ffffff,
-2px  0px 0px #ffffff,
0px -2px 0px #ffffff;
}

.cms_wrap.width_90per,#page7,#page8,#page9,#page10{
width: 100%!important;
max-width: none;
margin: 0;
padding-left: 20%;
padding-right: 5%;
}

@media screen and (max-width: 1280px){

#contents .box .txt_wrap{width: 45%;}
#contents .box .txt_wrap.pd_l-100px{padding-left: 5%;}
#contents .box .txt_wrap.pd_r-100px{padding-right: 5%;}
#contents .box figure{width: 50%;}

#contents .box .txt_wrap:before{
width: 170px;
height: 110px;
top: -75px;
left: -45px;
}
#contents .box:nth-of-type(3) .txt_wrap:before{left: 10px;}

}


@media screen and (max-width: 1000px){

header.all_header .logo{width: 15%;}

}


/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){
.top_page header .logo{width: 30%;}
.top_page .button_container{bottom: 110px;}
.main_img_wrap:before{
width: 70vw;
height: 34vw;
bottom: 20%;
}

.main_wrap:before,#title_img:after{background-image: url(./Dup/img/bubble2.png);}
.main_wrap:before{
height: 32vw;
top: -31vw;
}
#title_img:after{height: 25vw;}

.con_video .video{max-width: 600px;}
#contents .box .txt_wrap{width: 80%;}
#contents .box .txt_wrap.pd_l-100px{padding-left: 0;}
#contents .box .txt_wrap.pd_r-100px{padding-right: 0;}
#contents .box figure{width: 80%;}

#contents .box .txt_wrap:before{
left: -55px;
}
#contents .box:nth-of-type(3) .txt_wrap:before{left: -65px;}
#contents .box .t_cms_img1:before{
width: 25vw;
height: 20vw;
}
#contents .box .t_cms_img2:before{
width: 22vw;
height: 18vw;
}
#contents .box .t_cms_img3:before{
width: 24vw;
height: 20vw;
}

#top_cms .cms_title:before{
width: 70px;
height: 75px;
top: -15px;
left: -35px;
}

#title_img, #title_img span{height: 270px;}
.page_title_box:before{
width: 80px;
height: 85px;
top: -25px;
left: -35px;
}

.cate_list li{width: 45%;}

}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){

#loading_logo{width: 70%;}

header.all_header .logo{width: 25%;}

.top_page .button_container{bottom: 10px;}

.main_img_wrap{height: 65vh;}
.main_img_wrap:before{bottom: 85px;}
.main_wrap{margin-top: 63.5vh;}

#contents .box .txt_wrap,#contents .box figure{width: 90%;}
#contents .box .txt_wrap:before{
width: 120px;
height: 80px;
top: -60px;
left: -35px;
}
#contents .box:nth-of-type(3) .txt_wrap:before{left: -35px;}

#top_cms .cms_title:before{
width: 50px;
height: 53px;
top: -16px;
left: -20px;
}
.other .box_item .posi_center{width: 100%;}

#page_title p.font_45{text-shadow: none;}
#page_title p.txt_shadow-l,#page_title p.font_25{color: white;}
#title_img, #title_img span{height: 200px;}
#title_img:after{background-color: transparent;top: auto;}
.page_title_box:before{
top:50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.img-container:after{
content: "";
background-color: rgba(150,205,205,0.5);
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.cms_wrap.width_90per,#page7,#page8,#page9,#page10{padding-left: 5%;}

.cate_list li{width: 100%;}

#tel_CONTACT a.width_300 {width: 250px;}

}

/*IE*/
@media all and (-ms-high-contrast: none) {

.top_cms_box .more_box .more div{padding-top: 0;}
#page8 #tel_CONTACT p a{padding-top: 20px;}
#cms_1-e .date{padding-top: 10px!important;padding-bottom: 10px!important;}
.pager li a span{padding-top: 10px!important;}
#cms_3-e .cate_title,#cms_3-e .sub_cate_title{padding-top: 5px!important;}
#page9 p a{padding-top: 3px;}

}




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #21a1ad; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #21a1ad;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}

/*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: #96CDCD;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #cde1e1;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #644B41;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #9B8773;} /* アクセントカラー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: #96CDCD;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #cde1e1;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #644B41;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #9B8773;} /* アクセントカラー2 */
.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: #96CDCD;}
.border_color2,.hvr_border_color2:hover{border-color: #cde1e1;}
.border_color3,.hvr_border_color3:hover{border-color: #644B41;}
.border_color4,.hvr_border_color4:hover{border-color: #9B8773;}