/* all page */
/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #191970;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
.txt_color1, .hvr_txt_color1:hover{color: #4646ad;} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: #e6e6e6} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: #67c18c;} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: #c9baa9} /* アクセントカラー2 */

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: #4646ad;} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: #e6e6e6} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: #67c18c;} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: #c9baa9} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: #4646ad;}
.border_color2, .hvr_border_color2:hover{border-color: #e6e6e6}
.border_color3, .hvr_border_color3:hover{border-color: #67c18c;}
.border_color4, .hvr_border_color4:hover{border-color: #c9baa9}

.overlay {
    background: linear-gradient(135deg, rgba(25,25,112,0.9) , rgba(103,193,140,0.9) )!important;
}
.nav_menu_more:first-of-type a .icon:before {
    content: "\f075";
}

.banner_fixed {
    position: fixed;
    right: 100px;
    z-index: 5;
    max-width: 350px;
}
.banner_fixed a:hover{
    opacity: 0.7;
}

/* top ----------------*/

/* header */
#logo {
    max-width: 160px;
}
header.scr_header #logo {
    max-width: 130px;
}

/* main img */
#main_img:before {
    /*background-color: rgba(215,215,255,0.3);*/
    background-color: rgba(86,86,203,0.3);
}
#main_img .menu p{
    background: none;
}
/*アニメーション*/
.ani_fadein{
	display: none;
}
.ani {
  animation: slideIn 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 forwards;
  animation-delay: 2s;
  opacity: 0;
}
.ani2 {
  animation: slideIn2 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 forwards;
  animation-delay: 2s;
  opacity: 0;
}
.main_kumo_l{
    bottom: 40px;
    left: 50px;
    z-index: 3;
    mix-blend-mode: hard-light;
    max-width: 700px;
}
.main_kumo_r{
    top: 20px;
    right: 50px;
    z-index: 3;
    mix-blend-mode: overlay;
    max-width: 700px;
}
@keyframes slideIn {
  0% {
    transform: translate(0,0);
    opacity: 0;
  }
  100% {
    transform: translateX(-34%);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes slideIn2 {
  0% {
    transform: translate(0,0);
    opacity: 0;
  }
  100% {
    transform: translateX(30%);
  }
  40%,100% {
    opacity: 1;
  }
}

/* main */
.back1:before, .back2:before, #intro .num, #contents1 .num, #contents2 .num, #contents3 .num{display: none;}

/* intro */
#intro::before, #intro::after, #intro_wrap::before, #intro_wrap::after, #contents1 .con_box::before{
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1;
}
#intro::before{
    background-image: url('./Dup/img/intro_bar.png');
    background-position: bottom left;
    background-repeat-x: repeat;
    width: 100%;
    height: 25px;
    bottom: 0;
    left: 0;
}
#intro::after{
    background-image: url('./Dup/img/para.png');
    background-position: top left;
    width: 120px;
    height: 100px;
    top: 0;
    left: 15%;
}
#intro_wrap {
    background: none;
    padding-top: 5%;
    padding-bottom: 10%;
}
#intro_wrap::before {
    background-image: url('./Dup/img/guru.png');
    background-position: top left;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 3%;
	animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
}
#intro_wrap::after {
    background-image: url('./Dup/img/hana.png');
    background-position: top right;
    width: 80px;
    height: 80px;
    bottom: 50%;
    right: 3%;
	animation: fuwafuwa2 3.5s infinite ease-in-out .8s alternate;
}
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0);
  }
  50% {
    transform:translate(0, -10px);
  }
  100% {
    transform:translate(0, 0);
  }
}
@keyframes fuwafuwa2 {
  0% {
    transform:translate(0, 0);
  }
  50% {
    transform:translate(0, -15px);
  }
  100% {
    transform:translate(0, 0);
  }
}
.tarot{
    bottom: -150px;
    right: -35%;
    z-index: 2;
    max-width: 900px;
}
.kumo1{
    top: 5%;
    right: -18%;
    z-index: 2;
    max-width: 350px;
}
.kumo2{
    bottom: 11%;
    left: -17%;
    z-index: 2;
    max-width: 380px;
}

/* contents */
.con_top{
    font-size: 20px;
    display: block;
    line-height: 1;
    z-index: 1;
    color: #97c1e4;
    margin-bottom: 5px;
}
#contents1 .con_box {
    margin-top: 15%;
}
#contents1 .line:before, #contents2 .line:before, #contents3 .line:before{
    display: none;
}
#contents1 .line:after, #contents2 .line:after, #contents3 .line:after{
    content: "";
    background-image: url('./Dup/img/con_title.png');
    background-repeat-x: repeat;
    background-position: left;
    background-size: contain;
    width: 50%;
    height: 18%;
    position: absolute;
    bottom: -25px;
    left: 0;
}
#contents1 .con_box{
    position: relative;
}
#contents1 .con_box::before{
    background-image: url('./Dup/img/para.png');
    background-position: top left;
    width: 100px;
    height: 100px;
    top: -50px;
    right: 15%;
}
.kumo3{
    bottom: -10%;
    left: -3%;
    z-index: 2;
    max-width: 350px;
}
#contents3 .con3_btn a{
    max-width: 150px;
    padding: 5px 10px;
}

/* topcms */
.more_btn:before {width: 100%;}
.more_btn:hover:after {transition-delay: 0s;}


/* footer */
#info_contact .con_img:before {
    background-color: rgba(106,106,243,0.3);
}
#footer {
    background-color: rgba(92,92,228,0.25);
}
#copyright{
    padding-bottom: 100px;
}


/* under page */
#page_title .page_title_box {
    background: linear-gradient(135deg, rgba(140,140,183,0.9) , rgba(175,226,197,0.9) )!important;
}

/* cms1 */

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */
#page8 .line_box a i{
    font-weight: normal;
}

/* page9 */

/* page10 */


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    .banner_fixed {
        max-width: 300px;
    }
	#logo {
		opacity: 0;
	}
	.page #logo {
		opacity: 1;
		max-width: 270px;
	}
	header.scr_header #logo {
		opacity: 1;
		max-width: 110px;
	}
    #contents1 .con_box, #contents2 .con_box {
        margin-top: 0;
    }
    .main_kumo_r, .main_kumo_l {
        max-width: 320px;
    }
    #intro{
        margin-bottom: 150px;
    }
    #intro_wrap {
        padding-top: 10%;
        padding-bottom: 15%;
    }
    #intro_wrap::before {
        width: 60px;
        height: 60px;
        left: -7%;
    }
    #intro_wrap::after {
        width: 70px;
        height: 70px;
        right: -5%;
    }
    #intro::after {
        width: 90px;
        top: -20px;
        left: 3%;
    }
    .tarot {
        bottom: -120px;
        max-width: 510px;
    }
    .kumo1 {
        top: -3%;
        max-width: 260px;
    }
    .kumo2 {
        bottom: -10%;
        left: -17%;
        max-width: 270px;
    }
    #contents1 .con_box::before {
        right: 0;
    }
    .kumo3 {
        max-width: 300px;
    }
    #contents3 .con3_btn a {
        margin: 0 auto;
    }
    #top_cms .cms_title h3{
        font-size: 28px;
    }
    .page #logo {
        max-width: 110px;
    }
    #page_title .page_title_box {
        width: 100%;
        background: linear-gradient(135deg, rgba(25,25,112,0.6) , rgba(103,193,140,0.6) )!important;
    }
    
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    .banner_fixed {
        max-width: 250px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    #logo {
        max-width: 100px;
    }
	header.scr_header #logo {
		max-width: 80px;
	}
    #intro_wrap::before {
        width: 50px;
        height: 50px;
        z-index: -1;
    }
    #intro_wrap::after {
        width: 60px;
        height: 60px;
        z-index: -1;
    }
    #intro::after {
        width: 70px;
        top: -30px;
    }
    .tarot {
        bottom: -130px;
        max-width: 400px;
    }
    .kumo1 {
        top: -4%;
        max-width: 180px;
    }
    .kumo2 {
        bottom: -12%;
        left: -23%;
        max-width: 190px;
    }
    #contents1 .con_box::before {
        width: 80px;
        height: 80px;
    }
    #contents1 .line:after, #contents2 .line:after, #contents3 .line:after {
        width: 30%;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
    }
    .kumo3 {
        max-width: 220px;
        bottom: -14%;
    }
    #logo2{
        max-width: 150px;
    }
    
}

/*20220428修正*/
/* ---------- 1770px ---------- */
@media screen and (max-width: 1770px){
.tarot {
    bottom: -230px;
    max-width: 850px;
}
}
/* ---------- 1420px ---------- */
@media screen and (max-width: 1420px){
.tarot {
    bottom: -250px;
    max-width: 760px;
}
.kumo2 {
    bottom: 4%;
    max-width: 320px;
}
}
/* ---------- 1200px ---------- */
@media screen and (max-width: 1200px){
.kumo2 {
    bottom: -3%;
    max-width: 300px;
}
}
/* ---------- 950px ---------- */
@media screen and (max-width: 950px){
.tarot {
    bottom: -210px;
    max-width: 650px;
    right: -45%;
}
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.tarot {
    bottom: -120px;
    max-width: 510px;
    right: -35%;
}
.kumo2 {
    bottom: -10%;
    left: -17%;
    max-width: 270px;
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.tarot {
    bottom: -130px;
    max-width: 400px;
}
.kumo2 {
    bottom: -12%;
    left: -23%;
    max-width: 190px;
}
}