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

.body{
	grid-template: 
		"b-header"
		"b-title"
		"b-nav"
		"b-img"
		"craft-box"
		"c-text1"
		"c-img-b"
		"craft-box2"
		"c-img-d"
		"c-text3"
		"craft-box3"
		"craft-box4"
		"craft-box5"
		"craft-box6"
		"other"
		"photo"
		"craft-box7"
		"toppage"
		"b-footer"
		;
}


b-header {
	grid-area: b-header;
}

b-title {
	grid-area: b-title;
}

b-nav {
	grid-area: b-nav;
}

b-img {
	grid-area: b-img;
}

photo {
	grid-area: photo;
	
}


.topPage {
	grid-area: toppage;
}

b-footer {
	grid-area: b-footer;
	background-color: whitesmoke;
}


/*ページの構造
--------------------------------------*/

.craft-box {
	grid-area: craft-box;
}
c-text1 {
	grid-area: c-text1;
}

.c-img-b {
	grid-area: c-img-b;
}

.craft-box2 {
	grid-area: craft-box2;
}

c-img-c {
	grid-area: c-img-c;
}

.c-img-d {
	grid-area: c-img-d;
}

.craft-box3 {
	grid-area: craft-box3;
}

.craft-box4 {
	grid-area: craft-box4;
}

.craft-box5 {
	grid-area: craft-box5;
}
.craft-box6 {
	grid-area: craft-box6;
}

.craft-box7 {
	grid-area: craft-box7;
}

other {
	grid-area: other;
}

.c-position {
	font-size: clamp(1.8rem, 1vw, 28px);
	letter-spacing: 0.1em;
	line-height: 3;
}

ruby {
	font-family: 'Noto Serif JP', serif;
}

rt {
	font-size: 6px;
	font-family: YuGothic,'Yu Gothic',
		'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
	letter-spacing:normal;
	color: #696969;
}

.name-box {
	margin: 10% auto;
}
.p-name {
	font-size: clamp(1.25rem, 1.136rem + 0.57vw, 1.563rem);/*min20px max25px*/
	letter-spacing: 0.1em;
	line-height: 4;
}

.c-store {
	font-size: clamp(1rem, 1vw, 18px);
	letter-spacing: 0.1em;
	line-height: 1;
}


/*テキスト仕様
--------------------*/
.text-box {
	margin: 0 2%;
	padding: 5% 5%;
	text-align: justify;
	border: 1px solid #dedede;
}


.c-text-title {
	font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);/*min16px max18px*/
	font-weight: bold;
	border-bottom: 1px solid #333;
}

.c-text {
	font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem);/*min13px max16px*/
	margin-top: 20px;
	line-height: 1.9;
	text-align: justify;
}

.grid-box {
	width: 50%;
}

dl {
	font-family: 'Noto Serif JP', serif;
	display: flex;
  flex-wrap: wrap;
  width: 100%;
}

dt {
	font-weight: bold;
	width: 30%;
	padding-right: 10px;
}

dd {
	width: 70%;
}


.craft-box,.craft-box2,.craft-box3,.craft-box4,.craft-box5,.craft-box6 ,.craft-box7 {
	display: flex;
	margin-top: 8%;
}

.craft-box, .craft-box7 {
	margin-bottom: 8%;
	align-items: flex-end;
}

.craft-box img, .craft-box2 img ,.craft-box3 img ,.craft-box4 img ,.craft-box5 img ,.craft-box6 img ,.craft-box7 img{
	width: 50%;
	height: 50%;
}

.c-img-bg {
	margin: 8% auto;
}


.c-contact {
	font-size: clamp(0.938rem, 0.869rem + 0.34vw, 1.125rem);/*min15px max18px*/
	font-weight: bold;
	border-bottom: 1px solid #333;
	margin: 20px auto 10px auto;

}

.c-insta ,.c-twittter {
	display: inline-block;
}
.c-snsbox p {
	font-size: 0.8rem;
	margin: 5px 15px 10px 0;
	font-family: YuGothic,'Yu Gothic',
		'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}

.hp-box p {
	font-size: 0.8rem;
	margin: 8px 10px;
	font-family: YuGothic,'Yu Gothic',
		'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}

.hp-box img {
	width: 30px;
	margin: 10px 0;
}

.buneido-logo img{
	width: 70px;
	margin: 8px 0;
}

.sayazen-logo img {
	width: 70px;
	margin: 8px 0;
}

.c-snsbox img {
	width: 30px;
	margin: 10px 5px 0 0;
	display: block;
}

.insta-box , .twitter-box,.hp-box {
	display: flex;
}

.c-snsbox {
	display: flex;
}

#space-top {
	margin-top: 8%;
}

#space-bottom {
	margin-bottom: 8%;
}
/*スライダーのためのcss
--------------------------*/

photo h3 {
	margin: 20px;
	
}

photo {
	background-color: #e4e4e4;
}
/* 通常（PC）ではタイル表示 */
.slide-wrap {
  display: flex;
  margin: 20px auto 30px;
  max-width: 1200px;
  width: 100%;
}
.slide-box {
  height: auto;
  margin: 0.5%;
  width: 20%;
}

.slide-box img {
  display: block;
  height: auto;
  width: 100%;
 border: 1px solid #e4e4e4;
}

.color {
	background-color: whitesmoke;
}
/*レスポンシブ
-----------------------------------------*/
@media screen and (max-width:1200px){
.cb {
		width: 85%;
	}	
	
.name-box {
	margin: 10% auto;
}
}
@media screen and (max-width:1000px){

	
}

@media screen and (max-width:600px){
	
.cb {
		width: 90%;
	}	
#over {
		width: 100%;
	}	

	.grid-box {
	width: 100%;
}
.craft-box2,.craft-box4,.craft-box6 ,.craft-box7 {
	flex-direction: column;
}

.craft-box,	.craft-box3,.craft-box5 {
		flex-direction: column-reverse;
	}

.craft-box img, .craft-box2 img ,.craft-box3 img ,.craft-box4 img ,.craft-box5 img ,.craft-box6 img ,.craft-box7 img{
	width: 100%;
}

#space-bottomsh {
	margin-bottom: 8%;
}

#space-topsh {
	margin-top: 8%;
}

.grid-img {
		margin-bottom: 8%;
	}	

.grid-img2 {
		margin-top: 8%;
	}	
.hp-box img ,.c-snsbox img{
	width: 25px;
	margin: 10px 5px 0 0;
}
	
.buneido-logo img{
	width: 70px;
	margin: 8px 0;
}

.sayazen-logo img {
	width: 70px;
	margin: 8px 0;
}
/* スマホサイズでスライダー表示 */
  .slide-wrap {
    overflow-x: scroll;
  }
  .slide-box {
    flex: 0 0 70%;
    margin: auto 1% auto auto;
  }	
	
.slide-box img {
  width: 95%;
}
}

@media screen and (max-width:420px){
	
.c-snsbox p {
	font-size: 0.7rem;
	margin: 5px 10px 0 0;
}

.hp-box p {
	font-size: 0.7rem;
	margin: 8px 7px;
}

.hp-box img ,.c-snsbox img{
	width: 20px;
	margin: 10px 5px 0 0;
}
.buneido-logo img{
	width: 70px;
	margin: 8px 0;
}
	
.sayazen-logo img {
	width: 70px;
	margin: 8px 0;
}

}