﻿.bg_color1 {background-color: #3da4c8;}
.bg_color3 {background-color: #e1723e;}
.bg_color4 {background-color: #b1e0e0;}
.txt_color1 {color:#3da4c8;}
.txt_color2 {color: #3da4c8;}
.txt_color3 {color: #e1723e;}
.txt_color4 {color: #e1723e;}
.border_color1 {border-color: #e1723e;}
.border_color2 {border-color: #3da4c8;}
.border_color3 {border-color: #3da4c8;}
/* ----------　all　---------- */
.linkStyle{
	color:#e1723e;
}
.linkStyle:hover{
	color:#e1723e;
	opacity: 0.7;
	transition: all 0.5s;
}
#fakeloader{

    background-color: #f4f3f1;

}
.spinner7 > div {
    background-color: #b1e0e0;
}
@font-face {
font-family: "street";
  src: url("Dup/css/street.otf") format("otf"),url("Dup/css/street.woff") format("woff"),url("Dup/css/street.woff2") format("woff2");
}
#main_menu ul li a,#top_cms .cms_title h2,#page_title h2{
	font-family: "street", serif;
}
body{
    background-color: #f4f3f1;
}
h1, h2, h3, h4, h5, h6,.font_en,#main_menu ul li a span.jp{
    font-family: kan412typos-std, sans-serif;
font-weight: 400;
font-style: normal;
}
header{
    background-image: url(Dup/img/back2.png),url(Dup/img/back.jpg);
    background-repeat: no-repeat, repeat;
    background-position: bottom 50px left,center;
    background-size: 200%,100%;
        padding-top: 20px;
}
#main_menu ul li:before {
    background-color: #ffffff!important;
}
#main_menu ul li a {
    color: #fff;
}
#main_menu ul li a::before {
    background-color: #82c596;
}
header .contact_bt a ,header .tel_bt a{
    border-color: #fff;
    color: #fff;
}
header #logo img{
    
    width: 80%!important;
}
.button:hover::after {
    box-shadow: inset 0 0 0 15em #e1723e;
}
.cms_title::before {
    background-color: #e1723e;
}
.f_back{
   background-image: url(Dup/img/f_back.jpg);
   position: relative;
}
.f_back:before {
    content: '';
    display: inline-block;
    width: 300px;
    height: 150px;
    background-image: url(Dup/img/f_img1.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
    top: -50px;
}
.foot_tel_bt a {
    position: relative;
    z-index: 9;
}
#map{
    position: relative;
}
#map:before {
    content: '';
    display: inline-block;
    width: 150px;
    height: 150px;
    background-image: url(Dup/img/f_img2.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -20px;
    bottom: -100px;
    z-index: 2;
}
.button {
    border-color: #3da4c8;
    color: #3da4c8;
}
.button:hover {
  color: #fff;
}
.button:hover::after {
    box-shadow: inset 0 0 0 15em #3da4c8;
}
header .button:hover::after {
    box-shadow: inset 0 0 0 15em #ffffff;
}
header .button:hover {
    color: #3da4c8;
}
header .head_box .link_box {
    padding-bottom: 0px!important;
}
.txt_shadow-b {
    text-shadow: none;
}
.cate_title{
        padding: 8px 10px 15px;
}
footer{
    padding-top: 80px!important;
}
footer .logo img{
    width: 70%!important;
}
.foot_tel_bt a,header .contact_bt a, header .tel_bt a,.more a{
    padding-bottom: 20px;
}
.link_box li{
width: 12%!important;
}


/* ----------　日英切り替え　---------- */
#main_menu ul li{margin-bottom: 30px;position: relative;}
#main_menu ul li:before{
content: "";
position: absolute;
top: 60%;
left: 0;
width: 20px;
height: 1px;
background-color: #603813;
transition: .5s;
}
#main_menu li > div,
#footer_menu li > div,
#sp_nav li > div{
height: 25px;
overflow: hidden;
}
#main_menu li > div > div,
#footer_menu li > div > div,
#sp_nav li > div > div{
-webkit-transition: margin 0.5s;
-moz-transition: margin 0.5s;
-ms-transition: margin 0.5s;
-o-transition: margin 0.5s;
transition: margin 0.5s;
margin: 0;
}
header .contact_bt a{
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
margin: 0;
}
#main_menu ul li a:hover{padding-left: 30px;}
#main_menu ul li a:hover::before{width: 20px;}
#main_menu li span,
#footer_menu li span,
#sp_nav li span{line-height: 1;padding: 10px 0;}
#main_menu li > div > div:hover,
#footer_menu li > div > div:hover{margin-top:-49px;}
#sp_nav li > div > div:hover{margin-top:-40px;}
header .contact_bt a:hover .txt .txt2{margin-top:-26px;}
#main_menu ul li a::before{display: none;}
header .contact_bt .txt,
header .contact_bt .txt2{display: inline-block;}
header .contact_bt .txt{
height: 20px;
overflow: hidden;
}
header .contact_bt .en{line-height: 30px;}


/* ----------　TOP　---------- */
.delighter {
    transition: transform .5s ease-out, opacity .5s ease-out;
      transform: translatey(80px);
      opacity: 0;
   }
.delighter.started {
      transform: none;
      opacity: 1;
}
.delighter.started.ended {
    transform: translatey(0%);
}
#main_img:before {
    content: '';
    width: 100%;
    height: 50px;
    background-image: url(Dup/img/line1.png);
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: 9;
    position: absolute;
    bottom: 0;
    left: 0;
}
#main_img:after {
    content: '';
    display: inline-block;
    width: 350px;
    height: 400px;
    background-image: url(Dup/img/main_dec.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    z-index: 9;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}
#contents1 {
    border-top: 2px solid #3da4c8;
    border-bottom: 2px solid #3da4c8;
    width: 90%;
    margin-top: 100px;
    margin-bottom: 50px;
        position: relative;
}
#contents1:before {
    content: '';
    display: inline-block;
    width: 200px;
    height: 130px;
    background-image: url(Dup/img/dec1.png);
    background-size: contain;
    position: absolute;
    background-repeat: no-repeat;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    -webkit- transform: translateX(-50%);
    background-color: #f4f3f1;
        z-index: 2;
}
#contents1:after {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    background-color: #3da4c8;
    left: 0;
    top: 5px;
}
#attach:before {
    content: '';
    width: 100%;
    height: 80px;
    background-image: url(Dup/img/line2.png);
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: 9;
    position: absolute;
    bottom: 0;
    left: 0;
}
.con_back{
        background-color: #2fb6cc;
    background-image: url(Dup/img/con1_img.png);
    background-repeat: no-repeat;
    background-position: center right;
    padding-bottom

}
#contents_box{
        position: relative;    
        margin-bottom: 100px;
}
#contents_box:before {
    content: '';
    width: 100%;
    height: 130px;
    background-image: url(Dup/img/line3.png);
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: 9;
    position: absolute;
    bottom: -80px;
    left: 0;
}
.con_back h2,.con_back h3,.con_back p{
    color: #fff;
}
.con_back h3{
    font-size: 25px;
    margin-bottom: 20px;
}
#contents2 div.d_flex{
        position: relative;
    padding-top: 50px;
}
#contents2 div.d_flex:before {
    content: '';
    display: inline-block;
    width: 320px;
    height: 200px;
    background-image: url(Dup/img/con1_img1.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -20%;
    left: -20px;
    z-index: 9;
}
#contents2 div.grid_6{
        border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
    background-color: rgb(237 227 169 / 50%);
    padding: 0 40px 40px;
    position: relative;
}
#contents2 div.grid_6:before {
    content: '';
    display: inline-block;
    width: 150px;
    height: 160px;
    background-image: url(Dup/img/con1_img2.png);
    background-size: contain;
    position: absolute;
    background-repeat: no-repeat;
    bottom: -20px;
    right: -100px;
    z-index: 0;
}
#contents3 div.grid_6{
        position: relative;
    padding-top: 80px;
        z-index: 9;
}
#contents3 div.grid_6:before {
content: '';
    display: inline-block;
    width: 320px;
    height: 130px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50px;
    left: -20px;
    z-index: 2;
}
#contents3 div.grid_6:first-child:before {
    background-image: url(Dup/img/con2_img1.png);
    height: 250px;
    left: -50px;
}
#contents3 div.grid_6:last-child:before {
    background-image: url(Dup/img/con3_img1.png);
        width: 300px;
        left: -0px;
}
#contents3 div.grid_6:last-child p{
    position: relative;
}
#contents3 div.grid_6:last-child p:before{
    content: '';
    display: inline-block;
    width: 150px;
    height: 150px;
    background-image: url(Dup/img/con3_img2.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    z-index: 9;
    bottom: -120px;
    right: -30px;
}
#contents2 figure ,#contents2 img,#contents3 figure ,#contents3 img{
        border-radius: 50%;
}
.cms_title::before {
    background-color: #3da4c8;
}
#contents3 .grid_6:first-child .con3_color1{
       border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
    background-color: rgba(232, 170, 184 ,0.7); 
}
#contents3 .grid_6:last-child .con3_color1{
    border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
    background-color: rgba(176, 170, 232 ,0.7); 
}

/* ----------　下層ページ　---------- */
.title_img.posi_rel:after {
    content: '';
    width: 100%;
    height: 50px;
    background-image: url(Dup/img/line1.png);
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: 9;
    position: absolute;
    bottom: 0;
    left: 0;
}
#page_title .page_box::before {
    background-color: #3da4c8;
}
.button2:hover {
    box-shadow: none;
    background-color: #e1723e;
    color: #fff;
}
#cms_6-c .arrow {
    border-color: #e1723e;
}
/* ----------　IE　---------- */
@media all and (-ms-high-contrast: none){
.foot_tel_bt a, header .contact_bt a, header .tel_bt a, .more a {
    padding-bottom: 15px;
}
.more a {
    padding-bottom: 15px;
    padding-top: 18px;
}

}

/* ----------　タブレット　---------- */
@media screen and (max-width: 768px){
header h1{
    max-width: 100px!important;
}
header {
    background-repeat: repeat-X, repeat;
    background-position: bottom 0px left,center;
    background-size: 30%,100%;
}    
.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after {
    background-color: #fff;
}   
.hamburger.active .hamburger__icon:after,.hamburger.active .hamburger__icon:before{
    background-color:#3da4c8;
}
#contents1 {
    padding-top: 60px;
}
#contents1:before {
    width: 150px;
    height: 100px;
    top: -50px;
}
#contents_box:before {
    bottom: -50px;
}
.f_back:before {
    width: 250px;
}
#map:before {
    width: 120px;
    height: 120px;
}
#contents2 div.d_flex:before {
    width: 250px;
    height: 170px;
    top: -15%;
}
#contents3 div.grid_6:before {
    width: 250px;
    height: 130px;
    top: 0px;
}
#contents3 div.grid_6:first-child:before {
    height: 200px;
}
#contents3 div.grid_6:last-child:before {
    width: 200px;
}
#main_img:after {
    width: 250px;
    height: 300px;
    top: 63%;
}
.link_box ul {
    justify-content: center;
}
.link_box li {
    width: 15%!important;
    max-width: 45px!important;
    margin-left: 20px;
    margin-right: 20px;
}
.more a {
    padding-bottom: 15px;
}
}

/* ----------　スマホ　---------- */
@media screen and (max-width: 667px){
header h1 {
    max-width: 80px!important;
}
#main_img:after {
    width: 150px;
    height: 200px;
    top: 55%;
}
.con_back{
        overflow: hidden;
}
#contents2 div.d_flex {
    padding-top: 100px;
}
#contents2 div.d_flex:before {
    top: -3%;
}
#contents2 div.grid_6:before {
    width: 100px;
    height: 110px;
    bottom: -50px;
    right: -50px;
}
#contents3{
    
    padding-bottom: 100px
}
#contents_box:before {
    bottom: -25px;
}
#contents3 div.grid_6:last-child p:before {
    width: 120px;
    height: 120px;
    bottom: -110px;
}
#top_cms .cms_title h2{
    font-size: 20px;
}
.f_back:before {
    width: 200px;
}
#map:before {
    width: 80px;
    height: 80px;
    bottom: -50px;
}
#contact_tel a{
        font-size: -webkit-calc(1rem + 4px);
    font-size: calc(1rem + 4px);
}
#page_title .page_box::before {
    width: 40px;
}
#page_title .page_box {
    padding-left: 50px;
}
#page_title h2{
    letter-spacing: 0;
    font-size: 22px;
}
.link_box li {
    max-width: 35px!important;
    margin-left: 15px;
    margin-right: 15px;
}
.more a {
    padding-bottom: 10px;
}
}