﻿/* all page */
/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
#pc_nav li a, #top_pc_nav li a, #footer_nav li a, #page_title, .cate_list li a, .cate_list li .cate_no, .cate_title, .sub_cate_title, .box_title, .box_title1, a[href^="tel:"], .hannari, .page9 .jp {
    font-family: "Zen Maru Gothic","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #536dbe;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
.txt_color1{color: #819fff;} /* メインカラー */
.txt_color2{color: #e6e6e6} /* サブカラー */
.txt_color3{color: #536dbe;} /* アクセントカラー1 */
.txt_color4{color: #c9baa9} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #819fff;} /* メインカラー */
.bg_color2{background-color: #e6e6e6} /* サブカラー */
.bg_color3{background-color: #536dbe;} /* アクセントカラー1 */
.bg_color4{background-color: #c9baa9} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #819fff;}
.border_color2{border-color: #e6e6e6}
.border_color3{border-color: #536dbe;}
.border_color4{border-color: #d0dbff;}

.overlay {
    background: linear-gradient(135deg, rgba(129,159,255,0.9) , rgba(83,109,190,0.9) );
}
.nav_menu_more:first-of-type a .icon:before {
    content: "\f075";
    top: -3px;
    left: -30px;
}

main{
    padding-bottom: 250px;
    background-image: url("./Dup/img/main_bg_top.jpg"), url("./Dup/img/main_bg_bottom.jpg");
	background-position: top center, bottom center;
	background-repeat: no-repeat;
	background-size: 100%;
}

/* header */
header.scr_header {background-color: rgba(108,129,232,0.5)!important; backdrop-filter: blur(3px);}
header.scr_header #logo {
    max-width: 250px;
}

/* top ----------------*/

/* main img */
#top_pc_nav {display: none;}
.menu p.bg_white{background: none;}
.menu p a{
    max-width: 400px;
    position: relative;
}
#main_img:before {
    background-color: rgba(255,255,255,0.2);
}
.hand_l{
    width: 15%;
    top: 50%;
    left: 30%;
    transform: translateY(-40%);
    mix-blend-mode: color-burn;
    opacity: 0.6;
}
.hand_r{
    width: 15%;
    top: 50%;
    right: 30%;
    transform: translateY(-40%);
    mix-blend-mode: color-burn;
    opacity: 0.6;
}
.menu .main_txt{
    color: #536dbe;
}

/* main */
.back1:before, .back2:before, #intro .num, #contents1 .num, #contents2 .num, #contents3 .num{display: none;}
/*アニメーション*/
.animate {
  opacity: 0;
  transition: all 2s;
}
.animate.show {
  opacity: 1;
}
.animate.show:nth-of-type(1) {
  transition-delay: 0.2s;
}
.animate.show:nth-of-type(2) {
  transition-delay: 0.4s;
}
.animate.show:nth-of-type(3) {
  transition-delay: 0.6s;
}
.animate.show:nth-of-type(4) {
  transition-delay: 0.8s;
}
.animate.show:nth-of-type(5) {
  transition-delay: 1.0s;
}
.animate.show:nth-of-type(6) {
  transition-delay: 1.0s;
}

/* intro */
#intro_wrap {background: none;}
#intro::before{
    content: "";
    background-image: url('./Dup/img/main_bg_s.png');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 300px;
    height: 800px;
    position: absolute;
    bottom: -40%;
    left: 0;
}

/* contents */
.con_top{
    font-size: 25px;
    opacity: 0.7;
    display: block;
    line-height: 1;
    z-index: 1;
}
#contents1::before{
    content: "";
    background-image: url('./Dup/img/main_bg_r.png');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 300px;
    height: 1000px;
    position: absolute;
    top: -24%;
    right: 0;
    z-index: -3;
}
#contents1_wrap::before{
    content: "";
    background-image: url('./Dup/img/star01.png');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 250px;
    height: 200px;
    position: absolute;
    top: -20%;
    right: 15%;
    z-index: -1;
	animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
}
#contents1_wrap::after{
    content: "";
    background-image: url('./Dup/img/star01.png');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 170px;
    height: 180px;
    position: absolute;
    bottom: -20%;
    left: 15%;
    z-index: -1;
    transform: scale(-1,-1);
	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) scale(-1,-1);
  }
  50% {
    transform:translate(0, -10px) scale(-1,-1);
  }
  100% {
    transform:translate(0, 0) scale(-1,-1);
  }
}
#contents2::after{
    content: "";
    background-image: url('./Dup/img/main_bg_l.png');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 300px;
    height: 1000px;
    position: absolute;
    top: 9%;
    left: 0;
    z-index: -3;
}
#contents2_wrap::before{
    content: "";
    background-image: url('./Dup/img/star02.png');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100px;
    height: 500px;
    position: absolute;
    bottom: 0;
    right: 10%;
    z-index: -1;
}
#contents1 .con_img{
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
#contents1 .con_box, #contents2 .con_box{
    background-color: rgba(255,255,255,0.4);
}
#contents1 .con_box {
    margin-top: 15%;
    padding: 20px 20px 20px 5%;
}
#contents2 .con_box {
    padding: 20px 5% 20px 20px;
}
#contents2 .con_img {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
#contents3_wrap:after {
    background-color: rgba(255,255,255,0.3);
}
#contents3 {
    margin-top: 100px;
}
#contents3 .con_box {
    padding: 5%;
}
#contents3_wrap:before, #contents3_wrap:after {
    height: 140%;
    top: -20%;
}
#contents3 h3{
    background-color: #819fff;
    color: #fff;
    border-radius: 50px;
    padding: 10px 20px;
}
#contents3 p span{
    font-size: 16px;
}
#contents3 .line:before{
    display: none;
}

/* topcms */
#top_cms{
    position: relative;
}
#top_cms::after{
    content: "";
    background-image: url('./Dup/img/main_bg_l.png');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 350px;
    height: 1000px;
    position: absolute;
    top: -31%;
    right: 0;
    z-index: -3;
    transform: scale(-1,1);
}

/* linkcms */
#info_contact .con_img:before {
    background-color: rgba(129,159,255,0.3);
}

/* footer */
#footer_nav{
    margin-bottom: 0;
    padding-bottom: 0;
}
#logo2 a{
    max-width: 250px;
}
#footer {
    background-color: #dee6ff;
}

/* under page */
#page_title:before {
    background-color: rgba(108,129,232,0.3);
}
.page .con_box{
    background-color: rgba(255,255,255,0.5);
}
#footer_con .con_box{
    background: none;
}

/* cms1 */

/* cms2 */

/* cms3 */

/* cms4 */
#cms_6-b .cate_box .box_txt1{
    background-color: #dee6ff;
    color: #333;
}

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    main{
        padding-bottom: 50px;
    }
	#logo {
		opacity: 0;
	}
	.page #logo {
		opacity: 1;
		max-width: 270px;
	}
	header.scr_header #logo {
		opacity: 1;
	}
    #intro_wrap {background: rgba(255,255,255,0.7);}
    .con_top {
        font-size: 17px;
    }
    #intro::before {
        width: 150px;
        height: 400px;
        bottom: 30%;
    }
    #contents1 .con_box {
        margin-top: 0;
    }
    #contents1::before {
        width: 160px;
        height: 500px;
        top: -15%;
    }
    #contents2::after {
        width: 200px;
        height: 500px;
        top: -1%;
    }
    #contents1_wrap::before {
        width: 180px;
        top: -30%;
    }
    #contents2_wrap::before {
        right: 1%;
        bottom: -100px;
    }
    #contents3_wrap:before, #contents3_wrap:after {
        height: 120%;
        top: -10%;
    }
    
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    main {
        background-size: auto;
    }
    header.scr_header #logo {
        max-width: 180px;
    }
    .hand_l {
        width: 30%;
        left: 5%;
    }
    .hand_r {
        width: 30%;
        right: 5%;
    }
    .con_top {
        margin-bottom: 5px;
    }
    #contents1_wrap::before {
        width: 170px;
        top: -17%;
        right: 20%;
    }
    #contents1_wrap::after {
        bottom: -11%;
    }
    #contents3_wrap:before, #contents3_wrap:after {
        height: 110%;
        top: -5%;
    }
    #contents3 {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    #contents3_wrap .con3_box p{
        letter-spacing: 1px;
    }
    
    #top_cms::after {
        top: -26%;
    }
    #logo2 a {
        max-width: 200px;
    }
    .page #logo {
        max-width: 170px;
    }
    
}


/*20220517公開後修正*/
#pc_nav li, #top_pc_nav li {
    max-width: 160px;
}
#pc_nav li:last-child a {
    background-color: #536dbe;
    color: #fff;
    padding: 5px 10px;
    border: 1px solid #536dbe;
    border-radius: 3px;
    transition: all .3s;
    font-size: 16px;
}
#pc_nav li:last-child a:hover {
    background-color: transparent;
    color: #536dbe;
}
#pc_nav li:last-child a::after{
    display: none;
}


