﻿/* --------------------------------------------
 メインイメージ 
---------------------------------------------*/
/* ▼▼ 画面幅1280以上でもメニュー表示 ▼▼ */
#pc_nav,#top_pc_nav{display: none;}
.top header{z-index: 5;opacity: 1;}

/* ▲▲ 画面幅1280以上でもメニュー表示 ▲▲ */
.top header{background: rgba(255,255,255,0);}
.top header.scr_header{transition: all 0.3s;}
#main_img:before{background-color: transparent;}

.catch {
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);/* X横 Y縦 始点が要素の中心になる */
    width: 90%;
    max-width: 1300px;
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}
/*---------------------------------------------
 テンプレート ・CMS・下層ページ 
--------------------------------------------*/
#fakeloader.bg_color1{
    background-color: #6bdaff;
}

header.scr_header{
    background-color:transparent!important;
    background: linear-gradient(20deg, rgba(255,255,253,1) 0%, rgba(107,218,255,1) 25%, rgba(56,124,200,1) 60%, rgba(43,74,186,1) 80%);
}
header.scr_header #logo{max-width: 100px;}
#header #logo{max-width: 80px;}
.overlay{background: linear-gradient(20deg, rgba(255,255,253,1) 0%, rgba(107,218,255,1) 25%, rgba(56,124,200,1) 60%, rgba(43,74,186,1) 80%);}
.button_container span{background:#0738ab}
.button_container span:nth-of-type(1){color:#0738ab}
header.scr_header .button_container span{background:#fff}
header.scr_header .button_container span:nth-of-type(1){color: #fff;background:transparent;}

.line:before{
    background-color: #3265c2!important;
}
.back1:before{
    background-color: transparent!important;
    background: linear-gradient(9deg, rgba(255,255,253,1) 0%, rgba(107,218,255,1) 25%, rgba(56,124,200,1) 60%, rgba(43,74,186,1) 80%);
}
.back2:before{
    background-color: transparent!important;
    background: linear-gradient(69deg, rgba(255,255,253,1) 0%, rgba(107,218,255,1) 25%, rgb(58 129 209) 60%, rgb(70 95 183) 80%);
}

#intro .num{
    top: 25px;
    font-size: 20px;
}
#contents3 .num{
    top: 25px;
    font-size: 20px;
}
#intro .num,#contents1 .num,#contents2 .num,#contents3 .num{color: #3265c2; opacity: 1;}
#contents1 .num{
    left: 54%;
    transform: translate(0%,0);
}
#contents2 .num{
    left: 10%;
    transform: translate(0%,0);
}
#contents3 .num{}

#contents1 h3,#contents2 h3{
    font-size: 20px;
    font-weight: 700;
}

#contents1 .con_box,#contents2 .con_box{margin-top: 120px;}



#intro h3{color: #379af7;}



#contents1{padding: 0 10% 0 0;}
#contents1_wrap{padding: 0;}
#contents1 .con_img{width: 52%!important;}
#contents1 .con_box{width: 47%!important;padding-left: 5.5%;}
.portrait_img{height: 650px!important;}



#contents2{margin-top: 100px;}



#contents3{margin-bottom: 0px;}
#contents3 .con_box{
    background-color: rgba(255,255,255,0);
    background: linear-gradient(0deg, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.4) 40%,rgba(255,255,255,0.8) 90%);
}
#contents3_wrap:before{top: 0px;}



#info_contact .con_img:before{
    background-color: transparent;
}



.link_bnr{
    display: block;
    background-color: #fff;
    color: #3265c2;
    font-size: 20px;
    font-weight: 700;
    width: 250px;
    text-align: center;
    padding: 15px;
    margin: 20px 0 0;
    border-bottom: 3px solid;
}
.link_bnr i{
    transform: translateX(10px);
    transition: all 0.5s;
    opacity: 0.2;
}
.link_bnr:hover{
    border-color: #6fdbff;
}
.link_bnr:hover i{
    transform: translateX(20px);
    opacity: 1;
}
.link_bnr_8{margin: 20px auto 0;border-top: 3px solid;}
.link_bnr_8:hover{}

.link_bnr_8 .left{transform: translateX(-10px);opacity:0.2;}
.link_bnr_8 .right{transform: translateX(10px);opacity:0.2;}
.link_bnr_8:hover .left{opacity: 1;transform: translateX(0px);}
.link_bnr_8:hover .right{opacity: 1;transform: translateX(0px);}

#footer #logo2 a{ max-width: 200px;}

#footer_nav li a::after{background:#6fdbff}
footer.bg_color2{background-color: #0dacf1;}
#copyright{background-color: #4c4c4c;}

.more_btn{
    max-width: 250px;
    border-bottom: 3px solid;
    transition: all 0.3s;
}
.more_btn:hover{border-color: #6fdbff}
.more_btn:before{
    border-top: 3px solid;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-color: #6fdbff!important;
}


.cate_list li a:before{content: "\f0da";transition:all 0.3s;}
.cate_list li a{
    background-color: #fff;
    color: #3265c2;
    border-bottom: 3px solid;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.03em;
}
.cate_list li a:hover{border-color: #6fdbff;}
.cate_list li a:hover:before{transform: translate(10px,-50%);}

#page_title #page_left{
    width: 100%!important;
}
#page_title #page_right{
    width: 0%!important;
    height: 0px;
}
#page_title .page_title_box{
    padding: 23px 0px;
    width: 320px;
    letter-spacing: 0em;
}

#cms_1-a .pager li a{background-color: #2b4aba;}
#cms_1-a .pager li a:hover{background-color:#60c5f3}

#cms_6-b .cate_box, #cms_6-b .cate_box .box_txt1, #cms_6-b .cate_box .box_txt2{border-color: #cfcfcf;}
#cms_5-e .number:before, .cms_5-e .number:before{color: #003eaf;font-size: 2rem;}
#cms_5-e .box_title1, .cms_5-e .box_title1{color: #333;}
#cms_6-c .cate_box:last-child{margin-bottom: 0;}
#page5 .con_box{padding: 80px 5%;}
#page10 .more_btn{color: #2f5abf;}

/* タブレット */
@media screen and (max-width: 768px){
    #header #logo{    max-width: 80px;}
    #intro_wrap{padding: 65px 5%;}
    
    #contents1{padding: 0 7% 0 0;}
    #contents1 .con_box, #contents2 .con_box{margin-top: 85px;}
    #contents2 .con_img{order: 2;}
    #contents2 .con_box{
        order: 1;
        padding-left: 0;
        padding-right: 5%;
    }
    #contents2 .num{left: 5%;}
    
    #contents3 .con_box{padding-top: 70px;}
    #contents3 h3{font-size: 30px;}
    
    #page9 .box_wrap{letter-spacing: 0em;}
    #page9 .box_wrap p{padding-left: 15px;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #header #logo{max-width: 60px;}
    .back2:before{background: linear-gradient(110deg, #fffffd 0%, #6bdaff 25%, #3a81d1 80%);}
    
    #contents1 .line:before, #contents2 .line:before{transform: translateX(-50%);left: 50%;}
    
    #intro h3{ width: 280px; margin: 0 auto 0px;}
    
    #contents1 .con_img,#contents2 .con_img,#contents1 .con_box, #contents2 .con_box{width: 100%!important;}
    #contents1 .con_box, #contents2 .con_box{margin-top: 5px;}
    
    #contents1 .num{left: 2%;padding-right: 7%;}
    
    #contents2 .con_img{order: 1;}
    #contents2 .con_box{order: 2;}
    #contents2_wrap{padding-right: 0;}
    
    #contents3 .num{width: 100%;}
    #contents3 .con_box{margin: 0;}
    #contents3 h3{font-size: 24px;}
    
    #top_cms .top_cms_box{padding-bottom: 80px;}
    .cms_5-e{margin-bottom: 0px;}
    
    #page9 .box_wrap p{padding-left: 0px;}
}
@media screen and (max-width: 340px){
    #contents3 .con_box{padding: 70px 3%;}
    #contents3 h3{letter-spacing: -0.03em;}
}

/*箇条書の箇所 ----------------------------------------*/
.other{
    width: 100%;
    text-align: right;
    font-weight: 600;
}
.txt{
    width: 70%;
    background-color: #fff;
    border-radius: 15px;
    padding: 15px 25px;
    font-size: 1.1rem;
    text-align: left;
    margin: 0 auto 20px;
}
.txt .check_icon{
    width: 25px;
    margin-right: 20px;
    transform: translateY(-5px);
}
.txt .check_text{
    width: calc(100% - 80px);
    letter-spacing: 0em;
    line-height: 2;
    font-weight: 600;
    color: #1f367c;
}
.check_line{
    color: #dd6d0c;
    border-bottom: 5px solid;
}
/* タブレット */
@media screen and (max-width: 768px){
    .txt{width: 90%;}
    .txt .check_text{}
    .check_line{}
    .txt .check_icon{}
    .txt .check_text{width: calc(100% - 60px);}
}
/* スマホ */
@media screen and (max-width: 667px){
    .txt{padding: 10px 10px; text-align: center;}
    .txt .check_icon{margin: 0 auto 5px;width: 25px;}
    .txt .check_text{width: 100%;}
    .check_line{border-bottom: 4px solid;}
}

/* 文字がシャランと出る ---------------------------------------- */
.txt_anim1 span{
	position: relative;
	right: 20px;
	opacity: 0;
	transition: all .8s;
}
.txt_anim1 span.start{
	right: 0;
	opacity: 1;
}
/*シャラン文字に色付ける*/
#intro h3{color: #6ad9fe;}
#intro h3 span:nth-child(n+1):nth-child(-n+4){color: #2f5cbf;}
#intro h3 span:nth-child(n+5):nth-child(-n+8){color: #3a80cb;}
#intro h3 span:nth-child(n+9):nth-child(-n+12){color: #4a9ddb;}
#intro h3 span:nth-child(n+13):nth-child(-n+16){color: #56b3e8;}



/*--------------------------------------------
 全体 
----------------------------------------------*/
.nav_menu_more .pop400,#page10 .more_btn{font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;}
.didot,#cms_5-e .number:before, .cms_5-e .number:before,.more_btn{font-family: 'Roboto', sans-serif!important;}
h1, h2, h3, h4, h5, h6{font-weight: bold;}
body,.font_14{font-size: 16px;font-weight: bold;}
body,.letter_3{letter-spacing: 0.04em;}

.linkStyle{
	color: #53aee6;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	color: #53aee6;
	opacity: 0.7;
	text-decoration: none;
}


.txt_color1,.hvr_txt_color1:hover{color: #010080;} 
.txt_color2,.hvr_txt_color2:hover{color: #010080;} 
.txt_color3,.hvr_txt_color3:hover{color: #3570c5;} 
/*.txt_color4,.hvr_txt_color4:hover{color: #eae4df;} */
/*.txt_color5,.hvr_txt_color5:hover{color: #f2ede7;}*/ 

.bg_color1,.hvr_bg_color1:hover{background-color: #2f5abf;}
.bg_color2,.hvr_bg_color2:hover{background-color: #d5f5ff;}
.bg_color3,.hvr_bg_color3:hover{background-color: #2b4aba;} 
/*.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: #010080;}
.border_color2,.hvr_border_color2:hover{border-color: #010080;}
.border_color3,.hvr_border_color3:hover{border-color: #3570c5;}
/*.border_color4,.hvr_border_color4:hover{border-color: #eae4df;}*/
/*.border_color5,.hvr_border_color5:hover{border-color: #f2ede7;}*/