/*■■■■■■コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.qa_type5 .faq_no {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    top: -10px;
    left: 0;
	-webkit-background-clip: padding-box; 
	-moz-background-clip: padding; 
	background-clip: padding-box;
}
.qa_type5 .box_title1, .qa_type5 .box_txt1 {padding-left: 70px;line-height: 1.7;}
/*■■■■■■コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* コンテンツ増やす---------------------------------------------------------------------------------------------*/
#contents2 .con_box1::before{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none}
#contents2 .con_wrap{right: -10px}
#contents2.trans .con_wrap{
	opacity: 1;
	right: 0;}
#contents2 .con_bg{
	top: 0;
	right: 0}
#contents2 .con_img{
	top: 100px;
	bottom: 100px;
	left: 0}
#contents2 .con_box1::before{
	width: 40px;
	height: 1px;
	left: 0;
	bottom: 0;
	background-color: #fff}

/*タブレット*/
@media screen and (max-width: 768px){
#contents2 .con_wrap{right: 0;opacity: 1}
#contents2 .con_img{
	height: 60vw;
	top: auto;
	bottom: auto}
}

#contents .con_box1::before,#contents2 .con_box1::before{display:none;}
#contents .con_box1,#contents2 .con_box1{padding: 0;
                                         margin:0;}
/* コンテンツ増やす---------------------------------------------------------------------------------------------*/



/* color ---------------------------------------------------------------------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #5d4e3f;}
.txt_color1,.hvr_txt_color1:hover{color: #f1c547} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #fcf8ee} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #f1dd7c} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #24e5ea} /* アクセントカラー2 */
/*background-color */
.bg_black,.hvr_bg_black:hover{background-color: #5d4e3f} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #f1c547} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #fcf8ee} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #f1dd7c} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #24e5ea} /* アクセントカラー2 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #ffbe08 !important}
.border_color2,.hvr_border_color2:hover{border-color: #fcf8ee !important}
.border_color3,.hvr_border_color3:hover{border-color: #f1dd7c !important}
.border_color4,.hvr_border_color4:hover{border-color: #24e5ea !important}

div#pp-nav {
    background: #fff;
    border-radius: 3px;}
    
/*linkStyle*/
a.linkStyle {
    color: #5d4e3f;
    border-bottom:solid 1px;
    transition: 0.5s;
}
a.linkStyle:hover {
    color:#5d4e3f;
}

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


body { font-family: 'Zen Kaku Gothic New',"Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;}
html, body {font-size: 15px;}
.font_bar,.cms_title{
    font-family: 'Nunito','Barlow','Zen Kaku Gothic New', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* con ---------------------------------------------------------------------------------------------*/
.intro_img1 {
    width: calc(100% - 20px) !important;
    height: calc(50% - 30px) !important;}
    
.intro_img2{
    width: calc(50% - 20px)!important;
    margin-right: 20px;}
    
.intro_img3{ width: calc(50% - 20px) !important;}

img.main_img {
    width: 75%;
    height: auto;}

img.catch {
    width: 40%;
    bottom: 45%;
    left: 10%;}

@media screen and (max-width: 1700px){
img.main_img {
    width: 80%;
    height: auto;}
img.catch {
    width: 40%;
    bottom: 45%;
    left: 6%;}}

@media screen and (max-width: 1600px){
img.main_img {
    width: 90%;
    height: auto;}
img.catch {
    width: 40%;
    bottom: 45%;
    left: 3%;}}
    



#contents p.con_no {
    background: url(dup/img/num01.png);
    background-size: contain;
    width: 100%;
    height: 283px;
    background-repeat: no-repeat;
    max-width: 300px;
    margin: 0 auto;
    transform: translate(-13%, -15%);
    font-size: 0px;
}

h1#logo img {width: 250px;}
h1#logo {margin-bottom: 70px;}

#intro .intro_left {
    background-image: url(./Dup/img/item01.png);
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;}

#contents .con_txt,#contents2 .con_txt {font-size: 17px;}

#contents .txt_img1 img, #contents2 .txt_img1 img {
    width: 10%;
    padding-bottom:11px !important;
}

#contents .con_bg,#contents2 .con_bg{z-index: -1;}


.con_img::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 2%;
    top: 2%;
    z-index: -1;
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 0);
    background-image: repeating-linear-gradient(140deg, transparent, transparent 11px, rgba(240, 230, 140, 1) 11px, rgba(240, 230, 140, 1) 14px );
    pointer-events: none;
}


#top_cms {
    background-color: #fcf8ee;
    background-image: url(./Dup/img/item03.png),url(./Dup/img/item04.png);
    background-size: contain;
    background-repeat: repeat-y;
    background-position: top left 0% ,top right 5px;}

.cms_wrap,.qa_type5 {
    background: #fff;
    padding: 50px;}
.cms_title {margin-bottom: 50px;}
.swiper-button-prev, .swiper-button-next {padding: 0 50px;}

.intro_img{width:80%;}

@media screen and (max-width: 1600px){
    .intro_img{width:100%;}}
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.width_1000-min.width_max_tb{
    background-image: url(./Dup/img/item03.png),url(./Dup/img/item04.png);
    background-size: 3%;
    background-repeat: repeat-y;
    background-position: top left 0% ,top right 0px;}

#cms_2-a .cate {margin-bottom: 100px;}
#cms_2-a{counter-reset: num;}
#cms_2-a h3.cate_title:first-letter {
    color: #ffbe08;
    font-size: 27px;
    font-weight: bold;
    padding-right: 1px;
}
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*entry*/

header .nav_bg {z-index: 14;}

#menu_stick {    z-index: 50;}
#pc_nav {z-index: 15;}

.fixed_img {
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 8;
    width: 280px;
    transition: 0.5s;
}
.fixed_img:hover{
    opacity: 0.8;
    transition: 0.5s;
}

/*IE*/
@media all and (-ms-high-contrast: none){
    .qa_type5 .faq_no {line-height: 46px !important;}
    .cate_list a {padding-top: 0px !important;}
    #cms_6-a .cate .cate_title {padding-top: 10px !important;}
    #cms_2-d .cate .cate_title {padding-top: 8px !important;}
    #page09 a {padding-top: 0px !important;}

}


/*タブレット*/
@media screen and (max-width: 768px){
img.main_img {
    width: auto;
    height: 89%;
    left: 67%;
}
.custom_wrap {
    position: relative;
    overflow: hidden;
}
img.catch {
    width: 60%;
    bottom: 52%;
    left: 5%;}
#contents .con_bg, #contents2 .con_bg {z-index: 0;}
#contents2 .con_img {
    display: none;
    height: 0;
    top: 0;
    bottom: auto;
    opacity: 0;}
#contents .con_img {
    height: 60vw;
    top: auto;
    bottom: auto;
    z-index: 2;}
#contents2 .d_flex{height: 100% !important;}

.con_img::before {
    width: 98%;
    height: 5%;
    left: 2%;
    top: auto;
    bottom: -3%;
    z-index: 0;
    pointer-events: none;    
}

#top_cms {
    background-color: #fcf8ee;
    background-image: url(./Dup/img/item03.png),url(./Dup/img/item04.png);
    background-size: 3%;
    background-repeat: repeat-y;
    background-position: top left 0% ,top right 0px;}
    
.cms_box:last-of-type {
    margin-bottom: 0;
    padding-bottom: 100px;
    border-bottom: solid 2px #f0e68b;}
    
footer .grid_12_tb {padding-top: 0px;}
.cms_wrap,.qa_type5 {
    background: #fff;
    padding: 30px 20px;}
div#logo2 {width: 250px;}

.swiper-button-prev, .swiper-button-next {padding: 0px 20px;}

.intro_img2 {
    width: calc(50% - 15px)!important;
    margin-right: 10px;}
.intro_img3 {width: calc(50% - 15px) !important;}
.intro_img1 {
    width: calc(100% - 20px) !important;
    height: calc(50% - 20px) !important;}
#contents .con_wrap {border-top: solid 5px #fff;}
}


/*スマホ*/
@media screen and (max-width: 667px){
    
.fixed_img {
    position: fixed;
    bottom: -2px;
    left: -1px;
    z-index: 8;
    width: 200px;
    transition: 0.5s;}
    

    img.main_img {
        width: auto;
        height: 88%;
        left: 70%;}
    img.catch {
        width: 70%;
        bottom: 53%;
        left: 3%;}
    html, body {font-size: 13px;}
    #contents .con_txt, #contents2 .con_txt {font-size: 13px;}
    #contents .txt_img1 img, #contents2 .txt_img1 img {
        width: 18%;
        padding-bottom: 14px !important;
        margin: 0 auto;
        display: inherit;}
    #contents .con_title, #contents2 .con_title {
        text-align: center;
        font-size: 19px;}
    #contents .con_wrap, #contents2 .con_wrap {
        padding-top: 80px;
        padding-bottom: 80px;}
    .cms_wrap, .qa_type5 {
        background: #fff;
        padding: 20px 10px;}
    .swiper-button-prev, .swiper-button-next {
        padding: 0px 0px;}
    #top_cms,.width_1000-min.width_max_tb{ background-size: 4%;}
    footer .grid_12_tb {padding-top: 50px;}
    #cms_2-a h3.cate_title:first-letter {font-size: 20px;}
}





/*20220328*/


img.main_img {
    width: 90%;
    height: auto;
    left: auto;
    right: 0% !important;
    transform: translate(0%,-0%) !important;
    top: 0;
}


.fixed_img {
    position: fixed;
    bottom: 10px;
    left: auto;
    right: 10px;
    z-index: 8;
    width: 280px;
    transition: 0.5s;
}

img.catch {
    width: 51%;
    bottom: 5%;
    left: 3%;
}



#custom .custom_wrap{
    /*min-height: 730px;*/
}
/*#custom .custom_wrap::before{*/
/*    position: absolute;*/
/*    content: "";*/
/*    width: 800px;*/
/*    height: 800px;*/
/*    background-image: linear-gradient(to bottom, #ffa500, #ff6c22);*/
/*    border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;*/
/*    animation: anime1 20s linear infinite;*/
/*    left: -200px;*/
/*    bottom: -300px;*/
/*}*/

#custom .custom_wrap::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(dup/img/main_img_02.jpg);
    left: 0;
    bottom: 0;
    pointer-events: none;
}

#custom .custom_wrap::after{
    position: absolute;
    content: "";
    width: 300px;
    height: 300px;
    right: 50px;
    bottom: 0;
    z-index: 1;
    background-image: url('./Dup/img/bg_img2.png');
    background-size: contain;
    pointer-events: none;
}
#custom .main_logo{
    position: relative;
    z-index: 2;
}
#custom .main_logo::before {
    position: absolute;
    content: "";
    width: 600px;
    height: 600px;
    background-color: #fff;
    opacity: 0.8;
    transform: skew(5deg, 348deg);
    left: -200px;
    top: -350px;
    border-radius: 1%;
    z-index: -1;
    pointer-events: none;    
}
#custom #main_img {
    border-bottom-left-radius: 0px;
    border-left: solid 6px #f1c547;
    border-bottom: solid 6px #f1c547;
    z-index: 1;
    box-sizing: border-box;
}

#custom .main_title {
    left: 31px;
    bottom: 99px;
    z-index: 2;
}

#custom .custom_wrap {
    /*min-height: 730px;*/
    /*height: 100% !important;*/
}

/*div#main_img::after {*/
/*    content: '';*/
/*    background-image: url(dup/img/item_a.png);*/
/*    position: absolute;*/
/*    width: 16%;*/
/*    height: 60%;*/
/*    z-index: 0;*/
/*    background-size: cover;*/
/*    right: 0;*/
/*    background-repeat: no-repeat;*/
/*    top: 0;*/
/*}*/

.intro_img {
    width: 100%;
    padding-top: 50px;
}

#contents .con_title,#contents2 .con_title{
    text-shadow: 2px 1px 1px #3b5ba3 !important;
}

section#contents::before, section#contents2::before {
    content: '';
    background-image: url(dup/img/item_a.png);
    position: absolute;
    width: 12%;
    height: 45%;
    z-index: 0;
    background-size: cover;
    right: 0;
    background-repeat: no-repeat;
    top: 0;
    pointer-events: none;    
}



/*タブレット*/
@media screen and (max-width: 768px){
#custom #main_img {
    border-bottom-left-radius: 0px;
    border-left: solid 6px #f1c547;
    border-bottom: solid 6px #f1c547;
    z-index: 1;
    box-sizing: border-box;
    height: 60vw!important;
    min-height: inherit;
    margin-left: auto;
    width: calc(100% - 90px)!important;
    /*border-radius: 50px 0 0 50px;*/
    border-top: solid 3px #f1c547;
}


#custom .main_logo::before {
    position: absolute;
    content: "";
    width: 400px;
    height: 400px;
    background-color: #fff;
    opacity: 0;
    transform: skew(13deg, 348deg);
    left: -87px;
    top: -204px;
    border-radius: 1%;
    z-index: -4;
    pointer-events: none;    
}

#custom .main_logo {
    position: relative;
    z-index: 2;
    max-width: 200px !important;
}

.main_left {
    margin-bottom: 20px;
}

#custom .main_title {
    left: 18px;
    bottom: 112px;
    z-index: 2;
}

#custom .custom_wrap::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(dup/img/main_img_02.jpg);
    left: 0;
    bottom: 0;
    background-size: cover;
    pointer-events: none;    
}


section#contents::before, section#contents2::before{display:none !important;}

section#contents .con_wrap::before{
    content: '';
    background-image: url(dup/img/item_a.png);
    position: absolute;
    width: 23%;
    height: 61%;
    z-index: 0;
    background-size: contain;
    right: 0;
    background-repeat: no-repeat;
    top: 0;
    pointer-events: none;    
}

.bg_color_clear_tb{background:transparent !important;}

}

/*スマホ*/
@media screen and (max-width: 667px){
#custom #main_img {
    border-left: solid 3px #f1c547;
    border-bottom: solid 3px #f1c547;
    border-top: solid 3px #f1c547;
    height: 100vw!important;
    min-height: auto;
    margin-left: auto;
    width: calc(100% - 20px)!important;
}

#custom .main_logo {
    position: relative;
    z-index: 2;
    max-width: 120px !important;
}

.main_left {
    margin-bottom: -119px;
    padding-top: 40px;
}

#custom .main_title {
    left: 0px;
    bottom: 183px;
    z-index: 2;
}
}




/*20220427*/
#custom .custom_wrap {
    /*min-height: 730px;*/
    height: 100% !important;
    padding: 0;
}

#custom .main_title {
    left: 27px;
    bottom: 49px;
    z-index: 2;
    width: 53% !important;
}

#custom #main_img {
    border: solid 0;
}

/*タブレット*/
@media screen and (max-width: 768px){
#custom #main_img {width: calc(100% - 0px)!important;}  
/*#custom .custom_wrap {*/
/*    min-height: 53vh;*/
/*    height: 100% !important;}*/
/*section#custom {height: 53vh !important;}    */
#custom .main_title {
    left: 24px;
    bottom: 34px;
    z-index: 2;
    width: 53% !important;}
}


/*スマホ*/
@media screen and (max-width: 667px){
/*#custom #main_img {*/
/*    height: 36vh!important;}*/
    
/*#custom .custom_wrap {*/
/*    min-height: 36vh;*/
/*    height: 36vh !important;}  */

/*section#custom {height: 36vh !important;}  */

#custom .main_title {
    left: 9px;
    bottom: 14px;
    z-index: 2;
    width: 59% !important;}
.intro_img {
    width: 100%;
    padding-top: 0px;}
}


/*20230704----------------------------------------------------------------------*/
.fixed_img {
    position: fixed;
    bottom: 10px;
    left: auto;
    right: 10px;
    z-index: 5;
    width: 280px;
    transition: 0.5s;
}



video.video.posi_center {
    height: 101% !important;
    width: 100% !important;
    object-fit: contain;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#custom #main_img {
    width: 100% !important;
    height: 100vh;
}

section#custom {
    height: auto !important;
}

#custom .custom_wrap {
    /* min-height: 730px; */
    height: auto !important;}






/*タブレット*/
@media screen and (max-width: 768px){
video.video.posi_center {
    width: 100% !important;
}   

#custom #main_img {
    height: 56vw!important;
}


}

/*スマホ*/
@media screen and (max-width: 667px){
video.video.posi_center {
    /*height: 32vh !important;*/
    width: 100% !important;
}   

section#custom {
    /*height: 32vh !important;*/
    width: auto !important;
}

.custom_wrap  {
    /*min-height: 32vh !important;*/
}  

#custom #main_img {
    width: 100% !important;
    /*height: 32vh !important;*/
}
}