display: inline-block;html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:normal; vertical-align:baseline; background:transparent; }

img { vertical-align:middle; }
a,.phoneNO a{ text-decoration:none;color:#000;}
#Reserve a { color:#FFF;}
body { line-height:1; }
ol, ul { list-style: none; padding:0; margin:0;}

ins { text-decoration:none;}
del { text-decoration:line-through;}
table { border-collapse:collapse; border-spacing:0; }
li { list-style:none; }
*{box-sizing: border-box;}
html{scroll-behavior: smooth;}
body {
	font-family:'Shippori Mincho B1', serif;
  font-size : 16px;
	line-height: 1.75;
	color :#080808;
	margin:0 auto;
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
@media screen and (max-width:768px) {body { font-size:15px; line-height: 1.73333;}}


h1,h2,h3,h4 { font-weight:normal;}

/*--- fv ---*/
.fv-tiare{
	position: relative;
	height: 100vh;
  background: url(../img/bg_0728.jpg) left/cover no-repeat;
	color : #FFF;
	margin: 0 auto;
  opacity: 0.9;
}
.fv-content {
  width: 16em;
	position:absolute;
  top: 12%; left: 5%;
	text-align:center;
	color:#000;
	text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8);
}

.fv-content h1 {
	font-size: 44px;
	line-height: 1.3;
	letter-spacing: .1em;
  font-weight: 700;
  color :#404040;
	margin: 0 auto;
	}
	.fv-content h1 span {
		display: block;
		font-size: 17px;
    font-weight: 700;
		letter-spacing: .05em;
	}
.fv-content p:first-of-type {
  /*font-size : 20px;*/
  line-height:1.6;
  letter-spacing:.05em;
  margin: .5em 0 0;
}

/*.fv-content p:last-of-type:after {
  content: '▲';
  display: inline-block;
  color: #4A72AF;
  font-size: .8em;
  margin-left: .5em;
  transform:rotateX(180deg);
}
.fv-content p:last-of-type a {color: #4A72AF;}
.fv-content p:last-of-type {
  display: inline-block;
  background: #fff;
  font-weight: 700;
  padding: 5px 10px;
  margin-top:0;
}*/
.fv-content h2:before{
	content: '●';
	display: block;
	font-size: .45em/*.8em*/;
	margin: 15px auto 10px;
}
.fv-content h2 {
	font-size: 28px;
	line-height:1.6;
	letter-spacing: .05em;
  margin: 0 auto;
	}
.fv-content h2 span { 
  display: block;
  font-size: 17px;
  letter-spacing: .025em;
}
.fv-content h2 + p {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  letter-spacing: .025em;
  margin: 4px 0 0;
}
.fv-content h2 + p:before{
	content :'';
	background:url('../img/icon-footer-phone.svg') bottom/.9em no-repeat;
	display:inline-block;
	width : 1em;
	height: 1em;
  margin-right:4px;
	}
.u-small {
  display: block;
  font-size: .875em;
  letter-spacing:0;
  white-space: nowrap;
}
.u-mt24 { margin-top: 24px;}
/*--- header ---*/
header {
  position:sticky;
	top:0;
  bottom:0;
  background:rgba(51, 51, 51, 0.65);
  width: 100%;
  height: 45px;
  z-index: 10;
}
header h1 {
  font-size: 24px;
	font-weight:700;
  line-height: 1.3;
  letter-spacing: 2px;
  padding: 5px 0;
  margin:0 auto 0 0;
}
header h1 a {
  font-weight: 700;
	color : #FFF;
  text-shadow: 0 0 3px #000;
	}
header h1 span {
  font-size: .6em;
  font-weight:700;
  letter-spacing: 0;
  padding-right : .5em;
  }

.header-inner {
	max-width: 960px;
  height: 45px;
  color:#FFF;
	letter-spacing:.1em;
	text-shadow: 0 0 3px #000;
  margin: 0 auto;
  z-index:2;
  display: flex;
	}
#menu {
  display: flex;
  justify-content:space-between;
  line-height: 45px;
  padding: 0;
  margin: 0;
}
#menu a { font-weight: 700; color: #FFF; padding: 0 8px;}
@media screen and (max-width:930px) {
.fv-content {
  top: 80px;
  left: 0;
  width: 100%;
  margin: auto;
}
.fv-content p{ font-size: 18px;}
header { position: fixed;}
header h1 { float: none; display: block; }
header h1 a { color:#FFF; width:100%;}
}
@media screen and (max-width: 768px) { .fv-content p  { font-size:1.15em;}}
@media (orientation: landscape) and (max-width:800px) {
.fv-content {
  position: absolute;
	top :15%;
  left: 3%;
  width: 16em;
  text-align: center;
	}
}

/* base */
section { margin:0 auto 5em;}
section h2 {
  font-size:1.6428em;
  letter-spacing:1px;
  text-align:center;
  margin:0 auto 1em/*30px*/;
}
section h2:before {
  content:url(../img/icon-title.svg);
  display:block;
  height: 60px;
  margin-bottom: 20px;
}
section h3 { text-align:center; font-size:1.1428em; margin-bottom:1em;}
section h4 { text-align:center; font-size:1.4285em; letter-spacing:1px;}

section p { text-align:center; margin:0 auto 1.321em/*25*/; }
section .col p { text-align:left; margin:0 auto 1.321em/*25*/; }

section#atelier { background-color:#fff9f6; padding-bottom:5em; margin:0 auto;}
@media screen and (max-width:930px) { section {padding:0 20px;}}

.container {
	max-width : 960px;
	width  : 100%;
	display: flex;
	justify-content: space-between;
  flex-wrap: wrap;
	margin : 3.5em auto 0;
	}
 
.inner,
.cols-inner { max-width:960px; margin:0 auto;}

.col_4 { margin-top:5em; display:flex; justify-content:space-between;}
.col_4 .col { width:23.958333333333336%;}/* 222 */
.col_4 .col figure { width:66.66666666666666%; margin: 0 auto;}
.col_4 .col img {
	width:100%;
	border-radius:150px;
	}
.col_4 .col p { font-size:.9em; text-align:left; padding:0 .5em;}
.col h4 { font-size:1em; line-height:1.3; letter-spacing:0; margin:1em 0;}
.col h4 span {
  font-family: YuGothic,'Yu Gothic','Yu Gothic UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  font-size:.85em;
  color:#78645a;
}

/*--- About ---*/
#about h3:first-of-type {
  margin:0 auto 30px;
}
#about h3:first-of-type:before {
	content: url(../img/icon-leaf-L.svg);
	display: inline;
	vertical-align: middle;
	margin-right: 3.5%;
	}
#about h3:first-of-type:after {
	content: url(../img/icon-leaf-R.svg);
	display: inline;
	vertical-align: middle;
	margin-left: 3.5%;
	} 
	#about h3:last-of-type { font-size: 1.35em; margin: 3em auto 1em/*30*/;}
	#about h3:last-of-type span {
    display: block;
    font-size:.85em;
    line-height: 1;
    margin: 20px auto 5px;
    }
.about-card li {
	width  : 50%;
	display: inline-block;
	line-height: 2.1428em;
	text-align : center;
  background : #e9e7e7;	
	border-top : 2px solid #e9e7e7;
	}
	.about-card:last-child li { width:100%;}
	

.about-btn {
  width: 15em;
  line-height: 36px;
  text-align: center;
  border: 2px solid #e9e7e7;
  background: #e9e7e7;
}
.about-btn.arrow { display: block; margin:0 auto 80px; z-index: 0;}
.about-btn a,
.about-card a {
	display:block;
	text-decoration:none;
  transition: all 0.3s ease;
	}
.about-card {
	width : 48.75%;
  border: 2px solid #e9e7e7;
	display: flex;
  flex-direction: column;
  margin-bottom: 30px;
	}
  .about-card h4 { line-height: 1; margin: 30px auto;}
  .about-card h4.icon::before {
    content:url(../img/icon-cafe.svg);
    display:inline-block;
    width: 21px;
    margin-right:10px;
    } 
.about-card ul { margin-top: auto;}
.about-card li:first-child a{ border-right: 1px solid #FFF;}
.about-card:last-child li a { border-right: 0;}
.about-btn a:hover,
.about-card li a:hover { background: #fff;}

.arrow {
	position:relative;
	display:inline-block;
	color : #000;
	vertical-align:middle;
	text-decoration:none;
	padding:0;
  z-index: 0;
}
.arrow::before,
.arrow::after {
	position:absolute;
	top : 0 ;
	bottom: 0;
	right : 8px;
	margin: auto;
	content: "";
	vertical-align:middle;
}
.about-btn::before,
.about-card li::before,
.about-sp-box p span::before {
	width : 20px;
	height: 20px;
	border-radius: 50%;
	background: #FFF;
}
.about-btn::after,
.about-card li:after,
.about-sp-box p span::after {
	right :14px;
	width : 6px;
	height: 6px;
	border-top  : 2px solid #666;
	border-right: 2px solid #666;
	transform: rotate(135deg);
}
.about-btn::after,
.about-card:last-of-type li:after,
.about-sp-box p span::after {
	right : 16px;
	transform: rotate(45deg);}

/* Timeless Flower bnr */
#about-sp > h2{ font-size:1.4285em; color:#4A72AF; font-weight:700; text-align:center;}
#about-sp > h2 span {display: block; font-size:.9em; font-weight:700;line-height: 1.5; color:#78645a; }
#about-sp > p{ margin-bottom: 1.516em/*35*/;}
#about-sp > p:first-of-type { font-size:1.13em;}
#about-sp{
  max-width: 960px;
  width: 100%;
  margin: 3.5em auto 0;
}
.about-sp-box {
	width : 100%;
	border: 2px solid #e9e7e7;
	background: url(../img/bg_timeless.jpg) right bottom/contain no-repeat ;
	padding: 1.5em 2em 0;
	}

.about-sp-box div:after {
  content: '';
  display: inline-block;
  width: 90px; height: 80px;
  background: url(../img/ttl_bg_timeless.png) right/contain no-repeat;
  vertical-align:middle;
  margin-left :2em;
  }
.about-sp-box h2 {
	float  : left; 
	font-size: 1.6428em;
  font-weight: 700;
	line-height: 1.3;
	text-align :left;
	color : #4A72AF;
	margin-bottom:.589em;
	}
	.about-sp-box h2::before { content:none;}
  
	.about-sp-box h2 span { font-size:.63em; font-weight: 700; color:#78645a; }
.about-sp-box p {
	clear : both;
	text-align : left;
	text-shadow: 1px 1px 1px white;
	margin-left: 0;
	}
.about-sp-box p:last-of-type {
	display: block;
	border-top: 2px solid #e9e7e7;
	margin : 0 auto;
	padding: .5em 0;
	}
.about-sp-box a { padding-right: 2.5em;}


@media screen and (max-width:768px) {
#about h3:first-of-type::before{ display:block; margin-right:0; margin-bottom: 1em}
#about h3:first-of-type::after { display: none;}

.about-sp-box {
  margin: 0 auto .5em;
  background-position:right -80px;
  background-size:22%;
  }
.about-sp-box div { margin-bottom: 15px;}
.about-sp-box div::after { width:60px; height:50px; margin-left:1em;}
}
@media screen and (max-width: 600px) {
.about-card { width:100%;}
.about-sp-box h2 { margin-bottom: 0;}
.about-sp-box h2:after { margin-bottom: .589em;}
}
@media (min-width: 481px) and (max-width: 600px) {
.about-sp-box { background-position:right -20%; background-size:20%;}
.about-sp-box div::after { display:inline-block; width:60px; height:50px; margin-left:.5em;}
}
/*--- Atelier ---*/
.atelier-photo__list,
.works-photo__list,
.scholl-photo__list {
  max-width: 610px;
	display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: auto;
	}
.scholl-photo__list {}
.atelier-photo__list li:first-child { grid-area: 1 / 1 / 2 / 3; }
.atelier-photo__list li:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
.atelier-photo__list li:nth-child(3) { grid-area: 1 / 4 / 2 / 5; }
.atelier-photo__list li:nth-child(4) { grid-area: 2 / 1 / 3 / 2; }
.atelier-photo__list li:nth-child(5) { grid-area: 2 / 2 / 3 / 3; }
.atelier-photo__list li:nth-child(6) { grid-area: 2 / 3 / 3 / 5; }
.atelier-photo__list li:nth-child(7) { grid-area: 3 / 1 / 4 / 3; }
.atelier-photo__list li:nth-child(8) { grid-area: 3 / 3 / 4 / 4; }
.atelier-photo__list li:nth-child(9){ grid-area: 3 / 4 / 4 / 5; }
.atelier-photo__list li:nth-child(10) { grid-area: 4 / 1 / 5 / 3; }
.atelier-photo__list li:nth-child(11) { grid-area: 4 / 3 / 5 / 5; } 

.works-photo__list li:first-child  { grid-area: 1 / 1 / 2 / 2; }
.works-photo__list li:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.works-photo__list li:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
.works-photo__list li:nth-child(4) { grid-area: 1 / 4 / 2 / 5; }
.works-photo__list li:nth-child(5) { grid-area: 2 / 1 / 3 / 2; }
.works-photo__list li:nth-child(6) { grid-area: 2 / 2 / 3 / 2; }
.works-photo__list li:nth-child(7) { grid-area: 2 / 3 / 3 / 4; }
.works-photo__list li:nth-child(8) { grid-area: 2 / 4 / 3 / 5; }
.works-photo__list li:nth-child(9) { grid-area: 3 / 1 / 4 / 3; }
.works-photo__list li:nth-child(10) { grid-area: 3 / 3 / 4 / 4;; } 

#atelier div { margin-top: 56px; }
#atelier li img {
  display:block;
  width:100%;
  height: 100%;
  object-fit: cover;
}


/*--- School ---*/
#school .container { display:block;}
.price {
  max-width: 768px;
	width : 100%;
	border: #666 solid 1px;
	font-size : 1.13333em;
	text-align: center;
	margin : 50px auto;
	padding: 33px 28px 18px;
	}
.price h3 { line-height: 1; margin: 0 auto;}

.price h3 + h3 { margin: 20px auto;}
.price span { font-size:0.75em; vertical-align: baseline; }
/*.price span:first-of-type {
	display: inline-block;
	border : #666 solid 1px;
	line-height: 1;
	padding: .1em .8em .15em;
	}*/

.price p:last-of-type {
	width : 100%;
	display : inline-block;
	border-top: #666 solid 1px;
	margin-bottom: 0;
	padding-top  :.7em;
	}
#school .col p {
  font-family: YuGothic,'Yu Gothic','Yu Gothic UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  margin-bottom: 0;
  }
@media screen and (max-width:930px) {.price { width: 100%; font-size:1.1333em;}}
@media screen and (max-width:768px) {

.col_4 { flex-wrap: wrap;}
.col_4 .col { width: 48%;}
.col_4 .col p { padding: 0;}
.col_4 .col:nth-child(-n+2){ margin-bottom: 20px;}
.col_4 .col figure { width: 60%; max-width: 160px; margin: 0 auto;}
}
@media screen and (min-width:601px) {.u-sp { display: none;}}
@media screen and (max-width: 600px){
  .price h3 {line-height: 1.6;}
  .price h3 + h3 { line-height: 1.5;}}

/*--- Reserve ---*/
#Reserve {
	background : url(../img/bg_Reserve.jpg) center/cover;
	text-shadow: 0 0 4px #000000;
	color  : #FFF;
	margin : 0 auto;
	padding: 0;
	}
#Reserve p { font-weight:bold; }
#Reserve h2 span { display:block; font-size:.6666em;}
#Reserve_info a { color:#FFF;}
.Reserve-pattern {
	background-image: radial-gradient(#444 20%, transparent 0), radial-gradient(#444 20%, transparent 0);
	background-position: 0 0, 3px 3px;
	background-size: 3px 3px;
	padding-bottom : 4em;
	}
#Reserve li { display:block; text-align:left;}
#Reserve li:first-child { font-size:1.6em;}
#Reserve li:first-child:before {
	content: "";
	background: url('../img/icon-phone.svg') bottom/.9em no-repeat;
	display : inline-block;
	width : 1.5em;
	height: 1em;
	margin-right: 10%;
	-webkit-filter: drop-shadow(0 0 3px #000000);
	}
#Reserve li:last-child:before {
	content: "";
	background: url('../img/icon-mail.svg') bottom no-repeat;
	background-size: 1.2em;
	display: inline-block;
	width : 2em;
	height: 1.5em;
	-webkit-filter:drop-shadow(0px 0px 3px #000000);
	}
#Reserve li:last-child { font-size:1em;}
#Reserve ul { width:17.5em; padding:0; margin:0 auto;}
@media screen and (max-width: 768px) { #Reserve .inner { padding: 0 20px;}}

#profile p+p { margin-bottom: 0;}
#profile img { width: 100%;border-radius:0; border: solid 1px #CCC; }

#info { padding-top: 5em;}
.info__ttl { font-weight: 700; color: #4A72AF; margin:0 auto 1.04em;}
.info__item { max-width: 600px; margin:0 auto 60px;}
.info__item p{ text-align: left;}
.info__item + .info__item { padding-top: 60px; border-top: dashed 1px #ccc;}
.info__item-ttl {font-size: 1.1428em; font-weight: 700; color: #4A72AF;margin: 0 auto 1.04em;} 
.info__item-ttl span,
.info__item span { font-size: .9em;}
.info__img-large { width:100%; margin:24px auto 0;}
.info__img{ width:50%; margin:24px auto 0;}
/*--- footer Order/Contact ---*/
footer { background-color:#fff9f9;}
#order h1 { margin:0 auto .5em; }
#order h2 { font-size:1.2em; margin:0 auto 1em; }
#order h2:before,
#order h2:after { content:'—'; display:inline-block; color:#666;}
#order h2:before{ padding-right:1em;}
#order h2:after { padding-left :1em;}

.contact {
	max-width : 600px;
	text-align: center;
	background: url(../img/icon-footer-leaf.svg) right 10% no-repeat;
	padding: 3em 0 3.5em;
	margin : 0 auto;
	}
.contact h1 span { font-size:.7em;}
.contact p:nth-of-type(2)::before {
    content: '●';
    display: block;
    font-size: 0.8em;
	color : #c7c7c7;
	margin: 1em auto;
	}
.contact p:last-of-type { margin-bottom: 1em;}

.contact li:first-child { font-size: 1.5em; text-align: left; }
.contact span { font-size: .8em;}
.contact ul { width: 18.5em; padding: 0; margin: 0 auto;}

.contact li:first-child:before {
	content :"";
	background:url('../img/icon-footer-phone.svg') bottom/.9em no-repeat;
	display:inline-block;
	width : 2em;
	height: 1em;
    margin-right:8%;
	}
.contact li:last-child:before {
	content: "";
	background:url('../img/icon-footer-mail.svg') left bottom/1.2em no-repeat;
	display: inline-block;
	width : 2em;
	height: 1.5em;
	}
@media screen and (max-width:768px) {
.contact {
  width: 100%;
  padding-left:20px;
  padding-right: 20px;
  background-position: right 20px top 3em;}
}

#page_top { position:fixed; bottom:0; right:10px;}
#page_top a { display:block; width:54px; height:auto;}
@media screen and (max-width:768px) { #page_top a { width: 45px;}}
@media screen and (min-width: 769px) {
  a[href*="tel:"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  }
}
.copy { font-size:.85em; text-align:center; padding:.5em 0;}
.clearfix::after{ content:""; display:block; clear:both;}

@media screen and (max-width: 480px) {
#about > p,#about-sp > p,#atelier p,
#school p,#profile p { text-align:left;}
#school .price p { text-align:center;}
#about p:first-of-type br:nth-child(2),
#about p:first-of-type br:nth-child(3),
#about p:first-of-type br:nth-child(4),
#about p:nth-of-type(2) br:nth-child(2),
#about-sp > p:first-of-type br,
#atelier p br,
#school p:nth-of-type(3) br,
#info p br,
.contact p:first-of-type br:nth-of-type(2),
.contact p .u-sp{ display:none;}
.about-sp-box > h2 { font-size:1.3em;}
.about-sp-box {
  background-position:right top;
  background-size:25%;
  padding: 1.5em 20px 0;
  }
.about-sp-box div::after { margin-left:0;}
.contact p span { display: block;}
}