@charset "utf-8";


body {
  margin: 0;
  padding: 0;
  color: #333333;
  font-size: 17px;
}

/* ==========================
デフォルトクリア 
============================*/

p,h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
}

img {
  vertical-align:bottom;
}

ul {
  margin: 0;
  padding: 0;
}

/* ==========================
トップページ用スタイル 
============================*/

#index {
  background-image: url(../images/bg-index.jpg);
  background-repeat: no-repeat;
  background-position: center left;
  background-attachment: fixed;
  background-size: cover;
	height: 100vh;
}

#index header {
	height: auto;
	margin-bottom: 0;
}

#index h1 {
  font-size: 100px;
  line-height: 1;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 50px;
  border: none;
	padding: 10px;
}

#index h1:before,
#index h1:after {
  border-top: none;
}

#index #wrap {
  background-color: transparent;
  margin-top: 0px;
  padding: 0;
}

#index .contents {
  margin-top: 150px;
}

#index p {
  font-size: 17px;
  color: #ffffff;
	padding: 10px 20px 10px 20px;
}

#index .btn a {
  background-color: #cc756a;
	color: #ffffff;
	font-size: 18px;
	display: inline-block;
	text-align: center;
	line-height: 40px;
	border-radius: 8px;
	border: 2px solid #fff;
	margin: 5px 0px;
	padding: 0px 10px 5px 0px;
}

#index .btn a:hover {
  background-color: #d68e85;
	transition: 0.3s ;
}



/* ==========================
ベースレイアウト 
============================*/

body {
	background-image: url(../images/bg_body.jpg);
}
#wrap {
}

.contents {
  width: 1200px;
  margin: 0 auto;
	padding-bottom: 80px;
}

section {
  margin-bottom: 50px;
}

/* ==========================
ベーステキスト 
============================*/

.h1-box {
	width: 100%;
	text-align: center;
}

h1 {
	font-size: 32px;
	position: relative;
  display: inline-block;
	color: #828282;
	text-align: center;
	padding: 20px 70px;
}

h1:before,
h1:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 1px #828282;
}

h1:before {
  left: 0;
}

h1:after {
  right: 0;
}

h2 {
	font-size: 20px;
	font-weight: normal;
	border-left: double #cccccc 8px;
	padding: 10px;
}

h3 {
	font-weight: bolder;
	margin: 10px 0px 5px 0px;
}

a {
  color: #cc756a;
  text-decoration: none;
}

a.line:hover {
  text-decoration: none;
	border-bottom: solid #cc756a 1px;
	padding-bottom: 4px;
}

.arrow::before {
	font-size: 24px;
	content: '\e5cc';
	font-family: 'Material Icons';
	padding: 0px 0px 0px 0px;
	position: relative;
	top: 5px;
	}

span.tel {
	font-size: 24px;
	font-weight: bolder;
}

span.tel::before {
	font-size: 24px;
	content: '\e0b0';
	font-family: 'Material Icons';
	padding: 0px 5px 0px 0px;
	position: relative;
	top: 5px;
	}

ul.bulet-list {
	margin-left: 20px;
	list-style-type: circle;
}


/* ==========================
ヘッダー＆ナビ 
============================*/

header {
	width: 100%;
	height: 35vmax;
	margin-bottom: 50px;
}

#hero {
	height: 100%;
	background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  background-size: contain;
}


.hero-kyoushitsu {
	background-image: url(../images/hero_kyoushitsu_pc.jpg);
}

.hero-course {
	background-image: url(../images/hero_course_pc.jpg);
}

.hero-koushi {
	background-image: url(../images/hero_koushi_pc.jpg);
}

.hero-sakuhin {
	background-image: url(../images/hero_sakuhin_pc.jpg);
}

.hero-sakuhinten {
	background-image: url(../images/hero_sakuhinten_pc.jpg);
}

.hero-access {
	background-image: url(../images/hero_access_pc.jpg);
}

.hero-shop {
	background-image: url(../images/hero_shop_pc.jpg);
}

.hero-sakuhinten2025 {
	background-image: url(../images/sakuhinten2025/hero_sakuhinten2025_pc.jpg);	
}

.hero-sakuhinten2023 {
	background-image: url(../images/sakuhinten2023/hero_sakuhinten2023_pc.jpg);	
}

.hero-sakuhinten2022 {
	background-image: url(../images/sakuhinten2022/hero_sakuhinten2022_pc.jpg);	
}

.hero-sakuhinten2021 {
	background-image: url(../images/sakuhinten2021/hero_sakuhinten2021_pc.jpg);	
}

.hero-sakuhinten2019 {
	background-image: url(../images/sakuhinten2019/hero_sakuhinten2019_pc.jpg);	
}

.hero-sakuhinten2018 {
	background-image: url(../images/sakuhinten2018/hero_sakuhinten2018_pc.jpg);	
}

.hero-sakuhinten2017 {
	background-image: url(../images/sakuhinten2017/hero_sakuhinten2017_pc.jpg);	
}

.hero-sakuhinten2016 {
	background-image: url(../images/sakuhinten2016/hero_sakuhinten2016_pc.jpg);	
}

.hero-sakuhinten2015 {
	background-image: url(../images/sakuhinten2015/hero_sakuhinten2015_pc.jpg);	
}


#header-bg {
	width: 100%;
	background: rgba(000,0,0,0.5);
}

#header-contents {
	width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.logo {
	margin: 10px;
}

nav {
	text-align: right;
	padding: 10px;
}

#global-nav {
	margin: 0;
	padding: 0;
}

.global-nav {
	list-style-type:none;
}
	
.global-nav li {
	display: inline-block;
	margin: 10px 15px 15px 15px;
}

.global-nav a:link,
.global-nav a:visited {
	color: #ffffff;
	font-size: 20px;
	text-decoration: none;
	text-align: center;
	line-height: 200%;
	padding-bottom: 10px;
}

.global-nav a:hover{
	border-bottom: 2px solid #ffffff;
	}

nav li.current a {
	border-bottom: 2px solid #ffffff;
  }

/* nav-toggleハンバーガーメニュー */

#nav-toggle {
	display: none;
	position: absolute;
	top: 20px;
	right: 35px;
	height: 32px;
	cursor: pointer;
}

#nav-toggle > div {
	position: relative;
	width: 32px;
}

#nav-toggle span {
	width: 100%;
	height: 3px;
	left: 0;
	display: block;
	background: #ffffff;
	position: absolute;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {
	top: 5px;
}
#nav-toggle span:nth-child(2) {
	top: 15px;
}
#nav-toggle span:nth-child(3) {
	top: 25px;
}

#overlay {
	display: none;
	position: fixed;
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}


/* ==========================
作品展画像関連
============================*/

.w100 {
	max-width: 100%;/* 幅100％で伸縮する画像 */
}

/* 作品一覧ライトボックス */

ul.sakuhin-list_lightbox{
	list-style-type: none;
	margin: 0px;
	padding:0px 0px 30px 0px;
	overflow: hidden;
}

ul.sakuhin-list_lightbox li{
	display: inline-block;
	margin: 10px;
}

ul.sakuhin-list_lightbox img{
	border: 5px solid rgba(0,0,0,0.0)
}

ul.sakuhin-list_lightbox img:hover{
	border: 5px #cccccc solid;
}

ul.sakuhin-list_lightbox p{
	text-align: center;
	padding: 5px 0px;
}


/* ==========================
セクション
============================*/

.flex-box {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

.flex-box-archive {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.text-box {
	width: 40%;
	padding: 20px;
	background: rgba(255,255,255,0.5);
	border-radius: 5px;
	border: #ffffff solid 2px;
	margin: 10px 10px 50px 10px;
	box-shadow:  0 5px 6px rgba(0, 0, 0, 0.2);/*影*/
}

.image-box {
	width: 50%;
	margin: 10px;
}

.text-box-w100 {
	padding: 20px;
	margin: 0px 10px 50px 10px;;
	background: rgba(255,255,255,0.5);
	border-radius: 5px;
	border: #ffffff solid 2px;
	box-shadow:  0 5px 6px rgba(0, 0, 0, 0.2);/*影*/
}


/* ==========================
生徒作品リスト 
============================*/

.mokuji,
.sakuhinlink {
	list-style-type:none;
	margin: 0;
	padding: 0;
}

.mokuji li,
.sakuhinlink li {
	display: inline-block;
	margin: 10px 15px 15px 15px;
}

.mokuji a::before {
	font-size: 24px;
	content: '\e5cf';
	font-family: 'Material Icons';
	padding: 0px 5px 0px 0px;
	position: relative;
	top: 5px;
	}

.sakuhin-list {
	list-style-type:none;
	margin: 0;
	padding: 20px 0;
}

.sakuhin-list li {
	display: inline-block;
	margin: 10px 15px 30px 15px;
}

.sakuhin-list li img {
	max-width: 100%;
}

.goto-mokuji {
	text-align: right;
}

.goto-mokuji a::before {
	font-size: 24px;
	content: '\e5ce';
	font-family: 'Material Icons';
	padding: 0px 5px 0px 0px;
	position: relative;
	top: 5px;
	}

/* ==========================
フッター 
============================*/

footer {
  color: #ffffff;
  width: 100%;
	background: rgba(000,0,0,0.4);
}

.footer-contents {
	width: 1200px;
	margin: 0 auto;
	padding: 20px 0px;
}

.footer-nav ul {
	list-style-type:none;
	margin: 0;
	padding: 20px 0;
}

.footer-nav ul li {
	display: inline-block;
	margin: 10px 15px 15px 15px;
}

.footer-nav ul li a {
	color: #ffffff;
	text-decoration: none;
}

.footer-info h3 {
	font-weight: normal;
	margin: 0px 0px 10px 0px;
	position: relative;
	left: -10px;
}

.footer-info ul {
	list-style-type:none;
	margin: 0;
	padding: 0;
}

.footer-info ul li {
	display: inline-block;
	margin: 10px 15px 15px 15px;
	vertical-align: text-top;
}

.footer-info ul li a {
	color: #ffffff;
	text-decoration: none;
}

.footer-nav a:hover{
	border-bottom: 1px solid #ffffff;
	padding-bottom: 5px;
	}

.copyright {
	text-align: center;
	margin-top: 30px;
}

footer small {
  font-size: 12px;
}

/* ==============================
上に戻るボタン
=============================== */

#topbutton {
	/* ▼ボタンの表示位置を画面の右下に固定 */
	position: fixed; /* ←表示場所を固定 */
	bottom: 10px;   /* ←下端からの距離 */
	right: 25px;    /* ←右端からの距離 */
	display: none;/* ▼最初は非表示にしておく */
	text-align: center;
	opacity: 0.7;
}

#topbutton:hover {
	opacity: 1.0;
}

#topbutton a {
	position: relative;
  display: block;
  text-decoration: none;
	border: 1px solid #cc756a;
	border-radius: 30px;
	background-color: #cc756a;
	padding: 20px;
}

#topbutton a::before{
	font-size: 24px;
	content: '\e5d8';
	font-family: 'Material Icons';
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}




/* ==============================
レスポンシブ対応
=============================== */
	
/* =======1200px以下の場合に適応======= */

@media screen and (max-width:1200px) {
	
	#hero {
	height: 100%;
	background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  background-size: contain;
	}

	
	#header-contents {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	}
	
	.contents {
  width: 100%;
  margin: 0 auto;
}
	
	.footer-contents {
	width: 100%;
	}

}	

/* =======795px以下の場合に適応======= */

@media screen and (max-width:795px) {
	/* ハンバーガーメニューのためのスタイル */
	
	#nav-toggle {
		display: block;
		border: solid 1px #ffffff;
		border-radius: 5px;
		padding: 5px;
	}

	#global-nav {
		position: fixed;
		right: -300px;
		top: 0;
		height: 100%;
		width: 200px;
		padding-top: 90px;
		background: #aaaaaa;
		-webkit-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}

	.global-nav li {
		display: block;
		margin: 15px 0px 0px 20px;
		font-size: 15px;
		list-style: none;
		text-align: left;
		}
	
	.global-nav a:link,
	.global-nav a:visited {
		color: #ffffff;
		font-size: 17px;
		width: auto;
		display: block;
		text-decoration: none;
		text-align: left;
		line-height: 200%;
		border-radius: 0px;
		border: 0px;
		font-weight:normal;
		}

	.global-nav a:hover {
		color: #ffffff;
		font-size: 17px;
		width: auto;
		display: block;
		text-decoration: none;
		text-align: left;
		line-height: 200%;
		border-radius: 0px;
		border: 0px;
		font-weight:normal;
		}


	/* ナビゲーションの開閉 */
	.open {
		overflow: hidden;
	}
	.open #overlay {
		display: block;
	}
	.open #global-nav  {
		-webkit-transform: translate3d(-300px,0,0);
		transform: translate3d(-300px,0,0);
	}

	/* 3本線の動き */
	.open #nav-toggle span {
		background: #ffffff;
	}
	
	.open #nav-toggle span:nth-child(1) {
		top: 15px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.open #nav-toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	
	.open #nav-toggle span:nth-child(3) {
		top: 15px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	/* z-index */
	#overlay {
		z-index: 200;
	}
	#global-nav {
		z-index: 300;
	}
	#nav-toggle {
		z-index: 400;
	}
	/* ハンバーガーここまで */
	
	.hero-kyoushitsu {
		background-image: url(../images/hero_kyoushitsu.jpg);
	}

	.hero-course {
		background-image: url(../images/hero_course.jpg);
	}

	.hero-koushi {
		background-image: url(../images/hero_koushi.jpg);
	}

	.hero-sakuhin {
		background-image: url(../images/hero_sakuhin.jpg);
	}

	.hero-sakuhinten {
		background-image: url(../images/hero_sakuhinten.jpg);
	}

	.hero-access {
		background-image: url(../images/hero_access.jpg);
	}

	.hero-shop {
		background-image: url(../images/hero_shop.jpg);
	}
	
	.hero-sakuhinten2023 {
		background-image: url(../images/sakuhinten2023/hero_sakuhinten2023.jpg);	
	}

	.hero-sakuhinten2022 {
		background-image: url(../images/sakuhinten2022/hero_sakuhinten2022.jpg);	
	}
	
	.hero-sakuhinten2021 {
		background-image: url(../images/sakuhinten2021/hero_sakuhinten2021.jpg);	
	}
	
	.hero-sakuhinten2019 {
		background-image: url(../images/sakuhinten2019/hero_sakuhinten2019.jpg);	
	}

	.hero-sakuhinten2018 {
		background-image: url(../images/sakuhinten2018/hero_sakuhinten2018.jpg);	
	}

	.hero-sakuhinten2017 {
		background-image: url(../images/sakuhinten2017/hero_sakuhinten2017.jpg);	
	}

	.hero-sakuhinten2016 {
		background-image: url(../images/sakuhinten2016/hero_sakuhinten2016.jpg);	
	}

	.hero-sakuhinten2015 {
		background-image: url(../images/sakuhinten2015/hero_sakuhinten2015.jpg);	
	}
	
	header {
	height: 48vh;
	margin-bottom: 20px;
	}
	
	#header-bg {
	height: 120px;
	}
	
	.logo {
	width: 25%;
	}
	
	.logo img {
		max-width: 100%;
	}
	
}
/* =======660px以下の場合に適応======= */

@media screen and (max-width:660px) {
	
	#index h1 {
  font-size: 80px;
  line-height: 1;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 50px;
  border: none;
	}

	#header-bg {
	height: 95px;
	}
	
	header {
	height: 70vmin;
	}
	
	h1 {
	font-size: 25px;
	}
	
	.flex-box {
	flex-wrap: wrap;
	}
	
	.text-box {
	width: 100%;
}

	.image-box {
		width: 100%;
	}
	
	.sakuhin-list_lightbox li {
		width: 40%;
	}
    
    .sakuhin-list li {
	margin: 10px 5px 30px 5px;
    width: 46%;
    } 

}/* 660px以下の場合に適応 ここまで*/


/* =======470px以下の場合に適応======= */

@media screen and (max-width:470px) {
	
	#index .contents {
    margin-top: 80px;
	}  
    
    .text-box  {
	padding: 10px;
    }
    
    .text-box-w100 {
	padding: 10px;
    }
	
}/* 477px以下の場合に適応 ここまで*/