@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
:root {
  	--blue-black:#171551;
    --navy:#15187E;
  	--blue1:#003594;
  	--blue2:#0053A7;
  	--blue3:#0168B8;
  	--blue4:#0281CD;
	--green:#00a634;
  	--dark-green:#005C32;
  	--light-green:#9FEB2F;
  	--red: #e4362d;
  	--yellow:#EECD39;
  	--aqua: #65BBC7;
    --white:#fff;
  	--bg-color: #ebf4ff;
    --txt-color:#111;
    --gray :#f3f3f3;
}

/*------------------------------
シンプル01 white 2column
------------------------------*/
body {
  	/*font-family: "Yu mincho","Noto Serif JP", serif;*/
  	font-optical-sizing: auto;
  	font-style: normal;
    font-size: 16px;
  	color: var(--txt-color);
}
#wrap_body #mainImage {
    order: 2;
}
#wrap_body #topMenu {
    order: 3;
}
.article, .gallery, #mainTopics, #listTopics, #mainServices, #mainBlogComments, #mainBlogCommentForm {
    border-top: none;
}
.article.bg {
 	background: var(--bg-color); 
  	border-radius: 2px;
}
.article.gray {
	background: var(--gray);
  	border-radius: 2px;
}
#mainArticles .envelope, #mainBlogCommentForm_outer .envelope {
    background: var(--bg-color);
    border: none;
    border-radius: 2px;
}
.article.zero_margin, .gallery.zero_margin {
    margin-bottom: 0;
    padding-bottom: 0;
}
.article p, .gallery p {
    margin-bottom: 1.3em;
}
a {
  	transition: 0.2s all;
  	color: var(--green);
}
a:hover {
  	color:var(--light-green);
}
strong {
  	font-size:103%;
  	font-weight: 700;
}
/*----------header----------*/
#title {
  	background:url(/materials/177089755765601.png) center no-repeat;
  	background-size: cover;
}
#title h1 {
   	background: url(/materials/177089502479502.png) left center no-repeat;
   	background-size: contain;
   	height: 80px;
   	width: 320px;
}
h1 a {
  	overflow: hidden;
  	text-indent: 110%;
  	white-space: nowrap;
  	display: block;
  	height: inherit;
}
#title #title_outer {
  	background: url(/materials/177089755765702.png) right center no-repeat;
  	background-size: 280px;
  	height: 80px;
}
/*---------topmanu--------*/
#wrap_body #topMenu {
    border-bottom: none;
    background: var(--blue1);
}
#topMenu_outer .topMenu li a {
    color: var(--white);
    font-weight: 700;
}
#topMenu_outer .topMenu li a:hover {
    background: var(--blue4);
    color: var(--white);
}
/*---------siteMap--------*/
ul.siteMap {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    gap: 0 1%;
}
ul.siteMap li {
    width: calc(100% / 3);
}
/*---------事例ギャラリー--------*/
.gallery.examples {
    padding-top: 8px;
}
#mainContents .gallery.examples h3 {
    border-bottom: 0;
    padding-top: 0;
    position: unset;
    color: var(--blue-black);
    font-weight: 600;
    font-size: 130%;
    margin-bottom: 1.2rem;
    border-left: none;
    padding-left: 0;
    display: block;
}
#mainContents .gallery.examples h3::after {
    border-bottom: none;
    content: "";
    width: 56px;
    height: 2px;
    background: var(--navy);
    margin-top: 1rem;
    display: block;
    bottom: unset;
    left: unset;
    position: unset;
}
/*---------Flow--------*/
.article table#flowTbl td {
    border: 0;
    background: var(--bg-color);
    border-radius: 2px;
    padding: 24px;
  	margin-bottom: 48px;
}
.article table#flowTbl td:after {
    color: var(--bg-color);
  	content: "\f0d7";
}
.article table#flowTbl tr:last-child td {
    background: var(--blue2);
    color: white;
}
.article table#flowTbl strong {
    background: none;
  	padding:0;
}

/*---------sideContents--------*/
#sideContents #sideServices ul, #sideContents #sideServices dl, #sideContents #sideBlogCategories ul, #sideContents #sideBlogCategories dl, #sideContents #sideBlogDates ul, #sideContents #sideBlogDates dl {
    background: var(--white);
}
#sideContents #sideServices ul a:before, #sideContents #sideServices dl a:before, #sideContents #sideBlogCategories ul a:before, #sideContents #sideBlogCategories dl a:before, #sideContents #sideBlogDates ul a:before, #sideContents #sideBlogDates dl a:before {
    color: var(--blue1);
}
#sideContents .freeHtml, #sideContents #sideServices, #sideContents #sideBlogCategories, #sideContents #sideBlogDates, #sideContents #sideMobile {
    border-top: 0;
    background: var(--white);
    border-radius: 2px;
}
p.txt {
	line-height: 1.5;
    border-bottom: solid 1px #eee;
    padding: 0.5rem 0;
}
#sideContents #sideContact a {
    color: #fff;
    background: var(--blue1);
}
.sideContents .side img {
    padding: 16px 0 0;
}
/*---------Footer--------*/
#footer {
    background: var(--blue1);
}
#footer_body {
    display: flex;
    justify-content: space-between;
    padding: 32px 0;
    flex-direction: column;
}
#footer_body .copyright {
  	text-align: center;
    align-self: center;
}
/*---------見出し----------*/
#mainArticles .article h2, .mainContents .article h3, #mainTopics h2, #listTopics h2, .mainContents div.gallery h3, #mainServices h2 {
    background: none;
}

#mainArticles .article h2 {
    background: var(--blue1);
}
#mainArticles h2, #listTopics h2 {
    margin: 8px 0 40px 0;
    padding: 0;
    border: none;
    text-align: center;
    font-size: 2em;
    letter-spacing: 0.2rem;
    font-weight: 900;
    line-height: 1.7;
    width: 100%;
  	color: var(--blue-black);
}
#mainArticles h2 strong, #listTopics h2 strong {
    font-size: 14px;
    letter-spacing: 0.08rem;
}
.mainContents .article h3, #mainTopics h2, .mainContents div.gallery h3 {
    font-size: 160%;
    display: flex;
    letter-spacing: 0.1em;
    line-height: 1.6em;
    color: var(--blue-black);
    font-weight: 800;
	margin: 16px 0 24px;
    padding: 8px 0;
    border-bottom: solid 5px var(--blue4);
    position: relative;
}
.mainContents .article h3:after, #mainTopics h2:after, .mainContents div.gallery h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 5px var(--blue1);
    bottom: -5px;
    left: 0;
    width: 30%;
}
.article h3 a {
    color: var(--blue1);
}
.article h3 a:hover {
  	color: var(--aqua);
}
.article h4 {
    border-left: none;
    position: relative;
    padding: 5px 5px 5px 42px;
    background: var(--blue1);
    font-size: 20px;
    color: white;
    margin-left: -33px;
    line-height: 1.3;
    z-index: 1;
}
.article h4::before {
    position: absolute;
    content: '';
    left: -2px;
    top: -2px;
    border: none;
    border-left: solid 40px white;
    border-bottom: solid 79px transparent;
    z-index: -2;
}
.article h5 {
  	color: var(--blue-black);
    font-weight: 600;
    font-size: 130%;
    margin-bottom: 1.2rem;
  	border-left: none;
    padding-left: 0;
}
.article h5::after {
    content: "";
    width: 80px;
    height: 3px;
    background: var(--navy);
    display: block;
    margin-top: 1rem;
}
.article h6 {
    background: var(--blue1);
    color: white;
    font-size: 100%;
    letter-spacing: 0.02rem;
    padding: 4px 8px 4px 1rem;
    border-radius: 99px;
    margin: 0.8rem 0;
}
.article h6:before {
    font-family: "Font Awesome 5 Free";
    content: "\f06a";
    font-weight: bold;
    margin-right: 8px;
    display: inline-block;
    color: var(--yellow);
    font-size: 120%;
  	transform: unset;
}
/*---------button--------*/
#mainTopics .listview a, a.btn, p.more a, #mainServices h3 a {
    background: var(--blue1);
    color: #fff;
    box-shadow: unset;
    margin: 16px 0;
}
#mainTopics .listview a:hover, a.btn:hover, p.more a:hover, #mainServices h3 a:hover {
    background: var(--aqua);
    color: #fff;
  	box-shadow: none;
    top: 0;
    position: unset;
    text-decoration: none;
}
/*---------list--------*/
ol.number li {
 	padding-bottom: 1.5rem; 
}
ol.number li p strong {
    font-size: 120%;
    color: var(--navy);
    font-weight: 700;
}
ol.number li:before {
    position: absolute;
    counter-increment: number;
    content: counter(number) ".";
    display: inline-block;
    background: none;
    color: var(--blue4);
    font-weight: bold;
    font-size: 1.8rem;
    left: 0;
    width: 24px;
    height: 24px;
    line-height: 20px;
    text-align: center;
    top: 10px;
    transform: translateY(-50%);
}
ol.number li:nth-child(2n):before {
    color:var(--blue3);
}
ol.number li:nth-child(3n):before {
    color: var(--blue2)
}
ol.number li:nth-child(4n):before {
    color: var(--blue1);
}

ul.check li {
    color: var(--red);
    position: relative;
    font-weight: bold;
    line-height: 1.5;
    padding: 0.5rem 0;
    font-size: 120%;
}
ul.check li:before {
    display: block;
    font-family: "Font Awesome 5 Free";
    content: "\f058";
    position: absolute;
    top: 0.2em;
    left: -1.3em;
    border-left: 0;
    border-bottom: 0;
    transform: unset;
    color: var(--red);
    font-size: 130%;
}
ul.check li p {
    font-size: 16px;
    font-weight: normal;
    color: var(--txt-color);
}
ul.check li p strong {
    display: inline-block;
    margin: 0.3rem 0;
}

ul.maru {
    list-style-type: none;
    margin-left: 1em;
    font-size: 110%;
    font-weight: 600;
}
ul.maru li:before {
    content: "●";
    margin-left: -1em;
    color: var(--yellow);
    font-size: 110%;
  	margin-right: 0.3rem;
}
ul.maru li p {
    font-size: 16px;
    font-weight: normal;
}
/*---------table--------*/
.article table.normalTbl th {
    border-bottom: solid 1px var(--blue4);
}
.article table.priceTbl {
    width: 100%;
    border:none;
}
.article table.priceTbl tr {
    border:none;
}
.article table.priceTbl tr th {
    width:50%;
    border:none;
    background:var(--bg-color);
    color:var(--blue-black);
    font-weight:600;
    border-bottom:1px solid var(--white);
    font-size:105%;
}
.article table.priceTbl tr td {
    border:none;
    width:50%;
    text-align:center;
    border-bottom: 1px solid var(--bg-color);
    font-size:110%;
    font-weight:500;
}
/*---------Form---------*/
#mainArticles table.contactTable tr th, #mainBlogCommentForm_outer table.contactTable tr th {
    border-bottom: solid 1px var(--white);
    background: var(--blue3);
    color: white;
}
#mainArticles table.contactTable tr td.th_headline, #mainBlogCommentForm_outer table.contactTable tr td.th_headline {
    background: var(--blue2);
    color: #fff;
}
#mainArticles table.contactTable tr:last-child th, #mainBlogCommentForm_outer table.contactTable tr:last-child th {
    background: none;
    border-bottom: none;
}
#mainArticles table.contactTable tr:last-child td, #mainBlogCommentForm_outer table.contactTable tr:last-child td {
    border-bottom: none;
}
#mainArticles table.contactTable input.button, #mainBlogCommentForm_outer table.contactTable input.button {
    background: var(--green);
  	transition: 0.2s all;
}
#mainArticles table.contactTable input.button, #mainArticles table.contactTable input[type=button], #mainBlogCommentForm_outer table.contactTable input.button, #mainBlogCommentForm_outer table.contactTable input[type=button] {
    border-radius: 99px;
}
#mainArticles table.contactTable input.button:hover {
  	background: var(--dark-green);
}
/*---------responsive--------*/
@media only screen and (width < 895px) {
  #title h1 {
    width: 256px;
   }
  #title #title_outer {
  	background-size: 256px;
   }
  .article.max.comm .article_body {
    padding: 0;
    display: block;
   }
  .mainArticles .article.max.comm .article_right .image, .mainArticles .article.max.comm .article_left .image {
    flex-basis: auto;
    margin: 0;
    border-radius: 1em;
  }
  .mainArticles .article.max.comm {
    padding-left: 4%;
    padding-right: 4%;
  }
  ul.guide { 
  	flex-direction: column;
    gap: 24px 4%;
  }
  ul.guide li {
    width: 100%;
  }
}

/*-------------
バッジ非表示
---------------*/
.recaptcha_policy {
padding: 0;
margin: 0;
text-align: center;
font-size: 11px !important;
color: #444 !important;
}
.recaptcha_policy a {
font-size: 11px !important;
color: #111 !important;
}
.grecaptcha-badge { visibility: hidden; }