/*レスポンシブ02 ブルー 1カラム*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');/*-- google マテリアルアイコン --*/
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');

.pc{display:inline;}
.sp{display:none;}

.ta_c{text-align:center !important;}
.ta_r{text-align:right !important;}
.ta_l{text-align:left !important;}

.mb0{margin-bottom: 0px !important;}
.pb0{padding-bottom: 0px !important;}
.m_auto{margin-left: auto; margin-right: auto;}

.mt20{margin-top: 20px;}
.mb20{margin-bottom: 20px;}
.mt20{margin-top: 20px;}
.mb20{margin-bottom: 20px;}
.mt30{margin-top: 30px;}
.mb30{margin-bottom: 30px;}
.mt40{margin-top: 40px;}
.mb40{margin-bottom: 40px;}

.pt20{padding-top: 20px;}
.pb20{padding-bottom: 20px;}
.pt20{padding-top: 20px;}
.pb20{padding-bottom: 20px;}
.pt30{padding-top: 30px;}
.pb30{padding-bottom: 30px;}
.pt40{padding-top: 40px;}
.pb40{padding-bottom: 40px;}


.external_link{word-break: break-all;}
.external_link::before{font-family: 'Material Icons'; content: '\e89e'; vertical-align: middle; margin-right:0.2em; font-size: 1.1em; color: var(--tri-color);}

body {
color: #1b1b1b;
font-weight: normal;
letter-spacing: unset;
/*--font-family: 'Noto Serif JP', serif;--*/
font-family: 'Noto Sans JP', sans-serif;
font-feature-settings: "palt";
}

.article.zero_margin, .gallery.zero_margin {
margin-bottom: 0!important;
padding-bottom: 0!important;
}

strong{
  font-weight: 900;
  color:#ff0000;
  font-size: 120%;
}
.article p{
font-weight: 600;
}

#mainTopics h2:after, #mainArticles .article h2:after, .article h3:after, .gallery h3:after, .freeHtml h3:after {
border-radius: 4px;
margin: 24px auto;
}
.article.mission, .article.voice, .article.bg_img {
background: url(/materials/167653222599901.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
position: relative;
overflow: hidden;
z-index: 0;
padding: 5vh 0;
background-color:rgba(28,79,160,0.7);
background-blend-mode: darken;
/*--
background-color:rgba(28,79,160,0.99);
background-blend-mode:lighten;--*/


}

.article.bg_img h3,
.article.bg_img p{
    color: #fff;
    text-shadow: 2px 2px 3px #292c46;
    /*--text-shadow: 2px 2px 3px #1c4fa0;--*/
    text-align: center;
}

.article.bg_img p{margin: 0; font-size: 1.2em;}
.article.bg_img p span{font-size: 1.5em;}

.article.voice:before {
content: '';
background: inherit;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
}

.article_center_mini .article_center .image{max-width: 44%; margin-left: auto; margin-right: auto;}

.article.contact {
padding: 0!important;
}
.article.contact .image {
margin-bottom: 0!important;
}
#mainTopics h2, #mainArticles .article h2, .article h3, .gallery h3, .freeHtml h3 {
margin: 0;
 font-weight:bold;
}

#mainArticles table.contactTable tr th {
font-weight: normal;
}
#mainArticles table.contactTable input.button, #mainArticles table.contactTable input[type="button"] {
border-radius: 4px;
}
div#footer li a {
font-weight: normal;
}
#mainArticles .envelope {
background-color: #fff;
box-shadow: 0 0 13px #cfd8e9;
border-radius: 10px;
}


/*----------header----------*/
#title h1 {
background: url(/materials/177001652237901.png) left center no-repeat;
background-size: contain;
height: 51px;
width: 240px;
}
h1 a {
overflow: hidden;
text-indent: 110%;
white-space: nowrap;
display: block;
height: inherit;
}
#title #title_outer {
background: url(/materials/177016505924901.png) right center no-repeat;
background-size: 370px;
width: 100%;
height: 56px;
}


@media only screen and (max-width: 800px) {
#title h1 {
width: 256px;
}
#title #title_outer {
background-size: 256px;
}
}


@media only screen and (max-width: 600px) {
#title h1 {
padding-left: 0;
margin-left: 4%;
width: 150px;
height: 52px;
}
#title #title_outer {
background: none;
}

.article table.normalTbl th,
.article table.normalTbl td {
text-align: center;
}
.article table.normalTbl th {
font-weight: bold;
}


}


/*----------freeHTML----------*/
.side_address {
display: flex;
margin-bottom: 15px;
padding: 0;
box-sizing: border-box;
justify-content: center;
align-items: center;
}
.side_address .logo {
margin:0 auto 15px;
text-align: center;
width: 256px;
}
.side_address .txtblock {
width: 500px;
}
.side_address .sitename {
font-size: 20px;
font-weight: bold;
}
.side_address .txt {
/*--font-size: 15px;--*/
margin: 0 auto 15px;
color: #1b1b1b;
line-height: 1.8;
display: block;
letter-spacing: 0;
}
@media only screen and (max-width: 600px) {
.side_address {
display: flex;
margin-bottom: 15px;
padding: 0;
border-radius: 4px;
box-sizing: border-box;
justify-content: center;
flex-direction: column;
}
.side_address .logo {
width: 256px;
margin:  0 auto 5%;
display: flex;
align-items: center;
justify-content: center;
}
.side_address .txtblock {
display: flex;
align-items: center;
flex-direction: column;
}
.side_address .sitename {
/*--font-size: 18px;--*/
font-size: 16px;
font-weight: normal;
line-height: 1.3;
display: block;
margin: 0 auto 5px;
}
.side_address .txt {
font-size: 14px;
margin: 0 auto 5px;
color: #1b1b1b;
line-height: 1.6;
display: block;
text-align: center;
letter-spacing: 0;
white-space: nowrap;
}
}

#bottomLink,
#bottomLink2{
display: none;
}
@media only screen and (max-width: 600px) {
#bottomLink {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
z-index: 1000;
height: 48px;
overflow: hidden;
display: block;
}
#bottomLink a {
display: block;
color: var(--main-color);
background: var(--sub-color);
text-decoration: none;
font-size: 100%;
line-height: 48px;
height:100%;
  float:left;
    width:50%;
  border-left:1px solid #fff;

}
#bottomLink a span {
display:block;
}

#bottomLink2{
position: fixed;
left: 0;
bottom: 48px;  
width: 100%;
text-align: center;
z-index: 1000;
height: 50px;
overflow: hidden;
display: block;  
}
#bottomLink2 a {
display: block;
color: #ffffff;
background: #0a1846;
text-decoration: none;
font-size: 100%;
line-height: 48px;
height:100%;
float:left;
width:20%;
border-left:1px solid #fff;
font-size: 10px;
padding-top: 13px;
}
#bottomLink2 a span {
line-height: 1.2em;
}




#wrap {
margin-bottom: 48px;
}
/* スマホで画像を文章下に配置 */
.image_bottom .article_body {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
}
.image_bottom .article_body .image {
	order: 1;
}
}

#mainArticles div[id^="blog"] h2 {
width: auto;
}

.sideContents #sideServices h2, .sideContents #sideBlogCategories h2, .sideContents #sideBlogDates h2, .sideContents #sideMobile h2,.sideContents ul,.sideContents dl,
.sideContents .sideMobile p,.gallery ul.galleryGrids .comment,
.article table.normalTbl th,
.article table.normalTbl td,
#footer,
ul.maru,
ol.pp,
ul.notes,
ul.ps {
font-size: 18px;
}

.sideContents dl ul li a{font-size: 1.0em;}

ul.faq li.qus::before {
    background-color: var(--main-color);
}

ul.faq li.ans::before {
    background-color: var(--tri-color);
}

/*----------colors----------*/
:root{
--main-color:#1a2b64;
--sub-color:#ffe307;
--tri-color:#e5eaf3;
}

a {
color: var(--main-color);
}
a.btn {
background: var(--main-color);
font-weight: normal;
color: #fff;
border-radius: 30px;
}
a.btn:hover {
background: var(--sub-color);
color: var(--main-color);
}
.sideContents #sideServices h2:before, .sideContents #sideBlogCategories h2:before, .sideContents #sideBlogDates h2:before, .sideContents #sideMobile h2:before {
background: var(--tri-color);
}
ul.topics li p.date {
background: var(--main-color);
}
ul.topics li p.more a, #mainTopics .listview a {
background: var(--main-color);
font-weight: normal;
}
ul.topics li p.more a:hover, #mainTopics .listview a:hover {
background: var(--sub-color);
}

#topMenu_outer .topMenu li a:hover {
background: var(--main-color);
color: var(--sub-color);
}

#topMenu_outer .topMenu li a::after{background: transparent;}

/*Footer*/
#footer {
/*--background: var(--main-color);--*/
background: #fff;
}

#footer_body {padding-top: 0;}

#footer_body .topMenu li a,
#footer_body .services li a {
/*--background: var(--main-color);--*/
background: transparent;
color: var(--main-color);
}

#footer_body .topMenu li a::before{color: var(--main-color);}

#footer_body .topMenu li a:hover,
#footer_body .services li a:hover {
/*--background-color: var(--sub-color);--*/
background-color: var(--main-color);
}

#footer_body .topMenu li a:hover::before{color: #fff;}

#footer_body .copyright {
background: var(--main-color);
}
.sideContents ul li a:hover,
.sideContents dt a:hover {
background: var(--main-color);
}
.article.theme,
.gallery.theme {
background: var(--main-color);
}
#mainArticles h2,
#listTopics h2 {
background: var(--main-color);
}
#mainArticles .article h2:after {
background: var(--main-color);
}
#mainTopics h2:after,
.article h3:after,
.gallery h3:after,
.freeHtml h3:after {
background: var(--main-color);
}


.article h4{
    padding: 0;
    border-radius: 0;
    border: 0px none;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--main-color);
}
.article h4:before {
    content: none;
    background: transparent;
/*--background: var(--main-color);--*/
}
.article h5 {
border-left: solid 4px var(--main-color);
}
.article h6:before {
color: var(--main-color);
}
ul.topics li h3 a {
color: var(--main-color);
}
ul.maru02 li:before {
color: var(--main-color);
}
#mainArticles table.contactTable tr td.th_headline {
background: var(--main-color);
}
#mainArticles table.contactTable input.button {
background: var(--main-color);
}


.btn_flex{display: flex; flex-wrap:wrap;}
.btn_flex li{width: 50%; padding: 10px; box-sizing: border-box;}

.sideContents ul li a::before{margin-right: 0; content: none;}


@media only screen and (max-width: 600px) {
#toggle {
background-color: var(--main-color);
}
.active #toggle {
background-color: var(--main-color);
}
#topMenu_outer .topMenu li a:hover {
background: var(--main-color);
}

#trouble{
    display: block;
    }

    #trouble li{
        width: 100%;
    }


.article.col3{ box-sizing: border-box; margin-left: 4%; margin-right: 4%;}



}

@media only screen and (max-width: 480px) {
    /*.pc{display:none;}*/
    .sp{display:inline;}
    
    
    body {
    font-size: 14px;
    }
    .article.mission p {
    font-size: 1.5em;
    }
    
    .btn_flex li{width: 100%;}
    .article.bg_img p{font-size: 1em; text-align: left;}

    .sideContents #sideServices h2, .sideContents #sideBlogCategories h2, .sideContents #sideBlogDates h2, .sideContents #sideMobile h2,.sideContents ul,.sideContents dl,
    .sideContents .sideMobile p,.gallery ul.galleryGrids .comment,
    .article table.normalTbl th,
    .article table.normalTbl td,
    #footer,
    ul.maru,
    ol.pp,
    ul.notes,
    ul.ps {
    font-size: 14px;
    }

    #mainArticles h2{
      /*font-size: 1.5em;*/
      font-size: 2em;
      font-weight: bold;
  }
    .article h3{font-size: 2.2em; font-weight: bold; }
    }


    /*-- お申込み手順 --*/

    .flow_design {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}

.flow_design ul {
  padding: 0;
}

.flow_design li {
  list-style-type: none;
}

.flow_design dd {
  margin-left: 0;
}

.flow {
  position: relative;
}

.flow::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -129px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
  border-radius: 20px;
}

.flow > li {
  position: relative;
}

.flow > li:not(:last-child) {
  margin-bottom: 60px;
}

.flow > li .flow_icon {
  font-size: 0.8em;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  border-radius: 100vh;
  color: #fff;
  background: var(--main-color);
  display: inline-block;
  margin-right: 0.3em;
}

.flow > li ol {
  /*padding-left: 70px;*/
  padding-left: 30px;
  position: relative;
}

.flow > li ol::before,
.flow > li ol::after {
  content: "";
  display: block;
  position: absolute;
  /*--top: 15px;--*/
  top:22px;
}

.flow > li ol::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: var(--main-color);
  border-radius: 50%;
  left: -4px;
}

.flow > li ol::after {
  /*width: 50px;*/
  width: 20px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 5px;
}

.flow > li ol li {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--main-color);
  margin-bottom: 0.5em;
  /*display: flex;*/
  align-items: center;
}

/*--
#wrap_body #topMenu{order: 3; margin-bottom: 30px; }
#wrap_body #mainImage {order: 2;}
--*/

#trouble li{
    background: var(--main-color);
    color: #fff;
    padding: 30px;
    box-sizing: border-box;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.3em;

}

#trouble li strong{color: var(--sub-color);}

.strengths{position: relative;}
.strengths h4{z-index: 3; position: relative;margin-top: 65px;}
.strengths_span{
  /*--font-size: 340px;--*/
  font-size: 5em;
  color: #e5eaf3;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  margin-bottom: 0;
  /*top: -65px;*/
  top: -92px;
  left: 0;
  z-index: -1;
}

#sideContents_outer{
    width: 100%;
    
}

.sideContents .freeHtml{background: #1c4fa0; }

.freeHtml .text{text-align: center; font-weight: bold; font-size: 1.5em; color: #fff; margin-top: 20px;}

.freeHtml .linkbtn li a.btn{
  color: var(--main-color); 
  background: var(--sub-color);
  border:1px solid var(--sub-color);
  border-radius: 30px;
  font-size: 1.2em;
    font-weight: 700;
}
.freeHtml .linkbtn li a.btn:hover{
    background: #ffffff;
}

.freeHtml_info{width: 100%;  background: var(--main-color);}
.freeHtml #logo{width: 250px; height: auto; object-fit: contain;}
.freeHtml ul.info li{color: #fff; border: 0px none;}
.freeHtml ul.info li a{display: inline-block; color: #fff; padding: 0px;}

@media only screen and (max-width: 1023px) {
    .freeHtml .linkbtn{width: 100%; max-width: 300px; display: block; text-align: center; margin-left: auto; margin-right: auto;}
    .freeHtml .linkbtn li{width: 100%; border: 0px none; margin-bottom: 10px;}

    #sideContents_outer {padding-left: 0; padding-right: 0;}
    .freeHtml_info{text-align: center; padding: 10px 0;}

    #footer_body .topMenu{ margin-left: auto; margin-right: auto; }

}

@media only screen and (min-width: 1024px) {

    .sideContents .freeHtml{min-width: 1024px;}
    .freeHtml_contact{width: 1024px; margin-left: auto; margin-right: auto;}

    .freeHtml .linkbtn{display: flex; justify-content: space-between; margin-bottom: 20px;}
    .freeHtml .linkbtn li{width: 49%; border: 0px none; }

    .freeHtml_info div{
    display: flex;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
}
.freeHtml ul.info{width: 50%;}

}

@media only screen and (min-width: 601px) {

    #topMenu_outer .topMenu{margin-top: 10px;}

#topMenu_outer .topMenu li{
    /*--width: 20%;--*/
    padding: 0 5px;
    box-sizing: border-box;
}

#topMenu_outer .topMenu li a {
font-weight: normal;
background: var(--main-color);
color: #fff;
padding: 0;
box-sizing: border-box;
letter-spacing: 0;
font-feature-settings: "palt";
}

#topMenu_outer .topMenu li a::after{
    content: "▼";
    position: absolute;
    top:50%;
    left: 50%;
    right: 50%;
    width: 100%;
    height: auto;
    transform: translateY(-20%) translateX(-50%) scaleY(0.5);
    transform-origin: center;
    }

    #topMenu_outer .topMenu li:last-of-type a::after{content: "▼";}

    #trouble{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }

    #trouble li{
        width: 49%;
        background: var(--main-color);
        color: #fff;
        padding: 30px;
        box-sizing: border-box;
        margin-bottom: 20px;
        text-align: center;
        font-size: 1.5em;
    }


#wrap_body #topMenu{order: 3; margin-bottom: 30px; }
#wrap_body #mainImage {order: 2;}






    
}


@media only screen and (min-width:601px) and (max-width:710px){
    #topMenu_outer .topMenu li a {font-size: 14px;}
}

/*フッター追加*/
#footer_body .topMenu{
    display: block;
    width: 100%;  
}
#footer_body .topMenu li{
    width: 32%;
    display: inline-block;
}
/*背景追加*/
.article.bg2{
    background:url(/materials/177034623344501.jpg) no-repeat;
}
@media only screen and (max-width: 480px) {
  #footer_body .topMenu li{ width:100%; display:block; }
  .article.bg2{ background-position:top right; }
}

.article h3{
    font-size: 2.9em;
  letter-spacing: 0px;
}
@media only screen and (max-width: 600px) {
.h3_s h3{ font-size:1.7em; }
}
.article h4 {
    font-size: 1.8em;
}
.h4_l{
 font-size:1.8em !important;
 text-align:center;
  background:#d23b34 !important;
  color:#fff !important;
  padding: 10px !important;
}
.flow p{
    font-size: 0.8em;
    color: #000;
}
.flow_bg{
  background:#ecf3f7;
  padding:10px;
}

/*料金表*/
.price_table{
  border-collapse: collapse;
  border-spacing: 5px;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.price_table tr{
  border-bottom: solid 2px white;
}
.price_table tr:last-child{
  border-bottom: none;
}
.price_table th{
  position: relative;
  text-align: left;
  width: 20%;
  background-color: #1a2b64 !important;
  color: white;
  text-align: center;
  padding: 10px 0;
  font-size: 1.4em;
font-weight: 700;
}
.price_table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #1a2b64;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.price_table td{
  text-align: left;
  width: 20%;
  text-align: center;
  background-color: #eee;
  padding: 10px 0;
 font-weight: 600; 
}
@media only screen and (max-width: 600px) {
.price_table th,.price_table td{
  width: 100%;
  display: block;
}
.price_table th:after{
  position: absolute;
  right: 0;
  bottom: -40px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #1a2b64 transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}
}