@charset "utf-8";

/* *****共通設定***** */
body {

  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, メイリオ, sans-serif, "ＭＳ Ｐゴシック", "MS PGothic";
  background-color:#4169e1!important;
  //overflow:hidden;
}

.container {
  //border:none!important;
  overflow-x: hidden!important;
}


#sec1 {
    background-color:#4169e1!important;
    margin-top:20px;
    border-radius: 10px;
}

#sec1.container {
  padding:10px!important;
  border:none!important;
}
#sec1 p {
  background-color:none;
  padding-top:50px;
}
#sec1 .accordion-item {
  background-color:#66ccff;
}
#sec2 {
  background-color:#ffefd5!important;
  border-radius: 10px;
}
#sec2 h4 {
  background-color: yellow;
}
#sec3 {
  background-color:#66cdaa !important;
  border-radius: 10px;
}
#sec4 {
  background-color:#dda0dd !important;
  border-radius: 10px;
}
#sec5 {
  background-color:#f0e68c !important;
  border-radius: 10px;
}
#sec1 h4,#sec3 h4,,#sec5 h4 {
    //background-color:#fff!important;
}

#sec2 h4 {
    background-color:#f5f5f5!important;
}

#sec1 h3{
  font-size: 1.4rem;
}

#sec7 {
    background-color:#add8e6 !important;
}


#sec2 .row,#sec4 .row{
  min-height: 160px;
  color: #2f2f2f;
}

h4 button :hover {
//  background:#708090;
//  color:#fff;
}

#sec8,#sec8 h4 {
  background-color: #f0e68c!important;
}

.sec1 {
      background-image:url(../img/bg_paint.jpg);
}
.sec2 {
      background-image:url(../img/bg_paint.jpg);
}
.sec3 {
      background-image:url(../img/bg_paint.jpg);
}
.sec4 {
      background-image:url(../img/bg_paint.jpg);
}
.sec5 {
      background-image:url(../img/bg_paint.jpg);
}
/*pc spで切り替え*/

.pc { display: block !important; }
.sp { display: none !important; }


@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
    overflow: hidden;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    //border: 1px solid #555;/* ボーダーの色と太さ */
    padding: 10px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 1000;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#fff;
}

.btn:hover span{
  color:#fff;
  font-weight:bold;
}

.policy_button {
  margin:0 auto;
}
/* ボタン背景 */
.bgtop:before {
  content: '';
  position: absolute;
  top:0;
  left: 0;
  z-index: 2;
  /*色や形状*/
  background:#4169e1;/*背景色*/
  width: 100%;
  height: 0;
  color:#000;
  /*アニメーション*/
  transition:.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}



/*hoverした際の形状*/
.bgtop:hover:before{
   height: 100%;
   //background-color: #4169e1;
   color:#fff;
}
.modal_guide {
  z-index:20000;
  background-color:#fff;
}
.guide_pic {
  width:100%;
}
.guide_pic img{
  margin:0 auto;
    width:100%;
}

/*/////////////////////////////////////////////*/
.borderd {
  border:solid 4px #66cdaa;
  border-radius:5px;
  margin:0 5px;
  width:45%;
  //background-color: #fffff0;
}
#sec3 h3 {
  font-size:1.2rem!important;
  font-weight:bold;
  color: #008080;

}
#sec3 .card-body {
  padding:0 5px 0 5px;
}

#sec3 button.card-img-top{
  padding:0!important;
}

#sec3 .modal-content {
  z-index:20000!important;
}
#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: #401f0f;
}
#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;

  position:relative;


}

/*変更後の背景*/
#sec1 {
  background-color:"#00bfff"!important;
}

#sec2,#sec2 h4 {
  background-color:#ff6633!important;
}
#sec3,#sec3 h4 {
  background-color:#339900!important;
}
#sec4,#sec4 h4 {
  background-color:#cc66ff!important;
}
#sec5,#sec5 h4 {
  background-color:#ffd700!important;
}
/*変更後のボタン(H4)背景*/
#sec1 h4,.accordion-item{
  //background-color:#fffff0!important;
  background-color:none!important;
}

.sec1 {
  background-image:url(../img/bg_paint1.jpg);
}
.sec2 {
  background-image:url(../img/bg_paint2.jpg);
}
.sec3 {
  background-image:url(../img/bg_paint3.jpg);
}
.sec4 {
  background-image:url(../img/bg_paint4.jpg);
}
.sec5 {
  background-image:url(../img/bg_paint5.jpg);
}
footer h4{
  background-color: #4169e1;
}

main{
    display: block;

}
main .btn,
#footer-contents .btn{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    font-size: 1.5rem;
    margin:1em auto;
}
h1 { font-size: 4.5rem; }

h2, h3{
   color: #401f0f;
   //margin-top:20px;
   padding-top:20px;
}
h3 {
  font-size:1.4rem!important;
}

h4 {
  font-size:1.2rem!important;
  //padding-bottom:10px!important;
}
h4 .send_button {
  background-color: #add8e6 !important;
}

h5.items ,
h4.process{

  font-weight: bold;
}

span.middle_title {
    font-size:2.0rem!important;
    font-weight:bold;
    color:#fff;
}
p.middle_title_kana {
    font-size:1.4rem!important;
    color:#666;
    text-align:center;
    text-indent:0;
}

p.middle_title_kana ::before {
  content:"\a";
  white-space: pre;
}

p{
  font-size:1.0rem;
  text-indent: 1em;
}

ol {
  width:95%;
  margin-left:15px;
}

ul li {
  color:#000;
  list-style-type:disc;
  list-style-position: inside;
}
ol li {
  padding:0;
}
.gray {
    color: #6c757d;
}
.bold {
  font-weight:bold;
}
.card{
    border:none;
    margin:5px;
background:none;
}

.card-body {
  padding:0;
}

.img-thumbnail {
    width: 100%;
    padding: .25rem;
    background-color: transparent;
    border: none;
}

.bordered {
  border:3px #f5fffa solid;
  border-radius: 5px;
  margin:3px;
  padding:5px 3px 10px;
  margin-top:20px;
}

.accordion-item {
  margin-top:15px;
  //background-color:red!important;
}

/* ヘッダー(navbar)*/
header {
  background-color:#191970;
  background-color: #191970;
}

img.top_img {

  display:block;
  width:100%;


}

header a.mail{

  position:absolute;
  display:block;
  top:10px;
  right:70px;
}

main {

    background:royalblue;

}

/*pc only*/
header.pc{
  position:relative;
  min-height:80px;

}
header.pc .navbar-nav {
    position:absolute;
    top:40px;
    right:100px;
}
header.pc .navbar a.tel {
    position:absolute;
    top:-15px;
    right:390px;
}
header.pc .navbar a {
  color:#fff!important;
  font-size:1.2rem;
}


header.pc .navbar a.active{
  color:#ffd700!important;
}
header.pc  img.logo_img {
  position:absolute;
  left:0;
  top:0px;
}
p.establish {
  color:#fff;
  display:block;
  position:absolute;
  left:1%;
  top:50px;
  font-size:1.3rem;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight:bold;

}
/*sp only*/


@-webkit-keyframes active-hamburger-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-hamburger-bar02 {
  100% {
    height: 0;
  }
}


#flush-contact {
  margin-bottom:10px;
}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateY(0%);
}
/* フッター */
#footer{
    background-image:url(../img/footer_bg.jpg);
}

#footer-contents #footer-news{
    border-bottom:none!important;
}

#footer .gaiyo {
    border-bottom:none!important;
}

#footer .container{
    color: #fff;
}
#footer .footer-ttl{
    font-size: 1rem;
    font-weight: bold;
    margin: 1.5rem 0;
}

#footer .footer-ttl::before{
  content: '■'!important;
  padding-right: 1rem;
}

#footer address p,
#footer #footer-news li{
    margin-bottom: 0.5rem;
    text-decoration: none;
    text-decoration-color:#fff;
}
#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 #191970;
    background-color: #191970;
    color: #fff;
}
#footer img {
	width: 360px;
}

/*ポリシー（policy）*/

.policy_area {
  background:#708090;
}

.policy_area button {

  color:#fff;
  border-color:#fff;

}
.policy_area button :hover{

  //background-color:#fff;
  border-color: #fff;
}
.policy_area ul {
  background-color:#fff;
  padding:5px;
}
.policy_area ul li{
  color:#708090;
  text-indent: 1em;
  padding:1em;
  list-style-type:none;
}
.policy_area ul ol {
  margin-left:0;

}
.policy_area ul ol li{
  padding:0;
}
.policy_area h3{
  padding:0 1em;
}



/* *****トップページ***** */
/* メイン画像 */
h1{
    position: absolute;
    top:0.8rem;
    font-weight: bold !important;
    color: #ffce11;

}
#page-top h1 + span {
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 110%;
    margin-top: 0.2rem;
    display: block;
}
#page-top .jumbotron-fluid{
    //height: 200px!important;
    width:100%;
    background-color: #f1efff;

    border-bottom: #dddddd;
    background: url("../img/logo_img.jpg") no-repeat center center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;

    margin-bottom:25rem;
}



#page-top .jumbotron-fluid .btn{

    font-weight: bold;
	  border-width: 3px;
    border-color: #6c757d;

    position:absolute;
    bottom:-0.5rem;
    right:0.8rem;

  }

}

#page-top .jumbotron-fluid .btn:hover {
  //background: #fff;
  color: #ff701e;
  color:black;
  letter-spacing: 0.15em;
}

#page-top section {
  padding-top:0!important;
}

#top {
  //background:#191970;

}

#top a {
  color:#000;
  height:45px;
  display:block;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight:bold;
  width:100%;
}

#top a span{
  display:block;
  height:30px!important;
  text-decoration: none!important;
  //margin-top:5px;
  margin-bottom:5px;
  //width: 80%;
  //margin-left: 10px;

}





/* 各セクション */
#page-top section .desktop-menu {
  background:#000;
}
#page-top section{
  //border-bottom: 1px solid #eee;
	padding: 5rem 0 1rem;
}

#page-top section:nth-child(odd){
    //background-color: #eee;
    //background-color: #add8e6 !important;
}
#page-top section .container > h2{
    margin-bottom: 30px;
    font-size: 2.5rem;
    font-weight:bold;
}
#page-top section .container > h2 + p{
    max-width: 700px;
	margin: 0 auto 50px;
}

#page-top section ul li{
  list-style-image: url(../img/tri_bk.png);
}






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

#breadcrumb-wrapper{
    border-bottom: 1px solid #a29080;
}
#breadcrumb-wrapper,
.breadcrumb{
    font-size: 0.9rem;
    background-color: #563322;
}
.breadcrumb a{
    color: rgba(255,255,255,.5);
}
.breadcrumb a:hover,
.breadcrumb a:focus{
    color: rgba(255,255,255,1);
}
.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 {
    padding: 5rem 0;
}

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

#page h1 + small {
    font-size: 1.5rem;
    color: #ffffff;
    line-height: 110%;
    margin-top: 0.2rem;
}


/*  イメージ拡大  */
  	/*モーダルウィンドウの縦表示位置を調整*/
.modal-middle {
	margin: 5% auto;
}
  	/*表示予定のテキストとボタンを中央揃え*/
.modal-img_footer {
	padding: .5em;
	text-align: center;
}


#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;
}
#page .sample-subtitle{
    font-size: 1.5rem;
    font-weight: bold;
    color: #401f0f;
}

/* *****アコーディオン***** */
.grey {

  background-color:#f5f5f5!important;
  display:block;

}
.grey button:hover {
  color:#708090;
}





/* *****フォーム***** */

.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;
}
form {
  width:95%;
  margin:0 auto;
}
form dd input {
  width:95%;
  margin:0 auto;
}

form dd textarea {
  width:95%;
  margin:0 auto;

}


/* *****ボタン***** */

button {
  margin-bottom:2rem;
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  width:95%;
}

div.buttons {
  margin:0 auto;
  width:95%;
}

button.submit {

  background: #f7f7f7;
  border-left: solid 6px #ff7c5c;/*左線*/
  color: #ff7c5c;/*文字色*/

}
button.reset{

  background: #f7f7f7;
  border-left: solid 6px #4169e1;/*左線*/
  color: #4169e1;/*文字色*/

}

.grey button {
  //background-color: #fff!important;
}
.accordion-item button,.go_contact{
  //background-color: #fff!important;
}

/* *****ページトップ***** */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 15px;
  bottom: 30px;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
  z-index:100;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

/*Slide in*/
/* スクロールCSS */
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 100px);
}

.fade-in-down {
  transform: translate(0, -100px);
}

.fade-in-left {
  transform: translate(-100px, 0);
}

.fade-in-right {
  transform: translate(100px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}







body {
     background-color: beige;
     transition: all 1s;
 }

 .bodyfadeout {
     opacity: 0;
 }



 #wall {
     width: 0;
     height: 100vh;
     background-color: coral;
     border: none;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 999;
 }

 .anime5 {
     animation: animemove5 1.5s linear forwards;
 }

 @keyframes animemove5 {
     0% {}
     100% {
         width: 100vw;
     }
 }