@charset "UTF-8";

/*--------------------------------------
　body
---------------------------------------*/
html {
  font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
}
body {
	min-width: 1200px;
  color: #231815;
  font-size: 16px;
	font-family: "Noto Sans JP", sans-serif;
  background: #FDF7F1;
  -webkit-text-size-adjust: none;
	word-break: break-word;
	word-wrap: break-word;
	overflow-wrap: break-word;
	overflow-x: hidden;
}
body, html {
	height: 100%;
}
body .inner {
	max-width: 1200px;
	margin: auto;
}
a {
	color: #231815;
	display: block;
  text-decoration: none;
	transition: all 0.3s;
}
a:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
}
a.txt_line {
  text-decoration: underline;
  display: inline;
}

/*----- width -----*/
.wd_50 {
	width: 50%;
}

/*----- color -----*/
.c_wh {
	color: #FFFFFF;
}
.c_bl {
	color: #232B5B;
}
.c_rd {
	color: #EB7A6A;
}

/*----- background -----*/
.bg_bd_wh {
	background: rgba(255,255,255,0.40);
  border: 2px solid #fff;
  border-radius: 10px;
  box-sizing: border-box;
}
.bg_bd_bl {
	background: #F5F5F5;
  border: 2px solid #fff;
  border-radius: 10px;
  box-sizing: border-box;
}
.bg_bl {
	background: #D4E0F3;
}
.bg_or {
	background: #F3E7DC;
}

/*----- font -----*/
.f_zenkaku {
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.f_montserrat {
	font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
}
.caution {
	font-size: 13px;
}
.f_500 {
	font-weight: 500;
}
.f_bold {
	font-weight: bold;
}
.txt {
	text-align: justify;
	line-height: 1.8em;
}
.t_center {
	text-align: center;
  line-height: 1.8em;
}
.t_center_sp_j {
	text-align: center;
  line-height: 1.8em;
}

/*----- under line -----*/
.u_line {
  background: linear-gradient(transparent 70%, #FFFAAF 70%);
}

/*----- margin -----*/
.mb_10 {
	margin: 0 0 10px;
}
.mb_20 {
	margin: 0 0 20px;
}
.mb_30 {
	margin: 0 0 30px;
}
.mb_40 {
	margin: 0 0 40px;
}
.mb_50 {
	margin: 0 0 50px;
}
.mb_60 {
	margin: 0 0 60px;
}
.mb_70 {
	margin: 0 0 70px;
}
.mb_80 {
	margin: 0 0 80px;
}
.mb_90 {
	margin: 0 0 90px;
}
.mb_100 {
	margin: 0 0 100px;
}
.m_auto {
	margin: auto;
}

/*----- fx_box -----*/
.rev {
	flex-direction: row-reverse;
}
.fl01 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/*----- only -----*/
.pc_only {
	display: block;
}
.sp_only {
  display: none;
}

@media screen and (max-width: 768px){
body {
	min-width: 100%;
  font-size: 13px;
}	
body .inner {
	max-width: 100%;
	padding: 0 20px;
}
  
/*----- width -----*/
.wd_50 {
	width: 100%;
}  
  
/*----- font -----*/
.caution {
	font-size: 11px;
}  
.txt {
	line-height: 1.7em;
}  
.t_center {
  line-height: 1.7em;
}
.t_center_sp_j {
	text-align: justify;
  line-height: 1.7em;
}
  
/*----- margin -----*/
.mb_20 {
	margin: 0 0 10px;
}
.mb_30 {
	margin: 0 0 20px;
}
.mb_40 {
	margin: 0 0 30px;
}
.mb_50 {
	margin: 0 0 30px;
}
.mb_60 {
	margin: 0 0 40px;
}
.mb_70 {
	margin: 0 0 40px;
}
.mb_80 {
	margin: 0 0 50px;
}
.mb_90 {
	margin: 0 0 50px;
}  
.mb_100 {
	margin: 0 0 60px;
}
.m_auto {
	margin: auto;
}
  
/*----- fx_box -----*/
.fl01 {
  display: block;
}  
  
/*----- only -----*/
.pc_only {
	display: none;
}
.sp_only {
  display: block;
}  
}





/*--------------------------------------
　Header
---------------------------------------*/
header {
	width: 100%;
	min-width: 1200px;
	height: 75px;
  background: #FFF;
	margin: auto;
	position: fixed;
	top: 0;
	z-index: 9999;
}
header .header_inner {
  width: 1200px;
  height: 75px;
  margin: auto;
	position: relative;
}
header .header_inner::before {
  content: "";
  display: block;
  position: absolute;
  width: 209px;
  height: 78.5px;
  background: url("../images/trim/h_circle.png") center center no-repeat;
  background-size: 100% auto;
  top: 100%;
  left: 50%;
  transform: translate(-50%,0);
  z-index: -1;
}

/*----- logo -----*/
.header_trim .h_logo .logo {
	width: 85px;
  margin: auto;
  padding: 30px 0 0;
  box-sizing: border-box;
}

/*----- .hb-menu_pc -----*/
#hb-menu_pc {
  display: table;
  position: fixed;
  top: 20px;
  right: 50px;
  width: 200px;
  height: 35px;
  background: #fff;
  border: 2px solid #232B5B;
  border-radius: 100px;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 999;
}
#hb-menu_pc::before {
	content: "MENU";
	display: block;
	position: absolute;
	color: #232B5B;
  font-size: 16px;
	font-weight: 600;
  font-family: "Montserrat", sans-serif;
	top: 50%;
	left: 35px;
	transform: translate(0,-45%);
}
#hb-menu_pc .hb-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 45px;
  transform: translate(0,-50%);
}
#hb-menu_pc span {
  display: block;
  width: 5px;
  height: 5px;
  background: #232B5B;
  border-radius: 100px;
  margin: 0 0 0 5px;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
	
/* ナビゲーションアイコン：アクティブ */
.hb-open #hb-menu_pc span {
  width: 21px;
  height: 3px;
  background: #232B5B;
}
.hb-open #hb-menu_pc span:nth-of-type(1) {
  -webkit-transform: translateY(1px) translateX(52px) rotate(45deg);
  -ms-transform: translateY(1px) translateX(52px) rotate(45deg);
  transform: translateY(1px) translateX(52px) rotate(45deg);
}
.hb-open #hb-menu_pc span:nth-of-type(2) {
  margin-top: 5px;
  opacity: 0;
  -webkit-transform: translateY(9px);
  -ms-transform: translateY(9px);
  transform: translateY(9px);
}
.hb-open #hb-menu_pc span:nth-of-type(3) {
  -webkit-transform: translateY(1px) translateX(0) rotate(-45deg);
  -ms-transform: translateY(1px) translateX(0) rotate(-45deg);
  transform: translateY(1px) translateX(0) rotate(-45deg);
}
.hb-open #hb-menu_pc span:nth-of-type(4) {
  background: none!important;
}

/* overlay */
.pc-overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: transparent;
  pointer-events: none;
  z-index: 10;
  transition: all 0.6s ease;
}
.hb-open .pc-overlay {
  background: rgba(115,104,94,0.70);
  pointer-events: auto;
}

/*----- .sp-g-nav -----*/
.pc-g-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 888;
}
.hb-open .pc-g-nav .g-nav-box {
  transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.pc-g-nav .g-nav-box {
  position: fixed;
  top: 0;
  right: 0;
  padding: 70px 50px;
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all 0.6s ease;
  transform: translateX(100%);
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateZ(0%);
  -ms-transform: translateZ(0%);
  -webkit-transform: translateZ(0%);
  z-index: 999;
}	
.pc-g-nav .g-nav-inner {
  width: 400px;
  height: auto;
  background: #fff;
  border: 2px solid #232B5B;
  border-radius: 10px;
  text-align: center;
  padding: 50px 0;
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}	
.pc-g-nav .g-nav-inner .navi {
	margin: 0 0 35px;
}
.pc-g-nav .g-nav-inner .navi:last-child {
  margin: 0 0 0;
}
.pc-g-nav .g-nav-inner .navi a {
  color: #232B5B;
	font-size: 16px;
	font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
	display: block;
}
	
@media screen and (max-width: 768px){
header {
	width: 100%;
	min-width: 100%;
	height: 60px;
}
header .header_inner {
  width: 100%;
  height: 60px;
}
header .header_inner::before {
  width: 109px;
  height: 41px;
  background: url("../images/trim/h_circle.png") center center no-repeat;
  background-size: 100% auto;
}
  
/*----- logo -----*/
.header_trim .h_logo .logo {
	width: 50px;
  margin: auto;
  padding: 25px 0 0;
}

/*----- .hb-menu_pc -----*/
#hb-menu_pc {
  top: 14px;
  right: 20px;
  width: 105px;
  height: 32px;
  border: 2px solid #232B5B;
}
#hb-menu_pc::before {
  font-size: 12px;
	font-weight: 600;
	left: 13px;
	transform: translate(0,-45%);
}
#hb-menu_pc .hb-inner {
  right: 13px;
}
#hb-menu_pc span {
  width: 4px;
  height: 4px;
  margin: 0 0 0 4px;
}
	
/* ナビゲーションアイコン：アクティブ */
.hb-open #hb-menu_pc span {
  width: 16px;
  height: 2px;
}
.hb-open #hb-menu_pc span:nth-of-type(1) {
  -webkit-transform: translateY(1px) translateX(40px) rotate(45deg);
  -ms-transform: translateY(1px) translateX(40px) rotate(45deg);
  transform: translateY(1px) translateX(40px) rotate(45deg);
}
.hb-open #hb-menu_pc span:nth-of-type(2) {
  margin-top: 5px;
  opacity: 0;
  -webkit-transform: translateY(9px);
  -ms-transform: translateY(9px);
  transform: translateY(9px);
}
.hb-open #hb-menu_pc span:nth-of-type(3) {
  -webkit-transform: translateY(1px) translateX(0) rotate(-45deg);
  -ms-transform: translateY(1px) translateX(0) rotate(-45deg);
  transform: translateY(1px) translateX(0) rotate(-45deg);
}

/*----- .sp-g-nav -----*/
.pc-g-nav .g-nav-box {
  width: 100%;
  padding: 60px 20px;
}	
.pc-g-nav .g-nav-inner {
  width: 100%;
  height: auto;
  border-radius: 10px;
  padding: 40px 0;
}	
.pc-g-nav .g-nav-inner .navi {
	margin: 0 0 30px;
}
.pc-g-nav .g-nav-inner .navi a {
	font-size: 15px;
}
}





/*--------------------------------------
　footer
---------------------------------------*/
footer {
	width: 100%;
	min-width: 1200px;
	background: #232B5B;
  padding: 20px 0 25px;
  box-sizing: border-box;
}
footer .footer_inner {
	max-width: 1200px;
  text-align: center;
  margin: auto;
  position: relative;
}
footer .footer_inner::before {
	content: "";
  display: block;
  position: absolute;
  width: 226px;
  height: 269px;
  background: url("../images/trim/dog_05.png") right top no-repeat;
  background-size: 100% auto;
  top: 0;
  right: 0;
  transform: translate(0,-60%);
}
footer .f_logo {
	width: 70px;
  margin: 0 auto 15px;
}
footer .copy {
  color: #fff;
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
}

@media screen and (max-width: 768px){
footer {
	min-width: 100%;
  padding: 18px 20px 20px;
}
footer .footer_inner {
	max-width: 100%;
}
footer .footer_inner::before {
  width: 79.1px;
  height: 74.15px;
  background: url("../images/trim/dog_05.png") right top no-repeat;
  background-size: 100% auto;
  top: 0;
  right: 0;
  transform: translate(0,-90%);
}
footer .f_logo {
	width: 65px;
  margin: 0 auto 15px;
}
footer .copy {
  font-size: 10px;
}  
}