﻿
#youtube{background-color: #fffcf7; position: relative; z-index: 1;}
#youtube .youtube{
    transition: all 0.3s;
}
#youtube .youtube:hover{opacity: 0.6;}
#youtube .youtube img{
    width: 500px;
    margin: 0 auto;
    display:block;
}
/* タブレット */
@media screen and (max-width: 768px){
    #youtube{padding: 50px 0;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #youtube .youtube img{width: 300px;}
}
/* CMS・下層ページ ----------------------------------*/
.box_img1 img,.box_img1{border-radius: 15px;}
.flow_type3 .box_img1{border-radius:50%;}
#cms_4-b .box_img1,#cms_4-b .box_img1 img{border-radius: 0px;}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}

/* イラストの配置 -----------------------------------*/
.dec1{
    max-width: 350px;
    width: 30%;
    top: 50px;
    right: 3%;
    z-index: 0;
    opacity: 0.9;
    animation:12s linear infinite rotation1;
}

@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

.dec2{
    max-width: 350px;
    width: 30%;
    top: 50px;
    right: 3%;
    z-index: 0;
    opacity: 0.3;
    animation:6s linear infinite rotation2;
}
@keyframes rotation2{
  0%{ transform:rotate(360deg);}
  100%{ transform:rotate(0deg); }
}
.dec1_2,.dec2_2{
    width: 15%;
    z-index: 0;
    top: auto;
    right: auto;
    bottom: 50px;
    left: 3%;
    opacity: 0.5;
}
.dec1_2{animation:6s linear infinite rotation2;}
.dec2_2{animation:7s linear infinite rotation1;}


.under_page .posi_rel,.under_cms{
    position: relative;
    z-index: 2;
}
.under_page .dec1,.under_page .dec2{
    right: 13%;
    top: 240px;
    opacity: 0.9;
}
.under_page .dec1_2,.under_page .dec2_2{
    bottom: auto;
    left: auto;
    top: 560px;
    right: 2%;
}
.under_page::before ,#top_contents3::before{
    content: " ";
    position: fixed;
    display: inline-block;
    width: 14%;
    min-width: 235px;
    height: 100%;
    background: url(./Dup/img/bg.png) no-repeat;
    background-size: cover;
    left: 0px;
    top: 0px;
    z-index: 0;
    opacity: 0.3;
}
/*.under_page::after {*/
/*    content: " ";*/
/*    position: fixed;*/
/*    display: inline-block;*/
/*    width: 14%;*/
/*    min-width: 235px;*/
/*    height: 100%;*/
/*    background: url(./Dup/img/bg.png) no-repeat;*/
/*    background-size: cover;*/
/*    right: 0px;*/
/*    top: 0px;*/
/*    z-index: 0;*/
/*    transform: rotateZ(180deg);*/
/*    opacity: 0.3;*/
/*}*/
/* タブレット */
@media screen and (max-width: 768px){
    .dec1_2, .dec2_2{
        bottom: 100px;
    }
    .con1_txt_wrap .dec1_2, .con1_txt_wrap .dec2_2{
        bottom: 10px;
    }
    .under_page .dec1, .under_page .dec2{
        right: 7%;
        top: 180px;
    }
    .under_page .dec1_2, .under_page .dec2_2{
        top: 420px;
    }
    
}
/* スマホ */
@media screen and (max-width: 667px){
    .dec1,.dec2{
        top:90px;
        width: 40%;
    }
    .dec1_2, .dec2_2{
        top: auto;
        bottom: 120px;
        width: 30%;
    }
    .con1_txt_wrap .dec1_2, .con1_txt_wrap .dec2_2{
        bottom: 5px;
        width: 25%;
    }
    .under_page .dec1, .under_page .dec2{
        right: 2%;
    }
    .under_page .dec1_2, .under_page .dec2_2{
        display: none;
        /*top: 320px;*/
    }
    .under_page::before ,#top_contents3::before{
        width: 36%;
        min-width: 180px;
    }
    #top_contents3 .con3_wrap,.con3_wrap2,.con3_wrap3{
        background-color: rgba(253, 247, 235, 0.7);
        position: relative;
        z-index: 2;
    }
}

/* メインイメージ -----------------------------------*/
#sns_link{
    /*width: 120px;*/
    margin: 30px auto;
}
#sns_link li.width_40{
    width: 40px;
    padding: 10px
}
#header h1.pd_30px{padding: 45px;}

    .triangle01{
        display: none;
    }
.catch{
    right: 255px;
    bottom: 4%;
    max-width: 550px;
    filter: drop-shadow(1px 1px 0px rgba(255,255,255,0.5));
}
.triangle01{border-radius: 50% 0 0 0;}

/* タブレット */
@media screen and (max-width: 768px){
    #header h1.pd_30px{padding: 10px;}

    
    .catch{
        right: 10px;
        bottom: 0px;
        /*right: auto;*/
        /*bottom: auto;*/
        /*top: 30px;*/
        /*transform: rotate(6deg)translate(-50%, 0);*/
        /*left: 55%;*/
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .catch{
        width: 65%;
        right: 10px;
        bottom: 40px;
    }
    #main_img{
        margin-top: 0;
    }
}

/* トップページ -------------------------------------*/
#top_news{
    background-color: #fffcf7;
    position: relative;
    z-index: 2;
}
#top_news .cms1inner{
    background-color: transparent;
    position: relative;
    z-index: 1;
}
.con1_txt_wrap{
    padding: 150px 3% 100px;
}
#attach_area{z-index:1;}
#top_contents3 .con3_box1{z-index: 2;}
#mainwrap,#top_cms,#top_contents1{
    background-color: #fdf7eb;
    position: relative;
    z-index: 2;
}
#con_nav{
    background-color: #fffcf7;
    position: relative;
    z-index: 4;
}
.cms_title{
    position: relative;
    z-index: 2;
}
.con_navbar.is-fixed{
    background-color: #fffcf7;
}
.under_page #con_nav{
    background-color: transparent;
}
#attach{
    position: relative;
    z-index: 2;
}


/* タブレット */
@media screen and (max-width: 768px){
    .mainwrap-r h1{width: 120px;}
    .con1_txt_wrap{padding: 50px 3% 29vw;}
    #mainwrap{
        padding: 15px 15px 50px;
    }
    #top_news {
        margin-top: 0px;
        padding-top: 30px;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .mainwrap-r h1{width: 70px;}
    #attach{height: 270px;}
    .cms_title h3{letter-spacing: 2px;}
    .con_title_1{
        width: 270px;
        display: block;
        margin: 0 auto 10px;
    }
    .con_title_9{
        width: 290px;
        display: block;
        margin: 0px auto 30px;
    }
}

/* 全体 ---------------------------------------------*/
#page-top{
    width: 60px;
    height: 60px;
}
.fixbnr{
    position: fixed;
    /*bottom: 70px;*/
    animation-name:updownAnime;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;/* アニメーションを反転して繰り返す */
    animation-duration:1s; /* アニメーション時間 */
}

@keyframes updownAnime{
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
  }
}

.loader_icon{width: 180px;}

.nav_title{
    line-height: 1.5;
    letter-spacing: 0em;
}

.linkStyle{
	color:#63bde8;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	color:#63bde8;
	opacity: 0.7;
	text-decoration: none;
}
.cate_list li,.pager li:not(.prev) a, .pager li:not(.next) a{
    border-radius: 5px;
}

#page_title .title_img{
    height: 430px;
    background-position: center top;
}
#page_title .title_wrap{
    max-width: 600px;
    background-color: rgba(232, 99, 104,0.3);
    padding: 20px 0;
}
#page_title .sub_title{
    margin-top: 0px;
}
.under_cms{
    border-radius: 15px;
    background-color: rgb(253 247 235 / 70%);
    padding-top: 20px;
    padding-bottom: 20px;
}

#footer_info_logo{width: 150px!important;}
#footer{padding-bottom: 150px;}

/* タブレット */
@media screen and (max-width: 768px){
    #page_title .title_img{height: 40vw;}
    #page_title .title_wrap{padding: 20px 0;}
    .menu_stick{right:-100px;}
    #footer{padding-bottom: 50px;}
}
/* スマホ */
@media screen and (max-width: 667px){
    .under_page h1.width_200-max{max-width: 140px;}
    .loader_icon{width: 100px;}
    #page_title .title_img{height: 255px;}
    #page_title h2{letter-spacing: -2px;}
    #page_title .title_wrap{
        padding: 10px 0;
        transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        top: auto;
        bottom: 0px;
        background-color: rgba(232, 99, 104,0.9);
    }
    .letter_3{letter-spacing: 1px;}
    .info_txt_wrap{
        padding: 20px;
    }
}

/* 配色 ----------------------------------------------*/

.txt_color1,.hvr_txt_color1:hover{color: #63bde8;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #e86368;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #fdf7eb;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #e4e4e4;} /* アクセントカラー2 */
/*.txt_color5,.hvr_txt_color5:hover{color: #f2ede7;}  アクセントカラー2 */

.bg_white{background-color: #fffcf7;}
.bg_color1,.hvr_bg_color1:hover{background-color: #63bde8;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #e86368;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #fdf7eb;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #e4e4e4;} /* アクセントカラー2 */
/*.bg_color5,.hvr_bg_color5:hover{background-color: #f2ede7;}  アクセントカラー2 */

.border_color1,.hvr_border_color1:hover{border-color: #63bde8;}
.border_color2,.hvr_border_color2:hover{border-color: #e86368;}
.border_color3{border-color: #ff7e83;}
.hvr_border_color3:hover{border-color: #ffdadb;}
.border_color4,.hvr_border_color4:hover{border-color: #e4e4e4;}
/*.border_color5,.hvr_border_color5:hover{border-color: #f2ede7;}*/

/*テンプレート  -------------------------------------*/
.font_2dw{
    font-size: 16px;
}
.footer_tel{padding: 20px 20px 5px;}

/* スマホ */
@media screen and (max-width: 667px){
    .footer_tel{padding: 25px 15px 15px;}
    #page-top{width: 50px;height: 50px;}
    #footer_info > div{padding-top:30px;}
}


/* CMS1-g ----------------------------------*/
/*.cms_1-g .box{padding: 15px 15px 15px 0;}*/
.cms_1-g .cate_box{background-color: #fff;border-radius: 20px;}
.cms_1-g .box_img1{border-radius: 20px 0 0 20px;}
/* タブレット */
@media screen and (max-width: 768px){
    .cms_1-g .img_wrap{
        padding: 0;
        width: 33%!important;
    }
    .cms_1-g .cate_box .box{padding: 2% 4%;}
    .cms_1-g .box_txt1{line-height: 1.5;padding: 10px 30px 0 10px;}
}
/* スマホ */
@media screen and (max-width: 667px){
    .cms_1-g .img_wrap{width: 100%!important;}
    .cms_1-g .box_img1{border-radius: 20px 20px 0 0px;}
    .cms_1-g .cate_box .box{padding: 5%;}
}
/* news type4 -------------------------------*/
.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-shadow: 10px 25px 30px rgb(0 0 0 / 8%);*/
}
.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;
}
}
/* CMS3-b ------------------------------------------------*/
#cms_3-b .cate_box{
    background-color: #fffcf7;
    border-radius: 15px;
}
/* v_type3 -----------------------------------------------*/
.v_type3{
    position: relative;
    z-index: 2;
}
.v_type3 .cate_box{
    /*background-color: #fff;*/
    border-radius: 20px;
}

/* タブレット */
@media screen and (max-width: 768px){
    .v_type3 .cate_wrap,.v_type3 .cate_box{margin-bottom:30px;}
    .v_type3 .cate_box{margin-bottom: 30px;}
    .v_type3 .box_img{width: 30%!important;}
    /*.v_type3 .box_txt{width: 60%!important;}*/
}
/* スマホ */
@media screen and (max-width: 667px){
    .v_type3 .cate_wrap{margin-bottom: 30px;}
    .v_type3 .cate_wrap .cate_box{margin-bottom:30px;}
    .v_type3 .box_img{width: 75%!important;}
    .v_type3 .box_txt{width: 100%!important;}
}
/* flow_type3 --------------------------------------------*/


.flow_type3 .cate{
    counter-reset: box;
    margin-bottom: 80px;
}
.flow_type3 .cate_box{
    counter-increment: box;
    margin: 20px 0 30px;
}
.flow_type3 .box_item{padding-top: 60px;}
.flow_type3 .box_title1{
    z-index: 0;
    padding-left: 110px;
    color: #e86368;
}
.flow_type3 .box_title1::before, .flow_type3 .box_title1::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
.flow_type3 .box_title1::before {
	content: "0"counter(box);
	font-size: 75px;
	color: #ffd992;
	left: 0;
	bottom: -34px;
	z-index: -1;
}
.flow_type3 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #e86368
}

.flow_type3 #cate0 .box_title1{
    padding-left: 20px;
}
.flow_type3 #cate0 .box_title1::before{
    display: none;
}
.flow_type3 #cate0 .box_item{
    padding-top: 20px;
}

/* スマートフォン */
@media screen and (max-width: 667px){
    .flow_type3 .box_title1{padding-left: 10px;}
    .flow_type3 .box_title1::before{
    	left: auto;
    	right: 0;
    	bottom: -40px
    }
    .flow_type3 .box_item {
        padding-top: 36px;
    }
}

/* ---------- loopSlider ------------------------- */
#topcms_gallery_type1 .loopSliderWrap{
    top: 0;
    left: 0;
    height: 450px;
}
#topcms_gallery_type1 .loopSlider {
    margin: 0 auto;
    height: 450px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
#topcms_gallery_type1 .loopSlider .ul {
    height:450px;
    float: left;
    overflow: hidden;
}
#topcms_gallery_type1 .loopSlider .ul .li {
    width: 450px;
    height: 450px;
    float: left;
    display: inline;
    overflow: hidden;
	position: relative;
	box-sizing: border-box;
	padding: 0;
}
#topcms_gallery_type1 .loopSlider .ul .li img{
    border-radius: 0;
}
#topcms_gallery_type1 .loopSliderWrap:after {
    content: "";
    display: none;
    clear: none;
}

/*リンクボタン*/
#topcms_gallery_type1 .btn{z-index: 3;}
#topcms_gallery_type1 .btn a::before {
    content: '';
    position: absolute;
    bottom: 55px;
    right: 27%;
    width: 42%;
    height: 1px;
    background: #333;
    transition: all .3s;
}
#topcms_gallery_type1 .btn a::after {
    content: '';
    position: absolute;
    bottom: 60px;
    right: 27%;
    width: 15px;
    height: 1px;
    background: #333;
    transform: rotate(35deg);
    transition: all .3s;
}
#topcms_gallery_type1 .btn a:hover::before {
    right: 16%;
    background: #fff;
}
#topcms_gallery_type1 .btn a:hover::after {
    right: 15%;
    background: #fff;
}
#topcms_gallery_type1 .btn {
    display: block;
}
#topcms_gallery_type1 .btn a {
    background: #fff;
    color: #212121;
    width: 200px;
    height: 200px;
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 50%;
    flex-wrap: wrap;
    transition: all 0.4s;
}
#topcms_gallery_type1 .btn a:hover {
    background: #1c1c1c;
    color: #fff;
}
#topcms_gallery_type1 .btn a span, .btn a strong {
    text-align: center;
}
@media(max-width: 768px) {
#topcms_gallery_type1,#topcms_gallery_type1 .loopSliderWrap,#topcms_gallery_type1 .loopSlider,#topcms_gallery_type1 .loopSlider ul,#topcms_gallery_type1 .loopSlider .ul .li{
	height: 280px;
}
#topcms_gallery_type1 .loopSlider .ul .li{
    width: 280px;
}
#topcms_gallery_type1 {
    padding-bottom: 0;
    padding-top: 0;
}
}
@media(max-width: 667px) {
#topcms_gallery_type1,.loopSliderWrap,.loopSlider,.loopSlider .ul,.loopSlider .ul .li{
	height: 179px!important;
}
#topcms_gallery_type1 .loopSlider .ul .li{
    width: 179px;
}
#topcms_gallery_type1 .btn a::after {
    bottom: 35px;
    right: 27%;
}
#topcms_gallery_type1 .btn a::before {
    bottom: 30px;
    right: 27%;
}
#topcms_gallery_type1 .btn a {
    width: 140px;
    height: 140px;
    line-height: 1.7;
}
}

/*トップページのメニュー*/
@media(max-width: 768px) {
    .menu_stick_top{
        position: absolute;
    	position: fixed;
        right: 0;
        top: 20px;
        width: 84px;
        height: 78px;
        cursor: pointer;
        z-index: 100;
        border-radius: 75px 0 0 75px;
        -webkit-transition: shadow 0.2s ease,transform 0.2s ease;
        -moz-transition: shadow 0.2s ease,transform 0.2s ease;
        -o-transition: shadow 0.2s ease,transform 0.2s ease;
        transition: shadow 0.2s ease,transform 0.2s ease;
        box-sizing: border-box;
    	box-shadow: 0px 4px 7px -6px rgba(0, 0, 0, 0.12);
    }
    .menu_stick_top.trans .hamburger_line-1 {
    transform: rotate(30deg);
    top: 27px;
}
.menu_stick_top.trans  .hamburger_line-2 {
    transform: rotate(-30deg);
    top: 27px;
}
.menu_stick_top.trans  .hambuger_text {
    display: none;
}
.menu_stick_top.trans  .hambuger_text02 {
    display: block;
}
	.menu_stick_top.trans {
		background: transparent;
		box-shadow: none;
		    top: 8px;
	}
}