@charset "utf-8";
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: auto!important;
  }
}
/* *****共通設定***** */
* {
	font-family: "新ゴ R";
		}
h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4, .fw-bold {
			font-family: "新ゴ B";
}

.text-info {
	color: #006AD4!important;
}
.short-udline {
	display: inline-block;
    position: relative;
    padding-bottom: 3px;
	letter-spacing: 0.1em;
    margin-bottom: 50px; font-weight: bold;
}
.short-udline:before {
    display: inline-block;
    position: absolute;
    content: '';
    bottom: -10px;
    left: 50%;
    width: 50px;
    height: 2px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
    background-color: #0055ae;
}
#page-top {
	padding-top: 50px;
}
#page, #Page-Renewal {
	padding-top: 65px;
}
main{
    display: block;
    /*background-color: #ffffff;  #ebf9ff */
}

/*******************************************
btn等文字
*******************************************/
main .btn{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    font-size: 1.5rem;
}
.btnBasic {
	padding: 20px 20px;
	border-radius: 5px;
	margin: 0 auto;	
	width: 100%;
	max-width: 600px;
	display: block;
	color: #fff;
	text-decoration: none;
	text-align:	center;
	font-size: 1.5rem;
}
.btnBasic:hover {
	opacity: 0.5;
	color: #fff;
}
.btnBlue  {
	background-color: #0DCAF0;
}

.btnNavy {
	background-color: #006AD4;
}

.btnWhite {
	background-color: #ffffff;
	border: 5px solid #0DCAF0;
	color: #006AD4;
	padding: 30px;
	width: 100%;
	font-weight: bold;
	box-shadow: 3px 3px 5px #000;
}
.btnWhite:hover a i {
	background-color: rgba(0,106,212,.50);
	color: #fff;
	
}
.btnWhite:hover {
	background-color:#12065F;
	box-shadow: none;
}
* {
	font-family: "新ゴ R";
}
h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4, .fw-bold {
	font-family: "新ゴ B";
}
a:hover {
	opacity: 0.5;
}
h1 { font-size: 4.5rem; }
h2, h3{
   color: #001969;
}
.gray {
    color: #6c757d;
}
.card{
    border-color: #e0c7b2;
}
.img-thumbnail {
    width: 100%;
    padding: .25rem;
    background-color: transparent;
    border: none;
}
/*******************************************
ヘッダー(navbar)
*******************************************/
.navbar{
    border-bottom: 1px solid #a29080;
    background-color: #ffffff;
}
.navbar .navbar-collapse{
    flex-grow: 0;
}
.navbar .navbar-brand{
    height: 50px;
}
.navbar .navbar-brand img{
    height: 100%;
}
.navbar .navbar-nav .active > .nav-link{
	font-weight: bold;
}
.navbar .navbar-nav .nav-link {
	margin: 0px;
}
.navbar .navbar-nav {
	margin: 0 10px!important;
}
.navbar .navbar-nav .nav-link:hover {
    color: rgba(0,106,212,1.00);
	font-weight: bold;
	border-bottom: 2.5px solid #006AD4;
}

/*　ページ内リンクの位置を下げる　*/
a.page-anchor {
	display: block;
    position: relative;
    top: -70px;
    visibility: hidden;
}
.header-commentsBox {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #fff!important;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 100%;
}
.header-comments {
	line-height: 1em;
	margin: 0;
	padding: 2px;
	color: #333; /* #006AD4 */
	background-color: #fff;
}
.header-comments p, .header-comments p span {
	margin: 0;
	font-size: 15px;
	display: inline;
}
@media screen and (max-width: 767.98px) {
	.header-commentsBox {
		width: 98%;
	}
	.header-comments p {
		margin: 0;
		font-size: 13px;
	}
	.teltel {
		font-size: 12px;
	}
}

.telbtn {
	display: inline-block;
	background-color: #0D6EFD;
	color: #fff;
	padding: 2px 5px;
	font-size: 80%;
	margin: 0;
	border-radius: 5px;
}
.teltel a {
	text-decoration: none;
	padding: 0;
	margin: 0;
}
.header-btn-contact {
	 display: flex;
	flex-wrap: wrap;
	justify-content: center!important;
	align-items: center!important;
	border: 0.5px solid #aaa;
	border-radius: 5px;
	padding: 5px 15px;
	margin-left: 10px;
	text-decoration: none;
	color: #333;
}
a.header-btn-contact:hover {
	background-color: #006AD4;
	color: #fff;
	opacity: 1.0;
}
/*******************************************
footer
*******************************************/

#footer{
    background-color: #f2f2f2;/* #001969 */
}

/*
#footer .footer-ttl{
    font-size: 1rem;
    font-weight: bold;
    margin: 1.5rem 0;
    color: #ffce11;
}
*/
#footer address p,
#footer #footer-news li{
    margin-bottom: 0.5rem;
}
#footer #footer-news ul{
    margin: 0;
    padding: 0
}
#footer #footer-news ul{
    list-style: none;
}
#footer #footer-news li span{
    display: inline-block;
    margin-right: 0.5rem;
}
#footer #copyright{
/*    border-top: 1px solid #774831;*/
    background-color: #001969; /* #001969 */
    color: #ffffff;
}
#footer img {
	width: 360px;
}
/*******************************************
TOP
*******************************************/

h1{
    font-weight: bold !important;
    color: #001969;/* #ffce11 */
}
#page-top h1 + span {
    font-size: 3rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 110%;
    margin-top: 0.2rem;
    display: block;
}
#page-top .jumbotron-fluid{
    height: 450px;
    border-bottom: #dddddd;
    background: url("../images/top-image.webp") no-repeat center center;
    background-size:cover;
	position: relative;
}

.jumbotron-fluid::before {
	content: '';
  	background-color: rgba(0,0,0,.3);
  	position: absolute;
  	left: 0;
  	right: 0;
  	top: 0;
  	bottom: 0;
}

.jumbotron-Text {
	z-index: 10;
}
#page-top .jumbotron-fluid .container{
    height: 100%;
}
#page-top .jumbotron-fluid .btn{
    padding-left: 3rem;
    padding-right: 3rem;
    margin-top: 1.5rem;
    font-weight: bold;
	border-width: 3px;
    border-color: #fff;
}
#headerImage .areaPR{
	background-color: rgba(252,252,252,0.60);
	font-weight: bold;
}
/*******************************************
TOP salespoint
*******************************************/
.topSalespoint {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: flex-start;
}
.topSalespoint .inner {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.topSalespoint .inner div:first-child {
	width: 40px;
}

.topSalespoint .inner div:last-child {
	width: calc( 98% - 40px );
}
.topSalespoint p {
	font-weight: bold;
}
.topMidashi {
	display: flex;
	flex-direction: row;
	align-items:center;
	flex-wrap: wrap;
	justify-content: space-between;
}

.topMidashi div:first-child {
	width: 80px;
}
.topMidashi div:nth-of-type(2) {
	width: calc( 100% - 80px );
	padding-left: 20px;
	padding-top: 0px;
}
.topMidashi div:last-child {
	width: 100%;
	padding-left: 100px;
	
}

@media screen and (max-width: 575.98px) {
	.topMidashi div:first-child {
		width: 50px;
	}
	.topMidashi div:nth-of-type(2) {
		width: calc( 100% - 50px );
		padding-left: 20px;
		padding-top: 0px;
	}
	.topMidashi div:last-child {
		width: 100%;
		padding-left: 0!important;
		padding-top: 10px;
	}
}
/* 各セクション */
#page-top section{
    border-bottom: 1px solid #e0c7b2;
    background-color: #ffffff;
	padding: 3rem 0;
}
#page-top section:nth-child(odd){
    background-color: #ebf9ff;
}
#page-top section .container > h2{
    margin-bottom: 30px;
    font-size: 2.5rem;
}
#page-top section .container > h2 + p{
    max-width: 700px;
	margin: 0 auto 50px;
}
#sec1 h3{
    font-size: 1.4rem;
}

#sec2 {
    line-height: 180%;
}
#sec2 .row{
    min-height: 160px;
    color: #2f2f2f;
}
#sec4 .card-body .clearfix p,
#sec4 .card-body .clearfix h3{
    margin-left: 115px;
    line-height: 130%;
}
#sec4 .card-body .card-title{
    margin-bottom: 5px;
    color: #001969;
}
#sec4 .card-body .card-subtitle{
    font-size: 0.9rem;
    margin-bottom: 5px;
    color: #968075;
}
#sec4 img {
    width: 100%;
}

#sec5 article > .row {
    border: 1px solid #dddddd;
}
#sec5 > div:nth-child(1) img {
    width: 100%;
}
/*#sec4 > div:nth-child(2){
    margin-left: 220px;
}*/
#sec5 h3{
    margin-bottom: 0.1rem;
}
#sec5 article > div div header {
	padding: 10px;
}

/* *****下層ページ***** */

#breadcrumb-wrapper{
    border-bottom: 1px solid #a29080;
}
#breadcrumb-wrapper,
.breadcrumb{
    font-size: 0.9rem;
    background-color: #001969;
}
.breadcrumb a{
    color: rgba(255,255,255,.5);
}
.breadcrumb a:hover,
.breadcrumb a:focus{
    color: rgba(255,255,255,1);
}top
.breadcrumb-item+.breadcrumb-item::before{
    content: ">";
    padding-right: 1rem;
    color: rgba(255,255,255,.5);
}
.breadcrumb-item.active{
    color: #ffffff;
}
h1.page-ttl {
    font-size:2rem; 
}
#page h1 + span {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 110%;
    margin-top: 0.2rem;
    display: block;
}

#page article, #Page-Renewal article {
    padding: 5rem 0;
}

#page section, #Page-Renewal section {
    padding-bottom: 5rem;
}
#page section:last-child, #Page-Renewal section:last-child {
    padding-bottom: 0rem;
}

#page h1 + small {
    font-size: 1.5rem;
    color: #ffffff;
    line-height: 110%;
    margin-top: 0.2rem;
}
#page .jumbotron{
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
    background: url("../images/top-image.jpg") no-repeat center center;
    background-size:cover;
    border-radius: initial;
}
#page #navTitle {
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
    background: url("../images/top-image.jpg") no-repeat center center;
    background-size:cover;
    border-radius: initial;
	height: 100px;
}


#Page-Renewal #navTitle {
    border-bottom: 1px solid #dddddd;
    background: url("../images/renewal.jpg") no-repeat center center;
    background-size:cover;
    border-radius: initial;
	height: 300px;
}

#Page-Renewal #navTitle::after {
	content: '';
    background-color: rgba(0,0,0,1.00);
}
#page .jumbotron .container{
    padding: 0;
}
#page .jumbotron .container p{
    margin-bottom: 0;
}
#page h2 + p{
    margin: 0 0 1.2rem;
}
#page main img{
    max-width: 100%;
}
#page .sample-title{
    display: flex;
    align-items: center;
    text-align: center;	
}

#page .sample-title::after {
    border-top: 3px dotted;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
    margin-left: 0.5em;
}
#page .sample-title span{
    background-color: #fbfbf2;
}
/* *****フォーム***** */

.form1 label{
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.form1 input,
.form1 textarea,
.form1 select{
    max-width: 768px;
}
.form1 .form-group{
    margin-bottom: 2rem;
}
.st-btn, a.st-btn, button.st-btn {
  font-size: 1.2rem;
	display: block;
	max-width: 600px;
	margin: 20px 0;
  line-height: 1.5;
  padding: 1rem 2rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;  color: #212529;
  border-radius: 0.5rem;
}
					
.btn--blue, a.btn--blue {
	color: #fff;
	background-color: #30A8FF;
}

.btn--blue:hover, a.btn--blue:hover {
	color: #fff;
	background: #4DB4FF;
}

.btn--green, a.btn--green {
	color: #fff;
	background-color: #07C067;
}

.btn--green:hover, a.btn--green:hover {
	color: #fff;
	background: #35E08E;
}

.text-red {
	color: #ff0000;
}

/* マーカー線・青 */
.marker6 {
	background:linear-gradient(transparent 75%, #9eceff 75%);
	font-weight: bold;
}

.marker-emerald {
	background:linear-gradient(transparent 75%, #29ceda 75%);
	font-weight: bold;
}


/* osusume-arrow */
.osusumeArrow img {
vertical-align: top;
}

.mark-column {
	background-color: #9eceff;
	padding-right: 10px;
	padding-left: 10px;
	line-height: 2em;
	font-weight: bold;
}

.container-MAX-sm { max-width: 540px; }
.container-MAX-md { width: 100%; max-width: 720px!important; }
.container-MAX-lg { max-width: 960px; }
.container-MAX-xl { max-width: 1140px; }
.container-MAX-xxl { max-width: 1320px; }

.marker-RedYellow {
    color: #ff0000;
    background: linear-gradient( transparent 64%, #fffd3a 0, #fffd3a calc(1.1em + 5px), transparent 0 );
}

.marker-Yellow {
    background: linear-gradient( transparent 64%, #fffd3a 0, #fffd3a calc(1.1em + 5px), transparent 0 );
}
.border-emerald { border-color: #29ceda; }

.text-red {
	color: #ff0000;
}

h4.lp_sp-tab {
	border-top: 4px solid #001969;
	background-color: #ffffff;
    font-size: 1.5rem;
    border-bottom: 4px solid #001969;
    padding: 0.25em 0;
    text-align: center;
	margin: 1em 0 0 0;
}
.planBackground {
	background-image: url("/images/landingPage/plan-bgimg.png");
	background-repeat:no-repeat;
	background-size: cover;
}

.img-border {
	border: 1px solid #333333;
}

/*制作事例の画像サイズ*/
.List-Group img {
	width: 100%;
	max-width: 400px!important;
	
}
.List-Group {
	display: flex;
	justify-content: space-between;
}

.List-Group div.inner {
	width: 45%;
	margin-bottom: 30px;
}

@media screen and (max-width: 767.98px) {
	.List-Group div.inner {
	width: 100%;
	margin-bottom: 30px;
}
}


/*******************************************/
.plan-point {
	 width: 100%; display: flex; justify-content: space-between;
}

.plan-point div {
	width: 45%;
	padding-bottom: 30px;
}
.plan-point .right a p {
	padding: 15px;
	background-color: #0549E5;
	color: #fff; text-align: center;
	font-weight: bold;
	font-size: 130%;
	border-radius: 10px;
}

.plan-point .left a p {
	padding: 15px;
	background-color: #F97F20;
	color: #fff; text-align: center;
	font-weight: bold;
	font-size: 130%;
	border-radius: 10px;
}

.plan-point a { text-decoration: none; }
.plan-point a:hover { opacity: 0.5; }

.sec-plan tr td.td-center {
	text-align: center;
	vertical-align: middle;
	width: calc(( 100% - 52% ) /3 )!important;
}

.td-center {
	text-align: center;
	vertical-align: middle;
}
td.fc-setsumei, th.fc-setsumei {
	width: 50%!important;
}
td.fc-setsumei p:nth-child(odd) {
	white-space: normal;
}

th.type-S {
	background-color: #0549E5!important;
}

#planBasic table tr th {
	background-color: #0549E5!important;
	color: #fff;
}
#planBasic table tr:nth-child(2n) td {
	background-color: rgba(5,73,229,0.05);
}
#planBasic table tr:nth-child(2n-1) td {
	background-color: rgba(255,255,255,1.0);
}
#planBasic table tr th {
	background-color: #0549E5!important;
	color: #fff;
}
#planOption table tr th {
	background-color: #f97f20!important;
	color: #fff;
}

#planOption table tr:nth-child(2n) td {
	background-color: rgba(249,127,32,0.2);
	width:20%;
}
#planOption table tr:nth-child(2n-1) td {
	background-color: rgba(255,255,255,1.0);
}

#planOption table.planOption-spec tr th {
	background-color: #aaa!important;
	color: #fff;
	text-align: center;
}
#planOption table.planOption-spec tr td {
	background-color: #fff!important;
	font-size: 90%;
}

#planOption table.planOption-spec tr th:first-of-type {
	width: 18%;
	vertical-align: middle;
	font-weight: bold;
}
#planOption table.planOption-spec tr th:nth-child(2n) {
	width: 62%;
	vertical-align: middle;
	font-weight: bold;
}
#planOption table.planOption-spec tr th:nth-child(3n) {
	width: 20%;
	text-align: center;
	vertical-align: middle;
}
@media screen and (max-width: 1199.98px) {
	.sec-plan {
		width: 100%;
/*
		overflow-x: scroll;
		white-space: nowrap;
*/
	}
}

@media screen and (min-width: 768px) and (max-width:1199.98px) {
	td.fc-setsumei {
	width: 400px!important;
}
}

@media screen and  (max-width:767.98px) {
	td.fc-setsumei {
		width: 200px!important;
	}
	td.fc-setsumei p:nth-child(even) {
		width: 100%;
}
	.plan-point {
	 width: 100%; display: flex; flex-direction: column; justify-content: space-between;
	}

	.plan-point div {
		width: 100%;
		padding-bottom: 30px;
	}
	
	
	#planOption table.planOption-spec tr th {
		width: 33%!important;
	}
	#planOption table.planOption-spec tr td {
		background-color: #fff!important;
		width: 33%!important;
	}
}


/*-----------------------------------------------
jirei.html　制作事例
------------------------------------------------*/
.jirei-new {
	position: absolute;
    top: 3%;
    left: 3%;
	padding: 1% 2%;
    background: #ffff00;
	color: #001969;
}
.jirei-pickup img.sp {
	width: 10px;
    bottom: 0px;
    left: 25%;
    position: absolute;
}

.shinki-icon {
	background-color: #0055ae; font-size: 90%; border-radius: 5px; padding: 5px 10px; color: #fff;
}

.renewal-icon {
	background-color: #00A837; font-size: 90%; border-radius: 5px; padding: 5px 10px; color: #fff;
}

/*-----------------------------------------------
index.html　section#topNorikae-point-2
------------------------------------------------*/
#topNorikae .topNorikae-point div.inner-point p {
	font-family: 'Arial Black', Gadget, 'sans-serif';
	border-bottom: 2px solid #aaa; width: 3em; padding-bottom: 0.5em; margin-bottom: 0.5em;
}
/*  --  */
.topNorikae-point-2 {
	display: flex; flex-direction: column; justify-content: space-between;
}
.topNorikae-point-2 .inner {
	width: 100%;
}
.topNorikae-point-2 .inner .inner-point {
	width: 100%; display: flex; align-content: center;
}
.topNorikae-point-2 .inner .inner-point p {
	 padding: 0.5em 0; line-height: 1em;
}
.topNorikae-point-2 .inner .inner-point span {
	font-weight: normal;
	color: #aaa;
}
.topNorikae-point-2 .inner .inner-text img {
	width: 100%;
	display: block;
	padding-right: 20px; 
}

.topNorikae-point-2 .inner .inner-text {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: flex-start;
}

.topNorikae-point-2 .inner .inner-text div:first-child {
	width: 50%!important;
}
.topNorikae-point-2 .inner .inner-text div:nth-child(2n) {
	width: 50%!important;
}
@media screen and (min-width:1200px) and (max-width:1399.98px) {
/*
	.topNorikae-point-2 .inner-point strong {
		font-size: 200%!important;
	}
*/
}
@media screen and (min-width:992px)  {
	.topNorikae-point-2 .inner .inner-text div:first-child {
		width: 45%!important;
		margin-bottom: 20px;
	}

	.topNorikae-point-2 .inner .inner-text div:nth-child(2n) {
		width: 55%!important;
	}
	
	.topNorikae-point-2 .inner {
		margin-bottom: 50px;
	}
}
@media screen and (max-width:991.98px) {
	.topNorikae-point-2 {
		flex-direction: column;
	}
	
	.topNorikae-point-2 .inner {
		width: 100%;
		margin-bottom: 20px;
	}
	
	.topNorikae-point-2 .inner .inner-text img {
		width: 100%;
		display: block;
		padding-right: 20px; 
	}
	
	.topNorikae-point-2 .inner .inner-text {
		flex-direction: column;
	}
	.topNorikae-point-2 .inner .inner-text div:first-child {
	width: 100%!important;
		margin-bottom: 20px;
	}
	.topNorikae-point-2 .inner .inner-text div:nth-child(2n) {
		width: 100%!important;
	}
}

#topNorikae .topNorikae-point-2 div.inner-point p:first-child {
	font-family: 'Arial Black', Gadget, 'sans-serif';
}

/*-----------------------------------------------
index.html　div#topOtoiawase
------------------------------------------------*/
.topOtoiawase {
	background-color: #006AD4;
	padding: 50px 0 50px 0;
	margin:70px 0 0 0;
	color: #ffffff;
	text-align: center;
}
.otoiawaseBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
}

.otoiawaseBox .inner {
	width: 48%;
}
@media screen and (max-width:767.98px) {
	.otoiawaseBox {
		flex-direction: column;
	}
	.otoiawaseBox .inner {
		width: 100%;
		margin-bottom: 30px;
	}
}



/*******************************************
contactFC.html 指示内容
*******************************************/

h2.FC-h2 {
    line-height: 3rem;
    font-weight: bold;
    margin-bottom: 60px;
    background: #001969;
    color: white;
    padding: 1.5rem;
}

.recommend-FC {
    margin: 80px auto;
}

.recommend-FC ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0;
    flex-direction: column;
}

.recommend-FC ul li {
    width: 90%;
    text-align: center;
    border: 0.5px solid #001969;
    padding: 1.0rem;
    margin: 20px auto;
    list-style: none;
    color: #001969;
    box-shadow: 6px 6px 10px #0019699c;
}

.FCBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.FCsabBox1 {
    width: 70%;
}

.FCsabBox2 {
    width: 26%;
}

.FC-p {
    line-height: 2.1rem;
}

.recommend-FC ul li .FC-BOX {
    display: flex;
    justify-content: space-between;
}

.box01 {
    width: 70%;
    margin: auto 0;
}

p.box02 {
    width: 28%;
}

.box01 h2 {
 color: #0d6efd;
}
@media screen and (max-width:992.98px) {
.FCBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
}
    
    .FCsabBox1 {
    width: 100%;
}
    
    .FCsabBox2 {
    width: 100%;
}
}


@media screen and (max-width:767.98px) {
.recommend-FC ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0;
    flex-direction: column;
}

.recommend-FC ul li {
    width: 100%;
}
    
    
}