﻿/*1024幅のPC時メニュー文字*/
@media screen and (max-width: 1410px){
    .menu .nav{width: 100%!important;}
    .menu .nav ul li{width: 12%;}
    .menu .nav ul li a{margin: 0 auto;}
    .menu .nav ul li:nth-child(3) a{width: 100px;}
    .menu .nav ul li:nth-child(5) a{width: 90px;}
    .menu .nav ul li:nth-child(6) a{width: 90px;}
    .menu .nav ul li a .nav1{
        font-size: 16px;
        letter-spacing: -0.03em;
    }
    .menu .nav ul li a .nav2{
        font-size: 15px;
        letter-spacing: 0em;
    }
}

/*交互に画像を配置する*/
#cms_2-f .cate_box:nth-child(even){flex-direction: row-reverse}

/*コンテンツ文字を真ん中に*/
.con_text_center{
    width: 90%;
    margin: 120px auto;
    font-size: 22px;
    text-align: center;
    line-height: 2;
}
/* タブレット */
@media screen and (max-width: 768px){
    .con_text_center{
        width: 80%;
        font-size: 20px;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .con_text_center{
        margin: 80px auto;
        width: 100%;
        font-size: 18px;
        letter-spacing: -0.12em;
    }
}

/*文字を太字に*/
.bold{
    font-weight: 500;
}

/*背景色を修正*/
#body,.bg_white,#contents.bg_color4, .all_page.bg_color4,#top_cms:before,footer,.top_cms_box .more_box .more,.all_page:before{
    background-color: #F3EFE0;
}

/* 文字がギザギザ対策 -------------------------------*//*
.delighter.started, .box_txt1, .txt_color_nomal, .txt_white,.nav2,.nav1,.bottom_menu a span{
    transform: rotate(0.03deg);
    text-shadow: 0 0 0.1px rgba(0,0,0,0.5)
}
.delighter.started.ended{transform: translatey(0%)rotate(0.03deg);}*/
/* CMS・下層ページ ----------------------------------*/
.btn_container img{box-shadow: none;}
#cms_3-e .box_txt1{
    background-color: #cff0f3;
    padding: 20px 20px!important;
    border-radius: 10px;
}
#cms_3-e .box_title1{color: #ff492d;}
#cms_1-g .date2{font-size: 28px;}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    #cms_3-e .box_title2{border-bottom: 1px solid #1daab8;}
    #cms_3-e .box_title1{color: #ff492d;}
    #cms_3-e .box_txt1{padding: 10px 10px!important;}
    #cms_1-g .date2{font-size: 19px;letter-spacing: 0em;}
}

/* メインイメージ -----------------------------------*/

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}

/* トップページ -------------------------------------*/
.top_btn:hover{background-color: #04a1b0;color: #fff; border-color: #121212;}
.top_btn{
    padding: 20px 10px;
    display: block;
    color: #121212;
    background-color: #ffcf0f;
    border: 2px solid;
    width: 300px;
    text-align: center;
    margin: 30px auto;
    transition: all 0.3s;
    
    animation-name:updownAnime2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-duration:2.5s; /* アニメーション時間 */
}

@keyframes updownAnime2{
  0% {transform: translateY(0);}
  60% {transform: translateY(0);}
  70% {transform: translateY(5px);}
  80% {transform: translateY(0px);}
  90% {transform: translateY(5px);}
  100% {transform: translateY(0px);}
}

.main_img{
    background-image: url(./Dup/img/main_img.jpg);
    background-size: cover;
    background-position: center center;
    height: 100vh;
}
#loading_logo{max-width: 440px;}
.main_img_wrap .top_logo{
    position: absolute;
    top: 48%;
    left: 49.5%;
    transform: translate(-50%, -50%);
    width: 75%;
    max-width: 1000px;
    z-index: 3;
animation-name: fadeInAnime;
animation-duration:6s; /* アニメーション時間 */
animation-delay: 15s; /* 〇秒後に変化 */
animation-fill-mode:forwards;
transition-timing-function: ease-in-out;
opacity: 0;
}

@keyframes fadeInAnime{
  0% {opacity: 0;}
  30% {opacity: 1;}
  80% {opacity: 1;}
  100% {opacity: 0;}
}
.main_img_wrap .catch{
    position: absolute;
    transform: translate(-50%, 0%);
    left: 50%;
    bottom: 20%;
    width: 30%;
}
.t_cms_txt3 span,.t_cms_txt6 span,.t_cms_txt9 span{color: #1daab8; font-size: 36px;position: relative;}
.t_cms_img1{width: 45%;}

#contents .box .txt_wrap{position: relative; z-index: 3;}
#contents .box:nth-child(odd) figure:after{color: #ffcf0f;}
#contents .box figure:after{opacity: 0.3;}
/*#contents .box h3{background-color: #fff;}*/
.t_cms_img2 .img-container:before{background: #1daab8;}
.top_dec2{
    z-index: 2;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 98%;
}

.dec1{
    max-width: 170px;
    width: 30%;
    bottom: -380px;
    right: 3%;
    z-index: 3;
    transform: rotate(329deg);
}
.dec2{
    max-width: 170px;
    width: 30%;
    bottom: -140px;
    left: 10%;
    z-index: 2;
}
.dec3{
    max-width: 170px;
    width: 30%;
    bottom: -80px;
    right: 3%;
    z-index: 2;
}


.other .box1{background-color: #04a1b0;}
.other .box2{background-color: #ffcf0f;}
.other .box_title.title1:before{color: #ffcf0f;}
.other .box_title.title2:before{color: #ff5339;}

@media screen and (max-width: 1000px){
    .main_img{background-image: url(./Dup/img/main_img_tb.jpg);height: 100vh;}
    .main_img_wrap .top_logo{top: 51%; width: 83%;}
    /*.main_img{position: relative!important;}*/
    /*.main_img,.main_img_wrap{height: 530px;}*/
    /*.main_wrap{margin-top: 530px;}*/
    .dec1{width: 35%; bottom: -270px; transform: rotate(315deg);}
    .dec2{}
}
/* タブレット */
@media screen and (max-width: 768px){
    /*.main_img,.main_img_wrap{height: 43vh;}*/
    /*.main_wrap{margin-top: 43vh;}*/
    .main_img_wrap .catch{bottom: 24%; width: 35%;}
    .main_img_wrap .top_logo{animation-delay: 16s;}
    #nav_menu{position: fixed;}
    #contents .box .txt_wrap{
        width: 90%;
        padding-right: 0px;
    }
    #contents .box figure{width: 70%;margin-top: 30px;}
    .t_cms_img1{width: 70%; margin-top: 50px;}
    
    .dec1{
        width: 19%;
        bottom: -30px;
        right: -37px;
        z-index: 3;
        transform: rotate(303deg);
    }
    .dec2{
        width: 19%;
        bottom: auto;
        left: -30px;
        top: -56px;
        transform: rotate(132deg);
    }
    
}
/* スマホ */
@media screen and (max-width: 667px){
    #loading_logo{width: 60%;}
    .main_img{background-image: url(./Dup/img/main_img_sp.jpg);height: 100vh;}
    .main_img_wrap .top_logo{width: 80%;top: 48%;}
    .main_img_wrap .catch{bottom: 26%;width: 60%;}
    
    .all_header{position: relative!important; background-color: #fff;}
    
    .top_btn{    width: 240px;}
    
    
    
    .t_cms_txt3 span,.t_cms_txt6 span,.t_cms_txt9 span{font-size: 29px;}
    #contents .box figure {
    width: 90%;
    margin-top: 30px;
}
    .t_cms_img1{width: 100%;}
    
    .dec1{ transform: rotate(303deg); right: 0px;}
    .dec2{width: 21%; top: -39px; transform: rotate(150deg);}
    
    .other .box_item .posi_center{width: 100%;}
    .other .box_title{letter-spacing: 0.05em;}
}

/* 全体 ---------------------------------------------*/
#loading_line .line{    background-color: #9acfd5;
}
.logo{position: relative;}
.all_page .menu .logo,
.is-fixed .logo{width: 14%!important;}
.menu .nav .logo{width: 19%!important;}

.img-container_img{
    background-image: url(./Dup/img/cms_top.jpg);
}
.top_cms_box .more_box{
    box-shadow: 3px 3px 0px #333;
    transition: all 0.3s;
}
.top_cms_box .more_box .more{
    /*background-color: #fff;*/
    transition: all 0.3s;}
.top_cms_box .more_box .more:hover{
    background-color: #ffcf0f;
    border-color: #ffcf0f;
    box-shadow: 0px 0px 0px #333;
    transform: translate(3px, 3px);
}

.cate_list li{width: calc(50% - 10px);text-align: left;}

.linkStyle{
	color:#04a1b0;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	color:#04a1b0;
	opacity: 0.7;
	text-decoration: none;
}
/*footer{background-color: #fff;}*/
#footer .txt_white{color: #2c2c2c;}


@media screen and (max-width: 1000px){
    #nav_menu{right: 5px;}
}

/* タブレット */
@media screen and (max-width: 768px){
    .cate_list li{width: calc(50% - 10px);text-align: left;}
    
    footer{height: 560px;}
    #footer{padding-top: 0px;height: 560px;}
}
/* スマホ */
@media screen and (max-width: 667px){
    .cate_list li{width: 100%;}
    .box_wrap{width: 100%!important;}
    #footer{padding-top: 20px; height: 520px;}
    #footer .logo{margin-bottom: 0px;}
    #footer .font_2dw{font-size: 17px; letter-spacing: 0em;}
    #footer #copyright{padding-top: 0px;}
    #footer .footer_cms{padding-top: 0px;}
}

/* 配色 ----------------------------------------------*/
#dec10, #dec12, #dec14, #dec16,#dec9, #dec11, #dec13, #dec15{color: #04a1b0!important;}
#contents.bg_color4 ,
/*.all_page.bg_color4{background-color: #fff;}*/
.txt_color1,.hvr_txt_color1:hover{color: #1daab8;} 
/*.txt_color2,.hvr_txt_color2:hover{color: #f4f3f2;} */
.txt_color3,.hvr_txt_color3:hover{color: #ffcf0f;} 
/*.txt_color4,.hvr_txt_color4:hover{color: #eae4df;} */
/*.txt_color5,.hvr_txt_color5:hover{color: #f2ede7;}*/ 
.img-container:before,
.bg_color1,.hvr_bg_color1:hover{background-color: #1daab8;}
.bg_color2,.hvr_bg_color2:hover{background-color: #73ced7;}
.bg_color3,.hvr_bg_color3:hover{background-color: #ffcf0f;} 
/*.bg_color4,.hvr_bg_color4:hover{background-color: #eae4df;} */
/*.bg_color5,.hvr_bg_color5:hover{background-color: #f2ede7;}*/ 

.border_color1,.hvr_border_color1:hover{border-color: #1daab8;}
.border_color2,.hvr_border_color2:hover{border-color: #ff492d;}
.border_color3,.hvr_border_color3:hover{border-color: #ffcf0f;}
/*.border_color4,.hvr_border_color4:hover{border-color: #eae4df;}*/
/*.border_color5,.hvr_border_color5:hover{border-color: #f2ede7;}*/

/*テンプレート  -------------------------------------*/
body,.font_14,.font_12,.font_100per,.font_2dw,.font_2dw_tb,.font_2dw_sp,.font_14_sp{
    font-size: 18px;
}
.font_2up{font-size: 20px;}
.font_4up{font-size: 22px;}

#contents h3{
    font-family: 'Kosugi Maru', sans-serif;
}

/* topcms_news_type4 --------------------------------*/
.topcms_news_type4 .cate_box {transition: all 0.3s;}
.topcms_news_type4 .cate_box:hover{
    transform: translate(0px, -10px);
    /*box-shadow: 0 10px 10px #ccc;*/
    /*border: 1px solid #fff;*/
}
.topcms_news_type4 .cate_box{
	width: 30.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	border-radius: 15px;
	background-color: #fff;
	padding: 0;
	box-sizing:border-box;
	/*border: 1px solid #ccc;*/
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.topcms_news_type4 .cate_box .box_img1{
    border-radius: 15px 15px 0 0;

}
.topcms_news_type4 .txt_height{
	height: 3em
}
.topcms_news_type4 .box_title1:empty{
	display: block!important;
}
/* タブレット */
@media screen and (max-width: 768px){
}
/* スマートフォン */
@media screen and (max-width: 667px){
.topcms_news_type4 .cate_box {
    width: 100%!important;
    margin-bottom: 15px;
}
}

/* 閉じるボタン付き追従バナー */
.fix_banner{
	max-width: 160px;
	position: fixed;
	bottom: 10px;
	right: 70px;
	z-index: 10;
	transition: 0.5s;
}
.fix_banner .close_bt{
	position: absolute;
	bottom: auto;
	top: 0;
    right: 10px;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	transition: 0.5s;
	background-color: rgba(255,255,255,0.7);
	/*border: solid 2px #004b9b;*/
	z-index: 5;
	cursor: pointer;
}
.fix_banner .close_bt:hover{opacity: 0.7;}
.fix_banner .close_bt span{
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
}
.fix_banner .close_bt span:before,.fix_banner .close_bt span:after{
	content: "";
	display: block;
	background-color: #9a9a9b;
	height: 2px;
	width: 20px;
	position: absolute;
	top:50%;
	left: 50%;
}
.fix_banner .close_bt span:before{
	-ms-transform: translate(-50%,-50%) rotate(-45deg);
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.fix_banner .close_bt span:after{
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}
.fix_banner.close {opacity: 0;z-index: -1;
}
.fix_banner.close2{opacity: 0;z-index: -1;}

@media  screen and (max-width: 768px){
    .fix_banner{max-width: 150px;}
    .fix_banner .close_bt{bottom: 120px;right: 0px;}
}

@media  screen and (max-width: 667px){
    .fix_banner{
        max-width: 110px;
        bottom: 10px;
        right: auto;
        left: 10px;
    }
    .fix_banner .close_bt{
    	width: 25px;
    	height: 25px;
    	bottom: 90px;
    	right: auto;
    	left: 0px;
    }
    .fix_banner .close_bt span{
    	width: 25px;
    	height: 25px;
    }
}
/* 閉じるボタン付き追従バナー end */


#video.video_wrap{
    width: 100%;
    height: 100vh;
}
@media  screen and (max-width: 768px){
    #video.video_wrap{height: 41vh;}
}
@media  screen and (max-width: 667px){
    #video.video_wrap{height: 32vh;}
}