@charset "utf-8";

/*
-----------------------------------------------
▼基本デザイン 2023.7
----------------------------------------------- */
body {
-webkit-text-size-adjust:100%;
color:#333;
-webkit-font-smoothing:subpixel-antialiased;
}

html {
font-size: 62.5%; /* ベースを10pxに指定 */
overflow-x: hidden;
scroll-behavior:smooth;
    font-family: 'Noto Sans JP', sans-serif;
}

body {
font-size: 1.4rem;
color:#333;
text-align: justify;
overflow-x: hidden;
}

a .hv-img {
transition:opacity 0.5s ease-in-out;
}
@media screen and (min-width: 769px) {
	a:hover .hv-img {
	opacity:0.7;
	}
}
/*
-----------------------------------------------
寄せ
----------------------------------------------- */
.tac-all{
text-align:center;
margin-left:auto;
margin-right:auto;
}
.tal{text-align:left;}
.tar{text-align:right;}
/*
-----------------------------------------------
font-size
----------------------------------------------- */
.f12{font-size:1.2rem;}
.f13{font-size:1.3rem;}
.f14{font-size:1.4rem;}
.f15{font-size:1.5rem;}
.f16{font-size:1.6rem;}
.f17{font-size:1.7rem;}
.f18{font-size:1.8rem;}
.f19{font-size:1.9rem;}
.f20{font-size:2.0rem;}
.f22{font-size:2.2rem;}
.f23{font-size:2.3rem;}
.f24{font-size:2.4rem;}
.f25{font-size:2.5rem;}
.f26{font-size:2.6rem;}
.f28{font-size:2.8rem;}
.f30{font-size:3.0rem;}
.f32{font-size:3.2rem;}


/* TAB */
@media screen and (max-width: 768px) {
.f18{font-size:1.6rem;}
.f22{font-size:1.8rem;}
.f30{font-size:2.4rem;}
.f32{font-size:2.5rem;}
}

/* SP */
@media screen and (max-width: 767px) {
.f16{font-size:1.5rem;}
.f17{font-size:1.5rem;}
.f18{font-size:1.6rem;}
.f20{font-size:1.6rem;}
.f24{font-size:1.7rem;}
.f25{font-size:1.8rem;}
.f26{font-size:1.7rem;}
.f28{font-size:1.8rem;}
.f30{font-size:1.8rem;}
.f32{font-size:1.9rem;}
.f48{font-size:2.4rem;}
}

/*
-----------------------------------------------
margin
----------------------------------------------- */
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}
.mt70{margin-top:70px;}
.mt80{margin-top:80px;}
.mt90{margin-top:90px;}
.mt100{margin-top:100px;}
.mt120{margin-top:120px;}
.mt140{margin-top:140px;}
.mt160{margin-top:160px;}
.mt200{margin-top:200px;}

.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}
.mb70{margin-bottom:70px;}
.mb80{margin-bottom:80px;}
.mb90{margin-bottom:90px;}
.mb100{margin-bottom:100px;}
.mb120{margin-bottom:120px;}
.mb140{margin-bottom:140px;}
.mb160{margin-bottom:160px;}
.mb160{margin-bottom:160px;}

.ml10{margin-left:10px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml40{margin-left:40px;}
.ml50{margin-left:50px;}
.ml60{margin-left:60px;}
.ml70{margin-left:70px;}
.ml80{margin-left:80px;}
.ml90{margin-left:90px;}
.ml100{margin-left:100px;}

.mr10{margin-right:10px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mr40{margin-right:40px;}
.mr50{margin-right:50px;}
.mr60{margin-right:60px;}
.mr70{margin-right:70px;}
.mr80{margin-right:80px;}
.mr90{margin-right:90px;}
.mr100{margin-right:100px;}

/*------------スマホ ------------*/
@media screen and (max-width: 768px) {
.mt80{margin-top:60px;}
.mt100{margin-top:70px;}
}
/*
-----------------------------------------------
padding
----------------------------------------------- */
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}
.pt60{padding-top:60px;}
.pt70{padding-top:70px;}
.pt80{padding-top:80px;}
.pt90{padding-top:90px;}
.pt100{padding-top:100px;}
.pt110{padding-top:110px;}
.pt120{padding-top:120px;}
.pt130{padding-top:130px;}
.pt140{padding-top:140px;}
.pt150{padding-top:150px;}
.pt160{padding-top:160px;}
.pt180{padding-top:180px;}
.pt200{padding-top:200px;}


.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb50{padding-bottom:50px;}
.pb60{padding-bottom:60px;}
.pb70{padding-bottom:70px;}
.pb80{padding-bottom:80px;}
.pb90{padding-bottom:90px;}
.pb100{padding-bottom:100px;}
.pb160{padding-bottom:160px;}
.pt180{padding-bottom:180px;}
.pt200{padding-bottom:200px;}

.pl10{padding-left:10px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl40{padding-left:40px;}
.pl50{padding-left:50px;}
.pl60{padding-left:60px;}
.pl70{padding-left:70px;}
.pl80{padding-left:80px;}
.pl90{padding-left:90px;}
.pl100{padding-left:100px;}

.pr10{padding-right:10px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr40{padding-right:40px;}
.pr50{padding-right:50px;}
.pr60{padding-right:60px;}
.pr70{padding-right:70px;}
.pr80{padding-right:80px;}
.pr90{padding-right:90px;}
.pr100{padding-right:100px;}



/* chrome画像ボケ対応 */
img{
-webkit-backface-visibility: hidden;
}

h1,h2,h3,h4,h5{
font-weight:bold;
padding-top: 8px;
padding-bottom: 8px;
}
p {
	padding-bottom: 8px;
	font-size: 1.6rem;
}
strong{
font-weight:bold !important;
}

/*
-----------------------------------------------
flex
----------------------------------------------- */
.container01{
display:flex;
flex-wrap:wrap;
}

.container02{
display:flex;
flex-wrap:nowrap;
}

.container_pc { /*pcだけflexしたい*/
display:flex;
}

@media screen and (max-width: 768px) {  
.container_pc {
display:block;
}
}

.al-item01{
align-items:flex-end;
}
.al-item02{
align-items:center;
}
.al-item03{
align-items:end;
}

.c-type01{
justify-content:space-between;
}

.c-type02{
justify-content:space-around;
}

.c-type03{
justify-content:flex-start;
}

.c-type04{
justify-content:center;
}
.c-type05{
justify-content:end;
}

/*
-----------------------------------------------
ハンバーガーボタン
----------------------------------------------- */
/*=============================
.btn-trigger
=============================*/
.btn-trigger {
	position: fixed;
	display: block;
	width: 61px;
	height: 61px;
	background-color: rgba(54,86,60,0.50);
	border-radius: 10px;
	top: 20px;
	left: 35px;
	cursor: pointer;
	z-index: 200;
}
@media screen and (max-width: 768px) { /*tb・スマホの場合*/
.btn-trigger {
  left: 20px;
  top: 20px;
}
}
.btn-trigger span {
  position: absolute;
  left: 10px;
  width: 41px;
  height: 5px;
  background-color: #fff;
  border-radius: 4px;
	
}
.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 11px;
}
.btn-trigger span:nth-of-type(2) {
  top: 28px;
}
.btn-trigger span:nth-of-type(3) {
  bottom: 11px;
}
/*=============================
#spbtn
=============================*/
#spbtn span:nth-of-type(1) {
  -webkit-animation: spbtn-bar01 .75s forwards;
  animation: spbtn-bar01 .75s forwards;
}
@keyframes spbtn-bar01 {
  0% {
    transform: translateY(23px) rotate(45deg);
  }
  50% {
    transform: translateY(23px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
#spbtn span:nth-of-type(2) {
  transition: all .25s .25s;
  opacity: 1;
}
#spbtn span:nth-of-type(3) {
  -webkit-animation: spbtn-bar03 .75s forwards;
  animation: spbtn-bar03 .75s forwards;
}
@keyframes spbtn-bar03 {
  0% {
    transform: translateY(-23px) rotate(-45deg);
  }
  50% {
    transform: translateY(-23px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
#spbtn.active span:nth-of-type(1) {
  -webkit-animation: active-spbtn-bar01 .75s forwards;
  animation: active-spbtn-bar01 .75s forwards;
}
@keyframes active-spbtn-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(17px) rotate(0);
  }
  100% {
    transform: translateY(17px) rotate(45deg);
  }
}
#spbtn.active span:nth-of-type(2) {
  opacity: 0;
}
#spbtn.active span:nth-of-type(3) {
  -webkit-animation: active-spbtn-bar03 .75s forwards;
  animation: active-spbtn-bar03 .75s forwards;
}
@keyframes active-spbtn-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-17px) rotate(0);
  }
  100% {
    transform: translateY(-17px) rotate(-45deg);
  }
}
/*=============================
#spmenu
=============================*/
.spmenu_wrapper {
	width: 100%;
	-webkit-transform: translateX(100%);
    transform: translateX(100%);
	transition: all .8s ease-in-out;
	z-index: 100;
	position: fixed;
	overflow-y: scroll;
	top: 0;
	right: 0;
}
.spmenu_wrapper.active {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}
.spmenu {
	display: flex;
}
.spmenu_mask {
	background-color: rgba(0,0,0,0.40);
	width: calc(100% - 400px);
}
.spmenu-inner {	
	background-color: #36563c;
	max-width: 400px;
	width: 100%;
	height: 100vh;
	padding: 90px 40px;
	top: 0;
	right: 0;
	overflow-y: scroll;
}
html.active {
  height: 100%;
  overflow-y: hidden;
}
/*
-----------------------------------------------
page-top
----------------------------------------------- */
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:rgba(255,255,255,0.80);
	border-radius: 200px;
	color: #333;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	transition:all 0.3s;
}
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}
#page-top span {
	position: relative;
	display: block;
	padding: 26px 10px 10px;
	font-size:0.8rem;
	letter-spacing: 0.05rem;
}
#page-top span:before {
	content: '';
	width: 20px;
	height: 20px;
	border-top: solid 3px #333;
	border-right: solid 3px #333;
	position: absolute;
	left: calc(50% - 10px);
	top: 16px;
	transform: rotate(-45deg);
}
@media screen and (min-width: 769px) {
	#page-top a:hover {
		background:#706E61;
		color: #fff;
		transition: .8s ease;
	}
	#page-top a:hover span:before {
		border-top: solid 3px #fff;
		border-right: solid 3px #fff;
		transition: .8s ease;
	}
}
/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}
/*---ボタンアニメーション---- */
.btn{
    position: relative;
	overflow: hidden;
    transition: ease .2s;
}

.btn span {
	position: relative;
	z-index: 3;
}
@media screen and (min-width: 769px) {
	.btn:hover{
		opacity: 1;
	}

	.btn:hover span{
		color:#333;
		opacity: 1;
	}
}
.bgleft:before {
 	content: '';
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
 	background:#fff;
	border: 2px solid #35573B;
 	width: 100%;
	height: 100%;
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}
@media screen and (min-width: 769px) {
	/*hoverした際の形状*/
	.bgleft:hover:before{
		transform-origin:left top;
		transform:scale(1, 1);
		opacity: 1;
	}
}
/*
-----------------------------------------------
pc sp only
----------------------------------------------- */
@media screen and (min-width: 769px) { /*pcの場合*/
.sponly{
display:none;
}
}

@media screen and (max-width: 768px) { /*tb・スマホの場合*/
.pconly{
display:none;
}
}
/* css_end */