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


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

.g_type1 > div{justify-content: space-around;}
.g_type1 .modal_bt{cursor: pointer}
.g_type1 .modal_bg{top: 0;left: 0;background-color: rgba(0,0,0,0.5);z-index: 9998;}
.g_type1 .modal_box{max-height: 80%;overflow-y: auto;z-index: 9999;}
.g_type1 .close_bt{cursor: pointer}
.g_type1 .cate_box {position: relative;width: 22.99999%!important;margin: 0 1%;margin-bottom: 20px;overflow: hidden; }

@media all and (-ms-high-contrast:none){
.g_type1 .modal_box .box_txt2 a {padding: 8px 10px 2px;}
}

@media screen and (max-width: 768px){
.g_type1 .cate_box {width: 30.99999%!important;}
}
	
@media screen and (max-width: 667px){
.g_type1 .cate_box {width: 47.99999%!important;}
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■コード集サイト■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/



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

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

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


/* .tes{background:#b29890 !important;}
.tes{background:#697769 !important;}
.tes{background:#91b591 !important;}
.tes{background:#f9f6f4 !important;}
.tes{background:#f9f9f7 !important;}
 */


/*linkStyle*/
a.linkStyle {
    color: #b29890;
    transition: 0.5s;
}
a.linkStyle:hover {
    color: #b29890;
}
#main_menu ul li a,.contact_bt a, .tel_bt a { color: #697769;}
.contact_bt a, .tel_bt a {
    color: #91b591;
    border-color: #91b591}
#main_menu ul li a::before{background-color: #91b591;}
.contact_bt a:hover, .tel_bt a:hover {border-color: #b29890;}


.free_bt a { color: #f9f6f4;
            background:#91b591;
            border-color:#91b591;
            z-index: 2;}
.free_bt a:hover {border-color: #91b591;
                  z-index: 0;}
.free_bt_a:hover::after { box-shadow: inset 0 0 0 15em #91b591 !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',"游ゴシック 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,.kiwi{
    font-family: 'Kiwi Maru','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: 3px;}
ul.cate_list li a,.contact_bt a,.more a,.foot_tel_bt a,.free_bt a{border-radius: 3px;}
/*border-radius----------------------------------------------------------------*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*装飾に便利なposi_rel*/
#contents_box,div#contents2,div#contents4 {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,div#contents2::before,div#contents4::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;}
/*装飾に便利な疑似クラス設定*/


/*ボタン----------------------------------------------------------------*/
/*.button006 a {*/
/*    background: #91b591;*/
/*    justify-content: space-around;*/
/*    align-items: center;*/
/*    margin: 0 auto;*/
/*    padding: 10px 50px 10px 40px;*/
/*    color: #ffffff;*/
/*    transition: 0.3s ease-in-out;*/
/*    font-weight: 500;*/
/*    display: block;*/
/*    text-align: center;*/
/*    position: absolute;*/
/*    right: 0;*/
/*}*/

/*.button006 a:before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: calc(50% - 2px);*/
/*    right: -2em;*/
/*    transform: translateY(calc(-50% - 2px)) rotate(30deg);*/
/*    width: 12px;*/
/*    height: 2px;*/
/*    background-color: #697769;*/
/*    transition: 0.3s;*/
/*}*/
/*.button006 a:after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    right: -2em;*/
/*    transform: translateY(-50%);*/
/*    width: 60px;*/
/*    height: 2px;*/
/*    background-color: #697769;*/
/*    transition: 0.3s;*/
/*}*/
/*.button006 a:hover:before, .button006 a:hover:after {*/
/*    right: -2.5em;*/
/*}*/
/*.button006 a:hover {*/
/*    background: #87c023;*/
/*    color: #ffffff;}*/

/*.button006 {*/
/*    padding-top: 20px;*/
/*    position: relative;*/
/*}*/


/*ボタン----------------------------------------------------------------*/

.con2_box {
    position: absolute;
    right: 15px;
    bottom: 17%;
}
p.txt_color_nomal.con2_txt.font_20 {font-size: 1vw;}
span.font_24.font-bold.kiwi {font-size: 1.5vw;}


/*div#contents2::before {*/
/*    background: #f9f6f4;*/
/*    width: 80%;*/
/*    height: 48%;*/
/*    z-index: 0;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%,-44%);*/
/*}*/

#contents1 {padding: 100px 10% 0;}
#contents1 .mg_b-100px {margin-bottom: 0px !important;}
#contents4 {padding: 0 10% 100px;}

.topcms_about_type1 .cate_box {
    width: 14%;
    padding: 5px 10px 20px;
    background-color: #ffffff;
    border-radius: 1px;
    box-sizing: border-box;
}

div#contents3 {padding: 0 0 100px;}
.con3_txt01 {
    padding-right: 10%;
    padding-left: 5%;
}
.con3_txt02 {
    padding-left: 10%;    
    padding-right: 5%;
}

figure.img6, figure.img7 {
    width: 60% !important;
    height: 400px !important;
    overflow: hidden;
    margin: 60px 0 0;}

figure.img6 img, figure.img7 img{
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;}

.con3_txt01,.con3_txt02 {width:40% !important;}
#contents3 .grid_6 {margin-top: 0px;}

div#contents4::before {
    background: #f9f6f4;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-54%);
}

.top_cms_box:nth-child(3) {background: #f9f6f4 !important;}
div#contents1 .txt_wrap {padding-right: 5%;}

.catch{
    right: 5%;
    top: 8%;}

.catch img {
    width: 19vw;
    height: 52vh;
    z-index: 5;
    max-height: inherit !important;
    min-height: inherit !important;
    object-fit: contain !important;
}

footer{background: #f9f9f7 !important}

.img6 img {border-radius: 0 3px 3px 0;}
.con3_outer_02 .img6 img {border-radius: 3px 0px 0px 3px;}
img.come {
    width: 20px;
    padding: 3px 6px 1px 0px;
}

/*タブレット*/
@media screen and (max-width: 768px){
.catch img {
    width: 25vw;
    height: 26vh;
    z-index: 5;
    max-height: inherit !important;
    min-height: inherit !important;
    object-fit: contain !important;}    
    
.catch {
    right: 4%;
    top: 13%;}

header #logo {
    padding: 5px 10px;
    max-width: 150px;}
    
div#contents1 .txt_wrap {
    padding-right: 0;
    padding-bottom: 20px;}
    
div#contents2::before {
    width: calc(80% - 20px);
    height: 40%;
    transform: translate(-50%,-46%);
}

.con2_box {
    position: absolute;
    right: 21px;
    bottom: 11%;}
    
.button006 {
    padding-top: 11px;
    position: relative;}

span.font_24.font-bold.kiwi {font-size: 2.5vw;}
p.txt_color_nomal.con2_txt.font_20 {
    font-size: 1.3vw;
    line-height: 1.8;}
    
#contents2 {padding: 30px 10% 40px;}
div#contents2::before {
    width: calc(80% - 20px);
    height: 44%;
    transform: translate(-50%,-47%);}
    
.font_14 {font-size: 13px;}
.con3_txt01, .con3_txt02 {width: 45% !important;}

figure.img6, figure.img7 {
    width: 50% !important;
    height: 258px !important;}
    
.topcms_about_type1 .cate_box {
    width: 32%;
    padding: 5px 7px 20px;
    background-color: #ffffff;
    border-radius: 1px;
    box-sizing: border-box;
    margin: 1% 0;
}
    
.topcms_about_type1 p.box_title1 {
    font-size: 13px;
    letter-spacing: 1px;
    padding-top: 0px;
}

img.come {
    width: 20px;
    padding: 3px 6px 0px 0px;}
#main_img,section#page_title {padding-top: 36px;}

}

/*スマホ*/
@media screen and (max-width: 667px){
    
.catch img {
    width: 41vw;
    height: 33vh;
}
    
.catch {
    right: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -53%);
    z-index: 2;
}
.con2_box {
    position: absolute;
    right: auto;
    bottom: -50%;
    left: 0%;
    transform: translate(5%, -38%);
    margin: 0 auto;
    text-align: center;}
    
.con2_box {
    position: relative;
    right: auto;
    bottom: auto;
    left: 0%;
    transform: inherit;
    margin: 10px auto 0;
    text-align: center;
    background: transparent;
}
    
div#contents2::before {
    width: calc(80% - 20px);
    height: 60%;
    transform: translate(-50%,-40%);
}

#contents2 {padding: 30px 10% 120px;}

p.txt_color_nomal.con2_txt.font_20 {
    font-size: 10px;
    line-height: 1.8;
    letter-spacing: 1px;
}
span.font_24.font-bold.kiwi {font-size: 5vw;}

figure.img6, figure.img7 {
    width: 100% !important;
    height: 230px !important;}

.con3_txt01, .con3_txt02 {width: 100% !important;}

.con3_txt01,.con3_txt02 {
    padding-right: 10%;
    padding-left: 10%;}
    
#contents3 .grid_6:last-child {margin-top: 20px;}
#contents3 .grid_6 {margin-top: 20px;}
div#contents3 {padding: 0 0 50px;}
.topcms_about_type1 .cate_box {width: 49%;}

h2.logo {
    margin-top: 20px;
    text-align: center;}
p.footer_cms {text-align: center;}
header #logo {
    padding: 0px 0px;
    max-width: 100px;}
    
.button006 a {right: 6px;}
h2.txt4 {font-size: 19px;}

img.come {
    width: 20px;
    padding: 3px 6px 1px 0px;}
    
#main_img::before {
    background: rgb(255 255 255 / 30%);
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;}
#main_img, section#page_title {padding-top: 22px;}
header .head_banner {width: 100% !important;}
}


/*スマホ*/
@media screen and (max-width: 360px){
.topcms_about_type1 p.box_title1 {
    font-size: 12px;
    letter-spacing: 1px;
    padding-top: 0px;}
    
}


/*スマホ*/
@media screen and (max-width: 667px){
    
/*20230904*/
.catch {
    right: auto;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -53%);
    z-index: 2;
}

.catch img {
    width: 41vw;
    height: 38vh;
}

}