/* ======================================================================================
　　all
======================================================================================== */
.linkStyle{color: #F4BD22;transition: opacity .3s;text-decoration: underline;}
.linkStyle:hover{opacity: 0.7}

main {overflow-x: hidden;}
#wrap {background-color: #F4BD22;}
#main_wrap {
    background-image: url(../dup/img/bg2.jpg);
}

/* ---------- header ---------- */
.close_menu {background-color: #353535;color: white;}
.close_menu:hover {background-color: #f35713;}

/* ======================================================================================
　　top
======================================================================================== */
/* ---------- main_img ---------- */
.catch, .catch_bg {
    z-index: 3;
    max-width: 600px;
    top: 49%;
}
.catch_bg{
    z-index: 2;
}
.catch, .catch_bg{animation: opa 0.5s linear 1 forwards;animation-delay: 5s;}

@keyframes opa {
    from {opacity: 1;}
    to {opacity: 0;}
}


/* ---------- intro content ---------- */
#intro {
    position: relative;
    background: url( "../dup/img/bg1.png" ) center top 30px / 90% no-repeat;
}
#intro::before {
    content: '';
    display: inline-block;
    width: 20vw;
    height: 26vw;
    background-image: url(../dup/img/item1.png);
    background-size: contain;
    background-repeat: no-repeat;
	position: absolute;
	right: -35px;
	top: 0;
}
#intro::after {
    content: '';
    display: inline-block;
    /* max-width: 300px; */
    width: 18vw;
    height: 21vw;
    background-image: url(../dup/img/item2.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -35px;
    bottom: -83px;
    z-index: 1;
}
#intro h2 {
    text-align: center;
    /* font-weight: bold; */
    margin: auto;
    margin-bottom: 9%;
    padding-top: 25px;
    width: 65%;
    max-width: 677px;
}
#intro h2::after {
    width: 57px;
    height: 3px;
    border-top-width: 3px;
    left: 5px;
}
#intro h3 {
    font-size: 26px;
}
#contents1 h4 {
    font-size: 26px;
    font-weight: bold;
}
#contents2 h3 {
    font-size: 26px;
    font-weight: bold;
    padding-left: 0;
}
#contents2 h3::after{
    display: none;
}

/* ======================================================================================
　　window size
======================================================================================== */

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
header h1 {
    max-width: 235px;
    margin-bottom: 9px!important;
}
#intro::after {
    width: 25vw;
    height: 27vw;
    left: -35px;
    bottom: -141px;
}
#intro h2 {
    padding-top: 0;
}
#contents2 > div {
    background-color: rgb(244 189 34);
    color: #222;
}
}
/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
.font_12_sp {
    font-size: 14px;
}
header h1 {
    max-width: 126px;
    margin-bottom: -4px!important;
}
.catch, .catch_bg {
    width: 59%;
}
#intro {
    padding-bottom: 80px;
}
#intro::after {
    width: 47vw;
    height: 35vw;
    left: -17px;
    bottom: -63px;
}
#intro h2 {
    width: 85%;
    margin: 0 0 9%;
}
#intro::before {
    width: 29vw;
    height: 34vw;
}
#intro h3, #contents1 h4, #contents2 h3 {
    font-size: 18px;
}
}