.bg_color1 {background-color: #63ac77;}
.bg_color2 { background-color: #f5faf5;}
.bg_color3 {background-color: #f5faf5;}
.border_color2 {border-color: #63ac77;}
.border_color3 {border-color: #8dbf8e;}
.border_color4 {border-color: #63ac77;}
.txt_color2 {color: #63ac77;}
.txt_color3 {color: #63ac77;}
.txt_color4 {color: #f27d2e;}
.hvr_txt_color1:hover { color: #f27d2e;}
body, .txt_color_nomal,.txt_white{
    color: #333;
}
#f_menu ul li a {
    color: #333;
}

/*--- loading ------------------------------------*/
#loading{
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 999999;
	background-color: #fff;
}
#loading_circle{
	content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999999;
    background-color: #6ccf81;
	transition: 1.5s;
}
#loading_circle.start{
    width: 3000px;
    height: 3000px;
    background-color: #36a25a;
}
#loading_circle.start2{
    background-color: #fff;
}
#loading_logo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 50%;
	max-width: 500px;
	z-index: 99999999;
}

/* ----------　all　---------- */
.linkStyle{
	color:#f27d2e;
}
.linkStyle:hover{
	color:#f27d2e;
	opacity: 0.7;
	transition: all 0.5s;
}

.fa-envelope:before {
    content: "\f086";
    color: #f27d2e;
}
.fa-phone{
    color: #f27d2e;  
        color: #ffd22f;
}
.banner {
    width: 90%;
    max-width: 400px;
    margin: auto;
    margin-top: 50px;
}
#wrap{
        background-color: #fff;
        background-color: #fcf7ed;
}
#main_menu{
    padding: 0;
    margin-bottom: 20px;
}
#main_menu.fixed {
        background-color: transparent;
    padding: 0;
}
#main_menu ul{
    background-image: linear-gradient( 135deg, rgba(26, 171 ,131 ,0.7) 0%, rgba(131 ,211 ,116 ,0.7) 100%)!important;
}
#main_menu .menu_title {
    font-size: -webkit-calc(1rem - 0px);
    font-size: calc(1rem - 0px);
}
#main_menu .menu_sub_title{
        color: #de7731;
}
#main_menu ul li {
    font-weight: bold;
}
.header{
        max-width: 1280px!important;
        margin-bottom: 30px;
}
.header h1{
        width: 40%!important;
    margin-left: 25%;
    margin-right: 5%;
}
.header h1 img{
 width: 100%;
}

header div.grid_3.grid_4_tb.grid_12_sp.txt_center{
    padding: 15px 10px;
    border-radius: 5px;
    width: 27%!important;
}
header div p.font_4dw.linehight_1-h.border_so1-b.border_color2.pd_b-5px.pd_b-10px_sp{
        border: none;
}
header div.pd_5px.pd_10px_sp{

}
.header .contact_wrap{
    background-color: #fff;
    border-radius: 5px;
    border: 2px solid #63ac77;
    padding: 10px;
    margin-bottom: 10px;
}
.header .contact_wrap a{
    display: flex;
    justify-content: center;
    color: #e96125;
    font-weight: bold;
}
.header .contact_wrap a .con_icon{
    display: block;
    padding-right: 10px;
}
.header .tel_wrap{
    border-radius: 5px;
    border: 2px solid #63ac77;
    padding: 10px;
    background-color: #63ac77;
}
.header .tel_wrap a{
    font-weight: bold;
    color: #ffd22f;
}
.header .tel_wrap a span{
    color: #ffffff;
}
#info_map .contact2{
    border-right: 1px solid #fff;
    padding-right: 15px;
}
.header .contact img{
    width: 30px;
}
#info_map .contact2 img{
    width: 30px;
}
#fixed_right_banner > * {
    border-color: #de7731;
}
#info_map{
        background-color: #63ac77;
}
#info_map a, #info_map p{
    color: #fff;
}
#info_map p span{
    border-color: #de7731;
}
#info_map .fa-envelope:before,#info_map .fa-phone {
        color: #ffd94f;
}
/* ----------　TOP　---------- */
#main_img{
    max-width: 1280px!important;
    width: 85%;
    margin-bottom: 100px;
    margin-bottom: 0px;
}
#main_img .box_img{
    opacity: 0.95;
}
.manga_box{
    width: 95%;
    max-width: 1350px;
    margin: auto;
    margin-bottom: 130px;
}
.manga_box .manga{

}
.manga_box .manga:first-child{
    margin-right: 30px ;   
}

.maindec1{
    width: 50%;
    margin: auto;
    max-width: 450px;
    margin-bottom: 20px;
}
.maindec2{
    max-width: 1000px!important;
    width: 85%;
    margin: auto;
}
#aisatsu{
    background-image: linear-gradient( 135deg, rgba(26, 171 ,131 ,0.7) 0%, rgba(131 ,211 ,116 ,0.7) 100%)!important;
}
#aisatsu .top1-1, #aisatsu .top1-2 {
    box-shadow: 2px 10px 13px rgba(66, 184 ,141 ,0.15);
}
#aisatsu > div.width_1280-max{
    background-color: rgba(255, 255, 255,0.95)!important;
    padding: 50px 70px;
    max-width: 1280px;
    box-shadow: 2px 10px 13px rgba(66 ,184 ,141 ,0.2);
}
#aisatsu p i.fa-check-square:before {
    color: #f27d2e;
}
#contents1 .contents_box, #contents3 .contents_box{
    box-shadow: 2px 10px 13px rgba(190, 221, 194 ,0.65);
}
#contents2 .contents_box{
    box-shadow: 2px 10px 13px rgba(235, 212 ,162,0.65);   
}
#aisatsu,#contents1 ,#contents2,#contents3{
    margin-bottom: 180px;
}
#main_img .box_img{
    position: relative;
}
#main_img .box_img:before {
    content: "";
    position: absolute;
    background-image: url(Dup/img/main_txt.png);
    width: 30%;
    height: 200px;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: contain;
    top: 15%;
    right: -10%;
}
#aisatsu{
    background-color: #f5faf5!important;
    max-width: 100%;
    padding: 80px 15%;
    position: relative;
}
#aisatsu > div {
    max-width: 1280px;
}
#aisatsu .top1-1 {
    width: 15%;
    position: absolute;
    bottom: -50px;
    left: 3%;
    z-index: 1;
}
#aisatsu .top1-2{
    width: 15%;
    position: absolute;
    top: -50px;
    right: 3%;
    z-index: 1;
}
#aisatsu .top1-1 img,#aisatsu .top1-2 img{
    /*height: 300px;*/
    object-fit: cover;
}
#aisatsu .top1-2 img{
        height: auto;
}
#aisatsu .sub{
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
    letter-spacing: 3px;
    font-weight: bold;
    opacity: 0.7;
    color: #f27d2e;
}
#aisatsu h2{
    margin-bottom: 30px;
    padding-top: 15px;
    font-weight: bold;
}
#contents1 ,#contents2,#contents3{
    position: relative;
}
.contents_box::before,.contents_box::after,.contents_box2::before,.contents_box2::after {
    background-color: #bce581;
}
#contents2 .contents_box::before,#contents2 .contents_box::after,#contents2 .contents_box2::before,#contents2 .contents_box2::after {
    background-color: #e1d675;
}
#contents1:before ,#contents2:before,#contents3:before{
    content: "";
    position: absolute;
    background-color: #e0e0e0;
    background-color: #ffffff;
    height: 80%;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
}
#contents1:after,#contents2:after,#contents3:after {
    content: "";
    position: absolute;

    width: 30%;
    height: 65px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}
#contents1:after {
    background-image: url(Dup/img/point1.png);  
    top: 5%;
    right: 0;
}
#contents2:after {
    background-image: url(Dup/img/point2.png);  
    top: 5%;
    left: 0;
}
#contents3:after {
    background-image: url(Dup/img/point3.png);  
    top: 5%;
    right: 0;
}
#top_contents .contents_box{
    margin-top: -270px;
        width: 50%!important;
}
#contents1 .contents_box,#contents3 .contents_box{
    background-image: linear-gradient( 135deg, rgba(54, 162, 90,0.8) 0%, rgba(108, 207, 129,0.8) 100%)!important;
    background-color: transparent;
}
#contents1 .contents_box, #contents3 .contents_box {
    background-image: linear-gradient( 135deg, rgb(0 120 56 / 96%) 0%, rgb(82 184 104 / 95%) 100%)!important;
    text-shadow: 1px 2px 10px #19602d;
}
#contents2 [data-aos=fade-right] {
    transform: translate(100px);
}
#contents2 [data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    transform: translate(0);
}
#contents2 .contents_box{
    background-image: linear-gradient( 135deg, rgb(197 57 25 / 80%) 0%, rgb(223 177 48 / 80%) 100%)!important;
    background-color: transparent;
}
#contents2 .contents_box {
    background-image: linear-gradient( 135deg, rgb(190 35 0 / 95%) 0%, rgb(236 186 44 / 95%) 100%)!important;
    text-shadow: 1px 2px 10px #a62525;
}
#contents2 figure{
     margin-left: auto;   
}
#contents2 .contents_box{
    margin-left: auto;
    margin-right: 40%;
}
#contents1 .contents_box, #contents3 .contents_box {
    margin-left: 50%;
}
#contents2 .contents_box {
    margin-right: 50%;
}
#top_contents  figure{
         width: 50%!important;
}
.contents_box h2,.contents_box p{
    color: white;
}
#top_cms .cms_title h2::before, #top_cms .cms_title h2::after{
    display: none;
}
.cms_title{
    position: relative;
}
.cms_title:before {
    content: "";
    position: absolute;
    width: 35px;
    height: 1px;
    background-color: #63ac77;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
}
#top_cms .cms_title p {
    color: #ddb00c;
    font-weight: bold;
}
#top_cms .cms_box div.border_white {
    border: none;
}
#top_cms .cms_3-b .cate_box {
    border: 2px solid #de7731;
}
.CMS_TITLE3_wrap{
    background-color: #fcfdf3;
    background-color: #63ac77;
    padding: 80px 0;
    margin-bottom: 80px;
}
#CMS_TITLE3{
        margin-bottom: 0px;
}
#top_cms #CMS_TITLE3 .cms_title h2,#top_cms #CMS_TITLE3 .cms_title p{
    color: #fff;
}
#top_cms #CMS_TITLE3 .cms_title:before {
    background-color: #ddb00c;
}
#top_cms .cms_3-b .box_wrap{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
#top_cms .cms_3-b .cate_box{
    width: 46%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px 10px;
    margin-right: 2%;
    margin-bottom: 20px;
    border: 2px solid #ddb00c;
}
#top_cms .cms_3-b .cate_box:nth-child(2n) {
    margin-right: 0%;
}
#CMS_TITLE3 .box_title2 {
    font-weight: bold;
    color: #de7731;
}
#top_cms #CMS_TITLE3 .button-effect a{
    color: white;
}
/* ----------　下層ページ　---------- */
#main_img2 {
    margin-bottom: 100px;
}
#main_img2 .page_title {
    background-color: rgba(252, 247, 243,0.8)!important;
}
#main_img2 .page_title:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(95 165 96 / 50%);
    display: none;
}
#main_img2 .page_title h2{
    background-color: transparent;
    font-size: -webkit-calc(1rem + 12px);
    font-size: calc(1rem + 12px);
    width: 90%;
    color: #63ac77;
    font-weight: bold;
    letter-spacing: 5px;
}
#main_img2 .page_title h2 span {
    color: #de7731;
    font-weight: normal;
    letter-spacing: 2px;
}
#top_cms h2 {
    font-size: -webkit-calc(1rem + 20px);
    font-size: calc(1rem + 20px);
    letter-spacing: 6px;
}

/* 料金表 */
#cms_3-b .box_title2{
    font-weight: bold;
}

/* BEFORE & AFTER */
.BA_type1 .box_item, .BA_type1 .box_img1, .BA_type1 .box_img2 {position: relative;}
.BA_type1 .box_item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50.3%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17px 0 17px 40px;
    border-color: transparent transparent transparent #f27d2e;
}
.BA_type1 .box_img1 {margin-right: 40px;}
.BA_type1 .box_img2 {margin-left: 40px;}
.BA_type1 .box_img1::after, .BA_type1 .box_img2::after {
    position: absolute;
    height: 33px;
    width: 87px;
    background-color: #fff;
    color: #434343;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}
.BA_type1 .box_img1::after {content: "before";}
.BA_type1 .box_img2::after {content: "after";}
/* 会社情報 */
/* お問い合わせ */
#page8 .contact_tel p:first-child,#page8 .contact_tel p:last-child{
    color: #332!important;
}
#page8 #contact_tel_wrap .tyuui span{
    color: #de7731;
    font-weight: bold;
    border-bottom: 1px solid #de7731;
}
/* プライバシーポリシー */
/* サイトマップ */
#page10 .cate li a{
    color: #333!important;
    border-bottom: 1px solid #f27d2e;
}

/*-------------------------------------------------------
			            IE
-------------------------------------------------------*/

@media all and (-ms-high-contrast: none){
  .sample{

  }
}

/*-------------------------------------------------------
			          タブレット
-------------------------------------------------------*/
@media screen and (max-width: 768px){
/* ----------　all　---------- */
#loading_logo{
	max-width:400px;
}
#f_menu ul li a {
    letter-spacing: 1px;
}
.header {
    justify-content: space-around;
}
.header h1 {
    margin-left: 0%;
}
/* ----------　TOP　---------- */
/*#main_img{*/
/*    margin-bottom: 80px;*/
/*}*/
#main_img .box_img:before {
    width: 30%;
    top: 25%;
    right: -5%;
} 
.manga_box {
    width: 100%;
    margin-bottom: 100px;
}
.maindec1 {
    max-width: 300px;
}
#aisatsu {
    margin-bottom: 220px;
    padding: 100px 5%;
}
#aisatsu > div.width_1280-max {
    padding: 50px 40px;
}
#aisatsu .top1-1 {
    width: 45%;
    bottom: -120px;
    left: 0%;
        max-width: 250px;
}
#aisatsu .top1-2 {
    width: 45%;
    top: -60px;
    top: -100px;
    right: 0%;
}
/*#aisatsu .top1-1 img, #aisatsu .top1-2 img {*/
/*    height: 170px;*/
/*}*/
#top_contents .contents_box {
    margin-top: -150px;
}
#top_cms .cms_3-b .cate_box {
    width: 100%;
}
#top_cms .cms_3-b .box_title2 {
    font-size: -webkit-calc(1rem + 6px);
    font-size: calc(1rem + 6px);
    border: none;
}
}

/*-------------------------------------------------------
		            	スマホ
-------------------------------------------------------*/
@media screen and (max-width: 667px){
#loading_logo {
    width: 65%;
}
.header {
    margin-bottom: 0px;
}
.header #logo {
        margin-right: 30%;
    margin-left: 5%;
    width: 60%!important;
}
header div.grid_3.grid_4_tb.grid_12_sp.txt_center {
    border-radius: 0px;
}


.button_container span {
    background: #63ac77;
    box-shadow: none;
    margin-top: 0!important;
}
.button_container.active .top,.button_container.active .bottom {
    background: #63ac77;
}
/* ----------　TOP　---------- */
#main_img{
    margin-bottom: 50px;
    margin-bottom: 0px;
}
#main_img,#main_img2{
    margin-top: 0!important;
}
#main_img {
    width: 100%;
}
#main_img .box_img{
    width: 120%;
transform: translateX(-10%);
}
#main_img .box_img:before {
    width: 35%;
    top: 5%;
    right: 10%;
    filter: drop-shadow(-10px 1px 12px rgba(99, 97 ,108 ,0.75));
}
.maindec2 {
    width: 100%;
}
.manga_box {
    flex-direction: column-reverse;
}
.manga_box .manga {
    width: 90%!important;
}
.manga_box .manga:first-child {
    margin-right: 0px;
    margin-top: 25px;
}
#aisatsu {
        margin-bottom: 200px;
}
#aisatsu > div{
        padding: 0;
}
#aisatsu > div.width_1280-max {
    padding: 30px 20px;
}
#aisatsu .sub {
    font-size: -webkit-calc(1rem + 0px);
    font-size: calc(1rem + 0px);
    letter-spacing: 2px;
}
#aisatsu h2 {
    font-weight: bold;
}
/*#aisatsu .top1-1 img, #aisatsu .top1-2 img {*/
/*    height: 135px;*/
/*}*/
#aisatsu .top1-1 {
    width: 75%;
    width: 50%;
    bottom: -70px;
}
#aisatsu .top1-2 {
    width: 75%;
    top: -70px;
}
#top_contents .contents_box {
    margin-top: -40px;
}
 #contents1, #contents2 {
    margin-bottom: 150px;
}
#contents3{
    margin-bottom: 100px;    
}
#contents1:after, #contents2:after, #contents3:after {
    width: 40%;
}
#contents1:after {
    top: -12%;
}
#contents2:after {
    top: -12%;
    width: 40%;
}
#contents3:after {
    top: -12%;
}
#top_cms h2 {
    font-size: -webkit-calc(1rem + 10px);
    font-size: calc(1rem + 10px);
    letter-spacing: 3px;
}
#top_cms #CMS_TITLE1 div.border_white{
        padding-top: 20px;
}


#top_contents figure {
    width: 100%!important;
}
#top_contents .contents_box {
    margin-top: 0px;
        width: 100%!important;
}
#contents1 .contents_box, #contents3 .contents_box {
    margin-left: 0%;
}
/* ----------　下層ページ　---------- */
#main_img2 .page_title h2 {
    font-size: -webkit-calc(1rem + 8px);
    font-size: calc(1rem + 8px);
}
 /* BEFORE & AFTER */   
.BA_type1 .box_img1 {margin-right: 5%;margin-bottom: 50px;}
.BA_type1 .box_img2 {margin-left: 5%;}
.BA_type1 .box_img1::after, .BA_type1 .box_img2::after {height: 30px;font-size: 15px;}
.BA_type1 .box_item::after {transform: translate(-50%,-60%) rotate( 90deg);border-width: 20px 0 20px 23px;}    
/* お問い合わせ */
#page8 .contact_tel p:first-child {
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
}
#page8 .contact_tel p:flast-child {
    font-size: -webkit-calc(1rem + 5px);
    font-size: calc(1rem + 5px);
}
}

/* 2024.04.12 */
.header .tel_wrap {
    font-size: 23px;
}