@charset "UTF-8";

@font-face {
	font-family: 'harenosora';
	src: url('../fonts/Harenosora.otf') format('opentype');
}

body{
	font-family: 'harenosora', 'charcuterie-contrast', "Yu Gothic", YuGothic,
	Meiryo, メイリオ, sans-serif;
	color: #333333;
}

 img{
	 max-width: 100%;
 }

#about, #company, #news, #contact, #access {
		padding: 80px 0 70px 0;
	}

.section-inner{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.pc-only {
	display: block;
}

.sp-only {
	display: none;
}

/** --------スマホ-------- **/
@media screen and (max-width:768px) {
	.section-inner {
		padding: 0 25px;
		max-width: 550px;
	}

	.pc-only {
		display: none;
	}

	.sp-only {
		display: block;
	}

	#about, #company, #news, #contact, #access {
		padding: 70px 0;
	}
}

/** -----------------------------------
    テキスト
-------------------------------------**/

p.large{
	font-size: 24px;
	line-height: 2;
	letter-spacing: 0.03em;
}

p.medium{
	font-size: 17px;
	letter-spacing: 0.01em;
}

p.small {
	font-size: 15px;
	letter-spacing: 0.01em;
	text-align: left;
}

/** -------- スマホ -------- **/
@media screen and (max-width:768px) {

	p.large {
		font-size: 14px;
    line-height: 1.9;
		letter-spacing: 0.01em;
	}

	p.medium {
		font-size: 14px;
		line-height: 1.6;
		letter-spacing: 0.03em;
	}

	p.small {
		font-size: 12px;
		line-height: 1.6;
		letter-spacing: 0.03em;
	}
}


/** -----------------------------------
    ボタン
-------------------------------------**/
.button-border {
  display: block;
  width: 320px;
  height: 55px;
	background-color: #EBAA69;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	.button-border {
		display: flex;
		width: 220px;
		height: 40px;
		font-size: 14px;
		line-height: 47px;
		border-radius: 25px;
		align-items: center;
		justify-content: center;
	}
}

/** -----------------------------------
    見出し
-------------------------------------**/

.title {
	font-family: 'charcuterie-contrast';
  font-size: 50px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	left: 223px;
	margin: 10px 0 10px 0;
	color: #EBAA69;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	.title {
	font-size: 35px;
	line-height: 2;
	text-align: center;
	}
}

/** -----------------------------------
    レイアウト
-------------------------------------**/
.col-2{
	display: flex;
	justify-content: space-between;
}
.col-2 .item {
	width: calc((100% - 20px)/2);
}

.col-3{
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.col-3 .item {
	width: calc((100% - 40px)/3);
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	.col-2 {
		display: block;
	}

	.col-2 .item {
		width: 100%;
	}

	.col-3 {
		display: block;
	}

	.col-3 .item {
		width: 100%
	}
}


/** -----------------------------------
    ヘッダー
-------------------------------------**/
#header{
	background-color: #FFFFFF;
	width: 100%;
	height: 90px;
	display: flex;
	justify-content: space-between;
	padding: 0 40px;
	position: fixed;
	top: 0;
	z-index: 1;
}

.header-logo {
	display: flex;
	align-items: center;
	width: 200px;
}

.header-logo a {
	display: flex;
}

.gnav-pc-wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

ul.gnav-pc li{
	display: inline;
	margin-left: 40px;
}

ul.gnav-pc li a {
	font-family: 'harenosora', sans-serif;
	font-size: 17px;
	letter-spacing: 0.03em;
	color: #333333;
	text-decoration: none;
}

ul.gnav-pc li a:hover {
	color: #EBAA69;
}

#menu-button {
	display: none;
}

.gnav-sp-wrap {
	display: none;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	 #header {
		background-color: #f7f3ed;
	 	height: 80px;
	 	padding: 0;
	 }

	 #header h1 {
	 	padding-left: 20px;
	 }

	 #header h1 a {
		display: flex;
		width: 70%
	 }

	 .gnav-pc-wrap {
		display: none;
	 }

	 #menu-button {
		display: block;
		width: 80px;
		height: 80px;
		padding: 30px 27px;
	 }

	 .menu-button-inner {
		z-index: 9999;
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	 }

	 .menu-button-inner span {
		display: block;
		height: 2px;
		width: 100%;
		background-color: #EBAA69;
		position: absolute;
	 }

	 .menu-button-inner, .menu-button-inner span {
		 display: inline-block;
		 transition: all .5s;
		 box-sizing: border-box;
	 }

	 .menu-button-inner span:nth-of-type(1) {
		top: 0;
	 }

	 .menu-button-inner span:nth-of-type(2) {
		top: 0;
		bottom: 0;
		margin: auto;
	 }

	 .menu-button-inner span:nth-of-type(3) {
		bottom: 0;
	 }

		.menu-button-inner.active span:nth-of-type(1) {
		-webkit-transform: translateY(20px) rotate(-45deg);
		transform: translateY(9px) rotate(-45deg);
		}
		.menu-button-inner.active span:nth-of-type(2) {
		opacity: 0;
		}
		.menu-button-inner.active span:nth-of-type(3) {
		-webkit-transform: translateY(-20px) rotate(45deg);
		transform: translateY(-9px) rotate(45deg);
		}

	 /* スマホ用メニューのスタイル */

	 .gnav-sp-wrap {
		 display: none;
		 width: 100vw;
		 height: 100vh;
		 background-color: #f7f3ed;
		 position: fixed;
		 z-index: 100;
		 padding-top: 100px;
    margin-top: 50px;
	 }

	 ul.gnav-sp li {
		 text-align: center;
		 margin-bottom: 30px;
	 }

	 ul.gnav-sp li a {
		 font-family: 'charcuterie-contrast', sans-serif;
		 font-size: 20px;
		 letter-spacing: 0.1em;
		 color: #EBAA69;
		 text-decoration: none;
	 }
	}

/** -----------------------------------
    メインビジュアル
-------------------------------------**/
#mainvisual {
	width: 100vw;
	height: calc(100vh - 150px);
}

.slide {
	width: 80vw;
	background-size: auto;
	background-position: right;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-top: 100px;
}

.badge {
	width: 100%;
	position: absolute;
	top: 400px;
	padding-left: 150px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	#mainvisual {
		width: 100vw;
		height: 40vh;
		margin-top: 50px;
	}

	.slide {
		width: 90vw;
	}

	.badge {
		width: 90%;
		top: 230px;
		right: 170px;
	}
}

/** -----------------------------------
    ABOUT
-------------------------------------**/
#about {
  width: 100vw;
	height: 100vh;
	background-image: url("../images/about-bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin: 120px 0 50px 0;
}

h3.medium{
	font-size: 40px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	text-indent: -25%;
	text-align: center;
	margin: 30px 0;
}

p.subcopy {
	font-size: 17px;
	text-align: center;
	line-height: 2.2;
	font-weight: bold;
}

.copy-about {
	width: 70%;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.85);
	position: relative;
  padding: 1% 5% 3% 5%;
}

p.bottom_space {
	font-size: 17px;
	font-weight: bold;
	margin: 13px 0;
	text-align: center;
	line-height: 2.2;
}

.pc { display: inline; }
.sp { display: none }

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	#about {
		background-image: url("../images/sp-about-bg.jpg");
		margin: 20px 0;
		padding-top: 70px;
		height: 115vh;
	}

	h3.medium {
		font-size: 30px;
		line-height: 1.5;
		letter-spacing: 0.01em;
		text-indent: -30%;
		text-align: center;
		margin: 17px 0;
	}

	p.subcopy {
		font-size: 15px;
		line-height: 2;
	}

	p.bottom_space {
		font-size: 15px;
		margin: 10px 0;
		line-height: 2;
	}

	.copy-about {
		width: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		position: relative;
	  padding: 1% 5% 3% 5%;
	}

	.pc { display: none; }
	.sp { display: inline; }
}


/** -----------------------------------
    COMPANY
-------------------------------------**/
.company {
	width: 70%;
	border-spacing: 0;
	margin: 0 auto;
}

.company th {
	border-bottom: 2px solid #f7f3ed;
	padding: 15px 0;
	width: 5%;
}

.company td {
	border-bottom: 2px solid #f7f3ed;
	padding: 15px 0 15px 90px;
	width: 15%;
}

.history {
	width: 70%;
	margin: 0 auto;
}

p.history {
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	padding: 25px 0 10px 0;
}

.history tr {
	vertical-align: text-top;
}

.history th {
	width: 10%;
	text-align: left;
}

.history td {
	width: 17%;
	padding-bottom: 15px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	.company th,
	.company td {
		font-size: 15px;
		line-height: 1.5;
		letter-spacing: 0.01em;
		width: 100%;
		display: block;
	}

	.company th {
		width: 100%;
	}

	.company td {
		padding: 14px;
		text-align: center;
	}

	p.history {
		font-size: 17px;
		font-weight: bold;
		text-align: center;
		padding: 25px 0 10px 0;
	}

  .history {
		width: 80%;
		font-size: 14px;
	}

	.history th {
		padding-bottom: 25px;
	}

	.history td {
		width: 15%;
	}

}

/** -----------------------------------
    NEWS
-------------------------------------**/

#news {
	width: 100vw;
	height: 100vh;
}

p.medium {
	vertical-align: middle;
	text-align: center;
	margin: 10px;
}

.instagram-gallery {
	 max-width: 644px;
	 margin: auto;
 }
 .instagram-gallery__list {
	 display: flex;
	 flex-wrap: wrap;
	 -ms-flex-wrap: wrap;
 }
 .instagram-gallery__item {
	 min-width: 33.333%;
	 width: 33.333%;
	 padding: 8px;
 }

/** -------- スマホ -------- **/
#news {
	width: auto;
	height: auto;
}

@media screen and (max-width: 768px) {
	.col-3 .item {
		width: 85%;
		margin: 0 auto;
		padding: 20px;
	}

	p.small {
		margin: 0;
	}

}


/** -----------------------------------
    CONTACT
-------------------------------------**/
#contact {
	background-color: #f7f3ed;
}

p.contact-small {
	font-size: 17px;
	font-weight: bold;
	line-height: 2;
	margin-bottom: 30px;
	text-align: center;
}

.contact-table {
	width: 90%;
	margin: 0 auto;
	margin-bottom: 30px;
}

.contact-item,
.contact-body {
	padding: 15px;
}

.contact-item {
	text-align: center;
	width: 20%;
	font-size: 17px;
	background-color: #f7f3ed;
}

.contact-body {
	width: 70%;
}

.form-text {
	width: 100%;
	padding: 10px;
	border: 2px solid #EBAA69;
	background-color: #fff;
	border-top: none;
	border-left: none;
	border-right: none;
	appearance: none;
	max-width: 500px;
}

.form-select {
	width: 40%;
	padding: 10px;
	border: 2px solid #EBAA69;
	background-color: #fff;
	border-top: none;
	border-left: none;
	border-right: none;
	appearance: none;
	max-width: 500px;
}

.form-textarea {
	width: 100%;
	height: 200px;
	padding: 10px;
	border: 2px solid #EBAA69;
	background-color: #fff;
	border-top: none;
	border-left: none;
	border-right: none;
	appearance: none;
	max-width: 500px;
}

.contact-submit {
	width: 300px;
	background-color: #EBAA69;
	color: #fff;
	display: block;
	margin: 0 auto;
	font-size: 17px;
	padding: 15px;
	border-radius: 100vh;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	#contact {
	}

	p.contact-small {
		font-size: 15px;
		line-height: 2;
		margin-bottom: 20px;
		text-align: center;
	}

	.table {
		margin: 10px auto;
	}

	.contact-item,
	.contact-body {
		padding: 5px 0;
		font-size: 13px;
		display: block;
		width: 100%;
	}


	.contact-item {
		text-align: left;
		width: 100%;
		background-color: #f7f3ed;
	}

	.form-select {
		width: 100%;
	}

	.form-textarea {
		height: 100px;
	}
}
/** -----------------------------------
    ACCESS
-------------------------------------**/
#access{
		font-size: 15px;
		line-height: 2;
		letter-spacing: 0.01em;
	}

#access a {
	color: #EBAA69;
	text-decoration: none;
}


p.note {
	font-size: 12px;
	letter-spacing: 0.01em;
	text-align: left;
	margin: 0 0 30px 90px;
}

.gmap{
	position: relative;
	width: 100%;
	height: 15%;
	padding-top: 50%;
}

.gmap iframe{
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

#access .button-border {
  margin-top: 30px;
	margin: 0 auto;
	color: #fff;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {

	p.note {
		margin: 0;
		padding-bottom: 30px;
	}

	p.small {
		padding: 15px 0;
	}

}

/** -----------------------------------
    フッター
-------------------------------------**/

#footer{
	background-color: #f7f3ed;
	text-align: center;
	padding: 20px 0;
}

#footer a {
	color: #333;
	text-decoration: none;
}

.icon {
	margin: 25px 0;
}

.footer-small {
	font-size: 17px;
	font-weight: bold;
	margin-bottom: 10px;
}

.footer-link, .copyright {
	font-size: 15px;
	margin-bottom: 10px;
}

.footer-link li {
	display: inline;
	margin-left: 30px;
	width: 60%;
	padding: 15px;
	justify-content: space-between;
}

.copyright {
	font-family: 'Yu Gothic UI';
	font-weight: normal;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	#footer {
		padding: 40px 0 20px 0;
	}

		.icon {
		margin: 15px 0;
	}

	.footer-small {
		font-size: 14px;
		margin: 15px;
	}

	.footer-link {
		margin-bottom: 30px;
	}

	.footer-link li {
		display: block;
		padding: 0 0 15px 0;
		margin: 0 auto;
	}

}


/*===============================================
PC : 画面の横幅が769px以上
=================================================*/

.example {
	font-size: 50px;
	color: #99293D;
}



/*ここからメディアクエリで各デバイスサイズに書き分けます
CSSは上から下に継承されるので、変化させたいところだけ書けばOK*/



/*================================================
Tablet : 画面の横幅が768pxまで
==================================================*/
@media screen and (max-width: 768px){
	.example {
		font-size: 30px;
		color: #2D81B1;
	}
}


/*================================================
Smartphone :  画面の横幅が640pxまで
=================================================*/
@media screen and (max-width:640px){
	.example {
		font-size: 20px;
		color: #AD8651;
	}
}