﻿.bg_dot2 {
    /*background-image: url(../img/dot2.png);*/
    background-image: url(./Dup/img/test.png);
    background-position: center center;
    background-repeat: repeat;
    background-size: 50px;
}

.bg_color1 {
    background-color: #ff6f7a;
}

.bg_color2 {
    background-color: #f5ec9c;
}

.bg_color3 {
    background-color: #6a90c1;
}

.bg_color4 {
    background-color: #f9f9ec;
}

.txt_color3 {
    color: #ed4b48;
}

main{
    background-color: #fffff6 !important;
}

.check{
    display: inline-block;
    width: 30px;
    height: 50%;
    vertical-align: super;
    margin-right: 10px;
}

.contents_link .bg_color3{
    background-color:#ff6f7a;
}

#wrap{
    position: relative;
}

#wrap:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/right.png);
    background-position: top right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 38%;
    pointer-events: none;
    z-index: 2;
}

header{
    position: relative;
    z-index: 3;
}


/*----------動画用 css start------------*/

#main_img #slide {
    width: 80%;
    top: 0;
    left: 0;
    height: 50vw;
    min-height: auto;
    border-top-right-radius: 800px;
    border-bottom-right-radius: 800px;
    overflow: hidden;
    position: absolute;
    box-sizing: border-box;
    z-index: 1;
}

/* ---------- カスタム ---------- */
@media screen and (max-width: 1281px){
#main_img {
    padding-top: 50vw !important;
}

#main_img .catch {
    width: 90%;
    position: relative;
    z-index: 2;
    margin-left: 0%;
    margin: auto;
}

#main_img #slide {
    width: 95%;
}

#main_img .catch p {
    padding: 30px 50px;
}

}


/*----------動画用 css end------------*/


#contents .contents_box .contents_txt .box {
    padding: 4vw;
}

#contents .contents_box .contents_img {
    transform: translate(-50px,0px);
}


.contents_box .contents_img, .ore{
    position: relative;
}

.contents_box .contents_img:before, .ore:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 40%;
    left: 48%;
    background-image: url(./Dup/img/sasi.png);
    background-position: top right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 35%;
    pointer-events: none;
    z-index: 1;
}

.contents_box h2{
    margin-bottom: 1vw;
}

.contents_box p{
    font-size: 15px;
}

#contents .contents_box:nth-of-type(2) .contents_img {
    transform: translate(50px,0px);
}

.ore{
          max-width: 900px;
    margin: auto;
    margin-bottom: 200px;
    border: 1px solid #fff0e9;
    padding: 20px 30px;
    background-color: #fff0e9;
    
    
}

.ore h2, .ore p{
    position: relative;
    z-index: 2;
}

.contents_box .box h2{
    font-size: 2vw;
    position: relative;
    z-index: 2;
}

.contents_box .box p{
    position: relative;
    z-index: 2;
}

.banner2{
      bottom: 0px;
      left: 0;
      z-index: 100;
      max-width: 300px;
}

.linkStyle{color: #6a90c1;}

#wrap{
    overflow: hidden;
}


#page09 .top_txt{
    letter-spacing: 0.05em;
}


@media all and (-ms-high-contrast: none){
  

}


@media screen and (max-width: 1281px){
#contents .contents_box:nth-of-type(2) .contents_txt .box {
    padding: 4.5vw;
}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

footer{
    padding-bottom: 100px;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

#video video{
    width: 100% !important;
    height: auto !important;
}

#contents .contents_box:nth-of-type(2) .contents_img {
    transform: translate(0px,0px);
}

.contents_box .box h2 {
    font-size: 18px;
}

#info .tel a.font_18{
    font-size: 16px;
}

#main_img .catch h2 {
    width: 100%;
    margin-left: 0%;
    box-sizing: border-box;
    margin-bottom: 0;
    font-size: 23px;
    margin-top: 10px;
}

#wrap:before {
    background-size: 45%;
}

}