/*color start*/
.bg_color1 {
    background-color: #503226;
    background-color: #584439;
}

.border_color2 {
    border-color: #a9a9a9;
}

/*color end*/


/*common start*/
.menu_bt, .more a, #page-top, #header h1, #copyright{
        background-color: #4a5c7e;
}

#header h1 {
    background-color: transparent;
}

#header h1.active{
        background-color: #4a5c7e;
}

body{
    background-color: #f5f3eb;
}

#main_nav.active {
    background-color: #f5f3eb;
}

#main_nav .nav li a {
    color: #2e0f02;
    text-shadow: none;
}

.font_serif {
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#loader.bg_color1{
    background-color: #fbb03b;
}

/*common end*/

/*#top_cms{
        background-color: #ede3d0;
}*/

#top_cms .top_cms_box .top_cms_title {
    padding: 40px 0;
}

#contents1{
    background-color: white;
}

#intro{
    background-image: url("../img/design_bg1.png"), url(./Dup/img/back.jpg);
}


#main_img {
    height: 57vw;
    margin-top: 36px;
}

#header h1 span {
    padding: 12px;
}

#contents1{
       background-image: url(./Dup/img/ira1.png), url(./Dup/img/ira2.png);
    background-repeat: no-repeat;
    background-position: 10% 100%, 100% 50%;
    background-size: 28%;
}

#intro h2, #contents1 h2 span:first-child{
    font-weight:bold;
}

/*------20211105 correct start------*/

#slide_wrap span.catch{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    pointer-events: none;
    opacity:1;
    animation: bgiLoop 5s linear 7s forwards;
}

#slide_wrap span.catch:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/font.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 60%;
    pointer-events: none;
    opacity:1;
    z-index: 1;
    /*animation: bgiLoop 5s linear 5s forwards;*/
}

#slide_wrap span.catch:before{
    content: "";
    display: block;
    width: 15%;
    height: 15%;
    position: absolute;
    top: 57%; 
    left: 71%;
    background-image: url(./Dup/img/pyo.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%) rotate(45deg);
    transform: translate(-50% , -50%) rotate(45deg);
    background-size: contain;
    pointer-events: none;
    opacity: 1;
    animation: pyo 0.2s linear 5s forwards; 
    z-index: 0;
}


@keyframes bgiLoop {
    0% { opacity:1;}
    90% { opacity:1;}
  100% { opacity:0;}
}


@keyframes pyo {
    0% { top: 57%; left: 71%;}
  100% { top: 47%; left: 76%;}
}

#slide_wrap:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/sita.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

/*------20211105 correct end------*/


/*sub_page start*/

#page_title h2 span{
     -webkit-writing-mode: horizontal-tb;
 -ms-writing-mode: lr-tb;
 writing-mode: horizontal-tb;
 font-weight:bold;
}

#contents2:after {
    background-image: url(./Dup/img/ira3.png);
    background-position: 10% 100%;
    background-repeat: no-repeat;
    background-size: 30%;
}

#page_title {
    min-height: 40vh;
    background-image: url(./Dup/img/back.jpg);
}

#page_title::after {
    min-height: 40vh;
    
}

/*sub_page end*/


   .linkStyle{ color: #4a5c7e;}

.down{
    display: none;
}


#page7 div.box{
        border-bottom: 1px solid #d5d5d5;
}


@media screen and (max-width: 667px){
#header h1.active img {
    max-width: 130px;
    margin-top: 0px;
    display: block;
}

#header h1 span {
    display: block;
}

.menu_bt {
    width: 55px;
    height: 55px;
}

#contents1{
    background-image: none;
}

#contents2:after {
    background-size: 40%;
}

#contents2 {
    padding: 40px 20px;
}

#intro {
    padding: 40px 20px;
}

}