/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.flow_type2 .cate_title {
    border-bottom: solid 2px #dee0e0;
    position: relative;
}
.flow_type2 .cate_title::after {
    content: '';
    display: block;
    background: #85ddd5;
    width: 30%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -2px;
}
.flow_type2 .box_wrap {
	border: 2px solid #85ddd5;
}

.flow_type2 .cate_box {
	padding: 30px;
	width: 100%!important;
}
.flow_type2 .box_txt1 {
    background-color: #FFFAFA;
    color: #5a7775;
    text-align: center;
    font-weight: 500;
}
.flow_type2 .cate_box:not(:last-child) {
	border-bottom: 2px solid #85ddd5;
	position: relative;
}
.flow_type2 .cate_box:not(:last-child)::before,
.flow_type2 .cate_box:not(:last-child)::after {
	content: "";
	border: solid transparent;
	position: absolute;
	top: 100%;
	left: 17%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.flow_type2 .cate_box:not(:last-child)::before {
	border-width: 21px;
	border-top-color: #85ddd5;
}
.flow_type2 .cate_box:not(:last-child)::after {
	border-width: 18px;
	border-top-color: #fff;
}

.flow_type2{counter-reset: number 0;}

.flow_type2 .box_txt1::before {
    counter-increment: number 1;
    content: "STEP." counter(number);
    background-color: #2ab6aa;
    padding: 5px 10px;
    font-weight: 700;
    color: #ffffff;
    display: block;
    margin: 0px auto 10px;
    width: 50%;
}
/*-------- スマートフォン --------*/
@media screen and (max-width: 667px){
.flow_type2 .cate_box:first-child {
    padding: 20px 20px 30px 20px;
}
.flow_type2 .cate_box:not(:first-child) {
    padding: 40px 20px 20px 20px;
}
.flow_type2 .cate_box:not(:last-child)::before, .flow_type2 .cate_box:not(:last-child)::after {
    left: 50%;
}
.flow_type2 .cate_box:not(:last-child)::after {
    border-top-color: #ffffff;
}

.flow_type2 .box_txt1 {
    letter-spacing: 1px;
    font-size: 99%;}

}
/*-------- IE --------*/
@media all and (-ms-high-contrast:none){
.flow_type2 :not(:last-child).cate_box::before, .flow_type2 :not(:last-child).cate_box::after{top:98.1%;}
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/




/*毎回いる*/

.swiper-button-next, .swiper-button-prev { z-index: 2 !important;}
#top_cms.back1:before {z-index: -1;}
.nav_menu_more a span::before {
    display: none !important;}
.nav_menu_more.mg_t-10px a span::before {
    display: block !important;}
div#contents2_wrap {margin-top: 50px;}


@media screen and (max-width: 667px){
#contents1 .line:before, #contents2 .line:before {
    left: 50%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);}
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*font-------------------------------------------------------------------------*/

.cms_title p,.page_title_box p,.con_title .pop400,.con_box h2,a.more_btn,.pop400{font-family: 'Zen Old Mincho',"游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif" !important;}
a,.box_title1,.cate_title,.box_title2,.hannari{
    font-family:'Zen Old Mincho',"游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif" !important;}

body {font-family: 'Zen Kaku Gothic Antique',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif !important;}
/*font-------------------------------------------------------------------------*/

/* color　---------------------------------------------------------------------------------------------*/
div#wrap {
    background: #ffffff;
    z-index: -5;
    
}
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #5a7775;}
.txt_color1,.hvr_txt_color1:hover{color: #2ab6aa} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #85ddd5} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #d0932c} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #FFFAFA} /* アクセントカラー2 */
/* background-color */
.bg_black,.hvr_bg_black:hover{background-color: #5a7775} /* 黒背景 */
/*.bg_white,.hvr_bg_white:hover{background-color: #FFFAFA;}*/
.bg_color1,.hvr_bg_color1:hover{background-color: #2ab6aa} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #85ddd5} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #d0932c} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #FFFAFA} /* アクセントカラー2 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #2ab6aa !important}
.border_color2,.hvr_border_color2:hover{border-color: #85ddd5 !important}
.border_color3,.hvr_border_color3:hover{border-color: #d0932c !important}
.border_color4,.hvr_border_color4:hover{border-color: #b5deda !important}

#main_img:before {background-color: rgba(35,72,69,0.3) !important;}
#info_contact .con_img:before,.title_img:before,#page_title:before {background-color: rgba(204,220,219,0.6) !important;}
.overlay { background: linear-gradient(135deg, rgba(42,182,170,0.9) , rgba(133,221,213,0.9) ) !important;}
.nav_menu_more a:hover {color: #ffffff !important;}
#footer {background-color: rgba(255,255,255,0.7);}
#contents3_wrap:after {background-color: rgba(235,209,165,0.5) !important;}
/*linkStyle*/
a.linkStyle {
    color: #2ab6aa !important;
    border-bottom:solid 1px;
    opacity: 0.9 !important;
}
a.linkStyle:hover {color: #2ab6aa !important;
                   opacity: 0.9 !important;}
                   
.opacity07,.opacity08{opacity:0.9;}


/* color　---------------------------------------------------------------------------------------------*/


/*その他機能*/


::-webkit-scrollbar{
  width: 10px;
}
::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #85ddd5; 
}
::-webkit-scrollbar-thumb{
  background: #85ddd5;
  border-radius: 10px;
  box-shadow: none;
}
/*その他機能*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*ロゴ背景透過＋キャッチコピーcss*/
.catch .logo_w02 {
    width: 15vw;
    margin: 0 auto 50px;
    position: relative;}

.catch_copy {font-size: 1.7rem;}
/*ロゴ背景透過＋キャッチコピーcss*/


/*枠を付ける*/
#main_img:after {
    content: '';
    position: absolute;
    display: block;
    width: 98%;
    height: 96%;
    border: 1px solid white;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    pointer-events: none;
    z-index: 1;
}
/*枠を付ける*/

.back1:before {
    background: rgb(255,250,250);
    background: linear-gradient(319deg, rgba(255,250,250,0.8) -50%, rgba(212,244,241,0.8) 100%);
}

.back2:before{
    background: rgb(255,250,250);
    background: linear-gradient(134deg, rgba(255,250,250,0.8) -50%, rgba(212,244,241,0.8) 100%);
}

.num{display:none;}


.intro {
    width: 180px;
    position: relative;
    display: block;
    margin: 0% auto 2%;}
    

img.point1,img.point2 {
    width: 110px;
    display: block;
    margin-bottom: 15px;}
    
img.point3 {
    width: 110px;
    display: block;
    margin: -40px auto 20px;}
    



.item01 {
    width: 13vw;
    margin: -15% auto 3%;}
    
.item02 {
    width: 10vw;
    height: 52px;
    top: 20%;
    right: 0;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    z-index: 1;
}
.item03 {
    width: 12vw;
    height: 110px;
    bottom: -14%;
    left: 10%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    z-index: 2;
}

.item04 {
    width: 10vw;
    bottom: -2%;
    right: 1%;
}

/*コンテンツ2,コンテンツ3画像内に線をを付ける*/
#contents1 figure:before, #contents2 figure:before {
    content: "";
    display: block;
    height: 97%;
    width: 96%;
    border: 2px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    z-index: 1;
    transform: translate(-50%,-50%);
}
/*コンテンツ2,コンテンツ3画像内に線をを付ける*/


div#intro_wrap, #contents3 .con_box {
    border: solid 15px #FFFAFA;
}

section.top_cms_box {
    z-index: 2;
    position: relative;
}
#top_cms.back1:before {
    background: rgb(255,250,250);
    z-index: 0;
    background: linear-gradient(319deg, rgba(255,250,250,0.3) 0%, rgba(212,244,241,0.3) 100%);
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.cms_2-d img, #cms_2-d img {height: auto !important;}
#cms_5-a h4.box_title1 {color: #2ab6aa;}
span.circle, .arrow {border-color:#85ddd5 !important;
                    background:#85ddd5 !important;}
#cms_6-c .cate_box {border-top: solid 5px #85ddd5 !important;}
#cms_6-c h3.box_title {border-bottom: dotted 1px #d0932c;}

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

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#h1txt{padding-bottom: 100px;}
#fix_banner{
width: 300px;
position: fixed;
bottom: 0;
right: 80px;
z-index: 4;
}
#logo {
    max-width: 220px;
    padding: 10px 0;}
header.scr_header #logo {
    max-width: 180px;
    padding: 10px 0;}

#footer_nav li a::after {background: rgba(90,119,117,0.3) !important;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

@media screen and (max-width: 1500px){
.item03 {bottom: -25%;}}


/*タブレット*/
@media screen and (max-width: 768px){
    .catch_copy {font-size: 1.2rem;}
    #contents1 .con_box , #contents2 .con_box {margin-top: 10%;}
    .catch .logo_w02 {
        width: 20vw;
        margin: 0 auto 25px;
        position: relative;}
    #logo {
        opacity: 0;
        background: transparent;
        max-width: 180px;
        padding: 10px 0;}
    .scr_header #logo {
        background: transparent;
        opacity: 1 !important;}
    .item02 {
        width: 12vw;
        height: 52px;
        top: 5%;}
    img.point1, img.point2,img.point3{width: 100px;}
    .item03 {
        bottom: -5%;
        width: 18vw;
        left: 36%;}
    .item04 {
        width: 12vw;
        bottom: -8%;
        right: -6%;}
    img.point3 {
        width: 100px;
        display: block;
        margin: -25px auto 15px;}
    #fix_banner {
        width: 250px;
        position: fixed;
        bottom: 0;
        right: 50px;
        z-index: 4;}
    /*#h1txt{padding-bottom: 30px;}*/
}
/*スマホ*/
@media screen and (max-width: 667px){
    #fix_banner {
    width: 200px;}
    #h1txt{padding-bottom: 60px;}
    p#copyright {padding: 2px 0;}
    .item01 {
        width: 29vw;
        margin: -28% auto 2%;}
    .intro {
        width: 150px;
        position: relative;
        display: block;
        margin: 0% auto 5%;}
    img.point1, img.point2, img.point3 {width: 80px;}
    .item02 {
        width: 21vw;
        height: 52px;
        top: 31%;
        left: 38%;}
    .item03 {
        bottom: -19%;
        width: 28vw;
        left: 16%;}
    .item04 {
        width: 22vw;
        bottom: -12%;
        right: -12%;}
    #fakeloader .fl {max-width: 160px !important;}
    .catch_copy {font-size: 0.9rem;}
    .catch .logo_w02 {
        width: 43vw;
        margin: -72px auto 6px;
        position: relative;}
    #main_img:after {
        width: 97%;
        height: 98%;}
    header.scr_header #logo {
        max-width: 110px;
        padding: 6px 0;}
    #cms_1-a .pager li {margin-right: 0px;}
    #cms_2-d h4.box_title1 {
        font-size: -webkit-calc(1rem + 1px);
        font-size: calc(1rem + 1px);
        letter-spacing: 1px;}
    #cms_6-c .cate_box {padding: 15px;}
    .page_title_box {
        width: 55%;
        background-color: rgba(42,182,170,0.9);}
}


/*IE*/
@media all and (-ms-high-contrast: none){
        .more_btn{padding:6px !important;}
        .pager li a {padding-bottom: 10px !important;}
        .cate_list li a {padding-bottom: 11px !important;}
        #cms_2-d .cate .cate_title {padding-top: 6px !important;}
        .cate_list li a::before {top: 51% !important;}
        .flow_type2 .box_txt1::before {padding: 5px 10px 6px !important;}
        #cms_5-a .cate .cate_title span:last-of-type {
            padding-top: 0px !important;
            padding-bottom: 4px !important;}
        #contact_tel a{padding-top: 25px !important;}
        #page9 .more {
            padding-bottom: 2px !important;
            padding-top: 2px !important;}
        #page10 .more_btn {
            padding-top: 7px !important;}




}








/*20220601メディア掲載*/
.blog{z-index:-1 !important;}
article#top_cms {z-index: 0 !important;}
#top_cms.back1:before {z-index: -1;}
.subimage figure img {
    object-fit: cover;
    width: 100% !important;
    height: 100px !important;
}




.top_cms_box .txt_more{
    cursor: pointer;
    background-color: #85ddd5;
}
.top_cms_box .txt_more:hover{
    background-color: #2ab6aa;
    /*color: ;*/
}
.top_cms_box .txt_more .arrow{
    height: 0.8em;
    width: 1em;
}
.top_cms_box .txt_more .arrow::before, .top_cms_box .txt_more .arrow::after{
    position: absolute;
    content: "";
    width: 10px;
    height: 1px;
    background-color: currentColor;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: 0.3s;
    transition-property: width, right, left, transform;
}
.top_cms_box .txt_more .arrow::after{
    transform: rotate(90deg);
}
.top_cms_box .txt_more.trans .arrow::before{
    transform: rotate(-45deg);
    width: 6px;
    right: 4px;
}
.top_cms_box .txt_more.trans .arrow::after{
    transform: rotate(45deg);
    width: 6px;
    left: 4px;
}

.txt_more span.circle, .arrow {
     background:transparent !important; 
}

.more a{
    padding: 10px;
    border: none;
    color: var(--black);
    background-color: var(--color2);
    border-radius: 100px;
    font-family: var(--font-jp);
}
.more a:hover{
    color: #fff;
}
.more span.d_block{
    width: 100px;
    height: 100px;
    top: auto;
    left: 50%!important;
    bottom: -100px;
    transform: translateX(-50%)!important;
    border-radius: 50%;
    background-color: var(--color3);
    transition-property: width, height, bottom;
}
.more a:hover span.d_block{
    width: 300px;
    height: 300px;
    bottom: -150px;
}




/*20220719*/
/* top_cms */
article#top_cms02 {z-index: 0 !important;}
#top_cms02.back_news:before {z-index: 0;}
#top_cms02.back_news:before{height: 100%;}
.blog{z-index:1 !important;}

/*タブレット*/
@media screen and (max-width: 768px){
.top_cms_box:first-of-type {padding-top: 50px;}
}