﻿.sf_contact_box li {
    padding: 3px;
}
.sf_contact_box li a {
    padding: 10px;
    font-size: 16px;
    border:0;
    color:white !important;
    
}
.sf_contact_box li a:hover{
    opacity:0.7;
}

.sf_contact_tel a {
    background: #9a769a !important;
}
.sf_contact_line a {
    background: #7b8c7b !important;
}
.sf_contact_mail a{
    background: #b39d76 !important;
}


.more_btn .more_line {
    transform: translateX(-100%);
}
a.d_inline_b.mg_l-5px.mg_r-5px.pd_t-5px.pd_b-5px.pd_l-10px.pd_r-10px.border_rad3.txt_white.bg_color1.motion03s.hvr_bg_color3{
        background: #7b8c7b;
}
.cate_list li a {
    background: #7b8c7b;
}
ul#footer_nav {
    background: #d8e0d8;
}
.pager li a {
    background: #7b8c7b;
}
li.sf_contact_mail a {
    color: white;
    background: #9a769a;
    border: 0;
}
li.sf_contact_mail a:hover{
   background: #9a769a;
}
.more_btn .more_line {
    background: #9a769a;
}
.more_box,.more_btn a{
   background:#7b8c7b;
    color: white;
    border:0 !important;
}
.h_box_mail a{
    background: #7b8c7b;
}
.h_box_mail a:hover{
    background: #fffcf6;
}
.phone_txt h4 span{
    width:140px;
}
.phone_txt .box{
    flex-wrap:nowrap;
}
div#banner_wrap {
    text-align: center;
    margin-top: -100px;
    margin-bottom: 30px;
}
.phone_wrap a:hover {
    background: #560356;
    opacity: 1;
}
footer ul.sns_link a{
    width:30px;
}
.linkStyle {
    color: #560356;
}
#page4 .cate_title{
    border:0;
}
.more_btn.mg_t-100px.letter_3.font_2dw.mg_center.mg_t-50px_tb{
    padding-bottom:50px;
}
.cms_3-b .step .cate_box{
    padding-right:60px;
    margin-bottom:60px;
}
.cms_3-b .box_wrap.step {
background: #fffdf9;
}
#cms_3-b .step .cate_box, .cms_3-b .step .cate_box {
    border: 0;
    background: white;
    position: relative;
    padding-left: 60px;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 30%);
}
#cms_3-b .step .box_wrap,.cms_3-b .box_wrap.step   {
    counter-reset: rank 0;
    padding: 50px 70px 10px;
}
#cms_3-b .step .cate_box::after, .cms_3-b .step .cate_box::after {
    content: "STEP";
    text-align: center;
    padding-top: 14px;
    position: absolute;
    width: 80px;
    height: 80px;
    background: #c0ae8d;
    color: #ffffff;
    left: -40px;
    font-size: 12px;
    top: -30px;
    border-radius: 50px;
    box-sizing: border-box;
    letter-spacing: 2px;
}
#cms_3-b .step .cate_box::before, .cms_3-b .step .cate_box::before {
    counter-increment: rank;
    content: "0" counter(rank);
    position: absolute;
    top: -10px;
    font-size: 34px;
    z-index: 2;
    color: #ffffff;
    left: -18px;
}

.phone_wrap a{
    padding:10px;
    margin:20px auto;
}



.s_footer_info_r {
    background-image: url(Dup/img/con2_bg.png);
    background-repeat:no-repeat;
    background-size:cover;
}

.main_img_txt::before {
    width: 100%;
    height: 90px;
    content: "";
    background: url(Dup/img/catch_b.png) no-repeat;
    position: absolute;
    left: 0;
    top: -90px;
    background-position: bottom center;
    background-size: contain;
}
.main_img_txt::after {
    width: 100%;
    height: 90px;
    content: "";
    background: url(Dup/img/catch_b.png) no-repeat;
    position: absolute;
    left: 0;
    bottom: -90px;
    transform:rotate(180deg);
    background-position: bottom center;
    background-size: contain;
}
#cms_3-b .cate_box{
    background: white;
}
div#cms_5-a .box_wrap,div.cms_5-a .box_wrap{
    background:white;
}
#s_footer{
  background: #fffcf6;
}
#page_title{
    margin-bottom:100px;
}
#page_wrap{
    position: relative;
    max-width: 1280px;
    margin: auto;
    background: #fffdf9;
    
}
#page_wrap.page_3{
    max-width:1000px;
}
#page9{
    padding:50px;
}
#page_wrap.page_2{
    max-width:1000px;   
}
#page10{
    padding:50px;
}
#page_wrap::before {
    width: 60px;
    height: 60px;
    content: "";
    background: url(Dup/img/cms_con.png) no-repeat;
    position: absolute;
    z-index: 3;
    left: 10px;
    bottom: 10px;
    background-size: contain;
    transform: rotate(270deg);
}
#page_wrap::after {
    width: 60px;
    height: 60px;
    content: "";
    background: url(Dup/img/cms_con.png) no-repeat;
    position: absolute;
    z-index: 3;
    right: 10px;
    bottom: 10px;
    background-size: contain;
   transform: scale(-1,1) rotate(-90deg);
}
.inner::before {
    width: 60px;
    height: 60px;
    content: "";
    background: url(Dup/img/cms_con.png) no-repeat;
    position: absolute;
    z-index: 3;
    left: 10px;
    top: 10px;
    background-size: contain;
}
.inner::after{
    width: 60px;
    height: 60px;
    content: "";
    background: url(Dup/img/cms_con.png) no-repeat;
    position: absolute;
    z-index: 3;
    right: 10px;
    top: 10px;
    transform:scale(-1,1);
    background-size: contain;
}
#page2,#page3,#page4,#page5,#page6,#page7,#page8{
    background: #fffcf6;
    padding: 50px;
    position: relative;
    outline: 1px solid #9a769a24;
    outline-offset: -10px;
    padding-top: 100px;
}
.cate_title{
    border-width:1px;
    background: #9a769a0a;
}
a.modal_banner {
    background: #9a769a;
    padding: 10px 50px;
    margin-top: 20px;
    display: inline-block;
    color: white;
    transition: all 0.3s;
}
a.modal_banner:hover{
    opacity:0.7;
}
.menu_list li span{
     font-family: 'Great Vibes';
}
#page_title::before{
    display:none;
}
.span.more_box{
    background: #560356;
    color: white;
}
.page_title_inner{
    background-position:bottom;
}

.top_cms_title h2::before {
    width: 100%;
    height: 210px;
    content: "";
    background: url(Dup/img/title_bg2.png);
    position: absolute;
    left: 0;
    top: -80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.top_cms_title h2{
    position:relative;
}
.top_cms_title p,.title_box p {
    font-family: 'Great Vibes';
    color: #560356;
}
figure.intro_img{
    z-index:3;
}
.intro_img a span {
    background: #ffffffa1;
    display:none;
}
/*
.more_btn h2::before {
    width: 100%;
    height: 40px;
    content: "";
    background: url(Dup/img/title_bg.svg) no-repeat;
    position: absolute;
    left: 0;
    background-position: center;
    top: -55px;
}
.more_btn h2{
    position:relative;
}*/

#s_content1 .font_un,.contents_no{
    font-family:'Great Vibes', cursive;
}
.contents_no {
    top: 20px;
    left: 0px;
    font-size:38px;
}
.contents_no span {
    width: 50px;
    height: 1px;
    transform: rotate(-45deg);
    left: 10px;
    top: -30px;
    bottom: 10px;
    margin: auto;
}
.intro_img div {
    font-size: 4em;
    color: transparent;
    top: -9%;
    color: #560356;
    left: -6%;
    font-weight: normal;
    pointer-events: none;
    letter-spacing: 4px;
}
.intro_item{
    position:relative; 
}
.intro_item::before {
    content: "";
    width: 500px;
    height: 500px;
    background: url(Dup/img/con1_bg2.png) no-repeat;
    position: absolute;
    right: -160px;
    top: -110px;
    background-size: contain;
}
.c2_box_txt div.d_flex{
    background: white url(Dup/img/con2_bg.png) no-repeat;
    background-size: cover;
    background-position:bottom;
}
.modal_wrap{
    opacity:1;
}
.width_1280-1000.width_max_tb.pd_t-100px.pd_b-100px.pd_l-100px.pd_r-100px.pd_l-20px_tb.pd_r-20px_tb.txt_white.d_flex.flex_top-left{
    flex-wrap:nowrap;
}
.modal_txt_wrap {
        background: #fffff69c;
    padding: 40px;
    margin-left: 50px;
    box-sizing: border-box;
    color: #030003;
}
.modal_txt_wrap h2{
    color: #560356;
}
.modal1 .modal_scroll.height100per.posi_rel{
    background: url(Dup/img/modal.jpg);
}
.modal2 .modal_scroll.height100per.posi_rel{
    background: url(Dup/img/modal.jpg);
}
.main_img_txt {
    font-weight: bold;
    letter-spacing: 8px;
    text-indent: 4px;
    padding: 20px 50px;
    z-index: 3;
    white-space: nowrap;
    background: #ffffff66;
    color: #560356;
    backdrop-filter: blur(3px);
}
#main_img .swiper-wrapper::before{
    background-image:none;
}
#s_content1{
        background:url(Dup/img/con1_bg4.jpg);
}
.bg_color1 {
    background-color: #9a769a;
}
.bg_color2 {
    background-color: #fdf5e6;
}
.bg_color3 {
    background-color: #560356;
}
.txt_color3 {
    color: #560356;
}
.txt_color1 {
    color: #560356;
}
.hvr_border_color3:hover {
    border-color: #560356;
}
.border_color1 {
    border-color: #560356;
}
#page8,#page9,#page10{
outline: 1px solid #9a769a24;
    outline-offset: -10px;
}
/* YouTube */
.video_cms{
	padding-bottom: 57.25%;
	height: 0;
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/* YouTube */
.video_cms {padding-bottom: 56.25%;}
}




/* ---------- タブレット---------- */
@media screen and (max-width: 768px){
    h1#logo{
        max-width:130px;
    }
    .main_img_txt{
        font-size:24px;
        letter-spacing: 6px;
        background: #ffffffb8;
    }
    .intro_item::before{
        display:none;
    }
    .intro_item {
    padding: 20px;
    background: white;
}
.top_cms_title h2::before {
    width: 100%;
    height: 170px;
    content: "";
    background: url(Dup/img/title_bg2.png);
    position: absolute;
    left: 0;
    top: -40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.cms_box .cms_box_bg {
    top: -10px;
    height: 150px;
}
.phone_wrap a span {
    font-size: 18px;
}
.phone_txt .box{
    flex-wrap:nowrap;
}
.phone_wrap a span {
    font-size: 18px;
}
}
/* ---------- ここまで ---------- */


/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    .main_img_txt {
    font-size: 12px;
    letter-spacing: 2px;
    background: #ffffffb8;
    padding: 10px 20px;
    white-space: normal;
        padding-bottom: 5px;
}
.main_img_txt::before {
    width: 100%;
    height: 50px;
    top: -50px;
}
.main_img_txt::after {
    width: 100%;
    height: 50px;
    bottom: -50px;
}
.intro_item {
    padding: 20px;
    background: #ffffffe3;
    backdrop-filter: blur(2px);
}
.contents_no {
    top: 5px;
    left: 0px;
    font-size: 27px;
    padding-left: 15px;
}
    .contents_no span {
    width: 30px;
    height: 1px;
    transform: rotate(-45deg);
    left: 0px;
    top: -20px;
    bottom: 10px;
    margin: auto;
}
.cms_box .cms_box_bg {
    top: 0px;
    height: 120px;
}
.top_cms_title h2 {
    position: relative;
    font-size: 18px;
}
#cms_3-b .step .cate_box::before, .cms_3-b .step .cate_box::before {
    counter-increment: rank;
    content: "0" counter(rank);
    position: absolute;
    top: -13px;
    font-size: 24px;
    z-index: 2;
    color: #ffffff;
    left: -13px;
}
#cms_3-b .step .cate_box::after, .cms_3-b .step .cate_box::after {
    content: "STEP";
    text-align: center;
    padding-top: 10px;
    position: absolute;
    width: 60px;
    height: 60px;
    background: #c0ae8d;
    color: #ffffff;
    left: -30px;
    font-size: 10px;
    top: -30px;
    border-radius: 50px;
    box-sizing: border-box;
    letter-spacing: 2px;
}
#cms_3-b .step .box_wrap, .cms_3-b .box_wrap.step {
    counter-reset: rank 0;
    padding: 40px 40px 10px;
}
.cms_3-b .step .cate_box{
    margin-bottom:50px;
}
footer{
    text-align:center;
}
.cms_3-b .step .cate_box {
    padding-right: 20px;
    padding-left:20px !important;
}
h1#logo{
    max-width:90px;
}
.width_1280-1000.width_max_tb.pd_t-100px.pd_b-100px.pd_l-100px.pd_r-100px.pd_l-20px_tb.pd_r-20px_tb.txt_white.d_flex.flex_top-left {
    flex-wrap: wrap;
}
.modal_txt_wrap{
    margin-left:0;
}
#cms_3-b .step .cate_box{
    
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.phone_wrap{
    flex-direction:column;
}
.phone_wrap a {
    width: 100% !important;
}
.phone_txt .box {
    flex-wrap:wrap;
}
.phone_wrap a span {
    font-size: 16px;
}
a.modal_banner {
    background: #9a769a;
    padding: 10px 20px;
}
}