@charset "utf-8";

/*==================== reset ====================*/
*{
  margin: 0;
  padding: 0;
	line-height: 1.5;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
ul,ol{
	list-style: none;
}
img{
	border: none;
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}
a{
	text-decoration: none;
  color: inherit;
}

/*==================== end ====================*/

/*==================== 共通 ====================*/
.container{
  max-width: 100vw;
  margin: 0 auto;
  /* padding: 10px 10% 50px; */
  /* background-attachment: fixed;
  background-position: center; */
  background-size: cover;
}
.pc {
  display: inline;
  width: 100%;
}
.sp {
  display: none;
  width: 100%;
}

/*==================== header ====================*/
.c-header__logo{
  display: flex;
  justify-content: center;
  gap: 20px;
}

.c-header__logo__VERY img,.c-header__logo__NaVY img{
  width: 150px;
  margin: 0 auto;
  padding-top: 50px;
}

h1{
  text-align: center;
  font-size: 2.3rem;
  padding: 50px 10px 0;
}

@media screen and (max-width: 520px){
.c-header__logo img{
  width: 100px;
}

}


/*==================== main ====================*/

a.privacy-policy{
  color: #0000EE;
  text-decoration: underline;
}

a.privacy-policy:active {
  color: #FF0000;
}

a.privacy-policy:visited {
  color: #551A8B;
}

section .wrap{
  display: flex;
  width: 50%;
  margin: 0 auto;
  padding: 3% 0 3% 3%;
  align-items: flex-start;
  justify-content: center;
  background-color: #f0f0f0;
}

section .wrap01{
  margin-bottom: 30px;
}

.wrap img{
  max-width: 200px;
  margin: auto;
}
/* 
h3,.author{
  text-align: center;
}

h3{
  font-size: 2rem;
} */
/* 
.author{
  margin-bottom: 20px;
}

.text{
  margin: 0 auto;
  width:  80%;
} */

/* main : 961px以上1280px以下 */
@media screen and (max-width: 1280px) and (min-width: 961px){
  section .wrap{
    width: 55%;
    padding: 3% 0 3% 3%;
  }  
}

/* main : 521px以上960px以下 */
@media screen and (max-width: 960px) and (min-width: 521px){

  h1{
    font-size: 1.7rem;
  }

  section .wrap{
    display: block;
    padding: 20px 0;
    width: 65%;
  }

  .wrap img{
    display: block;
    margin-bottom: 20px;
  }

}

/* main : 520px以下 */
@media screen and (max-width: 520px){
section .wrap{
  display: block;
  padding: 20px 0;
  width: 80%;
}

}


/*==================== footer ====================*/
.footer {
  display: flex;
  flex-flow: column;
  /* width: 100%; */
  padding: 50px 10px;
  background-color: #666;
  /* position:absolute; */
}

.copy {
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.c-footer__subNavtitle{
  text-align: center;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  margin: 0 0 15px;
  font-family: "Crimson Text", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
  font-size: 1.1rem;
  text-align: center;
}

.c-footerSubNav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
width: 38%;
margin: 0 auto;
}

.c-footerSubNav__list{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  color: #fff;
}

.c-footerSubNav__item {
  padding: 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 7px 0;
}

.c-footerSubNav__item:not(:last-of-type) {
  border-right: 1px solid #fff;
}

.c-footerSubNav__itemLink {
font-size: 0.9rem;
}

.ec-footerTitle__logo{
margin: 0 auto;
padding: 20px 0;
}
.ec-footerTitle__logo img{
width: 100px;
text-align: center;
}
.ec-footerTitle__logo img:hover{
opacity: 0.5;
}

@media screen and (max-width: 1280px) {
.c-footerSubNav {
width: 45%;
}

}

@media screen and (max-width : 960px) {
.c-footerSubNav {
width: 60%;
}  
}

@media screen and (max-width : 760px){
.c-footerSubNav {
width: 65%;
}    
}

@media screen and (max-width : 520px) {
.c-footerSubNav {
width: 100%;
}  
.c-footerSubNav__itemLink {
font-size: 0.8rem;
}
.c-footerSubNav__item {
margin: 4px 0;
}

}

@media screen and (max-width : 375px) {
.c-footerSubNav {
width: 90%;
}  

}

/*==================== contact.html ====================*/
#contact main{
    padding: 60px 0;
    box-sizing: border-box;
  }
  
  .contact_h1_br{
    display: none;
  }
  
  .contact-box{
    width: 50%;
    margin: 0 auto 10px;
  }

  
  .contact_main p{
    margin-bottom: 10px;
  }
  
  .contact_main p.contact-box{
    margin-bottom:30px;
  }
  
  @media screen and (max-width: 960px) and (min-width: 521px){
    #contact main{
      padding: 50px 0;
    }
  
    .contact-box{
      width: 80%;
      margin: 0 auto;
      padding: 0 10px;
    }
  
    #tel{
      width: 100%;
    }
  
  }

  
  @media screen and (max-width: 520px){
    #contact main{
      padding: 30px 0 50px;
    }

    .contact_h1_br{
      display: inline;
    }
  
    h1{
      font-size: 1.6rem;
      /* padding: 60px 10px 0; */
    }  
  
    .contact-box{
      width: 80%;
      margin: 0 auto;
      padding: 0 10px;
    }
    p.contact-box{
      font-size: 1rem;
    
    }
  
    #email,input.custom19{
      max-width: 100%;
    }
  
    #tel{
      width: 100%;
    }
  
  }

  @media screen and (max-width: 350px){
  .formBorder{
    width: 100%;
  }
  }

/*==================== completion.html ====================*/
#completion.wrap{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#completion p:not(.ec-footerTitle__logo,.c-header__logo__VERY,.c-header__logo__NaVY){
  padding: 0 10px;
  width: 45%;
  margin: 0 auto;
}

#completion .footer{
    margin-top: 250px;
}

@media screen and (max-width: 1280px) {
#completion p:not(.ec-footerTitle__logo,.c-header__logo__VERY,.c-header__logo__NaVY){
  width: 60%;
}

}

@media screen and (max-width : 960px) {
#completion p:not(.ec-footerTitle__logo,.c-header__logo__VERY,.c-header__logo__NaVY){
  width: 80%;
} 
}

@media screen and (max-width : 760px){
#completion p:not(.ec-footerTitle__logo,.c-header__logo__VERY,.c-header__logo__NaVY){
  width: 90%;
} 
}

/*==================== end ====================*/