@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&display=swap');

/* font-------------------------------------------------------------------------------------*/
.font_mon,.font_mon_l{font-family:'Open Sans','Montserrat','Zen Kaku Gothic New', 'Noto Sans JP', 'Comfortaa', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    font-weight: 500;
}
body{font-family:'Zen Kaku Gothic New', 'Noto Sans JP', 'Comfortaa', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.con_title,h3,#cms_5-c .box_txt1::before{font-family:'Zen Old Mincho','Noto Sans JP', 'Comfortaa', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;} 

.font_bold {font-weight: 500;}
p.info_title {opacity: 0.6;}
.opacity07{opacity:0.8;}
/* font-------------------------------------------------------------------------------------*/

/* color-------------------------------------------------------------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #514842;}
.txt_color1,.hvr_txt_color1:hover{color: #00afcc} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #f4feff} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #00afcc} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #00a1da} /* アクセントカラー2 */
.txt_color5,.hvr_txt_color5:hover{color: #00a1da} /* アクセントカラー3 */
/* background-color */
.bg_black,.hvr_bg_black:hover{background-color: #514842} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #00afcc} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #f4feff;
                                background-image: url(dup/img/bg.jpg);
                                background-size: 100%;
                                background-position: center;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #00afcc} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #00a1da}/* アクセントカラー2 */
.bg_color5,.hvr_bg_color5:hover{background-color: #00a1da} /* アクセントカラー3 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #00afcc !important}
.border_color2,.hvr_border_color2:hover{border-color: #f4feff !important}
.border_color3,.hvr_border_color3:hover{border-color: #00afcc !important}
.border_color4,.hvr_border_color4:hover{border-color: #00a1da !important}
.border_color5,.hvr_border_color5:hover{border-color: #00a1da !important}

.con3_wrap h3, .con3_wrap p {color: #00a1da;}
#cms_3-a .bg_color4,#header.active,span.footer_bg,#bottom_tel a{background:#f4feff;}
.con_before{background:#00afcc;}

/*blog*/
/*linkStyle*/
a.linkStyle {
    color: #00afcc;
    transition: 0.5s;}
a.linkStyle:hover {
    color: #514842;}
/*blog*/
/* color-------------------------------------------------------------------------------------*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img {height: 94vh;}
header {padding: 10px !important;}
video.video {transform: translate(-50%,-56%);}

/*装飾に便利なposi_rel*/
.con1_img{position: relative;}

#top_contents1 .info_title {color: #00afcc;
                            font-weight: 300 !important;}
                            
.con1_img:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -200px;
    left: 0;
    width: 77%;
    height: 200px;
    background-size: auto auto;
    background: rgb(132,217,255);
    background: linear-gradient(86deg, rgb(195 241 255) -55%, rgb(235 255 252) 43%, rgba(255,255,255,1) 86%);
    opacity: 1;
    z-index: 0;}

#top_contents2:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -36px;
    right: -81px;
    width: 635px;
    height: 37px;
    background-size: auto auto;
    background: rgb(132,217,255);
    background: linear-gradient(86deg, rgb(195 241 255) -37%, rgb(235 255 252) 89%, rgba(255,255,255,1) 86%);
    opacity: 0.5;}

span.con3_bg {
    background: rgb(232,255,253);
    background: linear-gradient(86deg, rgba(232,255,253,1) 0%, rgba(247,254,255,1) 49%, rgb(234 252 255) 100%);}

#top_contents3 .con3_no {
    font-size: 98px;
    left: 12px;
    bottom: -33px;
    font-weight: 300;
    color: #63e2f7;
    mix-blend-mode: multiply;
    opacity: 0.8;}
 
.catch {
    z-index: 3;
    width: 51vw;
    transform: translate(-50%,-48%);}

.f_banner {
    max-width: 300px;
    padding: 0px 0px 25px;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/   


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/   
#footer_info .info_title,.sub_title{font-weight: 300;}
div#logo2 {width: 260px;}
div#footer {
    background: rgb(0,161,218);
    background: linear-gradient(359deg, rgba(0,161,218,1) 0%, rgba(71,223,255,1) 125%);}

.cms_title .font_mon{color:#00a1da;}

#fix_sns_link {
    position: fixed;
    z-index: 4;
    left: 0;
    top: 45%;
    display: block;
    background: #f5efe7;
    border-radius: 0 10px 10px 0;
}
#fix_sns_link li {
padding: 10px 0px;
}


#bottom_line{
	right: 392px;
	bottom: 0;
	z-index: 4;
}
#bottom_line a{
	height: 92px;
	background-color: #f8fffb;
}
#bottom_line a span{
color: #06C755 !important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/   

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/   
#page_title .title_img {
    height: 400px;
    background-position: center bottom 14%;}
    
/*【文字の左に横線】*/
#cms_2-a h3.cate_title {
    padding: 0;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    border: 0px;}
#cms_2-a h3.cate_title::before {
    border-top: 1px solid;
    content: "";
    flex-grow: 1;
    max-width: 35px;
    opacity: 0.6;
    margin-right: 1rem;
    color: #00a1da;}
#cms_2-a .cate {margin-bottom: 75px;}

#cms_6-c .circle, #cms_6-c .arrow {display:none;}
#cms_6-c .cate_box {margin-bottom:50px;
                    border-radius:0px 0px 5px 5px ;}
#cms_6-c h3.box_title {border-bottom: dotted 1px #00a1da;}

#cms_6-c .cate_box::before,.cms_6-c .cate_box::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -19px;
    right: -2%;
    width: 98%;
    height: 98%;
    background-size: auto auto;
    background: rgb(132,217,255);
    background: linear-gradient(86deg, rgb(195 241 255) -37%, rgb(235 255 252) 89%);
    opacity: 0.5;
    z-index: -1;}



/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/   

/*タブレット*/
@media screen and (max-width: 768px){
#main_img {height: 46vh;}
section#con_nav {padding: 0 10px 300px;}
h2.nav_title {
    font-size: 97%;
    padding: 0 5px;
    letter-spacing: 1px;}

.con1_img:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -87px;
    left: -3%;
    width: 106%;
    height: 406px;
    background-size: auto auto;
    background: rgb(132,217,255);
    background: linear-gradient(179deg, #f4feff -14%, rgb(235 255 252) 77%, rgba(255,255,255,1) 102%);
    opacity: 1;
    z-index: -1;}
    
#footer_info .info_title {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;}
.footer_tel {padding-top: 70px;}
.catch {
    z-index: 3;
    width: 65vw;
    transform: translate(-50%,-48%);}
#fix_sns_link li {
    width: 26px;
    padding: 7px 0;
    margin: 0 7px;}

#bottom_line a{height: 50px;}
#bottom_line, #bottom_tel {
    max-width: inherit;
    width: calc(50% - 25px) !important;
    display: inline !important;}
#bottom_line {right: calc(50% + 25px);}
footer .footer_item {padding-bottom: 80px;}
#page_title .title_img {height: 200px;}

.f_banner {
    max-width: 307px;
    padding: 95px 0px 0px;
    margin: 0 auto -40px;}
}


/*スマホ*/
@media screen and (max-width: 667px){

.logo_wrap {width: 180px;}
#header.active .logo_wrap {width: 160px;}
div#header {padding: 20px 0 15px;}
#main_img {height: 35vh;}
section#con_nav {padding: 0 10px 300px;}
#con_nav ul {
    margin-top: -31px;
    z-index: 3;}

.catch {
    z-index: 3;
    width: 80vw;
    transform: translate(-50%,-53%);
}
    
.con1_img:before {
    bottom: -163px;
    left: -10%;
    width: 120%;
    height: 406px;
    background: rgb(132,217,255);
    background: linear-gradient(179deg, #f4feff -17%, rgb(235 255 252) 61%, rgba(255,255,255,1) 102%);}

h3.con_title {
    font-size: 19px;
    letter-spacing: 1px;}

#top_contents3 .con3_no {
    font-size: 65px;
    left: 1px;
    bottom: -32px;}

.con3_wrap p {
    font-size: -webkit-calc(1rem - 1px);
    font-size: calc(1rem - 1px);}
    
#cms_6-c .cate_box::before, .cms_6-c .cate_box::before {right: -5%;}

section#top_contents2 {background-position: right 28% center;}
span.d_block.d_inline_tb.txt_color5.font_2dw.font_12_sp {font-size: 10px;}
#page_title .title_img {height: 100px;}
footer .footer_item {padding-bottom: 20px;}

#cms_2-a h3.cate_title::before{content:none !important;}
#cms_2-a h3.cate_title span {
    padding: 0;
    font-weight: bold;
    letter-spacing: 1px;
    border-bottom: solid 1px #00a1da;
    border-top: 0px;}
    
.f_banner{
    max-width: 270px;
    padding: 65px 0px 0px;
    margin: 0 auto -50px;}
    
h2.nav_title {
    font-size: 85%;
    padding: 0 2px;
}
p.nav_sub_title{
    font-size: -webkit-calc(1rem - 4px);
    font-size: calc(1rem - 4px);}
    
#bottom_tel a, #bottom_line a, #page_top {
    height: 60px;
    padding-bottom: 2px;}
#main_img::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(255 255 255 / 25%);
    z-index: 2;
}
}


/*20220607*/
video {
    height: auto;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

section#c_video {
    height: auto;
    width: 50%;
    position: relative;
    overflow: hidden;
    margin-top: 27px;
}

section#c_video::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 77%;
    height: 500px;
    background-size: auto auto;
    background: rgb(132,217,255);
    background: linear-gradient(86deg, rgb(195 241 255) -55%, rgb(235 255 252) 43%, rgba(255,255,255,1) 86%);
    opacity: 1;
    z-index: -1;
}

section#c_video::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgb(255 255 255 / 35%);
    mix-blend-mode: screen;
}


.catch {
    z-index: 3;
    width: 51vw;
    transform: translate(-50%,-20%);
}


section#con_nav {
    z-index: 2;
    position: relative;
}

#top_contents1 .info_title {z-index: 2;}

/*タブレット*/
@media screen and (max-width: 768px){
section#con_nav {
    z-index: 0;
    position: inherit;
}

section#c_video {
    height: 38vh;
    width: 100%;
    position: relative;
    overflow: inherit;
    margin-top: auto;
    margin: 20px 20px 50px 20px;}

section#con_nav {padding: 0 10px 300px;}
#top_contents1 .info_title {
    top: calc(-56vw - 45px);
    left: 0;
    mix-blend-mode: multiply;}

section#c_video::before {background: rgb(208 253 255 / 35%);}

section#c_video::after {
    bottom: -15%;
    left: -15%;}
    
.catch {
    transform: translate(-50%,-41%);
    width: 63vw;}
}


/*スマホ*/
@media screen and (max-width: 667px){
section#c_video {
    height: 29vh;
    width: 100%;
    position: relative;
    overflow: inherit;
    margin-top: auto;
    margin: 20px 0px 50px 0px;}

section#con_nav {padding: 0 10px 260px;}

h3.con_title {
    font-size: 19px;
    letter-spacing: 1px;
    padding-top: 40px;}
    
.catch {
    transform: translate(-50%,-40%);
    width: 73vw;}
    
#top_contents1 .info_title {
    top: calc(-59vw - 45px);
    left: 0;
    mix-blend-mode: multiply;}
}