@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Londrina+Outline&display=swap');

body, .font_sans-serif, .font_en {
    font-family: 'Quicksand', 'Kosugi Maru', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro," メイリオ", Meiryo, Osaka," ＭＳ Ｐゴシック", MS PGothic," sans-serif"!important;
}
.txt1, .txt2, .txt4, .txt5, .txt7, .cate_title, .box_title1, .cms_title h2, #main_menu ul li a {
    font-family: maru-maru-gothic-clr-stdn, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro," メイリオ", Meiryo, Osaka," ＭＳ Ｐゴシック", MS PGothic," sans-serif"!important;
    font-weight: 400;
    font-weight: bold;
    font-style: normal;
}
h2, h3, h4, h5, h6, p, header a, #copyright, .button2, #footer_menu {transform: rotate(0.03deg);}
#main_menu ul li a {transform: rotate(0.03deg);}
.txt1, .txt2, .txt4, .txt5, .txt7, .cate_title, .box_title1, .cms_title h2, #main_menu ul li a {transform: rotate(-0.1deg);}
#contents3::after{font-family: 'Londrina Outline', cursive;}



/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #38a053;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #38a053} /* メインカラー */
.txt_color2{color: #e6e6e6} /* サブカラー */
.txt_color3{color: #e15c77} /* アクセントカラー1 */
.txt_color4{color: #a29280} /* アクセントカラー2 */

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

/* border-color ※!important */
.border_color1{border-color: #38a053}
.border_color2{border-color: #e6e6e6}
.border_color3{border-color: #e15c77}
.border_color4{border-color: #a29280}

/* 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: #38a053} /* メインカラー */
.hvr_txt_color2:hover{color: #e6e6e6} /* サブカラー */
.hvr_txt_color3:hover{color: #e15c77} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #a29280} /* アクセントカラー2 */

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

.hvr_border_color1:hover{border-color: #38a053}
.hvr_border_color2:hover{border-color: #e6e6e6}
.hvr_border_color3:hover{border-color: #e15c77}
.hvr_border_color4:hover{border-color: #a29280}

#page_title .page_box::before{background-color: #a29280;}


/* loader ---------------------------------------------------------------------------------------------*/
#fakeloader .fl{
	position: absolute;
	top: 49%!important;
	left: 50%!important;
	transform: translate(-50%,-50%);
	width: 50%;
	max-width: 183px;
}
#fakeloader .fl{
	animation-name: loader;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
}
@keyframes loader {
	0% {opacity: 0;}
	100% {opacity: 1;}
}



/* design ---------------------------------------------------------------------------------------------*/
.width_1280-max {width: 100%;max-width: 100%;}
#contents1,#contents2,#contents3,.width_1280-max{padding-left: 50px;padding-right: 50px;}
.txt_shadow-b{text-shadow: none;}
.button {
    background-color: #38a053;
    color: #ffffff;
    border: none;
    text-shadow: 0 0 20px rgb(0 0 0 / 20%);
    border-radius: 5px;
}
.button:hover{transform: translateY(-3px);background-color: #f9cf2a;}
.button:hover::after{box-shadow: inset 0 0 0 15em rgba(56,160,83,0);}
.button2{color: #fff;background-color: #38a053; border-color: #38a053;border-radius: 5px;}
.button2:hover{box-shadow: none;background-color: #e15c77;border-color: #e15c77}
.button .fa-envelope:before{display: none}
.normal_img img, .rectangle_img, square_img {border-radius: 10px;}


/* ヘッダー ---------------------------------------------------------------------------------------------*/
#main_menu{
	margin-bottom: 40px;
    font-size: 16px;
}
#main_menu ul li a {
    color: #5d5c5b;
    padding: 15px 0;
    padding-left: 50px!important;
    margin-bottom: 0;
    background-size: 33px;
    background-position: left 5px center;
    background-repeat: no-repeat;
}
#main_menu ul li a:hover {transform: translateX(10px);}
#main_menu ul li:nth-of-type(1) a {background-image: url(./Dup/img/h_icon01.png);}
#main_menu ul li:nth-of-type(2) a {background-image: url(./Dup/img/h_icon02.png);}
#main_menu ul li:nth-of-type(3) a {background-image: url(./Dup/img/h_icon03.png);}
#main_menu ul li:nth-of-type(4) a {background-image: url(./Dup/img/h_icon04.png);}
#main_menu ul li:nth-of-type(5) a {background-image: url(./Dup/img/h_icon05.png);}

header.bg_color4 {background: url( "../dup/img/bg1.jpg" ) left top / 600px repeat;height: 100vh;top: 0;left: 0;}
header::before {
    position: absolute;
    content: "";
    width: 50px;
    height: 103%;
    top: 0;
    right: -49px;
    background-image: url(./Dup/img/header.png);
    background-size: 100% 100%;
    z-index: 1;
}
#main_menu ul li a::before{display: none}


/* top ---------------------------------------------------------------------------------------------*/
#main_img{position: relative;overflow: hidden}
#main_img .txt_img {
    position: absolute;
    z-index: 4;
    width: 35%;
    min-height: auto;
    left: 50px;
    top: 39px;
}
#contents_box{overflow: hidden}
#contents1 {
	background-image: url(../dup/img/line.png), url(../dup/img/line.png);
    background-repeat: repeat-x;
    background-position: left top 10px, left bottom 10px;
    background-size: 38px;
    padding-top: 68px;
    padding-bottom: 67px;
    /*background-color: #ffffff;
    background: repeating-linear-gradient( -45deg ,#ffffff 0,#ffffff 15px,#eafbf0 15px,#eafbf0 20px);*/
}
#contents1 .bnr{
	width: 30%;
    max-width: 126px;
    margin-bottom: 0;
	margin-top: 39px;
    transform: translateX(15px);
}
#contents1 .bnr a{display: block;transition: transform .3s;position: relative}
#contents1 .bnr:hover a{
	opacity: 1;
	transform: rotate(10deg)
}
.txt1{display: none}
.txt2 {
    background: url(../dup/img/item02.png) center top / 174px no-repeat;
    text-align: center;
    margin: 0 0 34px;
    padding-top: 139px;
}
.txt3{
	max-width: 1000px;
    margin: auto;
}
.img5{position: relative;}
.img5 img, .img6, .img7{border-radius: 173px 5px}

#contents2{
	padding-bottom: 97px;
    padding-top: 66px;
	position: relative
}
#contents2::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 20px;
    top: -141px;
    background-image: url(./Dup/img/item03.png);
    background-size: 19%;
    background-repeat: no-repeat;
    z-index: 3;
	pointer-events: none
}
#contents3{
	position: relative;
	background-color: #eafbf0;
	padding-top: 124px;
	padding-bottom: 80px;
	z-index: 1;
}
#contents3::before {
    position: absolute;
    content: "";
    width: 239px;
    height: 239px;
    right: -21px;
    top: -175px;
    background-image: url(./Dup/img/item01.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
    transform: rotate(-20deg);
}
#contents3::after {
    position: absolute;
    content: "ONLINE SHOP";
    left: 10px;
    top: -69px;
    z-index: 2;
    font-size: 8.472222vw;
    letter-spacing: 1px;
    line-height: 1;
    color: #96c7a3;
    color: #ffffff;
    text-shadow: 2px 2px 0px #96c7a3, -2px 2px 0px #96c7a3, 2px -2px 0px #96c7a3, -2px -2px 0px #96c7a3, 2px 0px 0px #96c7a3, 0px 2px 0px #96c7a3, -2px 0px 0px #96c7a3, 0px -2px 0px #96c7a3;
	font-family: 'Quicksand', 'Kosugi Maru', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro," メイリオ", Meiryo, Osaka," ＭＳ Ｐゴシック", MS PGothic," sans-serif"!important;
}


/* ---------- topcms --------- */
.top_cms_box {
	background-image: url("../dup/img/line.png");
	background-repeat: repeat-x;
	background-position: left bottom 10px;
	background-size: 38px;
	padding: 70px 0;
}
.cms_title{padding-left: 0;text-align: center;}
.cms_title::before{display: none}
.cms_title p{font-size: 18px;}
.cms_1-e{
	padding: 24px 15px 15px;
    background-color: #ffffff;
    box-shadow: 4px 4px 0 rgb(0 0 0 / 10%);
    background: url(../dup/img/bg1.jpg) left top / 640px repeat;
    border-radius: 20px;
	/*border: 3px solid #38a053;*/
}
.cms_1-e .box_title1{border-bottom: none;}
.cms_1-e .date{border-radius: 45px;}


/* cms ---------------------------------------------------------------------------------------------*/
.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;
    margin-bottom: 20px;
    border-bottom: solid 1px #ccc;
    color: #38a053;
    font-weight: bold;
    position: relative;
}
.cate_title::before {
    position: absolute;
    content: "";
    width: 100px;
    height: 1px;
    left: 0;
    bottom: -1px;
    background-color: #38a053;
}
#cms_2-a .cate_box .box_item:last-of-type {
    padding: 30px;
    background-color: #f9f9f3;
    border-radius: 20px;
}
#cms_1-e .date{z-index: 5}



/* ---------- animation --------- */
.anime_txt span{
	display: inline-block;
	opacity: 0;
	-webkit-transform: translateY(20px);
	-ms-transform: translateY(20px);
	transform: translateY(20px);
	transition:transform 0.2s ease;
}
.anime_txt.scrollin span.active{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}
#main_img .txt_img, .popanim, #contents3.popanim::before, #contents3.popanim::after{
	opacity: 0;
	-webkit-transform-origin: bottom center;
	transform-origin: bottom center;
}
#contents3.popanim{
	opacity: 1;
	animation: none;
}
#main_img.start .txt_img, .popanim.start, #contents3.popanim.start::before, #contents3.popanim.start::after{
	-webkit-animation: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
	animation: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
	-webkit-animation-name: scalein, fadein;
	animation-name: scalein, fadein;
}
#contents3.popanim.start::before{animation-delay: .25s;}


@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes scalein {
  0% { transform: scale(1) translateY(10px);opacity: 0; }
  70% { transform: scale(1.1) translateY(10px);opacity: 1; }
  100% { transform: scale(1) translateY(0);opacity: 1; }
}
@-webkit-keyframes scalein {
  0% { transform: scale(1) translateY(10px);opacity: 0; }
  80% { transform: scale(1.15) translateY(10px);opacity: 1; }
  100% { transform: scale(1) translateY(0);opacity: 1; }
}





/* IE */
@media all and (-ms-high-contrast: none){
	.pc_box .contact_bt a{padding: 15px 0 14px!important;}
	.contact_bt span:nth-child(3){top: 56%!important;}
	#main_menu ul li a{padding-bottom: 2px!important;margin-bottom: 10px!important;}
	.cms_1-e .date{padding-top: 10px!important;}
	.pager li a{padding: 3px!important}
	.cate_list li a{padding: 10px!important}
	#page10 ul li a{padding: 13px!important;}
}

/* ---------- 1600min ---------- */
@media screen and (min-width: 1600px){
	#contents3::after{font-size: 150px;}
}

/* ---------- 1280 ---------- */
@media screen and (max-width: 1280px){
	#contents2::before{background-size: 22%;top: -140px;}
	#contents3::after{top: -51px;font-size: 8vw;}
	.img5 img, .img6, .img7 {border-radius: 127px 5px;}
}

/* ---------- 1160 ---------- */
@media screen and (max-width: 1160px){
	#contents2::before{background-size: 26%;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	header.bg_color4{height: auto;padding-bottom: 21px;padding-top: 21px;}
	#logo{max-width: 252px;}
	.hamburger{top: 18px;}
	.main_box{padding-top: 73px;}
	#contents2{padding-top: 100px;}
	#contents2::before {
		width: 219px;
		height: 219px;
		background-size: contain;
		top: -133px;
	}
	#contents3::after{top: -46px;font-size: 79px;}
	.img5 img, .img6, .img7{border-radius: 93px 5px;}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
	#logo{max-width: 188px;}
	.hamburger{top: 9px;}
	header.bg_color4{padding-bottom: 18px;padding-top: 18px;}
	.main_box{padding-top: 58px;}
	#main_img .txt_img{width: 38%;left: 11px;top: 13px;}
	.txt1{width: 94%;letter-spacing: 6px;font-size: 17px;}
	.txt2, .txt4, .txt5, .txt7{font-size: 19px;letter-spacing: 1px}
	.cms_title h2{font-size: 23px;}
	
	#contents1, #contents2, #contents3, .width_1280-max {padding-left: 20px;padding-right: 20px;}
	#contents2{padding-bottom: 65px;padding-top: 70px;}
	#contents2::before {
		width: 177px;
		height: 177px;
		top: -107px;
		left: 50%;
		transform: translateX(-50%);
	}
	#contents3::before {
		width: 176px;
		top: -113px;
	}
	#contents3::after {
		top: -33px;
		left: 13px;
		font-size: 53px;
		width: 237px;
	}
	.txt4{
		text-align: center;
		border-bottom: 2px dotted;
		padding-bottom: 7px;
	}
	.img5{margin-top: 40px;}
	
	#contents1, .top_cms_box{background-size: 32px;}
	#contents1 .bnr{width: 44%;}
	.cate_title{font-size: 18px}
	footer .logo{text-align: center;}
	footer .logo img{max-width: 167px;}
	footer .d_flex > .grid_5.grid_12_sp.mg_t-20px{text-align: center;}
	.footer_cms{text-align: left;display: inline-block;}
}

@media screen and (max-width: 320px){
	#contents3{padding-top: 100px;}
	#contents3::after{font-size: 40px;}
	#contents3::before{width: 160px;}
	.button{width: 100%}
}