@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap');

body {
	font-size:15px;
	line-height:normal;
	color:#333;
	/*font-family:'Roboto',/*'Source Sans Pro',*//*'Noto Sans JP', sans-serif;*/
	font-family: 'Sawarabi Mincho', serif;
}

.hyd4 {display: block;}
.shw4 {display: none;}
.mb4em {margin-bottom: 4em;}
@media screen and (max-width:799px){
	.hyd4 {display: none;}
	.shw4 {display: block;}
}
@media screen and (max-width:600px){
	.mb20 {margin-bottom: 15px;}
	.mb40 {margin-bottom: 30px;}
	.mb60 {margin-bottom: 40px;}
	.mb80 {margin-bottom: 50px;}

}

.inner {width:1000px; margin-left: auto; margin-right: auto;}
@media screen and (max-width:1000px){
	.inner {width:93.75%;}
}
@media screen and (max-width:600px){
	.inner {width:90%;}
}

.mv__wrap {
	margin-top: 120px;
}
.mv__wrap .flexslider {width:1110px; margin-left: auto; margin-right: auto;}
@media screen and (max-width:1109px){
	.mv__wrap .flexslider {width: 100%;}
}
@media screen and (max-width:600px){
	/*.mv__wrap .flexslider {width: 100%; height: 40vh;}*/
}

/* header */
header {position: fixed; top:0; left:0; z-index: 1001; width: 100%; background: #fff;}
.head__inner {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: flex-end;
	max-width: 1110px;
	height: 120px;
	padding: 10px 10px 20px 10px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.nav__inner {
	display: flex;
	flex-flow: row;
	align-items: flex-end;
}
.head__nav {display: flex; flex-flow: row}
.head__nav li {margin-right: 1em;}
.head__ic {margin: 0 2em 0 1em;}

@media screen and (max-width:799px){
	.mv__wrap {
		margin-top: 60px;
	}
	.nav__inner {display: block;}
	
	.head__ic,.head__resreve {display: none;}
	.head__inner {height: 60px; display: block; width: 100%; padding: 0;}
	.head__inner h1 {width:90px; margin-left: 10px;}
	
/* sp navi */
#menu-button {
	display: block;
    position: absolute;
    top: 10px;
    right: 5px;
    width: 45px;
    height: 30px;
  }
#menu-button > div {
    width: 25px;
    height: 2px;
    background: #000;
    position: absolute;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
#menu-button > div:nth-child(1) {
    top: 25%;
    left: 6px;
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }
#menu-button > div:nth-child(2) {
    top: 50%;
    left: 6px;
  }
#menu-button > div:nth-child(3) {
    top: 75%;
    left: 6px;
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }
#menu-button.active > div {background: #333;}
#menu-button.active > div:nth-child(1) {
    top: 50%;
    -webkit-transform: translate(-5%, -50%) rotate(45deg);
    -moz-transform: translate(-5%, -50%) rotate(45deg);
    -ms-transform: translate(-5%, -50%) rotate(45deg);
    -o-transform: translate(-5%, -50%) rotate(45deg);
    transform: translate(-5%, -50%) rotate(45deg);
  }
#menu-button.active > div:nth-child(2) {
    opacity: 0;
  }
#menu-button.active > div:nth-child(3) {
    top: 50%;
    -webkit-transform: translate(-5%, -50%) rotate(-45deg);
    -moz-transform: translate(-5%, -50%) rotate(-45deg);
    -ms-transform: translate(-5%, -50%) rotate(-45deg);
    -o-transform: translate(-5%, -50%) rotate(-45deg);
    transform: translate(-5%, -50%) rotate(-45deg);
  }	
	
header nav {
	position: fixed;
    top: 60px;
	right: 0;	
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
	height: 100vh;
    box-sizing: border-box;
	transition: all 0.3s ease;
    opacity: 0;
    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  header nav.active {
    opacity: 1;
  }
  header nav.block {
    display: block;
  }
	.head__nav {display: block; padding: 10px;}
	.head__nav li {text-align: center; margin-bottom: 1em;}
}

/* txt */
.read__txt {font-size: 1.7rem; line-height: 1.8;}

@media screen and (max-width:600px){
	.read__txt {font-size: 3.6vw; line-height: 1.8;}
}

/* title */
.side__kei {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 3rem;
	box-sizing: border-box;
	font-family: "Times New Roman", Times,"Sawarabi Mincho", "serif";	
}
.side__kei span {padding-left: 1em; padding-right: 1em}
.side__kei::before,.side__kei::after {
	content: "";
	border-bottom: 1px solid #2b2b2b;
	flex: 1;
}

.tit__h3 {
	font-size: 4rem;
	font-family: "Times New Roman", Times,"Sawarabi Mincho" "serif";
}

@media screen and (max-width:600px){
	.side__kei {font-size: 5vw;}
	.tit__h3 {
		font-size: 7vw;}
}

/* btn */
.resreve__btn {
	display: inline-block;
	border:1px solid #0d1723;
	color: #0d1723;
	font-size: 2.4rem;
	width: 290px;
	padding: 0.2em 0;
}

.resreve__btn:hover {
	color: #fff;
	background: #0d1723;
	transition: 0.3s all ease;
}
.resreve__btn.hanten {color: #fff;
	background: #0d1723;}
.resreve__btn.hanten:hover {
	border:1px solid #0d1723;
	color: #0d1723;
	background: #fff;
	transition: 0.3s all ease;	
}

.normal__btn {
	display: inline-block;
	border:1px solid #0d1723;
	color: #0d1723;
	font-size: 2.4rem;
	width: 290px;
	padding: 0.2em 0;
}

.normal__btn:hover {
	color: #fff;
	background: #0d1723;
	transition: 0.3s all ease;
}


@media screen and (max-width:600px){
.resreve__btn,.normal__btn {
	font-size: 1.8rem;
		padding: 0.4em 0;
	width: 100%;}
}	
	
/* plan */
.bg__p1 {
	background: #b2c0bc;
}
.bg__p2 {
	background: #8aa8c6;
}

.plan__wrap {
	margin-top: 60px;
	display: flex;
	justify-content: center;
}

.plan__txt {
	width:476px;
	border-top:1px solid #2b2b2b;
	padding-top: 1.5em;
}
.plan__content {
	display: flex;
	flex-flow: row;
}
.plan__content dt{ line-height: 2; width: 130px}
.plan__content dd p{ line-height: 2;}
.plan__price {padding: 0 1em;}
.plan__yen {
	width:270px;
	height: 270px;
	border-radius: 50%;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	font-family:'Noto Sans JP', sans-serif;
}
.plan__yen__price {
	font-size: 4rem;
	line-height: 1;
	font-family: 'Ropa Sans', sans-serif;
}
.plan__yen__price span {
	font-size: 6.5rem;
}
.plan__yen__tax {

}

@media screen and (max-width:600px){
	.plan__wrap {
		margin-top: 15px;
		display: flex;
		flex-flow: column;
		justify-content: center;
	}
	.plan__txt {
		width:100%;
		margin-bottom: 20px;
			border:none;
	}
	.plan__price {text-align: center; margin-left: auto; margin-right: auto; /*border:1px solid #f00;*/}
	.plan__yen {
		width:220px;
		height: 220px;
		border-radius: 50%;
	}
	.plan__content {
		display: flex;
		flex-flow: column;
	}
	.plan__content dt{ line-height: 2; width: 100%; border-bottom:1px solid #2b2b2b; margin-bottom: 1em;}
	
.plan__yen__tax {
font-size:3vw;
	margin-top: -10px
}
	.aC.whi.mb20{margin-bottom: 0;}
	
}

/* photographer */
.pgra__wrap {
	display: flex;
	flex-flow: row;
	justify-content: center;
	
}
.pgra__wrap div {text-align: center; padding: 0 15px}

/* flow */
.flow__tab {width: 100%;
	border-collapse:separate;
    border-spacing:0 20px ;}
.flow__tab th {font-size: 5rem; color: #fff; background: #2b2b2b; border:1px solid #2b2b2b; padding: 10px}
.flow__tab td { font-size:1.7rem; border:1px solid #2b2b2b; padding: 10px 0}
.flow__tab td ul {display: flex; flex-flow: row; align-items: center;}
.flow__tab td ul li:first-child {width:180px; text-align: center; border-right: 1px solid #2b2b2b}
.flow__tab td ul li:last-child {padding-left: 48px; padding-right: 10px; flex:1}

@media screen and (max-width:600px){
	.flow__tab th {font-size: 2.4rem;}
	.flow__tab td { font-size:1.4rem}
	.flow__tab td ul li:first-child {width:80px;}
	.flow__tab td ul li:first-child img {width: 50%;}
	.flow__tab td ul li:last-child {padding-left: 1em; flex:1}
}

/* faq */
.faq__list dt {
	border-style: solid;
	border-color: #999;
	border-width: 1px 1px 0 1px;
	background: #ccc;
	display: flex;
	align-items: center;
	padding: 18px 10px 18px 0;
}
.faq__list dd {
	border-style: solid;
	border-color: #999;
	border-width: 1px 1px 1px 1px;
	display: flex;
	align-items: center;	
	padding: 28px 10px 28px 0;
}
dt .faq__tit {font-size:3.7rem; width:110px; text-align: center}
dd .faq__tit {font-size:3.7rem; color:#999; width:110px; text-align: center}
.faq__txt {	font-size: 1.7rem;flex: 1;}

@media screen and (max-width:600px){
	.faq__list dt {	padding: 12px 10px 12px 0;}
	.faq__list dd {align-items:flex-start; padding: 20px 10px 20px 0;}
	dt .faq__tit {font-size:2.0rem; width:2em; text-align: center}
	dd .faq__tit {font-size:2.0rem; color:#999; width:2em; text-align: center}
	.faq__txt {	font-size: 1.4rem;flex: 1;}
}

/*  cancellation */
.cancellation__tab {
	width: 100%;
	font-size: 1.7rem;
}
.cancellation__tab th {border:1px solid #2b2b2b; font-weight: normal; text-align: left; width: 22%; padding: 0.5em;}
.cancellation__tab td {border:1px solid #2b2b2b;  padding: 0.5em;}
	
@media screen and (max-width:600px){
	.cancellation__tab {
	width: 100%;
	font-size: 1.4rem;
	}
	.cancellation__tab th {white-space: nowrap}
	.t24 {font-size: 1.8rem;}
	.t13 {font-size: 1.2rem;}
}
	
	
/* slider */


.prev_icon {
position: absolute;
  top: 50%;
  left: -30px;
  transform: translate(0,-50%);
  width: 30px;
  z-index: 1;}

.next_icon{
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translate(0,-50%);
  width: 30px;
  z-index: 1;
}

.slider {width:100%; margin-left: auto; margin-right: auto; }
.slider02 {width:100%; margin:0px auto; /*margin-top: -2em;*/ }	
.slider02 li {margin: 1px; padding: 0;}

@media screen and (max-width:600px){
	.slider li {margin: auto; padding: 10px;}
}
	
/* gallery */
.insta__list{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    list-style: none;
	margin: 20px 0 40px;
}
.insta__list li {margin-bottom: 0.1vw;} 

.insta__list img{
    width: 166px;/*198*/
	height: 166px;
	object-fit: cover;
}
@media screen and (max-width:999px){
	.gallery__wrap {width: 100%;}
	.insta__list li {margin-bottom: 0.4vw;} 
	.insta__list img{
    width: 31vw;
	height: 31vw;
	object-fit: cover;}
}
@media screen and (max-width:600px){
	.insta__list img{
    width: 29.8vw;
	height: 29.8vw;
	object-fit: cover;}
}
	

/*  footer bar */
.footer-btn {display: flex; flex-flow: row; justify-content:center; }
.footer-btn li {width:45%; font-feature-settings: "palt";}

@media screen and (max-width:680px){
	.footer-btn {display: flex; flex-flow: row; justify-content:space-between; }
	.footer-bar .inner {width: 96%;}
	.footer-btn li {font-size: 3.4vw; }

}