/*.bg_color4 {
    background-color: #eff7f7;
}*/

.bg_color4 {
    background-color: #fffffb;
}

#body{
        background-color: #fbfaf3;
}

.bg_color3 {
    background-color: #91d8ff;
}

#main_img:before{
        content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/main1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: cover;
    pointer-events: none;
    z-index: 3;
}

/*#main_img:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/copy.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 40%;
    pointer-events: none;
    z-index: 4;
}*/

#main_img:after {
        content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    /* background-image: url(./Dup/img/copy.svg); */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    /* background-size: 40%; */
    pointer-events: none;
    z-index: 4;
    background-color: green;
    background: linear-gradient(to right,#e60000,#f39800,#fff100,#009944,#0068b7,#1d2088,#920783,#e60000) 0 / 200%;
    -webkit-mask-image: url(./Dup/img/copy.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 10% 40%;
    -webkit-mask-size: 70%;
    animation: 5s example4 linear infinite;
}

@keyframes example4{
    100% { background-position: 200%; }
}

#contents3 {
    padding: 0 10% 100px;
    background-color: #e8eff3;
}

body {
    font-size: 16px;
}

body, .txt_color_nomal {
    color: #491f01;
}

figure{
 border-radius: 15px;
}


#fakeloader{
    background-color: #e8eff3;
}

#fakeloader .fl{
	position: absolute!important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%)!important;
    width: 50%!important;
    max-width: 200px!important;
    animation: bgiLoop 0.5s linear forwards;
    opacity: 0;
    margin-top: 20px;
}



@keyframes bgiLoop {
    0% { 	
        opacity: 0;
        
    }
    
    
  100% { 
      opacity: 1;
      margin-top: 0;
  }
}

#main_img{
        width: calc(100% - 50px);
    margin: auto;
    margin-top: 50px;
    margin-left: 0;
    border-radius: 0 70px 0 0;
}

#contents3 h3, #contents3 p{
        color: #491f01;
}

.kore{
    position: relative;
    z-index: 1;
}

.kore:before{
        content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/setu.svg);
    background-position: 100% 95%;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: max(300px, 40%);
    pointer-events: none;
    z-index: 3;
}

.kore:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/ira2.png);
    background-position: top right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 300px;
    pointer-events: none;
    z-index: 3;
}

#contents1 h2{
        font-size: max(2vw, 24px);
    text-indent: -0.6em;
}

.linkStyle{
color: #29a9e0;
font-weight: bold;
}

.main_box {
    overflow: hidden;
}

#contents1 {
        background-image: url(./Dup/img/ira.png);
    background-size: 60%;
    background-position: -50% 0;
    background-repeat: no-repeat;
}

.cms_title{
    position: relative;
}

.cms_title:after{
        content: "";
    display: block;
    width: 180px;
    height: 180px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/ira.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
}

#page_title{
    position: relative;
}

#page_title:before{
        content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 80%;
    left: 55%;
    background-image: url(./Dup/img/ira.png);
    background-position: top right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 300px;
    pointer-events: none;
    z-index: 1;
}



#page_title .page_box {
    position: relative;
    z-index: 2;
}

.border_color3 {
    border-color: #afc3cd;
}
.bg_color1 {
    background-color: #91d8ff;
}

#page_title:before {
    background-size: 150px;
}

#cms_2-g figure a img{
    top: 70%;
}

.dec{
    display: block;
    font-size: 14px;
    margin-bottom: 20px;
}


/*20230817 correct start*/

#video {
    height: auto !important;
    width: calc(90% - 0px);
    margin-top: 100px;
    padding: 2% 10%;
    box-sizing: border-box;
}

#video video {
    width: 100% !important;
    height: auto;
    top: 0%;
    left: 0%;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
    vertical-align: bottom;
}

/*20230817 correct end*/

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
h1#logo{
    max-width: 150px;
}

#main_img {
    width: calc(100% - 20px);
}

#main_img:after {
    -webkit-mask-position: 7% 50%;
    -webkit-mask-size: 80%;
}

#contents1 h2 {
    font-size: max(2vw, 36px);
}

#main_img:before {
    background-position: 75% 50%;
}

.kesi{
    display: none;
}


#video {
    width: calc(100% - 0px);
}

.kore:after {
    top: 48%;
    left: 50%;
    background-size: 25%;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

#main_img:after {
    -webkit-mask-position: 65% 20%;
    -webkit-mask-size: 95%;
}

#contents1 h2 {
    font-size: max(2vw, 26px);
}

.kore:after {
        top: 90%;
    left: 2%;
    background-size: 60%;
}

h1#logo {
    max-width: 100px;
}

.kore:after {
        top: 87%;
    left: 2%;
    background-size: 60%;
}

}