@charset "utf-8";
/* CSS Document */


/*common*/

.lower.active{
background: #eae8e8;
  transition: all ease .3s;
}

.lower section{
margin-bottom: 200px;
}

.lower section .inner{
max-width: 1300px;
padding: 0 50px;
margin: 0 auto;
}
.lower section .box{
margin-top: 100px;
}


@media screen and (max-width:640px){
.lower section{margin-bottom: 80px;}
 .lower section .inner{
     width: 85%;
    padding: 0;
}
.lower section .box{margin-top: 50px;}
}

/*header*/


.lower header .logo img{
width: 150px;
}
.lower header .logo img#logo-sub{display: none}
.lower header .logo a{
display: block;
}

.lower header ul{
    margin-top: 30px;
}
header.fixed ul{
    position: fixed;
    top: 10px;
}
.lower header.fixed.is-in ul{
    mix-blend-mode: difference;
    animation: fix 0.3s ease-in;
}
@keyframes fix {
  0% {top: -30px;}
  100% {bottom: 0px;}
}
.lower header.fixed.is-in ul a{color: #999999;}

.lower header ul li a:not(.active){opacity: 0.8;}
.lower.textonly header{position: relative;}
.lower.textonly header ul li a{color:#1a1a1a;}
@media screen and (max-width:768px){   
.lower header .logo img{width: 100px;}     
.lower header.fixed.is-in .logo img{width: 55px;}   
.lower header.fixed.is-in .logo img#logo-main{display: none;}      
.lower header.fixed.is-in .logo img#logo-sub{display: block}    
.lower header.fixed.is-in {
    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0;
    display: flex;
    align-items: center;
    background-color: rgba(255,255,255,.85);
    width: 100%;
    padding-left: 30px
}     
.lower header.fixed.is-in  ul{
    position: static;
    top: 0px;
}    
.lower header.fixed.is-in ul{
    display: flex;
    margin-top: 0;
    padding: 10px 0px 10px 20px
}  
.lower header.fixed.is-in ul li a{padding-right: 20px}    
}
@media screen and (max-width:640px){

}

/*mainvisual*/
.lower .mv-img{
    position: relative;
    width: 100%;
    height: 80vh;
    left: 0;
    top: 0;
    background-image: url("../img/header/img-about.webp");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.lower .mv-img.contact{ background-image: url("../img/header/img-contact.webp");   }
.lower .mv-img.access {background-image: url(../img/header/img-access.webp);}
@media screen and (max-width:640px){
.lower .mv-img.contact{background-position: 28% 50%;}
}

/*---------------------------------------------
about
  ---------------------------------------------*/


/*intro*/

.lower .intro{
padding-top: 100px;
}

.lower .title-cont{
margin-bottom: 200px;
}

.lower h1{
font-size: 7.4rem;
}
.lower h2{
font-size: 2.1rem;
border-bottom: 1px solid #1a1a1a;
padding-bottom: 0.3em;
}
.lower h2 span{
display: inline-block;
font-size: 4rem;
padding-right: 1.5em;
}

.lower .title-cont span.ja{
font-size: 2.1rem;
}

.lower .intro p{
font-size: 1.8rem;
}


@media screen and (max-width:640px){
.lower .intro{padding-top: 50px;}
.lower .title-cont{margin-bottom: 50px;}
.lower h1{font-size:4.5rem;}
.lower h2{font-size: 1.6rem;}
.lower h2 span{font-size: 2.8rem;}
.lower .title-cont span{font-size: 1.6rem;}
.lower .intro p{font-size: 1.5rem;}  
}

/*service*/
.lower .service{margin-bottom: 300px;}
.lower .service  div + div{margin-top: 90px;}
.lower .service  div .copy{
width: 28%;
width: 50%;
margin-bottom: 40px;
font-size: 2rem;
/*font-weight: bold;*/
border-left: solid 5px #1a1a1a;
padding-left: 10px;
}

.lower .service div .text{
width: 60%;
margin-left: auto;
}
.lower .service div .example{margin-top: 30px;}
@media screen and (max-width:640px){
.lower .service{margin-bottom: 150px;}
.lower .service  div .copy,
.lower .service div .text{width: 100%;  }
}

/*outline*/
.lower .outline dl{display: flex;}
.lower .outline dl + dl{margin-top: 65px;}
.lower .outline dl dt{
width: 15%;
border-right: 1px solid;
padding-left: 0.5em;
}
.lower .outline dl dd{
width: 75%;
padding-left: 4em;
}
@media screen and (max-width:640px){
.lower .outline dl{font-size: 1.5rem;}    
.lower .outline dl dt{width: 30%;}
.lower .outline dl dd{
width: 65%;
padding-left: 2em;
}
}


/*access*/

.lower .access .flex{
justify-content: flex-start;
align-items: center;
min-height: 125px;
}

.lower .access .flex + .flex{
margin-top: 50px;
}


.lower .access .circle{
position: relative;
width: 125px;
height: 125px;
/*border: 1px solid #1a1a1a;*/
border-radius: 50%;
margin-right: 2em;
}

.lower .access .circle p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 125px;
text-align: center;
}

.lower .access .text{
width: 70%;
}

@media screen and (max-width:640px){
  .lower .access .flex{
height: auto;
flex-direction: column;
}
.lower .access .circle{
width: 100px;
height: 100px;
margin-right: 0;
margin-bottom: 0.5em;
}

.lower .access .circle p{
width: 100px;
}

.lower .access .text{
width: 100%;
}   
}


/*---------------------------------------------
contact
  ---------------------------------------------*/
 .contact-cont {margin-top: 200px;}
 .contact-cont div {margin-bottom: 48px;}
.mailform{
display: flex;
flex-wrap: wrap;
padding: 0 50px;
}
.mailform dt{width: 30%;}
.mailform dd{width: 70%;}
.contact-cont .must{
    display: block;
    background-color: transparent;
    border: none;
    text-shadow: none;
    padding: 2px 5px;
    font-size: 16px;
    color: #000000;
    float: left;
    margin: 0px 5px;
    border-radius: 4px;
    box-shadow: none;
    background-image: none;
}
.contact-cont input[type="text"],
.contact-cont input[type="email"],
.contact-cont textarea,
.contact-cont select {
    color: #2a2a2a;
    background: #fff;
    box-shadow: none;
    border: 1px solid #333333;
    background-image: none;
    padding: 1.2em;
    margin-top: 8px;
    width: 100% !important;
}
.contact_box .contact-cont select {min-width: 100%;}
.contact-cont textarea {height: 160px !important;}
.contact-cont .acenter {
    text-align: center;
    margin: 0 auto;
}
.contact-cont .select {position: relative;}
.contact-cont .select select {
    appearance: none;
    border: none;
    outline: 0;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    cursor: pointer;
}
 .contact-cont .select::before {
    position: absolute;
    top: 18px;
    right: 16px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #b3b3b3;
    border-right: 2px solid #b3b3b3;
    transform: rotate(135deg);
    content: "";
    pointer-events: none;
}

 .contact-cont .select select::-ms-expand {
    display: none;
}

 .contact-cont .submit-btn {
background: #2a2a2a;
color: #fff;
width: 210px;
padding: 20px 0;
cursor: pointer;
border: none;
font-family:'Zen Kaku Gothic New', "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

 .contact-cont .submit-btn:hover {
    opacity: 0.8;
}

form#mailformpro label.mfp_not_checked{margin-top: 50px}
#mfp_hidden,#mfp_loading,#mfp_loading_screen,#mfp_overlay_background,#mfp_overlay {
    display: none;
}


@media screen and (max-width:640px){
 .contact-cont {
    margin-top: 130px;
}

.mailform{
margin: 0 auto;
padding: 0;
}
.mailform dt,.mailform dd{
font-size: 1.5rem;
width: 100%;
    }
}

/*---------------------------------------------
policy
  ---------------------------------------------*/
.textonly header .logo img {
  width: 130px;
}
.policy{
margin-top: 150px;
} 

.policy .title-cont {
  margin-bottom: 100px;
}

.policy h1 {
  font-size: 5.4rem;
}


@media screen and (max-width:640px){
 .policy h1 {
  font-size: 3.6rem;
}
    
.policy p {
  font-size: 1.5rem;
}
.textonly header .logo img {
  width: 100px;
}
}