/********** font **********/

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600&family=Zen+Maru+Gothic:wght@500;700&display=swap');

:root{
    --font-jp: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-jp: 'Zen Maru Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-en: 'Quicksand', 'Zen Maru Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	/*font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";*/
}
body, .font_sans-serif{
    font-family: var(--font-jp);
}
.font_en, .fon_jos, a[href^="tel:"]{
    font-family: var(--font-en);
}

h2, h3, h4{
    font-family: var(--font-jp2);
}

/********** color **********/

:root{
    --color1: #442032;
    --color2: #f2f2f2;
    --color3: #ef75a7;
    --color4: #e4e4e4;
    
    --color5: #fbffbe;
    --black: #222222;
    
    --gradi1: #f7d7e8;
    --gradi2: #bdebef
}

/********** all **********/

#loader{
    background-color: var(--color2);
}
.loader_icon{
    width: 150px;
}

.fixbnr{
    display: none;
}

#wrap{
    background-color: transparent;
    background-image: linear-gradient(to bottom, var(--gradi1), var(--gradi2));
}

footer{
    background-color: #fff!important;
}
.head_tel, .footer_tel{
    border: none;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 10px;
}
.head_tel a, .footer_tel a{
    color: var(--color3);
}

#sp_nav{
    background-color: var(--color4);
}
#sp_nav .border_color2{
    border-color: var(--color4);
}
#sp_nav h3{
    color: var(--color3);
}
.hambuger_text, .hambuger_text02{
    color: var(--black);
}

/********** top **********/

#wrap.index{
    background-image: url('./Dup/img/bg_img2.png'), url('./Dup/img/bg_img.jpg');
    background-size: 1200px, 100%;
}

#mainwrap {
    min-height: 600px;
    height: 100vh;
    justify-content: end;
    box-sizing: border-box;
}
#mainwrap .mainwrap-r{
    background-color: rgba(255,255,255,0.4);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 0 20px;
    height: 500px;
    border-radius: 0 20px 0 20px;
}
#main_img{
    width: calc(100% - 50px)!important;
    height: calc(100% - 50px)!important;
    max-height: inherit;
    min-height: inherit;
    margin: 0;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 20px;
}
#main_img .triangle01, #mainwrap .catch{
    display: none;
}
#main_img .top_catch{
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 1;
}

#top_news{
    background-color: transparent;
}
#top_news .cms1inner {
    padding: 50px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

.con3_no {
    font-size: 40px!important;
    bottom: -20px!important;
    color: var(--color3);
}

#top_contents3{
    background-image: linear-gradient(to bottom, rgba(244,206,225,0), rgba(244,206,225,1));
}

#top_cms{
    background-image: linear-gradient(to bottom, var(--gradi1), var(--gradi2));
}
#top_cms .cms_box{
    border-color: #fff;
}
#top_cms .cms_title h3{
    color: transparent;
    text-stroke: 1px var(--color1);
    -webkit-text-stroke: 1px var(--color1);
    font-size: 40px;
    text-shadow: 2px 2px 0 #fff;
}

.con_title{
    color: transparent;
    text-stroke: 1px var(--color1);
    -webkit-text-stroke: 1px var(--color1);
    font-size: 40px;
    text-shadow: 2px 2px 0 var(--color5);
}

#footer_info > div{
    background-color: transparent;
}
#footer_info .info_txt_wrap {
    background-color: rgba(255,255,255,0.4);
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

#top_contents3{
    background-color: transparent;
}

/********** under_page **********/

.under_page > div.bg_color3{
    background-color: transparent;
}

#page_title .con2_bg {
    background-color: transparent;
    background-image: linear-gradient(to right bottom, var(--gradi1), var(--gradi2));
    opacity: 0.6;
}
#page_title .title_wrap{
    color: var(--color1);
    text-shadow: none;
}
#page_title .title_wrap h2{
    color: transparent;
    text-stroke: 1px var(--color1);
    -webkit-text-stroke: 1px var(--color1);
    font-size: 40px;
    text-shadow: 2px 2px 0 #fff;
}

.pager a:hover{
    background-color: var(--color3);
}


/********** tablet 780 **********/
@media screen and (max-width: 768px){
.mainwrap-r h1 {
    width: 70px;
    padding-top: 20px;
    padding-left: 0;
}
#mainwrap {
    padding: 20px;
    min-height: inherit;
    height: 500px;
}
#mainwrap .mainwrap-r{
    height: auto;
    border-radius: 20px;
    background-color: transparent;
    box-shadow: none;
}
#main_img{
    width: calc(100% - 40px)!important;
    height: calc(100% - 40px)!important;
    top: 20px;
    left: 20px;
}
#main_img .top_catch {
    top: auto;
    bottom: 5%;
    transform: none;
}
#top_news{
    padding: 0 20px;
}
#top_contents1{
    margin-top: 50px;
}
#top_contents1 .con1_img{
    margin-top: 0;
}
#footer_info .info_txt_wrap {
    height: max-content;
    padding: 30px 5%;
}
}

/********** mobile 750 **********/
@media screen and (max-width: 667px){
#wrap.index{
    background-size: 800px;
    background-position: top;
}
#mainwrap {
    height: 80vw;
}
#main_img .top_catch{
    left: 0;
    right: 0;
    margin: auto;
}
.con_title {
    font-size: 30px;
}
#top_news .cms1inner{
    padding: 50px 20px;
}
#top_cms .cms_title h3{
    font-size: 30px;
    letter-spacing: 1px;
}
#attach {
    height: 70vw;
}
#page_title .title_wrap h2 {
    font-size: 30px;
    letter-spacing: 1px;
}

}