@charset "utf-8";
body {
	background: #b99bc9;
	color: rgb(82, 79, 79);
	font-family: serif;
	word-break: break-all;
}
img, video {
	max-width: 100%;
	height: auto;
	width/***/: auto;
	vertical-align: bottom;
}
#wrapper {
	width: 96%;
	margin: 20px auto;
	border-radius: 30px;
	background: white;
}
.logo {
    width: 8%;
	margin: 0 auto;
	padding: 15px;
}
.mainvisual {
	position: relative;
	width: 78%;
}

.mainvisual h1 {
	position: absolute;
    width: 92%;
    top: 12%;
    left: 5%;
    font-size: 2Vw;
	letter-spacing: 0.08Vw;
    text-shadow: #000000 1px 1px 15px;
    color: white;
}
.mainvisual span {
	font-size: 1vw;
}
.header_box {
	display: flex;
	justify-content: space-around;
}

.ashirai {
	margin: 20px -15px 0 30%;
	width: 20%;
	padding-top: 3%;
}
/*====toppageのハンバーガー=====*/
.hNavWrap1 {
	font-size: clamp(15px, 1.5vw, 26px);
	text-align: left;
}
.hNav1 li a {
	color: rgb(82, 79, 79);
	text-decoration: none;
}
.hNav1 li a:hover{
	color: purple;
}

.hNav1 span {
	font-size: clamp(10px, 0.9vw, 12px);
	margin-bottom: 30px;
	color: #6b696d;
}
.hNav1 li {
	margin: 15px auto;
	padding-bottom: 10px;
}
#yoyaku {
	margin: -20px auto;
	text-align: center;
	border-radius: 60px;
	background: #9d60be;
	width: 30%;
	padding: 8px;
	font-size: clamp(15px, 2vw, 34px);
	font-weight: bold;
} 
#yoyaku:hover {
	background: purple;
}
#yoyaku a {
	color: white;
}
.mailgo{
	text-align: center;
	margin: 70px;
	font-size: clamp(12px, 1.8vw, 20px);
	line-height: 2;
}
.flow {
	width: 80%;
	margin: 70px auto;
	padding: 40px 0;
	text-align: center;
	background: #e4def0;
}

.flow h3 {
	padding: 30px;
	font-size: clamp(16px, 2.2vw, 26px);
}
.flow_box {
	display: flex;
	
	justify-content: space-around;	
}
.flow_in span {
	margin: 0 auto;
	padding: 40px;
	font-size: clamp(18px, 2.5vw, 30px);
	color: purple;
	font-weight: bolder;
}
.flow_kakomi {
	width: 70%;
	height: auto;
	background: rgb(233, 246, 235);
	border-radius: 30px;
	margin: 15px auto;
	padding: 10px;
	line-height: 1.5;
}
.flow_kakomi img {
	width: 45%;
}

.flow_kakomi h4 {
	font-size: clamp(14px, 2vw, 24px);
}
.flow_kakomi p {
	padding: 5px;
	font-size: clamp(12px, 1.5vw, 16px);
}

#information_box {
	width: 90%;
	margin: 30px auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
}

.info{
	width: 60%;
}
.info h2 {
    margin: 30px 10px;
    font-weight: normal;
    font-size: clamp(22px, 2.2vw, 28px); 
    color: rgb(82, 79, 79);
}
 .info dl {
	display: flow-root;
    width: 100%;
}
/*float止めはflow-root*/

 .info dl dt {
    float: left;
	clear: both;
    padding: 10px 0;
}
 .info dl dd {
    border-bottom: solid 1px #ccc;
    padding: 20px 0 20px 150px;
}
.info a {
	color: #7f2dab;
}
.map {
	max-width: 400px;
	display: block;
	height: auto;
	box-sizing: border-box;
	padding: 30px 0 30px 30px;
}
.map_box h4 {
	text-align: center;
}
.map_box a {
	color: #7f2dab;
}	
#box {
	background: url(../images/sidekusairo1.jpg);
	background-repeat: repeat-y;
	/*background-size: cover;*/
	background-size: 100%;
	padding: 60px 0;
}
.tokucho {
	width: 60%;
	margin:10px auto;
	/*background: rgb(248, 247, 255);*/
	border-radius: 60px;
	opacity: 0.8;
}
.tokucho h2 {
	margin: 40px auto;
	text-align: center;
	color: rgb(82, 79, 79);
	font-size: clamp(16px, 2.2vw, 26px);
}
.bigbox1 {
	text-align: right;
	margin-top: -50px;
}
.tinybox img {
	margin-top: -10px;
	border-radius: 0 40px;
}
.tinybox1 img {
	margin: -10px 0 0 auto ;
	border-radius: 0 40px;
}
.list_box  {
	margin: -80px 0 40px 0;
	align-items: center;
	padding: 40px;
}
.list_box h3 {
	font-size: clamp(14px, 2vw, 24px);
	font-weight: bold;
	color: rgb(89, 86, 86);
	padding-bottom: 50px;
}
.list_box p {
	margin-top: 20px;
	width: 100%;
	font-size: clamp(12px, 1.5vw, 16px);
	color: rgb(82, 79, 79);
	line-height: 2;
}
.fadeLeft,.fadeRight {
	text-align: left;
}
.text {
	display: inline-block;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	position: relative;
	background: rgb(81, 0, 128);
	color: #fff;
	opacity: 0.3;
	line-height: 140px;
	text-align: center;
	font-size: clamp(21px, 1.5vw, 26px);
	transform: rotate(-15deg);
	
}
.text span {
	font-size: clamp(25px, 2.5vw, 32px);
	transform: rotate(-15deg);
}
.text1 {
	display: inline-block;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	position: relative;
	background: rgb(180, 219, 150);
	color: rgb(44, 43, 43);
	font-weight: bold;
	opacity: 0.3;
	line-height: 150px;
	text-align: center;
	font-size: clamp(21px, 1.5vw, 26px);
	transform: rotate(-15deg);
}
.text1 span {
	font-size: clamp(25px, 2.5vw, 32px);
	transform: rotate(-15deg);
}

footer {
	background: url(../images/footer.jpg);
	/*border-radius: 0 0 30px 30px;*/
	padding-top: 60px;
}

.footernav ul{
	display: flex;
	width: 90%;
	margin: 60px auto;
	justify-content: space-around;
}
.footernav a {
	color: white;
}
.joho h2 {
	text-align: center;
	font-size: clamp(22px, 2.1vw, 24px);
	font-weight: bold;
	color: white;
	line-height: 1.4;
	padding-bottom: 30px;
}
.joho h2 span {
	font-size: clamp(26px, 2.3vw, 32px);
	margin-left: 10px;
}
.joho h3 {
	text-align: center;
	font-size: clamp(13px, 1.5vw, 18px);
	line-height: 2.2;
	padding: 10px;
	color: white;
}
footer P {
	text-align: center;
	font-size: clamp(13px, 1.5vw, 18px);
	color: white;
	padding: 1px;
	line-height: 2;
}
footer p a {
	font-size: clamp(18px, 2vw, 24px);
	color: powderblue;
	padding: 20px;
}
.insta_footer{
	width: 20%;
	margin: 0 auto;
	padding-bottom: 30px;
}
.footerlogo {
    width: 7%;
	margin: 0 auto;
	padding-bottom: 30px;
}
.copy {
	text-align: center;
	padding: 20px;
}
.pagetop {
	display: none;
	width: 5em;
	position: fixed;
	right: 1px;
	bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
/*=============サブ共通===========================*/

#wrapper1 {
	width: 96%;
	border-radius: 30px;
	background: #b99bc9;
	margin: 0 auto;
}
.kyotsu {
	text-align: center;
	margin: 50px;
}
.kyotsu h1 {
	width: 40%;
	margin: 0 auto;
	font-size:clamp(24px, 2.5vw, 32px);
	font-family: sans-serif;
	font-weight: bolder;
	padding: 20px;
}

.hNavWrap{
	text-align: center;
}
.hNav {
	display: flex;
	width: 100%;
	justify-content: space-around;
	margin-top: 0;	
}
.hNav span {
	font-size: clamp(10px, 0.9vw, 12px);
	margin-bottom: 30px;
	color: #6b696d;
}
.hNav li {
	font-size:clamp(16px, 1.5vw, 22px);
}
.hNav li a { 
	display: block;
	color: rgb(82, 79, 79);
	padding: 10px;
	text-decoration: none;
	
}
.hNav li a:hover{
	color: purple;
}

/*=====================about=====================*/
.kotoba h4 {
	text-align: center;
	font-size:clamp(18px, 1.9vw, 26px);
	margin: 50px;
	line-height: 2.3;
	font-weight: 400;
	color: #fff;
}
.kotoba h5 {
	font-size:clamp(14px, 1.6vw, 21px);
	padding: 30px;
	line-height: 1.8;
	font-weight: 400;
}
aside {
	margin-top: 80px;
	background: white;
}
.profile_box {
	display: flex;
	justify-content: space-around;
	margin: 0 auto;
	padding: 50px;
}
.my_profile {
	width: 35%;
	margin: auto;
	text-align: center;
}
.my_profile h2 {
	font-size:clamp(12px, 1.2vw, 21px);
	font-family: sans-serif;
	font-weight: bolder;
	color: black;
}
.my_profile P {
	font-size:clamp(12px, 1.2vw, 21px);
	font-weight: bold;
}
.my {
	max-width: 70%;
	padding: 30px 0 20px 0;
}
.profile {
	width: 50%;
	line-height: 1.8;
	margin: 30px auto;
	text-align: left;
	padding: 40px auto;
}
.profile p {
	padding: 20px;
	font-size:clamp(12px, 1.2vw, 21px);
}
.profile p span{
	font-size:clamp(12px, 1.2vw, 21px);
	font-weight: bolder;
	font-family: sans-serif;
}

/*===============access===================*/

.annai {
	background: url(../images/greensidekusa.jpg);
	background-repeat: repeat-y;
	background-size: 100%;
	border-radius: 60px 60px 0 0;
	text-align: center;
	padding-top: 10px;
	margin-top: 30px;
}
.nakami h4 {
	margin-top: 30px;
	padding-bottom: 80px;
	font-size: clamp(14px, 1.6vw, 20px);
	text-align: center;
	font-weight: 400;
	line-height: 1.5;
}
.nakami {
	padding-bottom: 30px;
}
.no1 {
	width: 30%;
}
.nakami img {
	max-width: 50%;
	margin-top: 20px;
}
.nakami h3 {
	width: 40%;
	text-align: center;
	margin: 40px auto;
	border-bottom: rgb(138, 223, 190) dotted 2px;
	font-size: clamp(21px, 2.2vw, 28px);
	padding: 10px;
}
.panel-area P {
	margin: 20px 0 40px 0;
	font-size: clamp(12px, 1.6vw, 20px);
	line-height: 1.2;
}
.nakami span {
	font-weight: bold;
}

/*----------tabの指示-----*/

#tab {
	width: 70%;
	margin: 0 auto;
}
.tab-area {
	display: flex;/* flexで横並び */
	border: 1px solid #8faab7;
	cursor: pointer;/* カーソルポインターに */
}.tab {
	width: calc(100%/3);/* calc関数を使用し、均等に3分割する */
	text-align: center;/* 文字を中央に。 */
	line-height: 1.8;
}
.tab:hover {
	background: #b1c5cf;
	color: #fff;
}
.tab:nth-child(n+2) {
	border-left: 1px solid #a6bdc8;
}
.tab.active {
	background: #b1c5cf;
	color: #fff;	
}
.tab.active:hover {
	background: #b1c5cf;
}
.panel {
	display: none;
	text-align: center;
}
.panel.active {
	display: block;
}

/*=============pricelist===========*/
.cover {
	background: url(../images/greensidekusa.jpg);
	background-repeat: repeat-y;
	background-size: 100%;
	padding: 10px 0 50px;
	margin-top: 30px;
}
.pay {
	font-size: clamp(12px, 1.8vw, 16px);
	margin: 30px;
}
.midashi {
	margin: 10px 0 30px 0;
	font-size:clamp(19px, 2vw, 23px);
	font-family: serif;
}
.midashi span {
	font-size:clamp(14px, 1.5vw, 19px);
}
.panel.active {
	padding: 60px;
}
.panel-area h2 {
	margin-top: 30px;
}
.toritamago {
	display: flex;
	width:70%;
	justify-content: space-between;
	margin: 0 auto;
}


/*=====resevation====*/
.botan {
	background: #9d60be;
	margin: 0 auto;
	text-align: center;
	border-radius: 60px;
	width: 25%;
	padding: 10px;
	font-size: clamp(15px, 1.8vw, 21px);
	font-weight: bold;
}
.botan a {
	color: #fff;
}
.botan a:hover {
	color: purple;
}
.botan_box {
	display: flex;
	align-items: center;
}
.back {
	background: url(../images/greenshortkusa.jpg);
	background-repeat: repeat-x;
	background-size: 100%;
	padding: 20px;
}
.memo {
	text-align: center;
	margin-top: 40px;
	font-size: clamp(13px, 1.4vw, 17px);
}
.memo2 {
	margin: 50px auto;
	line-height: 1.5;
	font-size: clamp(13px, 1.4vw, 17px);
}
.memo2 a {
	color: #7f2dab;
}
 .back1 {
	display: flex;
	background-image: url(../images/binbook.jpg);
	background-size: cover;
	width: 100%;
	height: auto;
}

.setsumei h4 {
	font-size: clamp(21px, 2.2vw, 28px);
	font-weight: bold;
	margin-bottom: 20px;
}
.setsumei {
	margin: 50px auto;
	text-align: center;
	font-size: clamp(13px, 1.4vw, 17px);
	padding-top: 40px;
	width: 45%;
	background: white;
	border-radius: 30px;
}
.setsumei p {
	margin: 20px;
	line-height: 1.8;
}
.setsumei img {
	width: 80%;
}
.hosoku {
	margin:40px auto;
	width: 70%;
	text-align: left;
	line-height: 1.8;
	font-size: clamp(13px, 1.4vw, 19px);
}
.hosoku a {
	color: #7f2dab;	
}
.mail {
	text-align: center;	
}
.mail a {
	font-size: clamp(12px, 1.8vw, 18px);
}
.meyasu {
	text-align: center;
	margin: 50px auto;
	padding-top: 40px;
	line-height: 1.2;
	width: 45%;
	background: white;
	border-radius: 30px;	
}
.meyasu img {
	width: 80%;
}
.meyasu h4 {
	font-size: clamp(21px, 2.2vw, 28px);
	font-weight: bold;
	margin-bottom: 20px;
}
.meyasu p {
	font-size: clamp(13px, 1.4vw, 17px);
	line-height: 2;
	margin: 10px auto;
	padding: 10px;
}
.meyasu ul {
	margin: 20px auto;
}
/*==============blog========================*/

.blog_box{
	margin: 30px auto 0 auto;
	background: url(../images/sidekusairo1.jpg);
	background-repeat: repeat-x;
	background-size: 100%;
	border-radius: 60px 60px 0 0;
	padding-top: 20px;
}
.midashi {
	text-align: center;
	margin: 50px;
}
.midashi h1 {
	width: 36%;
	margin: 0 auto;
	color: #fff;
	font-size:clamp(24px, 2.5vw, 32px);
	font-family: sans-serif;
	font-weight: bolder;
	background: #b99bc9;
	border-radius: 30px;
	padding: 15px;
}
.midashi p {
	font-size: clamp(13px, 1.4vw, 17px);
	margin-top: 30px;
}
.kiji {
	width: 90%;
	margin: 10px auto;
}
/*==================gallery===================*/
* {
	padding: 0;
	margin: 0;
}
.gallery {
	padding: 50px 0;
	background: url(../images/colorful.jpg);
	background-repeat: repeat-y;
	background-size: 100%;
}
.gallery__list {
	width: 70%;
	margin: 50px auto;
	padding: 50px 40px;
	list-style-type: none;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	background: white;
	border-radius: 20px;
}

.gallery__item {
	width: calc(100% /3);
}

.gallery__item {
	margin: 10px;
}

.gallery__item img {
	width: 100%;
	height: auto;
}

.gallery__item a {
	transition: .5s;
}

.gallery__item a:hover {
	filter: opacity(0.7);
}

.gallery__item a:hover img {
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}
.go {
	text-align: center;
}
.insta {
	width: 20%;
	margin: 15px auto;
}
/*=================campaign==============*/
#maki{
	background: rgb(233, 246, 235);
	padding: 20px;
}
.daicam {
	text-align: center;
	margin: 50px;
}
.daicam h1{
width: 36%;
	margin: 0 auto;
	color: #fff;
	font-size:clamp(24px, 2.5vw, 32px);
	font-family: sans-serif;
	font-weight: bolder;
	background: rgb(155, 226, 205);
	border-radius: 30px;
	padding: 15px;
}
.makisetsu {
	text-align: center;
}
.mainh1 {
	margin: 40px auto;
	text-align: center;
	font-size:clamp(21px, 2.5vw, 28px);
	color: rgb(74, 218, 175);
}
.cam {
	width: 35%;
	margin: 0 auto;
}
.makisetsu p {
	width: 90%;
	text-align: left;
	font-size:clamp(12px, 1.5vw, 18px);
	line-height: 2;
}
.tasu{
	padding: 30px;
	text-align: center;
	font-size:clamp(12px, 1.5vw, 18px);
	color: #7f2dab;
}
.makibox {
	display: flex;
	width: 90%;
	justify-content: space-around;
	margin: 50px auto;
}

.setsucover {
	background: url(../images/greenshortkusa.jpg);
	background-repeat: repeat-x;
	background-size: 100%;
}
.setsu {
	width: 60%;
	margin: 0 auto;
	padding: 30px 0 60px 0;
	line-height: 2;
}
.setsu h3 {
	text-align: left;
	font-size:clamp(18px, 2vw, 23px);
	padding: 30px 0 20px 0;
	color: rgb(74, 218, 175);
}
.setsu p {
	font-size:clamp(12px, 1.5vw, 18px);
	
}


/*responsive==============================*/
@media screen and (max-width:1280px){
	.botan {
		width: 35%;
	}
	.mailgo{
		text-align: center;
		margin: 50px;
	}
}
@media screen and (max-width:980px){
	.toritamago {
		width: 75%;
		white-space: nowrap;
	}
	
	#information_box {
		flex-direction: column;	
	}
	.info {
		width: 90%;
		margin: 0 auto;
	}
	.map {
		margin: 0 auto;
	}
	.mailgo{
		text-align: center;
		margin: 50px;
	}
	
}
@media screen and (max-width:915px){
	.toritamago {
		width: 75%;
		white-space: nowrap;
	}
	
	.jusho {
		width: 55%;
	}
	.footer_box h4 {
		width: 90%;
	}
	.no1 {
		width: 35%;
	}
	.nakami img {
		max-width: 55%;
	}
	.cam {
		width: 40%;
	}
	
.hNavWrap1{
	line-height: 0.8;
}
.hNavWrap {
	line-height: 0.8;
}
#yoyaku {
	margin: -12px auto;
}
.list_box p {
	text-align: left;
}
}
@media screen and (max-width:800px){
	.kyotsu {
		margin: 20px;
	}
	.kyotsu h1 {
		width: 80%;
	}
	.logo {
		width: 15%;
	}
	.mainvisual{
		width: 90%;
		margin: 0 auto;
	}
	.mailgo {
		margin:40px
	}
	.flow_box{
		width: 95%;
		margin: 0 auto;
	}
	#yoyaku {
		width: 35%;
		margin: -10px auto 30px auto;
	}

	.jusho {
		width: 60%;
	}	
	
	dl dt {
		float: none;
	    padding: 10px 10px;
	}
	dl dd {
		padding-left: 40px;
	}

	.fadeUp {
		margin: 0 auto;
	}
	.footernav ul {
		flex-direction: column;
		flex-wrap: wrap;
		margin: 40px auto;
	}
	.footernav {
		width: 40%;
		margin: 0 auto;	
	}
	.midashi h1 {
		width: 70%;
	}
	.tokucho {
		width: 60%;
		padding: 70px 80px;
	}
	
	.banner_box {
		width: 70%;
		margin: -30px auto;
		padding-bottom: 30px;
	}
	.hosoku {
		width: 85%;
		margin: 0 auto;
	}

	.pagetop{
		right: 1px;
		bottom: 120px;
	}
	.triggerBg {
		position: absolute;
		display: none;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
	.trigger,.trigger span {
		display: inline-block;
		transition: all 0.2s;
		box-sizing: border-box;
	}
	.trigger {
		position: absolute;
		top: 50px;
		right: 40px;
		cursor: pointer;
		width: 70px;
		height: 70px;
		z-index: 1000;
	}
	.trigger span {
		width: 75%;
		height: 3px;
		background: #666;
		border-radius: 3px;
	}
	.trigger span:nth-of-type(1) {
		top: 0;
	}
	.trigger span:nth-of-type(2) {
		top: 20px;
	}
	.trigger span:nth-of-type(3) {
		bottom: 0;
	}
	.trigger.active span:nth-of-type(1) {
		transform: translateY(16px) rotate(-315deg);
	}
	.trigger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.trigger.active span:nth-of-type(3) {
		transform: translateY(-16px) rotate(315deg);
	}
	nav ul {
		flex-direction: column;
		width: 100%;
	}
	nav li {
		padding: 5px 0;
		width: 100%;
		text-align: center;
	}
	.hNavWrap1 {
		margin-top: 1%;
		padding: 100px 0;
		width: 30%;
		transition: all 0.1s;
		transform: translate(300px);
		position: fixed;
		top: 0;
		right: 0;
		z-index: 100;
		background: rgb(233, 246, 235);
		border-radius: 20px;
	}
	.hNavWrap1.open {
		transform: translate(0);
	}	
	.hNavWrap {
		margin-top: 1%;
		padding: 100px 0;
		width: 30%;
		transition: all 0.1s;
		transform: translate(300px);
		position: fixed;
		top: 0;
		right: 0;
		z-index: 100;
		background: rgb(233, 246, 235);

		border-radius: 20px;
	}
	.hNavWrap.open {
		transform: translate(0);
	}
	.contact {
		width: 500px;
		margin-top: 40px;
		font-size: 14px;
	  }
	
	  .form_area dt,
	  .form_area dd {
		width: 100%;
	  }
	
	  .form_area dt {
		padding-bottom: 0;
	  }
	
	  .submit_button {
		width: 100%;
	  }
	.nakami img {
		max-width: 45%;
		margin-top: 20px;
	}
	.nakami h3{
		width: 80%;
	}
	.nakami h4 {
		width: 80%;
		margin: 0 auto;
		padding-top: 30px;
	}
	#tab {
		width: 90%;
	}
	.makibox {
		width: 100%;
	}
	.ashirai {
		margin: 0px -15px 0 20%;
	}
}

@media screen and (max-width:721px){
	.tokucho {
		width: 65%;
		padding-bottom: 30px;
	}
	.bigbox{
		margin: 80px auto;
	}
	.list_box {
		margin: -30px auto;
	}
	.list_box p {
		margin-top: 50px;
	}
	.tinybox {
		width: 95%;
		margin: -30px auto;
	}
	.tinybox img {
		text-align: center;
	}
	.tinybox1 {
		width: 95%;
		margin: -30px auto;
	}
	.flow {
		width: 97%;
		margin: 0 auto;
		padding: 10px;
	}
	.flow_box {
		width: 55%;
		display:block;
		margin: 10px auto;
	}
	.footerlogo {
		width: 20%;
	}
	.makibox {
		width: 100%;
	}
	.cam {
		width: 48%;
		margin: 0 auto;
	}
}

@media screen and (max-width:680px){
.makibox{
	flex-direction: column;
	width: 70%;
	margin: 40px auto;
}
.makisetsu p {
	padding: 20px;
}

}

@media screen and (max-width:550px){
#wrapper {
	width: 100%;
	border-radius: 0%;
	margin-top: 0px;
	background-size: cover;
}
#wrapper1 {
	width: 100%;
	border-radius: 0%;
	margin-top: 0px;
	background-size: cover;
}
.kotoba h4 {
	margin: 10px;
	font-size: 17px;
}
.map {
	width: 80%;
	margin: 0 auto;
}
#yoyaku {
	width: 50%;
	padding: 5px;
}
.botan {
	width: 50%;
}
.profile_box {
	flex-direction: column;
}
.my_profile {
	width: 50%;
}
.profile {
	width: 90%;
}
footer {
	border-radius: 0%;
}
.mainvisual {
	width: 100%;
	background-size: cover;
}
.hNaWrap1 {
	width: 40%;
	margin: 0 auto;
}
.hNavWrap{
	width: 40%;
	padding: 80px 0;
	margin: 0 auto;
}
.ashirai {
	margin: 20px -10px 0 15%;
	width: 25%;
}
.tokucho {
	width: 65%;
	padding: 50px 40px;
}
.text, .text1 {
	display: inline-block;
	width: 105px;
	height: 105px;
	border-radius: 50%;
	position: relative;
	opacity: 0.3;
	line-height: 105px;
	text-align: center;
	font-size: clamp(18px, 1.2vw, 21px);
	transform: rotate(-15deg);
}
.text{
	background: rgb(81, 0, 128);
	color: #fff;
}
.text1 {
	background: rgb(180, 219, 150);
	color: rgb(44, 43, 43);
	font-weight: bold;
}
.blog_box {
	width: 100%;
	border-radius: 0;
}
.tab {
	line-height: 1.5;
}
.tab-area {
	font-size: 13px;
}
.back1 {
	flex-direction: column;
}
.setsumei {
	width: 85%;
	margin: 20px auto;
}
.meyasu {
	width: 85%;
	margin: 20px auto;
}
.annai {
	border-radius: 0%;
	margin-top: 5px;
}
.kyotsu {
	margin: 5px auto;
}
.cover {
	margin-top: 5px;
}
.makibox{
	flex-direction: column;
	width: 80%;
	margin: 40px auto;
}
.makisetsu p {
	padding: 20px;
}
.cam {
	width: 60%;
	margin: 0 auto;
}
.daicam h1{
	width: 50%;
	margin: 0 auto;
}
.flow_kakomi {
	padding: 5px 10px;
}
.gallery__list {
	width: 80%;
	padding: 20px 10px;
	margin: 30px auto;
}
.trigger {
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
	width: 40px;
	height: 44px;
	z-index: 1000;
}
}
@media screen and (max-width:480px){
.mailgo {
	margin: 30px;
}
.list_box {
	width: 80%;
	padding: 20px;
	margin: 0 auto;
}
.midashi {
	width: 90%;
	margin: 40px auto;
}
.pay {
	width: 90%;
	text-align: center;
}
.my_profile {
	width: 60%;
}
.profile {
	width: 100%;
}
.toritamago {
	width: 100%;
	margin: 0 auto;
}
.panel-area h2 {
	width: 98%;
	font-size: 13px;
}
.panel.active {
	padding: 40px;
}
.no1 {
	width: 45%;
}
.nakami img {
	max-width: 60%;
}
.cam {
	width: 65%;
	margin: 0 auto;
}
.daicam h1{
	width: 70%;
	margin: 0 auto;
	padding: 10px;
}
.hNavWrap1 {
	width: 50%;
	margin: 0 auto;
	padding: 80px 0;
}
.hNavWrap{
	width: 50%;
	margin: 0 auto;
	padding: 80px 0;
}
.botan {
	width: 60%;
}
}

@media only screen and (min-width: 768px) {
	.superbox-list {
		width:16.66666667%;
	}
}
@media (max-width: 600px) {
    .tab-container label:nth-of-type(n+3),
    .tab-container input:nth-of-type(n+3) {
        display: none;
    }
}
@media only screen and (min-width: 486px) {
	.superbox-list {
		width:25%;
	}
}
@media only screen and (min-width: 320px) {
	.superbox-list {
		width:50%;
	}
}


/*=====================effect==================*/
.blur{
    animation-name:blurAnime;
    animation-duration:1.2s;
    animation-fill-mode:forwards;
  }
  
  @keyframes blurAnime{
    from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
    }
  
    to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
    }
  }
   
  .blurTrigger{
      opacity: 0;
  }  

/* fuwafuwa */	
.fuwafuwa {
	-webkit-animation:fuwafuwa1 3s infinite linear alternate;
	animation:fuwafuwa1 3s infinite linear alternate;
}
		@-webkit-keyframes fuwafuwa {
		0% {-webkit-transform:translate(0, 0) rotate(-5deg);}
		50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
		100% {-webkit-transform:translate(0, 0)rotate(5deg);}
		}
		
		@keyframes fuwafuwa {
		0% {transform:translate(0, 0) rotate(-5deg);}
		50% {transform:translate(0, -5px) rotate(0deg);}
		100% {transform:translate(0, 0)rotate(5deg);}
		}

.fuwafuwa1 {
	-webkit-animation:fuwafuwa1 3s infinite linear alternate-reverse;
	animation:fuwafuwa1 3s infinite linear alternate-reverse;
	}
			
		@-webkit-keyframes fuwafuwa1 {
		0% {-webkit-transform:translate(0, 0) rotate(-5deg);}
		50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
		100% {-webkit-transform:translate(0, 0)rotate(5deg);}
			}
			
		@keyframes fuwafuwa1 {
		0% {transform:translate(0, 0) rotate(-5deg);}
		50% {transform:translate(0, -5px) rotate(0deg);}
		100% {transform:translate(0, 0)rotate(5deg);}
		}
		
		@keyframes mainvisual {
			0% {
				  opacity: 0;
			  }
			  8% {
				  opacity: 1;
			  }
			  17% {
				  opacity: 1;
			  }
			  25% {
				  opacity: 0;
				  transform: scale(1.2) ;
				   z-index:9;
			  }
			  100% { opacity: 0 }
		  }

/*fade in -------------------------------------------------------*/
.effect-fade {
    opacity: 0;
    transform: translate(0, 150px); /* フェードインで動く高さを指定 */
    transition: all 4s; /* フェードインにかかる時間を指定 */
}
.effect-scroll {
	opacity: 1;
	transform: translate(0, 0);
}


/*fadeup -------------------------------------------------------*/

.flow_in{
	opacity: 0;
}

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
/*メイン画像白からぼやっと----------------------------------*/
.fade {
	animation-name: fadeInAnime;
	animation-duration: 5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeInAnime {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}		
/*====================参考=====================*/

/*タブ切り替えHP
https://jito-site.com/jquery-tab-menu/

https://webcreatetips.com/coding/3630/

https://blog.simplelifenavigation.com/entry/tab-design

コンタクト参考
https://ayano-webryday.online/html_css_form_1/


ライトボックス参考
https://yuki.world/lightbox-gallery/

fuwafuwa

https://note.com/shizuoka_kufu/n/nb70905497c65

fadein参考
https://coco-factory.jp/ugokuweb/jscss/
*/