@import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Pangolin&display=swap');
body{    font-family: 'Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
#intro h2 span::before, #contents h3::before{font-family: 'Pangolin', cursive;font-weight: normal!important;}

header #header #header_menu li a span, #intro h2, #contents h3, .cms_title h2, #page_title, .cate_title, .info_title span{
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 700;
	font-style: normal;
}
header #header #header_menu li a span{
	font-size: 16px;
    letter-spacing: 0px;
}

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #84ca4a;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
body,.txt_color_nomal{color: #573001;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #6d4926} /* メインカラー */
.txt_color2{color: #e6e6e6} /* サブカラー */
.txt_color3{color: #F29100} /* アクセントカラー1 */
.txt_color4{color: #c9baa9} /* アクセントカラー2 */
.txt_color5{color: #e83421;}

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #6d4926} /* メインカラー */
.bg_color2{background-color: #e6e6e6} /* サブカラー */
.bg_color3{background-color: #F29100} /* アクセントカラー1 */
.bg_color4{background-color: #c9baa9} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #6d4926}
.border_color2{border-color: #c9baa9}
.border_color3{border-color: #F29100}
.border_color4{border-color: #c9baa9}

/* hover_color */
.hvr_txt_color_nomal:hover{color: #573001;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #6d4926} /* メインカラー */
.hvr_txt_color2:hover{color: #e6e6e6} /* サブカラー */
.hvr_txt_color3:hover{color: #F29100} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #c9baa9} /* アクセントカラー2 */

.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #6d4926} /* メインカラー */
.hvr_bg_color2:hover{background-color: #c9baa9} /* サブカラー */
.hvr_bg_color3:hover{background-color: #F29100} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #c9baa9} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

.hvr_border_color1:hover{border-color: #6d4926}
.hvr_border_color2:hover{border-color: #e6e6e6}
.hvr_border_color3:hover{border-color: #F29100}
.hvr_border_color4:hover{border-color: #c9baa9}

#intro h2 span.border_so2-b, #contents h3, .cms_title h2{color: #6d4926;}
#info .info_box{background-color: transparent;}
#main_img .svg_box{color: #fff;}
#page_title .svg_box{color: #f6f0e2;}
header #header #header_menu li a span{color: #333;}
header #header #header_menu li a span:hover{color: #F29100;}


/* design ---------------------------------------------------------------------------------------------*/

/* ---------- all ---------- */
body{background: url(../dup/img/bg1.jpg) repeat;background-color: #fef7e3;}
header {background: rgba(255,255,255,0.6);}
header #header #header_menu li:last-child a span, .more a{
	background-color: #84ca4a;
    border-color: #84ca4a;
    color: #fff;
    border-radius: 45px;
	padding-top: 5px;
	padding-bottom: 7px;
}
header #header #header_menu li:last-child a:hover span{opacity: 0.5}
#logo{padding-top: 26px;}
#logo .logo{width: 270px;}
#copyright {
    background: url(../dup/img/bg3.jpg);
    background-size: 731px;
    background-position: left top;
    color: #fff;
    font-weight: bold;
}
footer .bg-mask{background: url( "../dup/img/bg2.jpg" ) repeat;background-size: 600px;}
.svg_box2{color: #fff;}
.svg_box2 svg{fill-opacity: 1;}


/* ---------- top ---------- */
#main_img{position: relative;max-height: 95vh}
#main_img::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(../dup/img/main_txt.png);
    background-repeat: no-repeat;
    background-size: 39%;
    background-position: center right 9%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}
#main_img .svg_box{z-index: 99995!important;}

#intro{z-index: 99998;}
#intro #intro_txt{
	padding-bottom: 150px;
	padding-top: 107px;
	background: url( "../dup/img/bg2.jpg" ) repeat;
	background-size: 600px;
}
#intro h2 span.border_so2-b, #contents .box, #intro #intro_txt p, #contents h3, #top_cms, #info .width_1280-max {position: relative;}
#intro h2 span.border_so2-b {
    display: block;
    font-size: 26px;
    line-height: 1.7;
    border: none;
    padding-top: 78px;
}
#intro .intro_txt1 h2 span {
    padding-top: 35px;
    display: inline-block;
}
#intro .intro_txt1 h2 span.border_so2-b::before {
    display: inline-block;
    content: "Introduction";
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    font-size: 40px;
    color: #f29100;
    font-weight: normal;
}
#intro .intro_txt2 h2 span.border_so2-b::before {
    display: inline-block;
    content: "";
    position: absolute;
    width: 143px;
    height: 143px;
    background-image: url(../dup/img/intro_deco1.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    top: -53px;
    left: 0;
    right: 0;
    margin: auto;
}
#intro .intro_txt2 p {
    padding: 20px 50px;
    background-color: rgba(254,244,217,0.56);
	border-radius: 30px;
    background-size: 700px;
    line-height: 1.9;
	position: relative;
}
#intro .intro_txt2 p::before {
    position: absolute;
    content: "";
    width: 13%;
    height: 5px;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #F29100;
    border-radius: 10px;
}

#contents .box_wrap{
	width: 93%;
    margin: auto;
	padding-top: 65px;
}
#contents .box:first-of-type::before, #contents .box:nth-of-type(2)::before, #contents .box:last-of-type::before, #top_cms::before, #info .width_1280-max::before {
    content: '';
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
	z-index: 1;
}
#contents .box:first-of-type::before {
    width: 166px;
    height: 166px;
    background-image: url(../dup/img/contents_deco1.png);
    right: 0;
    bottom: -121px;
}
#contents .box:nth-of-type(2)::before {
    width: 156px;
    height: 149px;
    background-image: url(../dup/img/contents_deco2.png);
    left: -35px;
    bottom: -62px;
    transform: scale(-1, 1);
}
#contents .box:last-of-type::before {
    width: 205px;
    height: 125px;
    background-image: url(../dup/img/contents_deco1.png);
    right: 1px;
    bottom: -41px;
    transform: rotate(-13deg);
}
#contents .box .grid_6:first-of-type{position: relative}
#contents .box .grid_6:first-of-type::before {
    display: inline-block;
    content: "";
    width: 100%;
    height: calc(100% + 68px);
    position: absolute;
    top: 19px;
    right: 0;
    left: 0;
    margin: auto;
    background: rgba(255,253,249,0.52);
    border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
    z-index: -1;
}
#contents h3 {
    display: inline-block;
    width: auto!important;
    margin-right: auto;
    margin-left: 0;
	font-size: 24px;
	padding-top: 42px;
}
#contents .box:nth-of-type(2) h3{
	margin-left: 8.33333%;
}
#contents h3::before {
    display: inline-block;
    content: "Point01";
    position: absolute;
    top: -9px;
    left: 0;
    font-size: 36px;
    color: #f29100;
}
#contents .box:nth-of-type(2) h3::before{content: "Point02";}
#contents .box:nth-of-type(3) h3::before{content: "Point03";}
#contents figure img{border-radius: 20px}

#top_cms{width: 93%;}
.cms_title h2{
	border-bottom: 4px dotted #f29100;
    display: inline-block;
	font-size: 25px;
}
.info_title span{border-radius: 45px;}
#logo2{width: 297px;}



/* ---------- 下層, cms ---------- */
#page_title h2 span{border-radius: 5px;padding-bottom: 18px;}
.cate img, .cate_box img, .square_img, .rectangle_img{border-radius: 20px}
#main_img .rectangle_img{border-radius: 0}
.cate_list li a {
    background-color: #ffffff;
    border-radius: 45px;
    padding-left: 20px;
    padding-right: 20px;
	font-size: 16px;
}
.cms_1-c .cate_box, #cms_1-c .cate_box{border-bottom: 1px dashed #c9baa9;}
#cms_2-a .box_title1{display: inline-block;border-bottom: 4px dotted #f29100;padding-bottom: 5px;margin-bottom: 20px;}
.cms_5-c .bofx_title1, .cms_5-c .box_txt1{font-size: 16px;}
.cms_5-c .box_title1::before{
	font-size: -webkit-calc(1rem + 6px);
    font-size: calc(1rem + 6px);
    color: #F29100;
}
#cms_5-c .box_title1::before{color: #F29100;}
.cms_5-c .box_txt1::before, #cms_5-c .box_txt1::before{color: #806953;}
#cms_3-c .cate_title {
    background-color: transparent;
    padding: 0;
    margin: 0;
    display: block;
    border: none;
    width: 100%!important;
    font-size: 24px;
    padding-bottom: 14px;
    margin-bottom: 25px;
    font-weight: 700;
    position: relative;
	text-align: center;
	color: #84ca4a;
}
#cms_3-c .cate_title::before {
    position: absolute;
    content: "";
    width: 40px;
    height: 2px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #84ca4a;
}
#cms_3-c .cate_txt1 {
    text-align: center;
    padding-bottom: 30px;
}
#tel_contact a{
	border-radius: 45px;
    color: #fff;
}
#page8 .grid_4{max-width: 300px;}
#yoyaku01 a, #yoyaku02 a, #yoyaku03 a {
    color: #f29100;
    border-color: #f29100;
    border-radius: 45px;
    border: 2px solid;
}
#yoyaku02 a {color: #84ca4a;border-color: #84ca4a;}
#yoyaku03 a {color: #67533f;border-color: #67533f;}



/* アニメーション ---------------------------------------------------------------------------------------------*/
.fadein{
	transform: translateY(30px);
	transition: transform 1.5s, opacity 2s;
	opacity: 0;
}
.fadein.start{
	transform: translateY(0);
	transition: transform 1.5s, opacity 2s;
	opacity: 1;
}


/* IE */
@media all and (-ms-high-contrast: none){
#contents h3{width: 100%!important}
header #header #header_menu li:last-child a span{padding-top: 10px;padding-bottom: 2px!important;}
#page_title h2 span{padding-bottom: 3px!important;padding-top: 13px!important}
#cms_5-c .cate_title{padding-top: 19px !important;}
#cms_5-c .box_title1::before{top: 5px!important;}
#page9 .box_wrap .box p a{padding: 4px 10px 6px!important}
.pager li a span{padding-top: 0px !important}
#page8 #tel_contact p a{padding: 17px 20px 17px!important;}

}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#logo{padding-top: 17px}
#logo .logo {width: 212px;}
header #header #header_menu li{width: auto;}
#main_img::before{top: 40px;background-size: 43%;background-position: center right 20px;}
#intro h2::before{
	width: 14%;
	right: -6px;
	top: -129px;
}
#contents .box:first-of-type::before{
	width: 20%;
}
#contents .box:nth-of-type(2)::before{
	width: 20%;
}
#contents .box:last-of-type::before{
	width: 24%;
}
#info .width_1280-max::before{
	width: 34%;
}
#top_cms{
	min-width: 93%;
}
#top_cms::before{
	width: 14%;
	left: -16px;
	bottom: -215px;
}
#info_title_box{position: relative}
#info_title_box::before{
	display: inline-block;
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 0;
}
#page_title #filter_white{padding-top: 203px!important;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
header{padding-bottom: 0;}
#logo{padding-top: 9px;}
#logo .logo{width: 167px;text-align: left;}
#logo2{width: 220px;}
#main_img{margin-top: 61px;}
#main_img::before {
    top: 0;
    background-size: 56%;
    background-position: center right 5px;
}
#intro #intro_txt{padding-top: 83px;padding-bottom: 68px;}
#intro .intro_txt1 h2 span{padding-top: 23px;font-size: 21px;width: 93%;margin: auto;}
#intro .intro_txt2 h2 span{padding-top: 23px;font-size: 21px;}
#intro .intro_txt1 h2 span::before{font-size: 32px;}
#intro .intro_txt2 h2 span.border_so2-b::before{width: 99px;top: -73px;}
	
#intro #intro_txt p{padding: 20px;line-height: 1.7;}
#intro .intro_txt2 p::before{width: 20%;}
	
#contents .box_wrap{padding-top: 13px;}
#contents h3{font-size: 20px;padding-top: 31px;margin-bottom: 25px;}
#contents .box:nth-of-type(2) h3{margin-left: 0;}
#contents .box .grid_10_sp{width: 95.33333%!important;}
#contents h3::before{font-size: 28px;}
#contents figure:before{left: -7px;bottom: -9px;}
#contents .box:first-of-type::before{bottom: -141px;width: 25%;}
#contents .box:nth-of-type(2)::before{width: 28%;left: -3px;}
#contents .box:last-of-type::before{width: 29%;bottom: -48px;}
#top_cms::before{width: 18%;left: -9px;}
#info .width_1280-max::before{width: 38%;top: -87px;}

.cms_title h2{font-size: 21px;}
.cms_2-c .box_title1{color: #84ca4a;}
.cms_2-c .cate_box{margin-bottom: 15px;}
.cms_2-c .cate_txt1{padding-top: 0;font-size: 14px;}

#page_title #filter_white{padding-top: 130px!important;}
.cate_list li{margin: 0 0 10px;}
.cate_list li a{font-size: 14px;padding: 8px 15px;}
#cms_2-c .cate_txt1{font-size: 14px;}
#cms_3-c .cate_txt1{font-size: 14px;}
#cms_3-c .cate_title{font-size: 21px}

#copyright{text-align: left;padding-left: 10px;}
}


/* ---------- 2021/06/30 ---------- */
.intro_txt2 h2 span.txt_color3::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 7px;
    background-image: url(../dup/img/border.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: -7px;
}
.intro_txt2 .d_flex{max-width: 1100px!important;}
.intro_txt2 .arrow {
    width: 155px;
    margin-top: 42px;
    margin-bottom: 104px;
}
.intro_txt2 .txt_box {
  position: relative;
  padding: 1.5rem;
  text-align: center;
  border: 2px solid #000;
  background: #fff;
}
.intro_txt2 .txt_box:before,
.intro_txt2 .txt_box:after {
  position: absolute;
  content: '';
}
.intro_txt2 .txt_box {
    position: relative;
    padding: 35px 30px 35px;
    text-align: center;
    border: 2px solid #000;
    background: #fff;
    border-radius: 15px;
    max-width: 1100px;
    margin: auto;
}
.intro_txt2 .txt_box:before {
    top: -59px;
    left: calc(50% - 64px);
    width: 120px;
    height: 120px;
    border: 2px solid #000;
    border-radius: 50%;
    background: #fff;
}
.intro_txt2 .txt_box:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 15px;
}
.intro_txt2 .txt_box i {
  font-size: 30px;
  font-size: 3rem;
  line-height: 60px;
  position: absolute;
  z-index: 1;
  top: -49px;
  left: calc(50% - 41px);
  width: 80px;
  height: 60px;
  text-align: center;
}
.intro_txt2 .txt_box span.box {
    position: relative;
    z-index: 1;
    line-height: 2;
    font-size: 18px;
}
.intro_txt2 .txt_box .txt_color5 {
    font-size: calc(1rem + 7px);
    font-weight: bold;
    padding: 0 2px;
}
#contents .box:nth-of-type(1) h3::before{
    content: "";
    display: inline-block;
    width: 100px;
    height: 80px;
    background-image: url(../dup/img/item1.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    top: -19px;
    transform: translateX(-50%);
}
#contents .box:nth-of-type(2) h3::before{content: "Point01";}
#contents .box:nth-of-type(3) h3::before{content: "Point02";}
#contents .box.pic h4{border-radius:10px 10px 0 0}
#contents .box.pic figure, #contents .box.pic img{border-radius: 0 0 10px 10px}
#contents .box.pic .d_flex{margin-top: 35px;}

.bnr_box .grid_4 {
    max-width: 350px!important;
}
.bnr_box .grid_4.yoyaku::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(../dup/img/con_bnr01_item.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 20%;
    position: absolute;
    left: -12px;
    top: -17px;
    z-index: 10;
    pointer-events: none;
}
@media screen and (max-width: 768px){
.bnr_box .grid_4 {
    width: 45.66667%!important;
}
}
@media screen and (max-width: 667px){
.intro_txt2 .txt_box .txt_color5{font-size: calc(1rem + 2px);}
.intro_txt2 .txt_box{padding: 20px;text-align: left;}
.intro_txt2 .txt_box span.box{line-height: 1.7;font-size: 14px;}
.intro_txt2 .d_flex{transform: scale(1.055);}
.intro_txt2 .arrow {
    width: 92px;
    margin-top: 60px;
    margin-bottom: 90px;
}
#contents .box.pic h3{width: 80%!important;}
#contents .box.pic .d_flex{margin-top: 10px;}
.bnr_box .grid_4 {width: 100%!important;}
}



/* ---------- 2021/07/29 ---------- */

/* モーダル */
.modal_bt{cursor: pointer}
.modal_bg{
     top: 0;left: 0;
     background-color: rgba(0,0,0,0.8);
     z-index: 9
}
.modal_box{
     max-height: 80%;
     overflow-y: auto;
     z-index: 10
}
.close_bt{cursor: pointer}



/* main_img */
#main_img::before{
    background-size: 76%;
    background-position: center;
}
@media screen and (max-width: 768px){
#main_img::before{background-size: 88%;}
}
@media screen and (max-width: 667px){
#main_img::before{background-size: 88%;background-image: url(../dup/img/main_txt_sp.png);}
}