/*
.top_loader{
    display:none;
}
*/



/*--all page---------------------------
-------------------------------------*/
.linkStyle{
    color:#5f514e;
    text-decoration:underline;
    transition:all 0.3s;
}
.linkStyle:hover{
    opacity:0.7;
}

body{
    overflow:hidden;
}

:root{
    --shadow1:0 0 30px rgb(231,253,231);
}


/*--top page---------------------------
-------------------------------------*/
/*top_loader*/

.load_txtbox {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(30vw,600px);    
    text-align: center;
}
.load_txtbox p{
    width:50px;
    height:60px;
    display:inline-block;
}
.load_txtbox p:nth-child(2),
.load_txtbox p:nth-child(3){
    width:40px;
}

/*ローディング後にフェードイン*/
.load-fade {opacity : 0; transition : all 3s/*処理にかかる時間*/;}
.load-fade.done{opacity : 1; transform : translate(0, 0);}


header{
    background-color:rgba(255,255,255,0.7)!important;
}

.header .d_flex li a:hover{
    color:#88cb57;
}
.button_container span{
    background-color:#88cb57;
}

.main_img_wrap {
    background-color: #fff;
    background-image: url(./Dup/img/reaf1.png),url(./Dup/img/reaf2.png);
    background-repeat: no-repeat,no-repeat;
    background-size: 42%,43%;
    background-position: top -50px left -50px,top -50px right -50px;
}
.main_img_wrap::before,
#page_title::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:80px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    bottom:-1px;
    left:0;
    z-index:2;
}
.item1 {
    width: 39vw;
    max-width: 900px;
    top: 30%;
    left: 7%;
}
.item2 {
    width: 60vw;
    max-width: 1300px;
    bottom: -5%;
    right: 14%;
}
.item3 {
    top: 13%;
    right: 14%;
    z-index: 3;
    width: min(8vw,200px);
}

.menu {
    left: 12%;
    bottom: 25%;
}
#top_news1 {
    background-image: url(./Dup/img/reaf3.png),url(./Dup/img/reaf4.png);
    background-repeat: no-repeat,no-repeat;
    background-size: 40% auto,40% auto;
    background-position: bottom -50px left -50px,bottom -50px right -50px;
}
.lavender {
    width: 16vw;
    max-width: 600px;
    top: 13%;
    left: 20%;
    z-index: 2;
}
#bg_wrap {
    position: relative;
}
#bg_wrap::before {
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100vw;
    height:100vh;
    background-image:url("./Dup/img/bg3.png"),url(./Dup/img/bg.jpg) ;
    background-repeat:no-repeat,repeat;
    -webkit-background-size:100% 100%,400px 400px;
    background-size:100% 100%,400px 400px;
    content:"";
    opacity: 0.6;
}

#top_news1 .top_cms_box_wrap{
    box-shadow: var(--shadow1);
}

#catch .box{
    z-index:2;
}
#catch .catch_img{
    top:-50px;
}

#question{
    background-color:transparent;
}
#question .txt{
    padding-left:40px;
    background:url(./Dup/img/check.png) no-repeat center left/35px;
}
#question::before,
#question .txt:before{
    display:none;
}
.item4{
    bottom: -11%;
    right: 0;
    z-index: 2;
    width: 28vw;
    max-width: 700px;
}

#top_cms .top_cms_box{
    box-shadow: var(--shadow1);
    background-color: rgba(255,255,255,0.8);
    padding: 50px;
    border-radius: 10px;
}

/*--under page---------------------------
-------------------------------------*/
#page_title::before{
    height:50%;
}
#page_title .title{
    background-color: transparent!important;
    z-index: 3;
}


/* ---------- responshive ---------- */
@media screen and (max-width: 1536px){

}


@media screen and (max-width: 1366px){

}


/* ---------- タブレット ---------- */
@media screen and (max-width: 1024px){
.load_txtbox{
    width: min(50vw,600px);   
    }
.main_img_wrap{
    width: 100%;
    height: 40vh;
    min-height: initial;
}
.menu {
    left: 8%;
    bottom: 11%;
}
.item1 {
    width: 50vw;
    top: 29%;
    left: 2%;
}
.item2 {
    width: 68vw;
    right: 6%;
}
.item3 {
    width: 105px;
    top: 6%;
    right: 13%;
}
#bg_wrap::before {
    background:url("./Dup/img/bg3_tb.png") no-repeat;
    background-size: 100% 100%;
} 
#bg_wrap::before {
    background-image:url("./Dup/img/bg3_tb.png"),url(./Dup/img/bg.jpg) ;
    background-repeat:no-repeat,repeat;
    -webkit-background-size:100% 100%,300px 300px;
    background-size:100% 100%,300px 300px;

}
.item4 {
    bottom: -11%;
    width: 52vw;
}
}

@media screen and (max-width: 768px){
.button_container span{
    height:3px;
}
.main_img_wrap {
    height: 45vh;
    background-size: 47%,47%;
    background-position: top -20px left -50px,top -20px right -50px;
}
.item1 {
    width: 50vw;
    top: 37%;
    left: 2%;
}
.item2 {
    width: 74vw;
    right: 6%;
}
.item3 {
    width: 87px;
    top: 6%;
    right: 13%;
}
#top_news1{
    background-size: 55% auto,55% auto,170px,140px,160px;    
    background-position: bottom -50px left -50px,bottom -50px right -50px, top 15% left 4%,top 17% right 8%,bottom 37% right 12%;
}
.lavender {
    width: 28vw;
    top: 10%;
    left: 10%;
}
#question .txt{
    padding-left: 50px;
}
#question .txt .check{
    left:-50px;
}
#page_title::before {
    height: 70%;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.load_txtbox {
    width: min(80vw,600px);
}
.load_txtbox p {
    width: 35px;
    height: 40px
}
.load_txtbox p:nth-child(2), .load_txtbox p:nth-child(3) {
    width: 27px;
}
.main_img_wrap {
    height: 50vh;
    background-size: 60%,60%;
    background-position: top -20px left -50px,top -20px right -50px;
}

.item1 {
    width: 61vw;
    top: 38%;
    left: 0%;
}
.item2 {
    width: 99vw;
    right: -6%;
}
.item3 {
    width: 62px;
    top: 10%;
    right: 6%;
}
#top_news1 {
    background-size: 64% auto,64% auto,170px,140px,160px;
    background-position: bottom -15px left -50px,bottom -15px right -50px, top 15% left 4%,top 17% right 8%,bottom 37% right 12%;
}
.lavender {
    width: 57vw;
    top: auto;
    left: 3%;
    z-index: 2;
    bottom: 8%;
}
#question .txt {
    padding-left: 30px;
    background: url(./Dup/img/check.png) no-repeat top 3px left/25px;
}
.item4 {
    bottom: -7%;
    width: 68vw;
}
#top_cms .top_cms_box{
    padding:20px;
}
#top_cms .more_box{
    margin: 20px auto;
}
#page_title::before {
    height: 100%;
}
}