@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');
div#wrap {overflow: hidden !important;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.v_type2 .demo_box {padding-top: 70px}
.v_type2 {counter-reset: number 0;}
.v_type2 .cate_box {padding: 50px 20px 30px;
                    border: solid 0;}
.v_type2 .cate_box:before {
    counter-increment: number 1;
    content: "0" counter(number);
    display: inline-block;
    position: absolute;
    top: -43px;
    left: -5px;
    z-index: 1;
    font-size: 80px;
    font-weight: 100;
    font-style: italic;
    color: #4abbed;
    /*background-color: #fff;*/
    line-height: 1;
    padding: 0 25px 0 0;}
.v_type2 h3.box_title {border-bottom: solid 2px;}
.v_type2 {padding: 3%;}
@media screen and (max-width: 667px){
.v_type2 .cate_box{padding: 42px 25px 25px;}
.v_type2 .cate_box:before{top: -31px;font-size: 48px;}
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*font*-----------------------------------------------------------------------  */
.en_font{font-family:'PT Sans','Sawarabi Gothic','Zen Kaku Gothic Antique', "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
body{
    font-family:'Sawarabi Gothic','Zen Kaku Gothic Antique', "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color:#76838f;}

.font_bold{font-weight:500;}
.opacity07,.opacity08{opacity:0.9;}
#intro #intro_txt h3::after {content: "INTRODUCTION" !important;
    font-weight: 200;
    opacity: 0.2 !important;}

#menu_wrap nav ul li a .title2 {
    bottom: 7px;
    font-weight: 300;}
/*font*-----------------------------------------------------------------------  */


/*color*----------------------------------------------------------------------- */
.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #042743;}
.txt_color1,.hvr_txt_color1:hover{color: #0689b7} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #4abbed} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #2391db !important} /* アクセントカラー1 */
.txt_white,.txt_color4,.hvr_txt_white:hover,.hvr_txt_color4:hover{color: #ffffff}
/* background-color */
.bg_black,.hvr_bg_black:hover{background-color: #042743} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #0689b7} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #4abbed} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #2391db !important} /* アクセントカラー1 */
.bg_white,.bg_color4,.hvr_bg_white:hover,.hvr_bg_color4:hover{background-color:#ffffff;} /* 白背景 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #4abbed !important}
.border_color2,.hvr_border_color2:hover{border-color: #2391db !important}
.border_color3,.hvr_border_color3:hover{border-color: #0689b7 !important;}
.border_color4,.hvr_border_color4:hover{border-color: #ffffff !important}

#top_cms .top_cms_box .more a::after,#contents_links .box_wrap .box a div span::after{background-color: #0689b7} /* 黒背景 */
#top_cms .top_cms_box .top_cms_title p {
                                        opacity: 0.1;
                                        color: #4abbed;
                                        font-weight: 300;}
section#contents_links .box_wrap .en_font {color: #ffffff;}
#page_title::after{
    background: -moz-radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgb(28 78 100 / 50%) 100%);
    background: -webkit-radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgb(28 78 100 / 50%) 100%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgb(28 78 100 / 50%) 100%)}
    
#loader::after, .sm-slider::after, #page_title::before, #menu_wrap::after, #tel_contact, #page10 .box a::after,#main_img h2::before, #menu_wrap::after{
    background: #2391db;
    background: -moz-linear-gradient(left, #2391db 0%, #4abbed 180%) !important;
    background: -webkit-linear-gradient(left, #2391db 0%, #4abbed 180%) !important;
    background: linear-gradient(to right, #2391db 0%, #4abbed 180%) !important;}

#contents_links .box_wrap .box.bg_black {background: #2391db;}


/*linkStyle*/
a.linkStyle {
    color: #0c72c6;
    transition: 0.5s;
}
a.linkStyle:hover {
    color: #0c72c6;
}

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

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■TOP■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

div#wrap {overflow: overlay;}



#main_img::after{
    background: -moz-radial-gradient(center, ellipse cover, rgba(2,35,50,0) 0%, rgba(2,35,50,0.3) 100%) !important;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(2,35,50,0) 0%,rgba(2,35,50,0.3) 100%) !important;
    background: radial-gradient(ellipse at center, rgba(2,35,50,0) 0%,rgba(2,35,50,0.3) 100%) !important;
    background:rgba(2,35,50,0.4) !important;}



.catch_box {
    left: 0;
    height: 100%;
    position: relative;
    display: block;
    text-align: left;
    margin: 0 60% 0 0;
}
.catch {
    z-index: 3;
    height: 100% !important;
    mix-blend-mode: screen !important;
    position: absolute;
    opacity: 0.6;
}

.catch02 {
    z-index: 5;
    mix-blend-mode: screen;
    position: absolute;
    top: 50%;
    transform: translate(-7%, -38%);
    width: 120%;}
    
#main_img {
    width: 100%;
    height: 100vh;
    min-height: 800px;
    box-sizing: border-box;
    padding-bottom: 0px;
    position: relative;
    z-index: -1;}
    
#video {
    z-index: -1;
    top: 0;
    left: 0;}
    
.item01 {
    width: 600px;
    margin: 5% 0;}
    
.item02 {
    top: 0;
    right: -10%;
    width: 30%;}
.item03 {
    left: -10%;
    width: 30%;
    bottom: 0%;}
    
section#intro {overflow: hidden;}

element.style {
}
div#intro_txt::before {
    content: '';
    background: #0c72c6;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: -8%;
    z-index: -1;
    transform: skewX(352deg);
}
div#intro_txt {
    background: transparent;
    padding-left: 6%;
}
div#intro_txt::before {
    content: '';
    background: #0c72c6;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: -8%;
    z-index: -1;
    transform: skewX(352deg);
}



/*装飾posi_rel-------------------------------------------------------------------*/
section#contents_links,section#top_cms,.cate_wrap,.cms_wrap.width_max_tb,.v_type2,div#page07 {position: relative;}
section#main_wrap {
    position: relative;
    z-index: 2;
    overflow: hidden;
}
/*装飾posi_rel-------------------------------------------------------------------*/

#contents_links::before {
    content: '';
    background: url(dup/img/item03.png);
    width: 25%;
    height: 14%;
    position: absolute;
    top: -5%;
    right: -8%;
    z-index: 4;
    transform: scale(1,-1) rotate(20deg);
    background-repeat: no-repeat;
}


section#contents_links h4 {
    font-size: 18px;
    border-radius: 0;
    padding: 0 0 4px 0 !important;
    border: solid 0;
    border-bottom: solid 1px;
}

section#contents_links p span {
    background-color: transparent !important;
    padding: 10px 50px 20px !important;
    font-size: 60px;
    background-image: url(dup/img/item02.png);
    background-size: 200px;
    background-position: bottom right;
    background-repeat: no-repeat;}
    
    
#contents_links .box_wrap .box::before {
    content: '';
    position: absolute;
    width: 30%;
    height: 100%;
    background-image: url(dup/img/item04.png);
    z-index: 2;
    background-repeat: no-repeat;
    background-size: cover;
    right: 0;
    top: 0;
    mix-blend-mode: overlay;
    opacity: 0.4;
}


#contents_links .box_wrap .box::after {
    content: '';
    position: absolute;
    width: 30%;
    height: 100%;
    background-image: url(dup/img/item04.png);
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    top: 0;
    transform: scale(-1,-1);
    mix-blend-mode: overlay;
    opacity: 0.4;
}


#contents::before {
    z-index: 2;
    background-image: url(./Dup/img/item05.png);
    background-position: left top;
    background-size: 100% 100%;
    opacity: 0.5;
}


img.item06 {
    width: 45%;
    z-index: 5;
    position: absolute;
    left: 2%;
    top: 50%;
    transform: translate(0px, -50%);
}

#contents div{border:solid 0px;}


#contents div::after {
    content: '';
    background: #0c72c6 !important;
    width: 103%;
    height: 100%;
    position: absolute;
    top: 0;
    right: -1%;
    z-index: -2 !important;
    transform: skewX(352deg);
    opacity: 0.9;
    left: auto !important;}
  
#contents_links::after {
    content: '';
    background: url(dup/img/item02.png);
    width: 25%;
    height: 14%;
    position: absolute;
    bottom: -3%;
    left: -8%;
    z-index: 4;
    transform: scale(1,-1) rotate(20deg);
    background-repeat: no-repeat;
}
  
#contents_links .box_wrap .box a:hover::after {opacity: 0.7;}

span.top_cms_item .top_cms_item03 {
    width: 23%;
    right: -9%;
    position: absolute;
    margin-top: -8%;}

span.top_cms_item .top_cms_item02 {
    width: 23%;
    left: -9%;
    position: absolute;
    margin-top: -8%;
    bottom: 2%;
}

/*main {overflow: hidden;}*/

#intro #intro_box #intro_txt h3 span{font-size:30px !important;}
#intro #intro_box #intro_txt h3::after {
    opacity: 0.15 !important;
    transform: skew(10deg, 10deg);
    font-size: 50px;}
    
#contents div h4 {
    font-size: 26px;
    margin-bottom: 25px;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■TOP■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
h1 img {width: 350px;}

h1::after {
    border-color: #0c72c6 transparent transparent transparent !important;
    border-width: 350px 300px 0 0;
    display: none;}

#loader img {
    display: block;
    width: 350px;
    z-index: 2;}
    
#footer::after {
    background-color: #2671a3 !important;
    opacity: 1 !important;}
    
    
/*entry*/
.fixed_img {
    position: fixed;
    bottom: 78px;
    right: 0px;
    z-index: 6;
    width: 100%;
    max-width: 61px;
    transition: 0.5s;
}

.fixed_img:hover{
    opacity: 0.8;
    transition: 0.5s;
}





/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.cms_wrap.mg_b-20px::before,.cms_wrap.pd_t-50px.pd_b-50px::before {
    content: '';
    background: rgb(217 243 255 / 20%) !important;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -2%;
    right: -1%;
    z-index: -2 !important;
    transform: skewX(356deg);
    opacity: 0.9;
    left: auto !important;
}


.cate_wrap,#cms_2-c,.cms_wrap.width_max_tb,.v_type2_sub,#cms_3-c,div#page07{
    background: rgb(217 243 255 / 20%) !important;
    padding:2%;
    position: relative;
}
.cate_wrap::before, #cms_2-c::before, .cms_wrap.width_max_tb::before, .v_type2_sub::before, div#page07::before {
    content: '';
    background: url(dup/img/item03.png);
    width: 19%;
    height: 15%;
    background-size: 100%;
    position: absolute;
    top: -10%;
    right: -10%;
    z-index: 4;
    transform: scale(1,-1) rotate(20deg);
    background-repeat: no-repeat;
}

.cate_wrap::after, #cms_2-c::after, .cms_wrap.width_max_tb::after, .v_type2_sub::after, div#page07::after {
content: '';
    background: url(dup/img/item02.png);
    width: 19%;
    height: 15%;
    background-size: 100%;
    position: absolute;
    bottom: -2%;
    left: -10%;
    z-index: 4;
    transform: scale(1,-1) rotate(20deg);
    background-repeat: no-repeat;
}


#cms_3-c::before{
    content: '';
    background: url(dup/img/item03.png);
    width: 19%;
    height: 15%;
    background-size: 100%;
    position: absolute;
    top: -14.3%;
    right: 5.7% !important;
    z-index: 4;
    transform: scale(1,-1) rotate(20deg);
    background-repeat: no-repeat;
}

#cms_3-c::after {
    content: '';
    background: url(dup/img/item02.png);
    width: 19%;
    height: 15%;
    background-size: 100%;
    position: absolute;
    bottom: -0.6%;
    left: -25%;
    z-index: 4;
    transform: scale(1,-1) rotate(20deg);
    background-repeat: no-repeat;
}

div#page07 h3 {
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
}

div#page07 p {
    font-size: -webkit-calc(1rem + 3px);
    font-size: calc(1rem + 3px);
}


/*タブレット*/
@media screen and (max-width: 768px){
    ul.pager{justify-content: center !important;}
    #page_title {
        padding-top: 240px;
        padding-bottom: 100px;}
    .cate_wrap::before, #cms_2-c::before, .cms_wrap.width_max_tb::before, .v_type2_sub::before, div#page07::before {
        top: -14%;
        right: -4%;}
    .cate_wrap::after, #cms_2-c::after, .cms_wrap.width_max_tb::after, .v_type2_sub::after, div#page07::after {
        bottom: -1%;
        left: -14%;}
    .v_type2 .cate_box:last-of-type {
        margin-bottom: 40px;}
    #cms_3-c::before {
        top: -14.4%;
        right: 19.7% !important;}
    #cms_3-c::after {
        left: -37%;}
    #main_img {
        height: 50vh;
        min-height: inherit;}
    #video {height: 50vh;}
    h1 img {width: 300px}
    #menu_bt {top: 16px;}
    .catch02 {
        transform: translate(-10%, -44%);
        width: 160%;}
    .item01 {
        width: 500px;
        margin: 2% 0;}
    #intro #intro_box #intro_txt {
        width: 100%;
        transform: translateY(-80px);}
     #intro.on #intro_box #intro_txt {
        position: relative;
        margin-left: 8%;}
    div#intro_txt {
        background: transparent;
        padding-left: 10%;}
    #contents_links::before {
        top: -12%;
        right: -4%;}
    #contents_links::after {
        bottom: -7%;
        left: -8%;}
    img.item06 {
        width: 60%;
        z-index: 5;
        position: absolute;
        left: 52%;
        top: 14%;
        transform: translate(-50%, -50%) rotate(6deg);}
    #contents div {
        width: 90%;
        margin-left: 5%;
        margin-top: 8%;}
    #contents div h4 {
        font-size: 26px;
        margin-bottom: 12px;}
    .cms_wrap.mg_b-20px::before, .cms_wrap.pd_t-50px.pd_b-50px::before {
        transform: skewX(356deg);}
}
/*スマホ*/
@media screen and (max-width: 667px){
    .cate_list li a {padding-left: 30px;}
    .fixed_img {
        position: fixed;
        bottom: 59px;
        right: 0px;
        z-index: 6;
        width: 100%;
        max-width: 40px;
        transition: 0.5s;}
    #main_img {
        height: 50vh;
        min-height: inherit;
        padding-top: 0vh;}
    #video {height: 50vh;}
    h1 img {width: 200px;}
    .catch_box {width: 50% !important;}
    .catch02 {
        transform: translate(-10%, -43%);
        width: 160%;}
    .item01 {
        width: 300px;
        margin: 0% 0;}
    div#intro_txt::before {
        content: '';
        background: #0c72c6;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0%;
        z-index: -1;
        transform: skewX(360deg);}
    #intro.on #intro_box #intro_txt {
        position: relative;
        margin-left: 0%;
        padding: 5%;}
    #intro #intro_box #intro_txt {
        width: 100%;
        transform: translateY(-21px);}
    #intro #intro_box #intro_txt h3 span {
        font-size: 18px !important;}
#intro #intro_box #intro_txt p {
    width: 89% !important;
    font-size: 13px;}
    #intro #intro_box #intro_txt h3::after {
        opacity: 0.15 !important;
        transform: skew(4deg, 4deg);
        font-size: 30px;
        padding-top: 22px;}
    #intro #intro_box #intro_txt h3 span {
        font-size: 18px !important;
        padding-top: 10px;}
    #intro #intro_box #intro_txt h3 {
        padding-top: 12px;
        margin-bottom: 16px;}
    #menu_wrap {
        padding-top: 35px;
        padding-bottom: 20px;}
    #menu_wrap nav ul li a {
        padding-top: 22px;}
    #contents_links::before {
        top: -6%;
        right: -15%;
        width: 46%;
        height: 4%;
        background-size: contain;}
    section#contents_links h4 {font-size: 14px;}
    section#contents_links p span {
        background-color: transparent !important;
        padding: 10px 20px 20px !important;
        font-size: 57px;
        background-image: url(dup/img/item02.png);
        background-size: 200px;
        background-position: bottom right;
        background-repeat: no-repeat;}
    #contents_links::after {
        bottom: -16%;
        left: -4%;
        background-color: transparent !important;
        padding: 10px 20px 20px !important;
        font-size: 57px;
        background-image: url(dup/img/item02.png);
        background-size: 200px;
        background-position: bottom right;
        background-repeat: no-repeat;}
    #contents div::after {
        width: 100%;
        height: 100%;
        top: 0;
        right: 0%;
        transform: skewX(360deg);}
    #contents div h4 {
        font-size: 17px;
        margin-bottom: 10px;}
    img.item06 {
        width: 84%;
        z-index: 5;
        position: absolute;
        left: 50%;
        top: 10%;
        transform: translate(-50%, -50%) rotate(3deg);}
    .cms_wrap.mg_b-20px::before, .cms_wrap.pd_t-50px.pd_b-50px::before {
        transform: skewX(359deg);}
    span.top_cms_item .top_cms_item03 {
        z-index: 2;
        width: 25%;
        right: -9%;
        position: absolute;
        margin-top: -3%;}
    span.top_cms_item .top_cms_item02 { z-index: 1;}
    #footer_box h2 {padding: 0 10px;}
    #loader img { width: 200px;}
    #page_title {
        padding-top: 150px;
        padding-bottom: 60px;}
        
#cms_2-c::before {
    top: -14.5%;
    right: 6%;}
#cms_2-c::after {
    bottom: -0.8%;
    left: -24%;}
#cms_3-c::before {
    top: -14.5%;
    right: 57.7% !important;}
#cms_3-c::after {
    left: -76%;
    bottom: -0.5%;}
div#page07::before{right: 0%;}
div#page07::after {
    bottom: -1%;
    left: -22%;
}
}