/*font-------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');

body{
    font-family: 'Zen Kaku Gothic New',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.con1_title h2, .con2_title h2, .con3_title h2, .page_title_box,h2,h3,h4,h5,h6{
    font-family: 'Kiwi Maru','Zen Kaku Gothic New', 'Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

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

/* よくある質問 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.qa_type3 .con_no{
	left: 20px;
	top: 15px
}
.qa_type3 .cate_box .box_title1, .qa_type3 .cate_box .box_txt1{
	min-height: 1.5em
}
.qa_type3 .box_q{
	background-image: url(./Dup/img/icon_q.png);
	background-repeat: no-repeat;
	background-position: top 2px left;
	background-size: 60px
}
.qa_type3 .box_a{
	background-image: url(./Dup/img/icon_a.png);
	background-repeat: no-repeat;
	background-position: top 2px right;
	background-size: 60px
}
.qa_type3 .box_q, .qa_type3 .box_a{
	padding: 0 90px
}
.qa_type3 .box_q .box_title1::before, .qa_type3 .box_a .box_txt1::before{
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(0, 0, 0, 0);
}
.qa_type3 .box_q .box_title1::before{
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 10px;
    border-right-width: 15px;
    margin-top: -10px;
    border-right-color: #f39800;
    right: 100%;
    top: 34px;
}
.qa_type3 .box_a .box_txt1::before{
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 15px;
    border-right-width: 10px;
    margin-top: -10px;
    border-left-color: #fff3e9;
    left: 100%;
    top: 35px;
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.qa_type3 .box_q{
	padding-right: 0
}
.qa_type3 .box_a{
	padding-left: 0
}
.qa_type3 .con_no{
    top: 13px;
}
}

/* よくある質問 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

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

/*linkStyle*/
a.linkStyle {
    color:#f39800;
    border-bottom:solid 1px;
    transition: 0.5s;}
a.linkStyle:hover {
    color:#f2af4c;    
    border-bottom:solid 1px;}
    
body, .txt_color_nomal {color: #726452;}
body#body {background:#fff9f5;}
#top_cms .top_cms_bg {background-color: #fff3e9;}
/* color ----------------------------------------------------------------------*/

.normal_img img, .rectangle_img, .square_img {
    border-radius: 10px;
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}

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

h1#logo {
    text-align: center;
    margin-bottom: 50px;}
h1#logo .width_150-max {max-width: 250px;}

.top_header {
    padding-left: 0px;
    width: 27.3333% !important;}
    
#main_img {width: 72.6667% !important;}

#main_img {
    z-index: 0;
    overflow: hidden;
    position: relative;
    max-height: 100vh;
    min-height: inherit;
    background: url(dup/img/bg_img.jpg);    
}

.main_img {
    object-fit: cover;
    height: 95vh;
    width: 95% !important;
    border-radius: 15px;
}

img.catch {
    width: 28vw !important;
    height: auto !important;
    top: 50% !important;
    left: 0%;
    transform: translate(25%, -75%);
}

img.item01 {
    width: 25vw;
    padding-top: 30px;}
    
#contents1 .con1_right {
    background-image: url(./Dup/img/item02.png), url(./Dup/img/item03.png);
    background-repeat: no-repeat;
    background-size: 300px, 400px;
    background-position: top left, bottom -20px right -93px;
}

#contents2 .con2_wrap {
    position: relative;
    background-image: url(./Dup/img/item04.png);
    background-repeat: no-repeat;
    background-size: 190px;
    background-position: bottom left;
}

.contents_wrap .contents_bg{
    background-image: url('./Dup/img/bg_img03.png');
    background-attachment: fixed;
    animation: anime1 30s linear infinite;
    font-size: 16px;
    letter-spacing: 2px;
}
@keyframes anime1 {
    0% {
        background-position-y: 0;
    }
    100% {
        background-position-y: -2000px;
    }
}
    
#pc_nav {
    text-align: center;
    padding: 0;}
.nav_con a {
    border-color: #f39800 !important;
    color: #f39800 !important;
}

span.filter,.main_filter {background-color: #fff3e9;}

article#top_cms::before {
    content: '';
    position: absolute;
    background-image: url(./Dup/img/item04.png);
    background-repeat: no-repeat;
    background-size: 205px;
    bottom: 0;
    right: 0;
    width: 16vw;
    height: 27vh;
    transform: scale(-1,1);}

.cms_title h2 {
    color: #726452;
    font-size: -webkit-calc(1rem + 16px);
    font-size: calc(1rem + 16px);}
    
main.top_main {background: transparent;}

.cms_title p {
    font-size: 16px;
    font-weight: bold;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.normal_img img, .rectangle_img, .square_img {
    border-radius: 10px;
    box-shadow: 0 5px 10px rgb(203 153 111 / 10%);}

.more a{border-radius:50px;
        padding:15px;}
    
.head_banner{
    width: 80px;
    top: 0;
    right: 80px;
    z-index: 10;}

header .menu_stick {position: fixed;}
#footer .footer_bottom {background-color: #fff3e9;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.cms_6-c .cate_box{width: 46%!important;}
.cms_6-c {padding-left: 0;}
section.cms_box {margin-bottom: 50px;}
.cms_wrap {padding-top: 70px;}
.footer_right {background: #fff3e9;}
.pager li a {background-color: #fff3e9;}
header .trans_logo {
    background: #fff;
    padding: 5px 50px !important;}
header .trans_logo a img {max-width: 90px;}

div#wrap {overflow: hidden;}
.cms_wrap.cate_wrap {position: relative;}
main {
    background-image: url(./Dup/img/item02.png), url(./Dup/img/item03.png);
    background-repeat: no-repeat;
    background-size: 300px, 357px;
    background-position: top left, bottom -58px right -93px;
}

#cms_6-c .circle, #cms_6-c .arrow {display:none;}
#cms_6-c .cate_box {margin-bottom:50px;
                    border-radius:0px 0px 5px 5px ;}
#cms_6-c h3.box_title {border-bottom: dotted 1px #f39800;}

#page07 p {background-color: #fff3e9;}

.page_box.txt_center, article.page_wrap {
    position: relative;
    padding: 100px 10%;}

#page09 .privacy_top {background-color: #fff3e9;}
.sub_nav{padding-right: 20px !important;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*タブレット*/
@media screen and (max-width: 768px){
    /*ul.sns_links {padding-top: 50px;}*/
    
    /*.d_flex.flex_center-right.pd_30px {padding: 0;}*/
    .d_flex.flex_center-right.pd_30px.flex_center-center_tb {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
}
    
    
    section#page10,section#page09,section#page08,section#page07,section#page06,section#page05,section#page04,section#page03,section#page02{
        padding-top: 100px;} 
    header .trans_logo {
        background: #fff9f5;
        padding: 5px 15px !important;}
        
    main {
        background-image: url(./Dup/img/item02.png), url(./Dup/img/item03.png);
        background-repeat: no-repeat;
        background-size: 205px, 267px;
        background-position: top left, bottom -58px right -93px;}
        
    section#page8 {padding-top: 0;}    

    .main_img {
        height: 50vh;
        width: 94% !important;}
        
    #main_img {
        width: 100% !important;        
        z-index: 0;
        overflow: hidden;
        position: relative;
        max-height: 53vh;
        margin-top: 80px;
        min-height: inherit;
        background: url(dup/img/bg_img.jpg);}

    img.catch {
        width: 39vw !important;
        transform: translate(25%, -63%);}
    
    .con1_title {margin-bottom: 20px;}
    img.item01 {
        width: 40vw;
        padding-top: 20px;}

    #contents1 .con1_right {
        background-size: 183px, 200px;
        background-position: top left, bottom 4px right -55px;}
    
    #contents2 .con2_wrap {background-size: 100px;}
    .contents_wrap .contents_bg {width: 100%;}
    .con3_wrap {padding: 50px 20px;}    
    
    #top_cms .cms_wrap {padding-top: 0px;}    
    
    article#top_cms::before {
        background-size: 176px;
        width: 23vw;
        height: 21vh;
        transform: scale(-1,1);} 
        
    .cms_6-c .cate_box {width: 100%!important;}
    #top_info {background-color: #fff3e9;}
    
}


/*スマホ*/
@media screen and (max-width: 667px){
    
    .d_flex.flex_center-right.pd_30px.flex_center-center_tb {
        position: relative;
        left: 50%;
        transform: translate(-50%, 0px);
    }
    
    .head_banner{
        width: 60px;
        right: 60px;}
        
    header .menu_stick {
        width: 60px;
        height: 60px;}
    header .trans_logo a img {max-width: 61px;}
    header .trans_header {height: 60px;}
    #main_img {margin-top: 60px;}
    
    img.catch {
        width: 48vw !important;
        transform: translate(13%, -70%);}
        
    img.item01 {
        width: 70vw;
        padding-top: 20px;}  
        
    .con1_title {
        margin-bottom: 20px;
        font-size: 13px;
        letter-spacing: 2px;}  
        
    #contents1 .con1_right {
        background-size: 175px, 176px;
        background-position: top left, bottom -21px right -51px;}    
        
    .con3_title {margin-bottom: 30px;}   
    
    .con3_wrap {padding: 50px 0px;} 
    
    .cms_title h2 {
        color: #726452;
        font-size: -webkit-calc(1rem + 13px);
        font-size: calc(1rem + 13px);}    
        
    article#top_cms::before {
        background-size: 110px;
        width: 35vw;
        height: 20vh;}
        
    .page_title_box {padding: 60px 0 80px;} 
    
    main {
    background-image: url(./Dup/img/item03.png);
    background-repeat: no-repeat;
    background-size: 180px, 200px;
    background-position: top left, bottom -54px right -69px;}
    
    section#page10, section#page09, section#page8, section#page07, section#page06, section#page05, section#page04, section#page03, section#page02 {
    padding-top: 40px;
    position: relative;        
    } 
    
section#page10::before, section#page09::before, section#page8::before, section#page07::before, section#page06::before, section#page05::before, section#page04::before, section#page03::before, section#page02::before {
    content: '';
    position: absolute;
    width: 40vw;
    height: 21vh;
    top: -20px;
    left: -10%;
    background: url(dup/img/item03.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
    transform: rotate(23deg);
}
    
section#page8::before{left: -28%;}    
    
    #cms_6-c .cate_box {padding: 20px;} 
    section#page07,section#page10 {padding-top: 70px;}    
    
.main_img {
    height: calc(53vh - 10%);
    width: 94% !important;}    
    
main {background-image: none;}    
    
}



/*20220601デバック*/
.head_banner.posi_fix {
    border: solid 2px #fff3e9;
    border-top: solid 2px #f2af4c;
    box-sizing: border-box;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.v_type2 .demo_box {padding-top: 70px}
.v_type2 {counter-reset: number 0;}
.v_type2 .cate_box {
    padding: 50px 20px 30px;
    border: solid 0px;
    text-align: left;
    border-radius: 10px;
    margin-right: 20px;
    width: 48%!important;
    margin-bottom: 0;
    margin-top: 40px;
}

#page05 .v_type2 .cate_box {
    width: 100%!important;
    margin-bottom: 100px;}
    
.v_type2 .cate_box:before {
    counter-increment: number 1;
    content: "0" counter(number);
    display: inline-block;
    position: absolute;
    top: -37px;
    left: 15px;
    z-index: 1;
    font-size: 67px;
    font-weight: 100;
    font-style: normal;
    color: #f5b2ac;
    /* background-color: #fff; */
    line-height: 1;
    padding: 0 25px 0 0;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.v_type2 h3.box_title {
    border-bottom: dotted 1px;
    padding-bottom: 5px;
    color:#f39800;
}


/*タブレット*/
@media screen and (max-width: 768px){
.v_type2 .cate_box {
    border-radius: 10px;
    width: 100%!important;
    margin-bottom: 55px;
    margin-top: 9px;
    margin-right: 0;
}

#page05 .v_type2 .cate_box {
    width: 90%!important;
    margin-bottom: 80px;}
    
.head_banner.posi_fix {border: solid 0px #fff3e9 !important;}    
    
}

@media screen and (max-width: 667px){
.v_type2 .cate_box{
    padding: 42px 25px 25px;
    margin-bottom: 20px;}

.v_type2 .cate_box:before{top: -31px;font-size: 48px;}

.v_type2 .cate_box:before {
    top: 23px;
    font-size: 16px;
    left: 24px;}
    
#page05 .v_type2 .cate_box {
    width: 80%!important;
    margin-bottom: 50px;}
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/