body{
    background-color: #faf9f7;
}

.bg_color1 {
    background-color: #404040;
}

#contents {
    background-color: #faf9f7;
}

.txt_color3 {
        color: #14449a;
    font-weight: bold;
}

.txt_color1 {
    color: #040404;
}

#intro #intro_txt {
    background-image: url(./Dup/img/naname.png);
    background-repeat: no-repeat;
    background-position: 85% 100%;
    padding-left: 15%;
    background-size: 44%;
}

#contents .box .grid_6.d_flex{
background-color: white;
    padding: 50px;
padding-right: 15%;
    border-bottom: 1px solid #ececec;
}

#contents .box:nth-of-type(2) .grid_6.d_flex{
padding:50px;
padding-left:15%;
}


#contents .box h3{
font-size:28px;
}


#contents .box:nth-of-type(1) .grid_6.pd_l-r5per, #contents .box:nth-of-type(3) .grid_6.pd_l-r5per{
    padding-left: 15%;
    padding-right: 0;
}


#contents .box:nth-of-type(2) .grid_6.pd_l-r5per{
    padding-right: 15%;
    padding-left: 0;
}

.eye{
    max-width: 700px;
    margin: auto;
    margin-left: 0;
    margin-bottom: 30px;
    margin-top: -80px;
}


.eye2{
    max-width: 700px;
    margin-bottom: 30px;
    margin-top: -80px;
}


#intro {
    background-size: cover;
       background-position: top center;
    padding-bottom: 500px;
}


.fadein{
     opacity: 0;
     transform: translateX(-200px);
     transition: 1.2s;
     transition-property: opacity,transform;
}

.fadein2{
     opacity: 0;
     transform: translateX(200px);
     transition: 1.2s;
     transition-property: opacity,transform;
}


.fadein.fadetrans, .fadein2.fadetrans{
     opacity: 1;
     transform: none
}


#intro h2 {
    text-align: left;
    font-weight: bold;
    font-size: 3.8vw;
    margin-bottom: 80px;
}

#intro h2 span{
    line-height: 1.8em !important;
}

.font{
z-index: 2;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 20%;
    width: 37%;
  animation: slideIn 10s cubic-bezier(0.25, 1, 0.5, 1) 2s 1 forwards;
opacity:0;
}


 
@keyframes slideIn {
  0% {
    transform: translate(-20%, -50%);
    opacity: 0;
  }

  10% {
    transform: translate(-50%, -50%);
opacity:1;
  }

95% {
opacity:1;
  }


  100% {
    transform: translate(-50%, -50%);
opacity:0;
  }
}

#intro_txt p{
max-width:60%;
}

.border_color3 {
    border-color: #8ab3fb;
}

.hvr_txt_color3:hover {
    color: #0f66ff;
}

#page_title h2 span{
    background-color: rgba(20, 68, 154, 0.8) !important;
}

.border_color4 {
    border-color: #9e9e9e;
}

.svg_box, .svg_box2{
display:none !important;
}

#bottom_menu{
    background-color: #f1eee7;
    margin-bottom: 0;
    padding: 15px 0;
}

.cms_box{
    background-color: white;
    padding: 0px 30px 40px;
}

.cate_list li a{
background-color: #404040;
    color: white;
}

.cate_list{
    transform: translate(0px, -20px);
}

.info_box{
background-color:transparent !important;
}

.page02, .page05, #page8, #page9,  #page10{
padding-top:40px;
}

#fakeloader .fl{
	position: absolute!important;
	top: 50%!important;
	left: 50%!important;
	transform: translate(-50%,-50%)!important;
	width: 50%!important;
	max-width: 300px!important;
}

.linkStyle{
color:black;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

#intro #intro_txt {
    padding-left: 5%;
}

#intro {
    padding-bottom: 0px;
}

#contents .box h3 {
    font-size: 20px;
}

#contents .box:nth-of-type(1) .grid_6.pd_l-r5per, #contents .box:nth-of-type(3) .grid_6.pd_l-r5per {
    padding-left: 5%;
}



#contents .box .grid_6.d_flex {
    padding: 30px;
    padding-right: 0%;
}

#contents .box:nth-of-type(2) .grid_6.d_flex {
    padding: 30px;
    padding-left: 0%;
}

.eye {
    max-width: 280px;
    margin: auto;
    margin-left: 0;
    margin-bottom: 0px;
    margin-top: -50px;
}

.eye2 {
    max-width: 280px;
    margin-bottom: 0px;
    margin-top: -50px;
}


#contents .box:nth-of-type(2) .grid_6.pd_l-r5per {
    padding-right: 5%;
    padding-left: 0;
}

header #header #header_menu li{
width:auto !important;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

#intro h2 {
    font-size: 20px;
    margin-bottom: 30px;
}

#intro_txt p {
    max-width: 100%;
}

#intro_sp {
    height: 130px;
}

#intro #intro_txt {
    padding: 10% 9%;
}

#contents .box .grid_6.d_flex {
    padding-right: 30px;
}

#contents .box:nth-of-type(2) .grid_6.d_flex {
    padding-left: 30px;
}

#intro #intro_txt {
    background-image: none;
}

#contact_tel a{
width: 100% !important;
}

#copyright{
text-align: left;
    padding-left: 20px;
}

}