@charset "UTF-8";


/***************************************************

	共通コンテンツ部

***************************************************/

@import url('https://fonts.googleapis.com/css2?family=Knewave&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

:root {
	--text: #191a1a;
	--color1: #2d5a47;
	--color2: #f0bd65;
	--bgcolor1: rgba(242,238,231,1);
}

html, body{margin:0; padding:0}

body{
	position: relative;
	font-size: 16px;
	font-weight: 400;
	color: var(--text);
	line-height: 1.7;
	font-family: "Zen Kaku Gothic New", sans-serif;

	word-wrap: break-word;
	word-break: break-all;
	
	background-repeat: repeat;
    background-position: 0 0;
    background-size: 50%;
    background-image: url(../images/common/main_bg01.png);
	background-color: var(--bgcolor1);
}

.webp body{
    background-image: url(../images/common/main_bg01.webp);
}


.en{
	font-family: "Knewave", system-ui;
}

a{
	text-decoration: none;
	transition: all 0.2s linear;
}

a:hover{
	opacity: 0.8;
}

img{
	max-width: 100%;
	height: auto;
}

.pc-on{display: block;}
.sp-on{display: none;}


.wrapper{
	width: 1280px;
	margin: 0 auto;
	position: relative;
}

/* --------- ヘッダー ---------- */

header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}

header .logo_box{
	width: 84px;
}




/*------- フッター -------*/

footer{
	padding: 140px 0 185px;
	position: relative;
}

footer::after{
	content: '';
	display: block;
	width: 100%;
	height: 4px;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../images/common/footer_bottom_line.png);
	position: absolute;
	left: 0;
	bottom: 0;
	transform: scale(1, -1);
}

footer .footer_wrapp{
	width: 1040px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

footer .footer_wrapp .left_area{
	width: 302px;
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

footer .footer_wrapp .left_area .footer_logo{
	width: 126px;
}

footer .footer_wrapp .left_area .sns{
	width: 112px;
}

footer .footer_wrapp .left_area .sns ul{
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

footer .footer_wrapp .right_area{
	width: 425px;
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
	justify-content: space-between;
    align-items: flex-start;
}

footer .footer_wrapp .right_area .add{
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
}

footer .footer_wrapp .right_area .add.area01{
	width: 198px;
}

footer .footer_wrapp .right_area .add.area02{
	width: 187px;
}


footer .footer_wrapp .right_area .add .hedding{
	font-size: 10px;
	font-weight: 700;
}

footer .footer_wrapp .right_area .add strong{
	display: block;
	font-weight: 700;
}

footer .footer_wrapp .right_area .root_logo{
	width: 111px;
}

footer .footer_wrapp .copyright{
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	position: absolute;
	bottom: -56px;
	right: 0;
}

footer .footer_img{
	position: absolute;
}

footer .footer_img.footer_item01{
	width: 144px;
	top: 60px;
	left: 0;
}

footer .footer_img.footer_item02{
	width: 238px;
	bottom: 0;
	left: 20px;
}

footer .footer_img.footer_item03{
	width: 156px;
	bottom: 68px;
	right: 0;
}

#totop{
	width: 375px;
	position: fixed;
	bottom: -82px;
	right: 0;
	z-index: 99;
	opacity: 0;
	transition: bottom 0.6s ease, opacity 0.6s ease;
}

#totop.show {
  bottom: 0;
  opacity: 1;
}

#totop .item02{
	width: 60px;
	position: absolute;
    bottom: 0;
    right: 16px;
	cursor: pointer;
	transform: translateY(82px);
	opacity: 0;
	transition: transform 0.6s ease 0.3s, opacity 0.6s ease 0.2s;
}

#totop.show .item02 {
	transform: translateY(0);
	opacity: 1;
}




/*------- コンテンツ -------*/

.sns{

}

.sns ul li a{
	display: block;
	width: 48px;
	height: 48px;
	border: 1px solid #231815;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0px 1px 0px #231815;
	transition: all 0.2s linear;
	position: relative;
}

.sns ul li a:hover{
	box-shadow: 0px 3px 0px #231815;
}

.sns ul li a::after{
	content: '';
	display: inline-block;
	width: 28px;
	height: 28px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
}

.sns ul li a.x::after{
	background-image: url('../images/common/icon_x.png');
}

.sns ul li a.instagram::after{
	background-image: url('../images/common/icon_insta.png');
}








/********************************************************************************
	リッキド用 CSS
********************************************************************************/

@media(max-width:1280px){

body{
	font-size: 1.25vw;
}
.wrapper{
	width: 100%;
}

/* --------- ヘッダー ---------- */

header .logo_box{
	width: 6.5625vw;
}




/*------- フッター -------*/

footer{
	padding: 10.9375vw 0 14.453125vw;
}

footer::after{
	height: 0.3125vw;
}

footer .footer_wrapp{
	width: 81.25vw;
}

footer .footer_wrapp .left_area{
	width: 23.59375vw;
}

footer .footer_wrapp .left_area .footer_logo{
	width: 9.84375vw;
}

footer .footer_wrapp .left_area .sns{
	width: 8.75vw;
}

footer .footer_wrapp .right_area{
	width: 33.203125vw;
}

footer .footer_wrapp .right_area .add{
	font-size: 0.9375vw;
}

footer .footer_wrapp .right_area .add.area01{
	width: 15.46875vw;
}

footer .footer_wrapp .right_area .add.area02{
	width: 14.609375vw;
}

footer .footer_wrapp .right_area .add .hedding{
	font-size: 0.78125vw;
}

footer .footer_wrapp .right_area .root_logo{
	width: 8.671875vw;
}

footer .footer_wrapp .copyright{
	font-size: 0.78125vw;
	bottom: -4.375vw;
}

footer .footer_img.footer_item01{
	width: 11.25vw;
	top: 4.6875vw;
}

footer .footer_img.footer_item02{
	width: 18.59375vw;
	left: 1.5625vw;
}

footer .footer_img.footer_item03{
	width: 12.1875vw;
	bottom: 5.3125vw;
}




/*------- コンテンツ -------*/

.sns ul li a{
	width: 3.75vw;
	height: 3.75vw;
}

.sns ul li a:hover{
	box-shadow: 0px 0.234375vw 0px #231815;
}

.sns ul li a::after{
	width: 2.1875vw;
	height: 2.1875vw;
}



}


/********************************************************************************
	スマートフォン用 CSS
********************************************************************************/

@media(max-width:768px){

body{
	font-size: 3.733333vw;
}

a:hover{
	opacity: 1;
}

.pc-on{display: none;}
.sp-on{display: block;}


.wrapper{
	width: auto;
}

/* --------- ヘッダー ---------- */

header .logo_box{
	width: 17.066667vw;
}




/*------- フッター -------*/

footer{
	padding: 26.666667vw 0 45.333333vw;
}

footer::after{
	content: unset;
}

footer img{
	width: 100%;
}

footer .footer_wrapp{
	width: auto;
	display: block;
}

footer .footer_wrapp .left_area{
	width: auto;
	display: block;
	margin-bottom: 10.666667vw;
}

footer .footer_wrapp .left_area .footer_logo{
	width: 47.466667vw;
	margin: 0 auto 10.666667vw;
}

footer .footer_wrapp .left_area .footer_logo img{
	width: 100%;
}

footer .footer_wrapp .left_area .sns{
	width: auto;
	text-align: center;
	margin: 0 auto;
}

footer .footer_wrapp .left_area .sns ul {
    display: inline-block;
}

footer .footer_wrapp .right_area{
	width: auto;
	display: block;
}

footer .footer_wrapp .right_area .add{
	margin-right: 0;
	font-size: 3.2vw;
	margin-bottom: 4.266667vw;
	text-align: center;
}

footer .footer_wrapp .right_area .add.area01 {
    width: auto;
}

footer .footer_wrapp .right_area .add.area02{
    width: auto;
}

footer .footer_wrapp .right_area .add .hedding{
	font-size: 2.666667vw;
}

footer .footer_wrapp .right_area .root_logo{
	width: 29.6vw;
	margin: 0 auto;
}

footer .footer_wrapp .copyright{
	font-size: 2.666667vw;
	bottom: -20.266667vw;
	right: unset;
	left: 5.333333vw;
}

footer .footer_img{
	position: absolute;
}

footer .footer_img.footer_item01{
	width: 38.4vw;
	top: 8.8vw;
}

footer .footer_img.footer_item02{
	display: none;
}

footer .footer_img.footer_item03{
	width: 43.733333vw;
	bottom: 24vw;
}




/*------- コンテンツ -------*/

.sns{

}

.sns ul li a{
	width: 12.8vw;
	height: 12.8vw;
}

.sns ul li a:hover{
	box-shadow: 0px 1px 0px #231815;
}

.sns ul li a::after{
	width: 7.466667vw;
	height: 7.466667vw;
}


}


/********************************************************************************
	リッキド用 CSS
********************************************************************************/

@media(max-width:430px){



#totop{
	width: 100%;
	bottom: -21.866667vw;
}

#totop .item02{
	width: 16vw;
	right: 4vw;
	transform: translateY(21.866667vw);
}



}