﻿@font-face {
font-family: "Utsukushi_min";
  src: url("./Dup/img/Utsukushi_min.ttf") format("ttf"),url("./Dup/img/Utsukushi_min.eot") format("eot"),url("./Dup/img/Utsukushi_min.woff") format("woff"),url("./Dup/img/Utsukushi_min.woff2") format("woff2");
}
.font1,
#top_cms .cms_title h2,
#page_title h2{font-family: "Utsukushi_min", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho","serif";}


.linkStyle{
    color:#bf9d74;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}
.font_14{
    font-size:17px;
}


/*--all page---------------------------
-------------------------------------*/
header{
    background-color:#fff!important;
    background-image:url(./Dup/img/bg1.png);
    background-repeat:no-repeat;
    background-position:bottom left;
    background-size:100%;
}
.main_box{
    margin-left: 17%;
    background-image:url(./Dup/img/bg2.png);
    background-attachment:fixed;
    background-position:right bottom;
    background-repeat:no-repeat;
    background-size:250px auto;
}
#main_menu ul li a{
    text-align:center;
    padding-left:0;
}
#main_menu ul li a:hover{
    padding-left:0;
    transform:translateY(-3px);
}
#main_menu ul li a::before{
    display:none;
}
/*----button----*/
.pc_box .contact_bt a,
.pc_box .tel_bt a,
#top_cms .more a,
footer .foot_tel_bt a{
    border:1px solid #212121;
}
footer .foot_tel_bt a{
    position:relative;
    z-index:1;
}

.pc_box .contact_bt a .fas{
    display:none;
}

.pc_box .contact_bt a:hover,
#top_cms .more a:hover{
    border:1px solid #4daa37;    
}
.pc_box .contact_bt a:hover::after,
#top_cms .more a:hover::after{
    box-shadow:inset 0 0 0 15em #4daa37;
}
.pc_box .tel_bt a:hover,
footer .foot_tel_bt a:hover{
    border:1px solid #f5bb1b;    
}
.pc_box .tel_bt a:hover::after,
footer .foot_tel_bt a:hover::after{
    box-shadow:inset 0 0 0 15em #f5bb1b;
}


/*--top page---------------------------
-------------------------------------*/
#main_img::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.1);
    top:0;
    left:0;
    pointer-events:none;
    z-index:3;
}

.txt1{
    font-size:2rem;
    z-index:4;
}
.txt3,#contents2 p,#contents3 p{
    line-height:1.7;
}

.suisai{
    z-index:-1;
}
.suisai1{
    top:3%;
    left:-5%;
}
.suisai2{
    top:10%;
    left:-2%;
}
.suisai3{
    top:43%;
    left:3%;
}
.suisai4{
    top:-6%;
    left:-10%;
}
.suisai1 img,
.suisai2 img,
.suisai3 img,
.suisai4 img{
    width:auto;
}
#contents1{
    padding-bottom:100px;
}
#contents2{
    position:relative;
    padding-top:100px;
    padding-bottom:100px;
}
#contents3 .img6_box,
#contents3 .img7_box{
    margin-bottom:20px;
    position:relative;
}
#top_cms{
    margin-top:200px;
}

.top_cms_contents{
    font-size:2rem;
}
.cms_title h2{
    color:#212121;
}
.cms_title p{
    color: #4daa37;
}
.ellipsis{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
   max-height: 4.5em;
  -webkit-line-clamp: 3;
  line-height: 1.5em;
}
/*top page animation*/
.blur{
  animation-name:blurAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
}
.blur2{
  animation-name:blurAnime;
  animation-duration:5s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 0.7;
  }
}
.blurTrigger,
.blurTrigger2{
    opacity: 0;
}
/*下からフェードイン*/
 .fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}
.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}





/*--under page---------------------------
-------------------------------------*/
#page_title h2,
#page_title p{
    text-shadow:none;
}
#page_title .page_box::before{
    top:60%;
}
.page_box{
    padding-top:50px;
}
footer{
    margin-top:100px;
}


/* ---------- reponshive ---------- */
@media screen and (max-width: 960px){
#main_menu li a{
    font-size:12px;
}

}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#logo{
    max-width:350px;
}
.main_box{
    margin-left:0;
    padding-top:75px;
    background-size:200px auto;
}
header{
    background-size:30%;
}
.txt1{
    font-size:1.5rem;
    letter-spacing:-1px;
}
.txt2,
.txt4{
    font-size:1.5rem;
}
.txt5,
.txt7{
    font-size:1.2rem;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
header{
    background-image:none;
}
.hamburger{
    top:17px;
}
#page_title .page_box{
    padding-left:0;
}
#page_title .page_box::before{
    display:none;
}
footer .logo,
.footer_cms{
    text-align:center;
}
.txt1{
    font-size:1.2rem;
    width:100%;
}
.txt2{
    margin-bottom:20px;
}
.txt4{
    font-size:1.4rem;
}
.suisai1 img, .suisai2 img, .suisai3 img, .suisai4 img{
    width:60%;
}
.suisai1{
    top:-3%;
    left:-18%;
}
.suisai3{
    top:13%;
    left:6%;
}
.suissai2{
    top:-1%;
    left:-10%;
}
#contents2{
    padding-top:50px;
}
#top_cms{
    margin-top:100px;
}
.suisai4{
    top:-2%;
    left:-27%;
}
.cms_title{
    padding-left:0;
}
.cms_title::before{
    display:none;
}
.cms_title h2{
    font-size:1.5rem;
}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){
#cms_3-c .cate_title,
#cms_6-a .cate .cate_title{
    padding-top:20px;
}
.contact_box a{
    padding-top:35px;
}
}


