﻿#main_img .slick {
    margin-left: 0%;
}

body{
        background-color: rgb(249, 246, 242);
        font-size: 14px;
    
}

#intro {
    background-image: none;
}

footer:after {
    background-color: rgba(231, 229, 221, 0.5);
}

#main_img h2{
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, 0%);
    top: 50px;
    left: 50%;
    width: 10%;
    box-sizing: border-box;
    z-index: 2;
    text-align: center;
    max-width: 200px;
    min-width: 80px;
}

#intro_title{
    text-align: center;
}

/*#main_img #catch {
    width: 30%;
    min-width: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 50px;
    box-sizing: border-box;
}*/

#main_img #catch {
    width: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 50px;
    box-sizing: border-box;
    background-color: transparent;
}

#intro .box_wrap .box {
    width: 90%;
    margin: auto;
    margin-top: 150px;
}

.second{
    width:100%;
    /*transform: translateX(-10%);*/
}

.second figure, .second div{
    width: 50%;
    margin: auto;
        min-width: 500px;
}

#intro .box_wrap .box.second > div{
        width: 50%;
        margin-left: auto;
    transform: none;
    z-index: 1;
}

#contents .logo img{
    width:120px;
}

#contents .d_flex > div {;
    padding: 20px;
}

#header h1.bg_white{
    width: 10% !important;
    min-width: 100px;
}

h1 img {
    max-width: 50px !important;
}

.loader.logo{
    width:100px;
}

#sc_menu .logo a {
    position: absolute;
    top: 0;
    left: 0;
        background-color: white;
}

#sc_menu {
    transform: translateY(-200%);
}

#sc_menu .logo img {
    max-width: 50px;
}

#intro .box_wrap .box_wrap{
    position: relative;
    z-index: 1;
    margin-top: 5%;
}

#intro .box_wrap .box_wrap figure:nth-child(1){
    transform: translate(20px, -10px);
}

#intro .box_wrap .box_wrap figure:nth-child(2){
        transform: translate(-20px, 120px) scale(0.87);
}

#intro .box_wrap .box_wrap figure:nth-child(3){
         transform: translate(40px, -70px) scale(1.17);
}

.second{
    position: relative;
}

.second:before{
    content: "";
    display: block;
    width: 45%;
    height: 45%;
    position: absolute;
    top: 70%;
    left: 10%;
    background-image: url(./Dup/img/test1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
}

.second:after{
        content: "";
    display: block;
    width: 50%;
    height: 55%;
    position: absolute;
    top: 50%;
    left: 90%;
    background-image: url(./Dup/img/test2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

/*.second:after {
    content: "";
    display: block;
    width: 50%;
    height: 55%;
    position: absolute;
    top: 50%;
    left: 90%;
    background-image: url(./Dup/img/test2.jpg), url(./Dup/img/kurumi.png);
    background-position: center, top right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain, 10%;
    pointer-events: none;
    z-index: 0;
}*/


#intro .box_wrap .box > div {
    margin-left: 5%;
}

.bg_color1 {
    background-color: #d9d2bc;
    color: black;
}

.bg_color2 {
    background-color: #f9f6f2;
}

#wrap{
    position: relative;
}

#wrap:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 50%;
    right: 1%;
    background-image: url(./Dup/img/right.png);
    background-position: center right;
    background-repeat: no-repeat;
    -webkit-transform: translate(0% , -50%);
    transform: translate(0% , -50%);
    background-size: 20px;
    pointer-events: none;
    z-index: 1;
}

/*#intro .box_wrap  .box_wrap figure img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: top 0.7s ease-out;
}*/

#main_img #catch h2 {
    position: absolute;
    border: none;
    box-sizing: border-box;
    word-break: keep-all;
    letter-spacing: 5px;
    font-weight: 900;
    text-shadow: none;
    width: 100%;
    max-width: 100%;
    min-width: auto;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

footer #footer #footer_txt .logo {
    max-width: 100px;
}

#wrap{
    overflow: hidden;
}

.wow{
    display: block;
    max-width: 150px;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

.kurumi{
    display: block;
    max-width: 90px;
    margin: auto;
    margin-left: 0;
    margin-bottom: -50px;
    transform: rotate(-15deg);
}

.hiko{
    display: block;
        max-width: 180px;
    margin: auto;
    margin-right: 0;
    margin-bottom: -50px;
    transform: rotate(-15deg);
}

.kao{
        display: block;
    max-width: 140px;
    margin: auto;
    margin-top: -150px;
    z-index: 1;
    position: relative;
    margin-left: -3%;
    transform: rotate(-15deg);
}

.second{
   /*background-image: url(./Dup/img/ok.png);
    background-size: contain;
    background-position: center;*/
    position: relative;
}

.second span.moji{
    display: block;
    width: 1280px;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/ok.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

#footer .txt_white{
    color:black;
}

#intro_title > p{
    border: none;
    font-size: 20px;
    position: relative;
}

#intro_title > p:before{
    content: "";
    display: block;
    width: 10%;
    height: 1px;
    position: absolute;
    top: 100%;
    left: 50%;
    background-color: gray;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    z-index: 1;
    pointer-events: none;
}

.wel{
        max-width: 280px;
    display: block;
    margin: auto;
}

.border_color1 {
    border-color: #c9bf9f;
}

.txt_color1 {
    color: #562903;
}

.border_color2 {
    border-color: #bfbfbf;
}

.txt_color1 {
    color: #152154;
}

footer:after {
    background-color: rgba(211, 210, 208, 0.85);
}

#page_title::after {
    background-color: rgba(60, 68, 102, 0.2) !important;
}


#main_img #catch h2 span {
    transform: translate(0px, -50px);
    text-shadow: 2px 3px #e3ddd3, -2px -3px #e3ddd3, -2px 3px #e3ddd3, 2px -3px #e3ddd3;
}

.border_color4 {
    border-color: #b3b3b3;
}

footer #copyright {
    background-color: #393837;
}

.banner2{
      bottom: 0px;
      left: 0;
      z-index: 100;
          max-width: 180px;
}

.linkStyle{color: #152154;}


/*---------20220719 correct start--------*/

.banner3{
      bottom: 80px;
    right: 0;
    z-index: 100;
    max-width: 80px;
}

#footer p.tel a{
    font-size: 18px;
}

#contact_tel, #contact_tel2{
    padding: 5px;
}

#contact_tel a, #contact_tel2 a{
    width: 250px;
}


#contact_tel3{
        max-width: 300px;
    margin: auto;
    margin-top: 30px;
}

#cms_4-b .cate_box {
    margin: 0;
    margin-bottom: 30px;
    padding: 5px;
}

#cms_4-b .cate_box .box_title2{
        text-align: right;
    border-bottom: 1px solid #c1c1c1;
}

/*---------20220719 correct end--------*/

@media all and (-ms-high-contrast: none){
  

}




/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

#header h1{
    max-width: 50px;
}

.second figure, .second div{
    width: 80%;
}

.second {
    transform: translateX(0%);
}

header #header {
    position: relative;
    height: 70px;
}


}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

#header h1{
        height: 60px;
}

#catch h2 span{
        width: 96%;
    font-size: 17px;
    transform: none !important;
}

#wrap:before {
    content: none;
}

#header h1.bg_white {
    width: 10% !important;
    min-width: 75px;
}

#intro_title > p {
    font-size: 14px;
    margin-bottom: 10px;
}

.wel {
    max-width: 180px;
    margin-bottom: 10px;
}

#intro .box_wrap .box {
    margin-top: 20px;
}

#intro .box_wrap .box_wrap figure:nth-child(3) {
    transform: translate(-40px, -70px) scale(1.17);
}

.second figure, .second div {
    min-width: 100%;
}

#intro .box_wrap .box_wrap figure:nth-child(1) {
    transform: translate(20px, -10px) scale(1.2);
}

.second:before {
    width: 1000px;
}

footer #footer #footer_txt .logo {
    max-width: 60px;
}

#intro_title > p:before {
    width: 30%;
    top: 150%;
}

#wrap:before {
    background-size: 12px;
}

h1 a{
    background-color: white;
}

#contents .logo img {
    width: 70px;
}

.banner2 {
    max-width: 140px;
}

#cms_4-b .cate_box {
    margin-bottom: 50px;
    padding: 20px;
}

#footer p.tel a {
    font-size: 13px;
}

}