@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500&display=swap');

/* color-------------------------------------------------------------------- */
body{color:#4b655a;
    background-color:#fffff8;}

.txt_color_nomal {color: #4b655a;}
.txt_color1,.hvr_txt_color1:hover{color: #ff7f00} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #fca306} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #0fa363} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #87c023} /* アクセントカラー2 */
/* background-color */
.bg_color1,.hvr_bg_color1:hover{background-color: #ff7f00} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #fca306} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #0fa363} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #87c023} /* アクセントカラー2 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #ff7f00}
.border_color2,.hvr_border_color2:hover{border-color: #fca306}
.border_color3,.hvr_border_color3:hover{border-color: #0fa363}
.border_color4,.hvr_border_color4:hover{border-color: #87c023}

.button:hover::after { box-shadow: inset 0 0 0 15em #ff7f00 !important;}
.button2:hover { box-shadow: 0 0 20px #fca306 inset;}
.txt_shadow-b { text-shadow: 0 5px 10px #fca306 inset;}
header{background:#fffede !important;}
#main_menu ul li a:hover {color: #0fa363;}



/*linkStyle*/
a.linkStyle {
    color: #ff7f00;
    transition: 0.5s;
}
a.linkStyle:hover {
    color: #ff7f00;
}
#main_menu ul li a,.contact_bt a, .tel_bt a { color: #4b655a;}
.contact_bt a, .tel_bt a {
    color: #0fa363;
    border-color: #0fa363}
#main_menu ul li a::before{background-color: #0fa363;}
.contact_bt a:hover, .tel_bt a:hover {border-color: #ff7f00;}


.free_bt a { color: #fffff8;
            background:#0fa363;
            border-color:#0fa363;
            z-index: 2;}
.free_bt a:hover {border-color: #0fa363;
                  z-index: 0;}
.free_bt_a:hover::after { box-shadow: inset 0 0 0 15em #ff7f00 !important;}



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


/* font---------------------------------------------------------------------*/

.font_14 {font-size: 15px;}
.txt2, .txt4, .txt5, .txt7,.txt4_a {font-weight: 700;}
.box_title1{font-weight:600;}

body{font-family:'Zen Kaku Gothic Antique','Zen Maru Gothic','Zen Kaku Gothic Antique',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}
.font_en,#main_menu ul li a,h1,h2,h3,h4,h5,h6,#cms_2-c .box_txt1,.cate_title,.topcms_about_type1 .number::before,.topcms_about_type1 p{
    font-family: 'Zen Maru Gothic','Zen Kaku Gothic Antique',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}

/* font---------------------------------------------------------------------*/

/*border-radius----------------------------------------------------------------*/
.normal_img img, .rectangle_img, square_img,.box_wrap, ul.pager li a,section#page10 ul li a,#contact_mail a,#contact_tel a { border-radius: 5px;}
ul.cate_list li a,.contact_bt a,.more a,.foot_tel_bt a,.free_bt a{border-radius: 5px;}
/*border-radius----------------------------------------------------------------*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*装飾に便利なposi_rel*/
#contents_box {position: relative;}
.con1_outer, .con2_outer, .con3_outer {position: relative;}
.img5, .img6, .img7 {position: relative;}
/*装飾に便利なposi_rel*/

/*装飾に便利な疑似クラス設定*/
#main_img::before, #main_img::after, #contents_box::before, .con1_outer::after, #attach::before, .con2_outer::before, #page_title .title_img::after,article .width_1280-max::before,div#contents1::before,div#contents1::after,div#contents3::before {
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}
.img5::before, .img6::before, .img7::before {
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;}
/*装飾に便利な疑似クラス設定*/

div#main_img::before {
    content: '';
    background: url(dup/img/catch.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 45vw;
    height: 38vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-57%, -60%);
    z-index: 5;}

#contents1 h2{text-align: center;}

div#contents1::before {
    width: 40vw;
    height: 47vh;
    background-size: contain;
    background-image: url(./Dup/img/item02.png);
    background-position: top left;
    left: 0%;
    top: 0%;
    z-index: -1 !important;
}

div#contents1::after {
    width: 24vw;
    height: 64vh;
    background-size: contain;
    background-image: url(./Dup/img/item03.png);
    background-position: top left;
    right: 0%;
    top: 20%;
    z-index: -1 !important;
}

#attach {
    width: 100%;
    height: 300px;
    position: relative;}



.con2_outer::before {
    width: 100%;
    height: 48px;
    background-image: url(./Dup/img/item04.png);
    background-repeat: no-repeat;
    background-size: cover;
    top: -48px;
    left: 0;
}



.img5::before {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-image: url(./Dup/img/item11.png);
    background-position: top left;
    right: 0;
    top: 0%;
    z-index: -1 !important;
    transform: translate(32%, -26%) rotate(197deg);}

.img6::before {
    width: 64%;
    height: 78%;
    background-size: contain;
    background-image: url(./Dup/img/item10_a.png);
    background-position: top left;
    left: 0%;
    top: 0%;
    z-index: -1 !important;
    transform: translate(-68%, 44%) rotate(227deg);}

div#contents2 {overflow: hidden;}

#contents3::before {
    width: 100%;
    height: 48px;
    background-image: url(./Dup/img/item04.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: -48px;
    left: 0;
    transform: scale(-1,-1);
}

/*■■■■■■■■■■■■■■■■■■■■■top_コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■*/
.topcms_about_type1 {counter-reset: box 0;padding-top: 35px;}
.topcms_about_type1 .cate_box {
    width: 19.3%!important;
    padding: 35px 5px 20px;
    background-color: #fffede;
    border-radius: 10px;
    box-sizing: border-box;
}
.topcms_about_type1 .number {
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 90px;
}
.topcms_about_type1 .number::before {
    counter-increment: box 1;
    content: "0"counter(box);
    font-size: 53px;
    line-height: 1;
    text-align: center;
    color: #fca306;
    display: inline-block;
    position: absolute;
    right: 0;
    left: 0;
    top: -31px;
    margin: auto;
    z-index: 0;
}

.topcms_about_type1 .cate_box .box_title1 {
    font-size: 15px;
    line-height: 1.6;
    z-index: 1;}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_about_type1 .cate_box {
    margin: 80px auto 0px;
    width: 47%!important;
}
.topcms_about_type1 .cate_box:last-of-type {
	margin-bottom: 0;
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.topcms_about_type1 .cate_box {
    width: 100%!important;
    padding: 50px 25px 25px;
}
.topcms_about_type1 .number::before{
	font-size: 59px;
	top: -34px;
}
.topcms_about_type1 .number::after{
	width: 72%;
}
}
/*■■■■■■■■■■■■■■■■■■■■■top_コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■*/


/*■■■■■■■■■■■■■■■■■■■■■top_cms■■■■■■■■■■■■■■■■■■■■■■■■*/

.top_cms_bg {
    background: url(dup/img/bg_img.jpg);
    background-size: 70%;
    background-attachment: fixed;}

.cms_wrap { background: #fffff8;
            padding: 30px 20px;
            border-radius: 15px;}

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

.icon{width:25px;}
#main_menu ul li a {
    text-align: left;
    font-size: 17px;
    font-weight: 600;}
#main_menu ul li a::before{content:none;}
nav#main_menu {margin: 50px 6%;}
header #logo {padding: 0 10px;}
footer.border_so1-t {border-top: dotted 4px #87c023;}

h2.logo img {max-width: 250px !important;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.page_box p {border-bottom: dotted 2px;}
.page_box h2, .page_box p {font-weight: bold;}
ul.cate_list a {color: #fffff8 !important;}


#cms_2-a,#cms_2-b,#cms_1-f,#cms_6-a,#cms_3-b,#page7,#page8,#page9{
    background: #fffede;
    padding: 5%;
    position: relative;
    border-radius: 5px;
}

#cms_2-b .cate_box {
    border: solid 0px !important;
    border-radius: 10px;
    background: #fffff8 !important;
}    

#cms_2-b .box_title1{border-bottom:dotted 2px;}

/*丸み・やさしさ*/
    
section#cms_3-b .cate_box {
    border:solid 1px ;
    border-radius: 15px;}

/*【背景色のみ】*/
section#cms_3-b .cate_box {
    background:  #fffff8;
    border-radius: 5px;
    border: solid 0;}

section#page9 h3 {font-weight: bold;}
#page10 a{color:#fffff8;}

.page_box::before {
    width: 15vw;
    height: 29vh;
    background-size: contain;
    background-image: url(./Dup/img/item11.png);
    background-position: top left;
    right: 0;
    top: 0%;
    z-index: 1 !important;
    transform: translate(31%, -31%);
    content: '';
    position: absolute;
    background-repeat: no-repeat;
}

article.page_wrap::before {
    width: 17vw;
    height: 31vh;
    background-size: contain;
    background-image: url(./Dup/img/item10_a.png);
    background-position: top left;
    left: 0;
    bottom: 0%;
    z-index: -1 !important;
    transform: translate(-12%, 10%) rotate(208deg);
    content: '';
    position: absolute;
    background-repeat: no-repeat;
}

.page_box.txt_center,article.page_wrap {position: relative;}
.main_box {overflow: hidden;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/



/*タブレット*/
@media screen and (max-width: 768px){
    .fat-nav__wrapper ul{background:#fffff8;}
    .fat-nav li a {
        font-weight: 600;
        font-size: 20px;}
        
    header .head_banner { width: auto;}
    
    div#main_img::before {
        content: '';
        background: url(dup/img/catch.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 57vw;
        height: 19vh;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-59%, -47%);
        z-index: 5;}    
        
    h2.txt2 {font-size: 25px;}        
    
    div#contents1::after {
        width: 38vw;
        height: 40vh;
        background-size: contain;
        background-image: url(./Dup/img/item03.png);
        background-position: top left;
        right: 0%;
        top: 43%;
        z-index: -1 !important;}    
        

    .img5::before {
        z-index: -1 !important;
        transform: translate(35%, -14%) rotate(197deg);}        
        
    .img6::before {
        width: 64%;
        height: 78%;
        top: -50%;
        transform: translate(-59%, 44%) rotate(227deg);}
    
    #contents3 .grid_6 {margin-top: 50px;}    
    #contents3 h2.txt4_a {margin-bottom: -45px;}   
    .cms_title h2 {font-size: 27px;}
    
    .page_box::before {
        width: 23vw;
        height: 17vh;}
        
    article.page_wrap::before {
        width: 27vw;
        height: 39vh;
        transform: translate(0%, 4%) rotate(208deg);}
}
/*スマホ*/
@media screen and (max-width: 667px){
    div#main_img::before{content:none;}
    
    .catch_sp {
        width: 320px;
        text-align: center;
        margin: 0 auto;
        position: relative;
        left: 50%;
        transform: translate(-50%, -60px);
        z-index: 5;}    
    
    h2.txt2 {
        font-size: 20px;
        margin: 21px 0;}
        
    div#contents1::after {
        width: 49vw;
        height: 45vh;
        right: 0%;
        top: 80%;}
    
    .con_no {padding-bottom: 20px;}
    
    #contents2 {padding: 50px 10% 50px;}
    
    .fat-nav li a {
        font-weight: 600;
        font-size: 14px;}
    
    .page_box::before {
        width: 29vw !important;
        height: 18vh;}
        
    article.page_wrap::before {
        width: 32vw;
        height: 39vh;
        transform: translate(0%, -11%) rotate(208deg);}
}















/*20220603*/

/* color-------------------------------------------------------------------- */
body{color:#002954;
    background-color:#ffffff;}

.txt_color_nomal {color: #002954;}
.txt_color1,.hvr_txt_color1:hover{color: #D190DC} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #A757A8} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #e85283} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #9ed8f7} /* アクセントカラー2 */
/* background-color */
.bg_color1,.hvr_bg_color1:hover{background-color: #D190DC} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #A757A8} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #e85283} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #9ed8f7} /* アクセントカラー2 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #D190DC}
.border_color2,.hvr_border_color2:hover{border-color: #A757A8}
.border_color3,.hvr_border_color3:hover{border-color: #e85283}
.border_color4,.hvr_border_color4:hover{border-color: #9ed8f7}

.button:hover::after { box-shadow: inset 0 0 0 15em #D190DC !important;}
.button2:hover { box-shadow: 0 0 20px #A757A8 inset;}
.txt_shadow-b { text-shadow: 0 5px 10px #A757A8 inset;}
/*header{background:#fbffff !important;}*/

header {
    background: #fbffff !important;
    border-right: solid 1px rgb(232 82 131 / 20%);}

#main_menu ul li a:hover {color: #e85283;}



/*linkStyle*/
a.linkStyle {
    color: #D190DC;
    transition: 0.5s;
}
a.linkStyle:hover {
    color: #D190DC;
}
#main_menu ul li a,.contact_bt a, .tel_bt a { color: #002954;}
.contact_bt a, .tel_bt a {
    color: #e85283;
    border-color: #e85283}
#main_menu ul li a::before{background-color: #e85283;}
.contact_bt a:hover, .tel_bt a:hover {border-color: #D190DC;}


.free_bt a { color: #ffffff;
            background:#e85283;
            border-color:#e85283;
            z-index: 2;}
.free_bt a:hover {border-color: #e852833;
                  z-index: 0;}
.free_bt_a:hover::after { box-shadow: inset 0 0 0 15em #D190DC !important;}

/*■■■■■■■■■■■■■■■■■■■■■top_コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■*/
.topcms_about_type1 .cate_box {background-color: #f7fff8;}
.topcms_about_type1 .number::before {color: #A757A8;}
/*■■■■■■■■■■■■■■■■■■■■■top_コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■■■■■■■■■■■top_cms■■■■■■■■■■■■■■■■■■■■■■■■*/
.top_cms_bg {
    background: url(dup/img/bg_img.jpg);
    background-size: 70%;
    background-attachment: fixed;}
.cms_wrap { background: #ffffff;}
/*■■■■■■■■■■■■■■■■■■■■■top_cms■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
footer.border_so1-t {border-top: dotted 4px #9ed8f7;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
ul.cate_list a {color: #ffffff !important;}
#cms_2-a,#cms_2-b,#cms_1-f,#cms_6-a,#cms_3-b,#page7,#page8,#page9{background: #ffffff;}
#cms_2-b .cate_box { background: #f5fbff !important;}
/*【背景色のみ】*/
section#cms_3-b .cate_box {background:  #f5fbff}
#page10 a{color:#ffffff;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*タブレット*/
@media screen and (max-width: 768px){
    .fat-nav__wrapper ul{background:#fffff8;}}
/* color-------------------------------------------------------------------- */

div#contents1::before, div#contents1::after {opacity: 0.35;}


.top_cms_bg {
    background: none;
    background-size: 70%;
    background-attachment: fixed;
    background: #f5fdff !important;
}

#cms_2-a, #cms_2-b, #cms_1-a, #cms_6-a, #cms_3-b, #page7, #page8, #page9 {
    background: #fffdff !important;
    border: dotted 2px #ff89c0;
}

.pager li a {color: #fff;}