/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ コード集サイト ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.txt_anim1 span{
	position: relative;
	right: 20px;
	opacity: 0;
	transition: all .8s;
}
.txt_anim1 span.start{
	right: 0;
	opacity: 1;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ コード集サイト ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* color ---------------------------------------------------------------------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #000c13;}
.txt_color1,.hvr_txt_color1:hover{color: #46d0db} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #f1feff} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #00314f} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #7cca2c} /* アクセントカラー2 */
/* background-color */
.bg_black,.hvr_bg_black:hover{background-color: #000c13} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #46d0db} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #f1feff} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #00314f} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #7cca2c} /* アクセントカラー2 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #46d0db !important}
.border_color2,.hvr_border_color2:hover{border-color: #f1feff !important}
.border_color3,.hvr_border_color3:hover{border-color: #00314f !important}
.border_color4,.hvr_border_color4:hover{border-color: #7cca2c !important}

div#wrap {background: #fff;}
/*linkStyle*/
a.linkStyle {
    color: #0273b9;
    transition: 0.5s;
}
a.linkStyle:hover {
    color: #0273b9;
}

/* color ---------------------------------------------------------------------------------------------*/


/* font ---------------------------------------------------------------------------------------------*/
body{font-family: 'Zen Kaku Gothic New', "Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;
    font-weight: 500;}
.en,.Russo,#top_contents1 h3::before, #top_contents2 h3::before {
    font-family: 'Sen', "Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;
    font-weight: 700;}
/* font ---------------------------------------------------------------------------------------------*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*メインビジュアル画面いっぱい*/
header#vegas,header span.after,header span.before {height: 91vh !important;}
#vegas {top: 9vh;}
#header {top: 0%;}

#logo {
    width: 196px;
}
/*メインビジュアル画面いっぱい*/

/*三角控え目に*/
header span.after, header span.before {
    background: rgb(233,246,255);
    background: linear-gradient(143deg, rgba(233,246,255,0.6) 0%, rgba(241,255,226,0.6) 100%);}

header span.after{
    width: 200px;
    right: -215px;}

header span.before{
    width: 200px;
    left: -215px;}
/*三角控え目に*/

/*catch*/
.catch {
    width: 40%;
    top: 47%;
    left: 73%;
    z-index: 3;
    transform: translate(-50%,-50%);
}

.catch02 {
    width: 30%;
    top: 48%;
    left: 83%;
    z-index: 1;
    transform: translate(-50%,50%);
    mix-blend-mode: overlay;
}
/*catch*/

/*メインビジュアルフィルター*/
.vegas-wrapper::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(43,134,175);
    background: linear-gradient(309deg, rgb(56 125 139 / 30%) 0%, rgb(231 253 255 / 20%) 100%);
}
/*メインビジュアルフィルター*/

#top_message h2 {
    font-size: 24px;
    margin-bottom: 30px;
    text-align: center;
}

#top_contents1 h3, #top_contents1 p, #top_contents2 h3, #top_contents2 p {
    color: #0273b9;
}

#top_contents1, #top_contents2 {
    background: rgb(233,246,255);
    background: linear-gradient(270deg, rgb(240 255 251 / 60%) -20%, rgb(236 255 255 / 60%) 100%);}

#top_contents1 div span.after {
    background: rgb(233,246,255);
    background: linear-gradient(270deg, rgb(240 255 251 / 80%) -20%, rgb(236 255 255 / 60%) 100%);}

#top_contents2 div span.after{
    background: rgb(233,246,255);
    background: linear-gradient(90deg, rgb(240 255 251 / 80%) -20%, rgb(236 255 255 / 60%) 100%);}


.item01{
    background: url(Dup/img/item01.png) repeat-x;
    background-size: 2000px;
    animation:main_bg 50s linear infinite;
}
@keyframes main_bg{
    0%{
        background-position-x: 0px;
    }
    100%{
          background-position-x:2000px;
    }
}

section#top_message {
    background: #12d3d3;
    background: linear-gradient(310deg, #ebffcd -20%, #12d3d3 100%);
    position: relative;
    z-index: 1;
    padding-top: 30px;
    padding-bottom: 90px;
    padding-right: 100px;
    padding-left: 50px;
}



#top_message .Russo {display: none;}

section#top_message h2 {
    color: #12d3d3;
    font-size: 25px;
    font-weight: 500;
    position: relative;
}

section#top_message h2::before {
    content: "";
    display: block;
    width: 8%;
    height: 3px;
    position: absolute;
    bottom: -9px;
    left: 50%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    background-color: #b2ffdd !important;
}

section#top_message::before {
    content: '';
    position: absolute;
    background: #fff;
    width: 100%;
    height: 100%;
    top: -25px;
    left: -25px;
    z-index: -1;
    box-shadow: -1px -1px 6px -1px #ebffcd;
}

header#vegas {margin-bottom: 230px;}

img.posi_abs.item03 {
    bottom: 0;
    width: 20%;
    right: -2%;
    bottom: -3%;}

#top_contents1 h3::before,#top_contents2 h3::before{display:none;}

#top_contents1 p,#top_contents2 p{color:#00314f;}

#top_contents1 h3, #top_contents2 h3 {
    position: relative;
    font-weight: 500;
    font-size: 30px;
    padding-bottom: 10px;}
    
.more a .c-btn__back:hover {opacity: 0.8;}
.more a .c-btn__back{background: linear-gradient(270deg, #ebffcd -20%, #12d3d3 100%); transition: 0.7s;}

.cms_5-a.cms_wrap {
    width: 90%;
    margin: 0 auto;
}

.cms_title p {
    font-size: 4rem;
    position: absolute;
    top: -60px;
    left: -30px;
    color: rgb(70 208 219 / 30%);
    z-index: 0;
}
.cms_title h2 {
    margin-bottom: -12px;
    z-index: 2;
    position: relative;
    padding-bottom: 7px;
}

.top_cms_sec.border_so2-b{
    border-bottom: solid 3px #f2ffe3 !important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.more a .c-btn__back {
    z-index: 0;
    position: absolute;
    display: block;
    background: linear-gradient(91deg, #ebffcd -50%, #12b6d3 80%);
}
.more a .c-btn__back:hover {
    opacity: 0.8;
    background: linear-gradient(91deg, #ebffcd -50%, #12b6d3 80%);
}

.more a .c-btn__back::before {
    background: linear-gradient(270deg, #ebffcd 22%, #12d3d3 100%);
    content: '';
    position: absolute;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 0;
    transition: 0.7s;
}

.more a .c-btn__back:hover::before {
    background: linear-gradient(270deg, #ebffcd 22%, #12d3d3 100%);
    content: '';
    position: absolute;
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 0;
    transition: 0.7s;
}



div#header_contact a:hover {
    opacity: 0.7;
}
footer.bg_color3 {
    background: rgb(70,189,219);
    background: linear-gradient(219deg, #a6ffe0 -20%, #12abd3 100%);
}


.footer_sitemap {border-left: 1px solid #ffffff;}
#footer {border-bottom: 1px solid #ffffff;}
#header {
    top: 0%;
    background: rgb(255 255 255 / 80%);}

#header_contact a.btn_back {
    background-color: rgb(70 189 219 / 90%);
    background: linear-gradient(270deg, #ebffcd -20%, #12d3d3 100%);}

#header_contact span{color:#ffffff;}

#header_contact span {
    top: 21px;
    right: 70px;
    font-size: 20px;}
    

section#footer_contact {
    position: relative;
    z-index: 0;}

section#footer_contact::before {
    content: '';
    background: rgb(246 255 255 / 50%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;}
    

section#footer_contact h3, section#footer_contact p {
    color: #00314f !important;}

section#footer_contact h3{
    font-weight: 500;}
    

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
main.width_1280-max{position:relative;}
main.width_1280-max:before {
    background-image: url(./Dup/img/item04.png);
    background-size: contain;
    width: 10vw;
    height: 12vw;
    top: -14vw;
    right: -9vw;
    content: "";
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 0;
}

main.width_1280-max:after {
    background-image: url(./Dup/img/item05.png);
    background-size: contain;
    width: 13vw;
    height: 10vw;
    bottom: -17vw;
    left: -12vw;
    content: "";
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1;
}

#filter_white {background-color: rgb(222 255 250 / 35%);}

section#page7 .bg_color4 {background: #f1feff;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/



/*タブレット*/
@media screen and (max-width: 768px){
    
main.width_1280-max:before {
    width: 12vw;
    height: 13vw;
    top: -19vw;
    right: -4vw;
    z-index: 2;
}

main.width_1280-max:after {
    width: 17vw;
    height: 16vw;
    bottom: -33vw;
    left: -4vw;}
.c-btn__txt {padding-left: 20px;}

.fa-angle-right {
    margin-left: 23px;
    margin-right: 16px;}

.catch {
    width: 60%;
    top: 48%;
    left: 67%;
    z-index: 3;
    transform: translate(-50%,-50%);
}

.catch02 {
    width: 35%;
    top: 50%;
    left: 82%;
    z-index: 1;
    transform: translate(-50%,50%);
    mix-blend-mode: overlay;
}

section#top_message::before {
    top: -12px;
    left: -12px;
}

section#top_message {
    padding-top: 20px;
    padding-bottom: 50px;
    padding-right: 40px;
    padding-left: 25px;
}

#top_message {
    width: 85%;
    min-width: 300px;
    margin-right: 6%;}

img.posi_abs.item03 {
    right: -2%;
    bottom: -2%;}
.opacity06_tb {opacity: 0.9;}


.cms_title p {
    font-size: 3.5rem;
    position: absolute;
    top: -51px;
    left: -24px;
    color: rgb(70 208 219 / 30%);
    z-index: 0;}

.l-menu__nav {border-top: 1px solid #ffffff;}

#cms_2-c .box_item {
    word-break: break-all;
    padding: 20px;}

#logo {width: 221px;}
}
/*スマホ*/
@media screen and (max-width: 667px){
.l-header__toggle {top: 14px;}
#logo2 {width: 100px !important;}
.mail_arrow{display:none !important;}    
header#vegas, header span.after, header span.before {height: 65vh !important;}
header span.before {width: 180px;}
header span.before {width: 180px;}
#logo {width: 150px;}
#header {padding: 10px 0;}
#header {
    top: 0%;
    background: rgb(255 255 255 / 80%);
    padding: 10px 0;}
.catch02 {
    width: 44%;
    top: 49%;
    left: 78%;
    z-index: 1;
}
.catch {
    width: 63%;
    top: 48%;
    left: 65%;
    z-index: 3;
    transform: translate(-50%,-50%);
}
header#vegas {margin-bottom: 200px;}
section#top_message::before {
    top: -5px;
    left: -5px;}
#top_message {
    width: 90%;
    min-width: 300px;
    margin-right: auto;}
img.posi_abs.item03 {
    right: -9px;
    bottom: -8px;
    width: 25%;
    display: none;
}
section#top_message h2::before {
    width: 18%;}
#top_message p:last-of-type {font-size: 14px;}
section#top_message h2 {
    font-size: 23px;
    letter-spacing: 0px;}
.item01 {
    background: url(Dup/img/item01.png) repeat-x;
    background-size: 600px;
    animation: main_bg 100s linear infinite;
    background-position: bottom 83.5% left 50%;}

#top_contents1 h3, #top_contents2 h3 {font-size: 20px;}
.font_14_tb {font-size: 13px;}
.top_contents1_box, .top_contents2_box {padding: 15px;}
.cms_title p {
    font-size: 3.0rem;
    top: -40px;
    left: -15px;
    color: rgb(70 208 219 / 25%);}
#filter_white {padding: 110px 0px 40px;}

main.width_1280-max:before {
    width: 18vw;
    height: 24vw;
    top: -35vw;
    right: -4vw;
    z-index: 2;}

main.width_1280-max:after {
    width: 26vw;
    height: 22vw;
    bottom: -60vw;
    left: -4vw;}

.top_contents1_img,.top_contents2_img {background-position: top right 15%;}
}