﻿@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&display=swap');

.nav, #cms_6-c .txt_color1, .main_img_wrap .catch span {
    font-family: 'Kiwi Maru',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
}
.nav .nav2, .t_cms_txt2, .t_cms_txt5, .t_cms_txt8, .cms_title p.txt_color3, .page_title_box .font_25, .other .box_title2, #cms_6-c .cate_box:before{
	font-family: 'Playfair Display', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"!important;
}
.nav .font_bold , .main_img_wrap .catch span{font-weight: 300;}



/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #333;transition: opacity .3s;text-decoration: underline;}
.linkStyle:hover{opacity: 0.7}
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #fbba06} /* メインカラー */
.txt_color2{color: #def0f2} /* サブカラー */
.txt_color3{color: #b39571} /* アクセントカラー1 */
.txt_color4{color: #fbfbfb} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #ffd255} /* メインカラー */
.bg_color2{background-color: #def0f2} /* サブカラー */
.bg_color3{background-color: #a9c087} /* アクセントカラー1 */
.bg_color4{background-color: #fbfbfb} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #ffd255}
.border_color2{border-color: #def0f2}
.border_color3{border-color: #e0bc83}
.border_color4{border-color: #f2e0ab}

/* hover_color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #bd9c68} /* メインカラー */
.hvr_txt_color2:hover{color: #def0f2} /* サブカラー */
.hvr_txt_color3:hover{color: #a9c087} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #fbfbfb} /* アクセントカラー2 */

.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #ffd255} /* メインカラー */
.hvr_bg_color2:hover{background-color: #def0f2} /* サブカラー */
.hvr_bg_color3:hover{background-color: #fdde77} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #fbfbfb} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

.hvr_border_color1:hover{border-color: #ffd255}
.hvr_border_color2:hover{border-color: #def0f2}
.hvr_border_color3:hover{border-color: #fdde77}
.hvr_border_color4:hover{border-color: #fbfbfb}

#loading_line .line, #contents{
	background: -webkit-repeating-linear-gradient( -90deg,#fdfdd4 0,#fdfdd4 35px,#fff0 35px,#fff0 37px);
    background: -o-repeating-linear-gradient(-90deg,#fdfdd4 0,#fdfdd4 35px,#fff0 35px,#fff0 37px);
    background: repeating-linear-gradient( 90deg,#fdfdd4 0,#fdfdd4 35px,#fff0 35px,#fff0 37px);
    background-color: #fafacb;
}
.nav .nav2{color: #b3d493;}
#dec1, #dec6{color: #e6d5e2;}
#dec3, #dec5, #dec7, #dec2, #dec4, #dec8{color: #e0d6c9;}
#dec10, #dec12, #dec14, #dec16,#dec9, #dec11, #dec13, #dec15{color: #bf9d74;}
#contents .box h3:before{border-color: #deb0d3;}
#top_cms .cms_title p{color: #cca467;}
#top_cms .cms_title p.txt_color3{font-weight: normal;}
footer{background-color: #fffff0;}
footer .txt_white{color: #333;}
.img-container:before{background: #fdde77;}
.t_cms_img2 .img-container:before{background: #dec;}


/* design ---------------------------------------------------------------------------------------------*/

/* ---------- all ---------- */
#loading_logo{max-width: 353px;}
.nav .font_bold {font-size: 17px;letter-spacing: 0px;}
.menu .nav ul li{border-left: 1px dotted;}
.menu .nav ul li:first-child{padding-left: 8px;}
.sns_links li{max-width: 35px;}

/* ---------- top ---------- */
.main_img_wrap .catch{bottom: 114px;left: 0;border-radius: 0 5px 5px 0;background-color: #fffff0;padding: 13px 20px;}
.main_img_wrap .catch span{color: #8c6600;line-height: 1.8;}
.t_cms_txt2, .t_cms_txt5, .t_cms_txt8{display: none}
#contents{
	padding-top: 130px;
	padding-bottom: 175px;
	overflow: hidden;
}
@media screen and (max-width: 1422px){#contents{padding-top: 150px;}}
#contents .box_wrap {
    background-color: transparent;
    background-image: url(Dup/img/item5.png);
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: 108% 65%;
    position: relative;
    overflow: visible;
}
#contents .box h3::after {
    content: '';
    display: inline-block;
    width: 301px;
    height: 89px;
    background-image: url(../dup/img/item1.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: -91px;
}
#contents .box h3.t_cms_txt6::after {background-image: url(../dup/img/item2.png);}
#contents .box h3.t_cms_txt9::after {background-image: url(../dup/img/item3.png);}

.img-container, .img-container:before{border-radius: 20px}
#contents .box figure::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(../dup/img/img_item1.png);
    background-size: 34%;
    background-repeat: no-repeat;
    background-position: right bottom;
    position: absolute;
    right: -33px;
    bottom: -27px;
    z-index: 2;
	pointer-events: none;
}
#contents .box figure.t_cms_img2::before{
	right: auto;
	left: -10%;
	transform: scale(-1, 1);
	background-image: url(../dup/img/img_item2.png);
}
#contents .box figure.t_cms_img3::before{
	background-image: url(../dup/img/img_item3.png);
	right: -60px;
    bottom: -63px;
	background-size: 43%;
}
#contents .box .txt_wrap, .svg_box{z-index: 2;position: relative}
#contents .box figure:after, #contents .box:nth-child(odd) figure:after{transform: none;top: auto;opacity: 1; border: none;}
#contents .box figure::after, #contents .box:nth-child(odd) figure:after {
    content: '';
    display: inline-block;
    width: 130%;
    height: 140%;
    background-image: url(../dup/img/img_bg1.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -312px;
    bottom: -167px;
}
#contents .box:nth-child(3){margin-top: 90px;}

#top_cms::after, .all_page::after {
    content: '';
    display: inline-block;
    width: 85%;
    height: 100%;
    background-image: url(../dup/img/line.png);
    background-size: 48px;
    background-repeat: repeat-y;
    background-position: right top;
    position: absolute;
    left: 34px;
    top: 0;
    z-index: 1;
}
.all_page::after {
    right: 44px;
    left: auto;
    transform: scale(-1,-1);
    z-index: -1;
}

#top_cms, .all_page {
    background-color: #ffffff;
    background-image: linear-gradient(-90deg, rgba(221,238,204,0.41) 50%, transparent 50%), linear-gradient(rgba(221,238,204,0.40) 50%, transparent 50%);
    background-size: 53px 53px;
}
#top_cms .item4 {
    top: -90px;
    left: 9px;
    max-width: 283px;
    z-index: 4;
}
#top_cms .item6{
	padding: 34px 20px 27px;
    background-color: #fffff0;
	z-index: 3;
}
#top_cms .item6 img{width: 435px;}
#top_cms .cms_title{padding-left: 20px;}
#top_cms .cms_title .title_bg{
    width: 100px;
    height: 100px;
    left: -10px;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
    border-radius: 50% 50% 50% 60%/50% 50% 60% 60%;
	background-color: #ffeeee;
}

.other .box {
	background-image: url(../dup/img/other_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
}
.other .box:hover p, .other .box:hover h2 span{
	text-shadow: 1px 1px 1px #8c6600, -1px 1px 1px #8c6600, 1px -1px 1px #8c6600, -1px -1px 1px #8c6600, 1px 0px 1px #8c6600, 0px 1px 1px #8c6600, -1px 0px 1px #8c6600, 0px -1px 1px #8c6600;
}
.other .box_title2{font-weight: bold;}
.other .box:hover {background-image: none;background-color: #fff;}


/* ---------- TOPCME.下層 ---------- */
#page_title p {text-shadow: 1px 1px 0 #FFFFF0, -1px -1px 0 #FFFFF0, -1px 1px 0 #FFFFF0, 1px -1px 0 #FFFFF0, 0px 1px 0 #FFFFF0, 0-1px 0 #FFFFF0, -1px 0 0 #FFFFF0, 1px 0 0 #FFFFF0;}
#page_title p.font_25{font-weight: bold;}
.cate_list li a{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.cate_title {
    background-color: transparent;
    padding: 0;
    margin: 0;
    display: block;
    border: none;
    width: 100%!important;
    font-size: 22px;
    text-align: left;
    padding-bottom: 10px;
    padding-left: 53px;
    margin-bottom: 50px;
    border-bottom: 3px dashed #ffd255;
    color: #333333;
    font-weight: bold;
    position: relative;
	box-sizing: border-box;
}
.cate_title::before {
    content: '';
    display: inline-block;
    width: 60px;
    height: 60px;
    background-image: url(../dup/img/cate_title_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: -11px;
}
#cms_3-c .box_title1{position: relative;padding-left: 33px;color: #c78b28;}
#cms_3-c .box_txt1{line-height: 1.7;}
#cms_3-c .box_title1::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../dup/img/menu_title_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: -6px;
}
#cms_6-c .circle, #cms_6-c .arrow{display: none}
#cms_6-c .txt_color1 {
    color: #fff;
    font-weight: 500;
}
#cms_6-c .txt_color1 span {
    position: relative;
    z-index: 1;
    display: block;
    padding: 1rem 2rem;
    background: #f5babb;
	font-size: 20px;
}
#cms_6-c .txt_color1:before, #cms_6-c .txt_color1:after {
    position: absolute;
    z-index: 0;
    bottom: -10px;
    display: block;
    content: '';
    border: 1.5em solid #eca7a8;
}
#cms_6-c .txt_color1:before {
    left: -30px;
    border-left-width: 15px;
    border-left-color: transparent;
}
#cms_6-c .txt_color1:after {
    right: -30px;
    border-right-width: 15px;
    border-right-color: transparent;
}
#cms_6-c .cate_box{
	box-shadow: 0 2px 4px rgb(0 0 0 / 0);
	border: none;
	background-color: transparent;
}
#cms_6-c .box_txt1 {
    padding: 122px 30px 30px;
    width: calc(100% - 27px);
    margin: auto;
    margin-top: -88px;
    border: 3px solid #eee;
    background-color: #fff;
	box-sizing: border-box;
	border-radius: 20px;
}
#cms_6-c {
  counter-reset: number 0;
}
#cms_6-c .cate_box {
    position: relative;
    padding-top: 50px;
	padding-bottom: 30px;
    padding-left: 20px;
}
#cms_6-c .cate_box:before {
    counter-increment: number 1;
    content: "0" counter(number);
    display: inline-block;
    position: absolute;
    top: -102px;
    left: -5px;
    z-index: 1;
    font-size: 108px;
    font-weight: 100;
    color: #ffe291;
}
.cms_5-c .box_txt1::before, #cms_5-c .box_txt1::before{color: #fbb5ca!important;}
#tel_CONTACT a{border-radius: 20px}


/* ---------- bnr ---------- */
.bnr1 {
	width: 500px;
    margin-bottom: -19px;
    margin-top: 115px;
}
.bnr2 {
    width: 450px;
    margin-bottom: 72px;
    margin-top: -17px;
}
.b_wrap .bnr{width: 31.33333%!important;margin-top: 10px;}
.bnr_img {border-radius: 15px}


/* IE */
@media all and (-ms-high-contrast: none){
#page8 #tel_CONTACT p a{padding-top: 27px;}
.cate_title::before{top: 3px!important;}
}

/* ---------- 1000px ---------- */
@media screen and (max-width: 1000px){
#nav_menu{top: 27px;}
header .logo{width: 30%;background-color: #fff;border-radius: 0 0 20px 0;}
header .logo img{padding: 18px;box-sizing: border-box;}
#header{padding-top: 0;padding-left: 0;}
.under_page header .logo {width: 20%;background-color: transparent;border-radius: 0;}
.under_page #header .logo img{padding: 0}
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.main_img_wrap .catch{bottom: 100px;}
#contents .box figure.t_cms_img3::before{right: -32px;bottom: -30px;}
#top_cms .item4{width: 29%}

#contents .box.first .txt_wrap {
    width: 90%;
    padding-right: 0;
}
#contents .box.first figure {
    width: 70%;
    margin-top: 50px;
}
#top_cms, .all_page{background-size: 62px 63px;}
#top_cms::after, .all_page::after{left: 47px;}
	
/*  bnr  */
.bnr1{width: 55%;}
.bnr2{width: 55%;margin-top: 67px;margin-bottom: 75px;}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
.overlay ul{width: 77%;}
body {font-size: 14px;}
#loading_logo{width: 59%!important;}
header .logo{width: 38%;margin-left: -2px;}
header .logo img{padding: 12px 10px 13px 8px;}
.under_page header .logo{width: 28%;}
.under_page header .logo img{padding: 0}
#nav_menu{top: 3px;right: 5px;}
.main_img_wrap .catch{bottom: 170px;background-color: transparent}
.main_img_wrap .catch span{color: #ffffff;}
	
.t_cms_txt3 span, .t_cms_txt6 span{font-size: -webkit-calc(1rem + 2px);font-size: calc(1rem + 2px);}
#contents{padding-top: 123px;padding-bottom: 126px;}
#contents .box h3{font-size: -webkit-calc(1rem + 3px);font-size: calc(1rem + 3px);}
#contents .box h3::after{width: 208px;top: -77px;left: -10px;}
#contents .box:nth-child(3){margin-top: 27px}
#contents .box:nth-child(3) .txt_wrap{margin-top: 99px;}
#contents .box:nth-child(4){margin-top: 73px;}
#contents .box figure::before{right: -23px;bottom: -20px;}
#contents .box figure.t_cms_img2::before{right: auto}
#contents .box figure.t_cms_img3::before{right: -20px;bottom: -30px;}

#top_cms .item4{width: 43%;top: -105px;}
#top_cms .item6{padding: 34px 20px 27px 10px;}
#top_cms .item6 img{width: 97%;}
#top_cms::after, .all_page::after{background-size: 30px;left: 9px;}
.all_page::after{right: 9px;left: auto}
.other .box{background-position: left -6px top;}
.other .box:last-child{background-position: right -18px bottom;}
.other .box_title, #top_cms .cms_title p{font-size: 22px;}

#page_title h2, #page_title p{text-shadow: none;color: #7b5a00;letter-spacing: 2px;}
.page_title_box:before{color: #7b5a00;}
#page_title .img-container::after{background-color: rgba(253,253,191,0.3)!important;}	

.cate_title{font-size: 18px;padding-left: 35px;}
.cate_title::before{width: 40px;height: 40px;top: -7px;}

#cms_3-c .box_title1{padding-left: 27px;}
#cms_3-c .box_title1::before{width: 30px;height: 30px;top: 1px;}
#cms_6-c .cate_box{padding: 10px;padding-top: 35px;}
#cms_6-c .cate_box:before {
    top: -77px;
    left: -10px;
    right: 0;
    text-align: center;
    font-size: 81px;
}
#cms_6-c .txt_color1 span{margin-left: 20px;margin-right: 20px;font-size: 18px;text-align: center;}
#cms_6-c .txt_color1:before{left: -22px;}
#cms_6-c .txt_color1:after{right: -21px;}
#cms_6-c .box_txt1 {
    padding: 40px 15px 20px;
    width: 100%;
    margin-top: -8px;
}

 .other .box:last-child {
     background-position: right 0px bottom;
 }
 .other .box {
     background-position: left 0px top;
 }
#contents .box.first figure {
    width: 90%;
    margin-top: 30px;
}
#top_cms, .all_page{background-size: 53px 53px;}
	
/*  bnr  */
.bnr1{width: 90%;margin-bottom: 30px;margin-top: 85px;}
.bnr2{width: 100%;margin-top: 53px;margin-bottom: 56px;}
.b_wrap .bnr{width: 75%!important;margin-top: 5px;}
}
