@charset "utf-8";
@import url(hmm.common.css);
/*index.html ここから*/
*{
    margin: 0;
    padding: 0;
}
html{
    font-size:100%;
}
body{
    color:#47423b;
  font-size: 1em;
  font-family: "Kiwi Maru", sans-serif;
     
}
header h1{
    text-align: center;
    margin: 5px
 }
header{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: solid 5px #af875f;
    width: 100%;
    background-color: rgba(255,255,255,0.6);
    position: fixed;
    top: 0;
    left: 0;
    height: 90px;
    z-index: 1;
}

/*　ハートを降らせるスタイル
.snow {
  /*ハートの色
  color: #ffffff;
  /*雪の大きさ
  font-size: 5px;
  /*初期位置
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  /*雪アニメーション1
  animation: roll 5s linear infinite;
}
  /*2つめの雪アニメーション
.snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}
　*/

/* 雪を降らせるスタイルここまで　*/
/* フェードインのスタイルを追加ここから↓*/
.fadein{
    opacity: 0.1;
    transform: translate(0,20px);
    transition: all 2s;
	
}
/*画面内に入った状態*/
.fadein.scrollin{
    opacity: 1;
    transform: translate(0,0);
}
/* フェードインのスタイルこここまで↑*/

header img{
    width: 120%;
}
/*グローバルナビゲーション　PCスタイル　ここから*/
.gnavi_pc-style{
    margin:  5%;
}
.gnavi_pc-style ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    font-family: serif, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 1.1em;
    padding-right: 15px;
	padding-left: 30px;
	padding-bottom: 10px;
    position: relative;
    top: -70px;
    left: 190px;
  }
 .gnavi_pc-style ul li:not(:last-of-type){
    margin-right: 10px;
 }
 .gnavi_pc-style li a{
    text-decoration: none;
    color: #555555;
    
 }
 .gnavi_pc-style li :hover{
    color: #ff58c7;
 }
/*グローバルナビゲーション　PCスタイル　ここまで*/
/*グローバルナビゲーション　スマートフォンスタイル　ここから*/
 .gnavi_sp-style {
    display: none;
    
}
.gnavi_sp-style li a{
    text-decoration: none;
}
.top_banner{
	margin: 10px auto;
	margin-bottom: 50px;
	width: 70%;
}
.greeting_sp{
	text-align: center;
	font-size: 1.2em;
}
main img{
    width: 100%;
    text-align: center;
    margin:0 0;
    padding:0 0;
    
}

.mainbg img{
    width: 50%;
    box-shadow: 0 0 10px 0 #999;
    
}

/* main画像&文章重なり　*/
.contents1{
    width: 60%;
    padding: 10px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    left: -50px;
    top: 20px;
}
.contents1 img {
    float: left;
    margin: 20px -50px;
  }
.contents1 p{
    font-family: "Zen Maru Gothic","Kiwi Maru", serif;
	font-size: 1rem;
    width: 50%;
    height: 40%;
    padding: 30px;
    padding-right: 80px;
    flex-basis: 100%;
    background-color: rgba(253, 251, 130, 0.8);
    text-align: left;
    
}
/* ---- main画像と文章　flexで横並び----*/
#intro img{
    border-radius: 30% 70% 70% 40% / 30% 30% 70% 70% ;
}
#intro ul{
    display: flex;
    justify-content: space-between;
    margin: 50px;
}
#intro li{
    width: 20%;
    list-style: none;
 }
#intro img,#intro p{
    text-align: left;
}
#intro h2{
	text-align: center;
}
.section_img img{
    width: 40%;
    text-align: center;
}
.section_img p{
    font-size: 1.3em;
    text-align: left;
    width: 680px;
    margin: 10px auto;			
}
.nayami{
    width: 50%;
    margin: 0 auto;
}
.onayami p{
    font-size: 1.3em;
    width: 500px;
    text-align: left;
    margin: 5px auto;
	font-family: "Kiwi Maru", sans-serif;
}
.onayami h3{
	text-align: left;
	width: 500px;
	margin: auto;
}
.nayami img{
    width: 300px;
    margin: 0px auto;
	margin-bottom: 20px;
}
#nayami {
    margin: 10px auto;
}
#nayami p{
	 font-size: 1.1em;
	 width: 220px;
	text-align: left;
	font-family: "Kiwi Maru", sans-serif;
}
#nayami ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#nayami li{
    width: 180px;
    list-style: none;
    
}
#nayami h5{
    width: 200px;
    font-size: 1.3em;
    font-family: san-serif,ms-gothic;
    margin:0px auto;
    position: relative;
    top: 100px;
}
#nayami h3{
	position: relative;
	top: 20px;
}
.fukidashi-01-12 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
.fukidashi-01-12::before {
  content: "";
  width: 30px;
  height: 2px;
  transform: rotate(60deg);
  box-sizing: border-box;
  background-color: #777777;
}
.fukidashi-01-12::after {
  content: "";
  width: 30px;
  height: 2px;
  transform: rotate(-60deg);
  box-sizing: border-box;
  background-color: #777777;
}

.flex_img img{
    width: 220px;
    margin: 5px auto;
 }

.btn{
    width: 150px;
    margin: 10px auto;
    text-align: center;
}

.shop{
    border-top: 3px dotted #af875f;
    border-bottom: 3px dotted #af875f;
	width:25%;
    margin: 10px auto;
    position: relative;
    top: 50px;
    text-align: center;
}
.access{
    position: relative;
    top: 50px;
	font-family: "Kiwi Maru", serif;
}
#access_title h2{
    font-style:italic;
    font-family: Serif;
    font-size: 20px;
    margin: 30px auto;
}
.contact{
    position: relative;
    top: 100px;
	font-family: "Kiwi Maru", serif;
}
#contact_title h2{
    font-style:italic;
    font-family: Serif;
    font-size: 20px;
    margin: 30px auto;
}
.contact{
    text-decoration: none;
}

.contact img{
    width: 1.3em;
}
footer{
    clear:left;
    position: relative;
    left: 0;
    bottom: -180px;
}
footer{
    width:100%;
    height: 50px;
    background-color: #af875f;
    text-align: center;
    color: #ffffff;
}
footer p{
    padding:10px;
    text-align: center;
}


/* --index.html ここまで ----*/

/* ---greeting.html ここから---*/
.profile img{
    width: 150px;
    border-radius: 50%;
    margin: 0 50px 0 250px;
 }

.profile h2,.profile h3{
    position: relative;
    top: 20px;
    left: 0;
}
.profile2 div{
    position: relative;
    top: 50px;
}

 .greeting_img{
    text-align: left;
    background-image: url(../image/bg1.PNG);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 150%;
    position: relative;
    top: 150px;
    left: 0; 
    font-size: 1.3em;
    margin: 20px auto;
    width: 500px; 
    }
.greeting_img p{
    font-size: 0.8em;
	font-family: "Kiwi Maru", sans-serif;
}
 .name p{
    text-align: right;
    
 }
/* ---greeting.html ここまで---*/

/* --class.html ここから--*/
section {
    text-align: center;
    font-family: sans-serif;
}
.class_title h2{
    font-style:italic;
    font-family: Serif;
    font-size: 20px;
    margin: 20px auto;
}
.class_title{
	font-family: "Kiwi Maru", sans-serif;
}
.sample{
	font-family: "Kiwi Maru", sans-serif;
}
.class_toptitle{
    text-align: left;
    width:400px;
    margin: 10px auto;
}
.class_title{
    max-width: 500px;
    margin: 0 auto;
    }
.class_title li{
    text-align: left;
    font-size: 14px;
}
.course li{
    border-bottom: solid 5px;
    border-color: #343434;
    max-width: 500px;
    font-weight: bold;
    text-align: center;

} 
.link p{
    font-size: 1.2em;
    margin: 10px;
}

/* --class2.html　ここから　--*/
.class2 {
    margin: 10px auto;
    width: 640px;
}
.class2 h3{
    position: relative;
    top: 110px;
}
.class2 h5{
    position: relative;
    top:150px;
}
.workshop2 p{
    text-align: left;
    padding: 30px;
    position: relative;
    top: -110px;
    left: 0px;
	font-family: "Kiwi Maru", sans-serif;
 }
.workshop2 img{
    width: 150px;
    padding: 80px;
}
.sample {
    width: 960px;
    margin: 10px auto;
}
.sample ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.sample li{
    flex-basis: 30%;
    list-style: none;
}
.gw_img {
    width: 50%;
    position: relative;
    top: 50px;
    left: 90px;
    z-index: 1;
}
#ws_title h2{
    font-style:italic;
    font-family: Serif;
    font-size: 20px;
    margin: 10px auto;
    position: relative;
    top: 30px;
}
#ws_title h3{
    position: relative;
    top: 32px;
	font-family: "Kiwi Maru", sans-serif;
}
#ws_subtitle p{
    position: relative;
    top: 50px;
	font-family: "Kiwi Maru", sans-serif;
}
#ws_subtitle img{
    margin: 15px;
    width: 30%;
    position: relative;
    top: 50px;
}
.workshop2{
	font-family: "Kiwi Maru", sans-serif;
}

/*-- class2.html ここまで--*/
/* class.html 表作成ここから　*/
 table{
    border: solid 1px #47423b;
    margin: 10px auto;
    font-size: 1em;
}
th,td{
    border: solid 1px #47423b;
}
th{
    letter-spacing: 5px;
    font-size: 1.2rem;
}
th{
    background-color: rgb(199,155,66,0.4);
    padding: 500px;
    width: 160px;
}
td{
    padding: 50px;
    font-size: 1.1rem;
}

/* 表の角を丸くする　ここから*/
.radius-table{
    border-radius: 10px;
    border-spacing: 0;
    border: none;
    border-left: 1px solid #999;
    border-top: 1px solid #999;
}
.radius-table tr>*{
    padding: 30px 30px;
    border: none;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}
.radius-table tr:first-child>*:first-child{
    border-radius: 10px 0 0 0;
}
.radius-table tr:first-child>*:last-child{
    border-radius: 0 10px 0 0;
}
.radius-table tr:last-child>*:first-child{
    border-radius: 0 0 0 10px;
}
.radius-table tr:last-child>*:last-child{
    border-radius: 0 0 10px 0;
} 
    
/* 表の角を丸くする　ここまで*/ 

/* class.html 表作成ここまで*/


h4{
    border-bottom: solid 5px #429fc7;
    max-width: 200px;
    margin:  20px auto;
 }  
 h5{
    padding: 20px;
    
 }


.course img{
    width:25%;
    margin: 20px;
    
}

article{ 
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}
.course p{
    max-width: 500px;
    float: left;
}

/* --class.html ここまで*/
.crafts h2{
    margin-bottom: 10px;
    }
.crafts img{
    margin: 5px 5px;
}


.button{
    position: fixed;
    right: 0;
    bottom: 20px;
    font-size: 50%;
    padding: 10px;
    
}
.relative {
    position: relative;
    top: -70px;
    bottom: auto;
}

/*--------  crafts ここから  ----------*/
.craftsmainvisual img{
    text-align: center;
    width: 100%;
}
.crafts img{
    width:10%;
}
.crafts p{
    margin: 10px auto;
}
#qa_title h3, #qa_title p{
	font-family: "Kiwi Maru", sans-serif;
}
/*--------  crafts ここまで  ----------*/

/*------- order &　Repair ここから---------*/
#order_title h2{
    font-style:italic;
    font-family: Serif;
    font-size: 20px;
    margin: 30px auto;
    position: relative;
    top: -20px;
}
.subtitle h2{
    clear: both;
}
.subtitle p{
    max-width: 250px;
    margin:  0px auto;
	
}
#order_title h3, #order_title p{
	font-family: "Kiwi Maru", sans-serif;
}
.order_title section p{
    margin: 10px auto;
    max-width: 270px;
}

.order_grid{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-column-gap: 20px;
   grid-row-gap: 20px;
    
 }
.order_grid li{
   list-style: none;
}
.order_grid p{
	font-family: "Kiwi Maru", sans-serif;
}
.repair_grid{
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.repair_grid{
   list-style: none;
}
.repair_grid p{
	font-family: "Kiwi Maru", sans-serif;
}
.order_title p{
    width: 270px; 
    
}


.order_contact p{
    text-align: center;
    position: relative;
    top: 50px;
    clear: both;
 }
.order_grid p,.repair_grid p{
    text-align: left;
}
/*------qanda----------*/
#qanda_bg{
    background-image: url(../image/dougu2.jpg);
    background-repeat: repeat;
    background-position: top;
    background-size: 70%;
}
#qa_title{
    position: relative;
    top: 100px;
}
#qa_title h2{
    font-style:italic;
    font-family: Serif;
    font-size: 20px;
    margin: 30px auto;
    
}
#qa_title p{
    padding: 20px;
}


.accordion {
	margin: 4rem auto;
	max-width: 80%;
	position: relative;
        top: 100px;
}

.toggle {
	display: none;
}

.faq {
	position: relative;
	margin-bottom: 1rem;
}

.question,.anser {
	transform: translateZ(0);
	transition: all 0.3s;
}

.question {
	border: solid 1px #999;
	padding: 1rem 2.2rem 1rem 1rem;
	display: block;
	color: #333;
}

.question span,.anser span {
    font-size: 160%;
    padding-right: 0.6rem;
    color: #429fc7;
    line-height: 0;
}

.question:after,.question:before {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 0;
  bottom: 0;
  margin: auto;
	width: 2px;
	height: 0.75rem;
	background-color: #999;
	transition: all 0.3s;
}

.question:after {
	transform: rotate(90deg);
}

.anser {
	max-height: 0;
	overflow: hidden;
}

.anser div {
	margin: 0;
	padding: 2rem 1rem 2rem;
	line-height: 1.8;
}

.toggle:checked + .question + .anser {
	max-height: 500px;
	transition: all 1.5s;
}

.toggle:checked + .question:before {
	transform: rotate(90deg) !important;
}

/*------ qanda*--------/

/*------contactここから------- */
/*-----お問い合わせフォーム-----*/
#contact_form{
    position: relative;
    top: 100px;
}
#contact_form p{
    margin: 20px auto;
    
}
.contact img{
    width: 2em;
}
.contact p a{
    font-size: 1rem;
    text-decoration: none;
}
.contact p a:hover{
    color: coral;
}
.pic img{
    max-width: 100%;
    width: 50%;
    margin: 20px auto;
    position: relative;
    z-index: 2;
}
.pic img::before{
    content: '';
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        -45deg,
    #d34e23 0px,#d34e23 2px,
    rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 50%
    );
    z-index: 1;
} 
/*form{
	width: 100%;
	margin:0 auto;
}
input{
	width: 300px;
}
#name,#email{
	height: 30px;
}
#message {
	width: 100%;
	max-width: 500px;
}
.form-row{
	display:flex;
	align-items:center;
	padding:20px;
	border-bottom:1px solid #f2f4f5;
}
.form-row:last-child{
	border-bottom:none;
}

.form-label{
	display:flex;
	align-items:center;
	width:300px;
}
.form-label label{
	font-weight:bold;
        width: 120px;
}
	
.form-label span{
    	width: 30px;
	margin:10px;
	padding:2px 6px;
	border-radius:3px;
	font-size:12px;
	font-weight:bold;
	color:#fff;
	background-color: #af875f;
}
.form-row{
	width: 400px;
}
.form-row button {
	width: 500px;
	height: 50px;
	padding: 10px;
	font-size: 15px;
	margin: auto;	
}
.contact_footer{
    position: relative;
    top: 250px;
}
/*-----お問い合わせフォーム-----*/

/*------contact------- */





  

/*-------スマホサイズ:レスポンシブwebデザイン 960pxまではこの設定で表示　ここから-----*/


@media screen and (max-width: 960px){
    *{
        margin: 0px;
        padding: 0px;
    }
 
main{
    position: relative;
    top:80px;
}
header{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: solid 5px #af875f;
    width: 100%;
    background-color:  rgba(255,255,255,0.6);
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    z-index: 1;
}
/*グローバルナビゲーションpc用、スマートフォン用のスタイル　*/
.gnavi_pc-style{
    display: none;
}
.gnavi_sp-style{
    display: block;
}
 /*　メニューボタン展開前（表示場所・サイズ等）*/　
 
.menu-btn{
    display: block;
    position: fixed;
    z-index: 4;
    right: 30px;
    top: 20px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
}

/*　ボタン展開前（1本線の指定）　*/
.menu-btn span{
    display: block;
    position: absolute;
    width:34px;
    height: 4px;
    right: 6px;
    background: #555;
    transition:0.3s ease-in-out;
}
.menu-btn span:nth-of-type(1){
    top: 10px;
}
.menu-btn span:nth-of-type(2){
    top: 22px;
}
.menu-btn span:nth-of-type(3){
    top: 34px;
}


/*　ボタン展開後　*/
.menu-btn.active span:nth-of-type(1){
    top: 16px;
    right: 6px;
    background: #555;
    transform: rotate(-45deg);
    z-index: 4;
}
.menu-btn.active span:nth-of-type(2),
.menu-btn.active span:nth-of-type(3){
    top: 16px;
    background: #555;
    transform: rotate(45deg);
    z-index: 4;
}


/* スマートフォン用ボタン展開後　表示メニュー */
.gnavi_sp-style {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    color: #ffffff;
    background-color: rgba(100, 100, 100, 0.8);
   text-align: left;
    width: 100%;
    height: 70%;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
    display: flex;
    align-items: center;
    visibility:hidden;
  font-family: serif,fantasy,monospace,serif;
  cursor: pointer;
     
}
.gnavi_sp-style ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100%;
}
.gnavi_sp-style ul li {
	list-style-type: none;
	padding: 0;
	width: 100%;
	transition: .4s all;
}
.gnavi_sp-style ul li:last-of-type {
	padding-bottom: 0;
}
.gnavi_sp-style ul li:hover{
	background :#555;
    
}
.gnavi_sp-style ul li a {
	display: block;
	font-size:1em;
	padding: 15px;
    font-weight: bold;
	color: #ffffff;
	text-align: center;
    text-decoration :none;
    
      
}

.gnavi_sp-style.active {
	opacity: 1;
	visibility:visible;
}


/*　グローバルナビゲーション　ここまで */
#main img {
        position: relative;
        top: 20px;
    }    
.mainbg img{
    width: 640px;
    max-width: 100%;
    box-shadow: 0 0 10px 0 #999;
    
}
/*重なり画像と文章　ここから*/
.contents1{
    width: 100%;
    margin: 20px auto;
    flex-direction: column;
    position: relative;
    right: -30px;
}
.contents1 img{
    float: none;
    margin: 10px auto;
    position: relative;
    top: -50px;
    left: 50px;
}
.contents1 p{
    float: none;
    padding: 50px;
    margin: 0 auto;
    width: 80%;
    font-size: 0.8em;
  }
.greeting_sp {
        opacity: 0;
    }        
/*重なり画像と文章　ここまで*/
#intro ul{
    flex-direction: column;
}
#intro li{
    width: 100%;
    list-style: none;
    margin-bottom: 20px;
}
#intro li{
    width: 100%;
    font-size: 0.8em;
}
#intro img{
    position: relative;
    top: -10px;
    margin-top: 5px;
}
#intro p{
     font-size: 1.2rem;   
}
.nayami{
    width: 70%;
    margin: 0 auto;
}
.nayami img{
    width: 640px;
    max-width: 100%;
    
}
.onayami p{
    font-size: 1em;
    padding: 5px;
    width: 100%;
 }
 
.onayami h3{
    width: 80%;    
}

#nayami ul{
    flex-direction: column;
}
#nayami li{
    width: 100%;
    list-style: none;
    margin: 10px auto;
}
#nayami ul li h3{
    font-size: 1.2em;      
}    
#nayami h5{
    font-size: 1.3em;
    position: relative;
    top: 30px;
}
#nayami p{
    font-size: 1.2em;  
    margin: auto;
    text-align: left; 
    width: 60%;
    }  
.flex_img img{
    text-align: center;
    width: 50%;
    padding: 5px;   
} 
.btn img{
    width: 100%;    
}    

#access_title{
    position: relative;
    top: 120px;
}    
.shop{
   position: relative;
   top: 50px;
   text-align: center;
}
#contact_form{
    width: 100%;
}

#contact_title{
    position: relative;
    top: 200px;
}
#contact_title h2{
    font-family: serif;
    font-style: italic;
}

.footer{
    position: relative;
    top: 100px;
}
 footer img{
    width: 70%;
 } 
 /* ---greeting.html ここから---*/
.profile img{
    width: 150px;
    border-radius: 50%;
    position: relative;
    right: 50px;
    top: -10px;
 }
.profile {
    font-size: 0.8em;
    width: 640px;
    max-width: 100%;
    margin: 5px auto;
 }
 .greeting_img{
    text-align: left;
    background-image: url(../image/bg1.PNG);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 180%;
    width: 350px;
    }

 .name p{
    text-align: center;
 }
/* ---greeting.html ここまで---*/ 
/*--- class.html ここから　----*/
 
th{
    background-color: rgb(199,155,66,0.4);    
    }     
#free p{
    font-size: 1.2rem;
}
 #free table{
     width: 100%;
     max-width: 100%;
} 
#free th,#free tr {
      font-size: 1rem;
}
#free th{
      width: 20%;  
}
#free tr{
      width: 70%;    
}    
.class{
    float: none;
}
.sample {
    width: 640px;
    max-width: 100%;
    margin: 10px auto;
}    
.sample ul{
    flex-direction: column; 
     width: 640px;
    max-width: 100%;
 }    
.sample li{
    width: 100%;
    
 }
.sample img{
    margin: auto;    
 }
.sample p{
    font-size: 1.2rem;       
}
.link p{
    font-size: 1.1rem;     
}    
 .fadein{
    position: relative;
    top: 100px;
 }
 
/* --class2.html　ここから　--*/
 .title h2{
    font-style:italic;
    font-family: Serif;
    font-size: 20px;
    margin: 20px auto;
    }    
.class2 {
    margin: 10px auto;
    width: 640px;
    max-width: 100%;
}
.class2_ws {
    margin: 40px;
    position: relative;
    top: 0px;
    left: 0px;
    
 }
 
.class2 h3{
    position: relative;
    top: 80px;
}
.workshop2 p{
    text-align: left;
    padding: 30px;
    position: relative;
    top: 100px;
    left: 0px;
 }
/*　crafts ここから　*/
.crafts img{
    width:20%;
}
main img{
    position: relative;
    top: 20px;
}  
    
/* crafts ここまで*/    
/*　order & repair ここから*/

.order_grid{
   display: grid;
   grid-template-columns:  640px;
   grid-template-rows: repeat(4,640px);
   place-content: center;
    place-items: center;
   
 }
    
.order_grid li{
   list-style: none;
   width: 640px;
   max-width: 50%; 
}
.repair_grid{
display: grid;
grid-template-columns: 640px;
grid-template-rows: repeat(9,640px);
place-content: center;
place-items: center; 
  
}
.repair_grid li{
   list-style: none;
   width: 640px;
   max-width: 50%;
}
.order_grid p,.repair_grid p{
	text-align: left;
    position: relative;
     top: 50px;
} 

  /* order & repair ここまで*/  
/* contact ここから*/

    
/* contact ここまで*/
footer{
    position: relative;
    top: 300px;
}
}

/*-------タブレットサイズ:レスポンシブwebデザイン 961px～1280pxはこの設定で表示　ここから-----*/

@media screen and (max-width: 961px)and(max-width:1280px){
    *{
        margin: 0px;
        padding: 0px;
    }
 
main{
    position: relative;
    top:80px;
}
header{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: solid 5px #af875f;
    width: 100%;
    background-color:  rgba(255,255,255,0.6);
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    z-index: 1;
}
/*グローバルナビゲーションpc用、スマートフォン用のスタイル*/　
.gnavi_pc-style{
    display: none;
}
.gnavi_sp-style{
    display: block;
}
 /*　メニューボタン展開前（表示場所・サイズ等）*/
 
.menu-btn{
    display: block;
    position: fixed;
    z-index: 4;
    right: 30px;
    top: 20px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
}

/*　ボタン展開前（1本線の指定）　*/
.menu-btn span{
    display: block;
    position: absolute;
    width:34px;
    height: 4px;
    right: 6px;
    background: #555;
    transition:0.3s ease-in-out;
}
.menu-btn span:nth-of-type(1){
    top: 10px;
}
.menu-btn span:nth-of-type(2){
    top: 22px;
}
.menu-btn span:nth-of-type(3){
    top: 34px;
}


/*　ボタン展開後　*/
.menu-btn.active span:nth-of-type(1){
    top: 16px;
    right: 6px;
    background: #555;
    transform: rotate(-45deg);
    z-index: 4;
}
.menu-btn.active span:nth-of-type(2),
.menu-btn.active span:nth-of-type(3){
    top: 16px;
    background: #555;
    transform: rotate(45deg);
    z-index: 4;
}


/* スマートフォン用ボタン展開後　表示メニュー */
.gnavi_sp-style {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    color: #ffffff;
    background-color: rgba(100, 100, 100, 0.8);
   text-align: left;
    width: 100%;
    height: 70%;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
    display: flex;
    align-items: center;
    visibility:hidden;
  font-family: serif,fantasy,monospace,serif;
  cursor: pointer;
     
}
.gnavi_sp-style ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100%;
}
.gnavi_sp-style ul li {
	list-style-type: none;
	padding: 0;
	width: 100%;
	transition: .4s all;
}
.gnavi_sp-style ul li:last-of-type {
	padding-bottom: 0;
}
.gnavi_sp-style ul li:hover{
	background :#555;
    
}
.gnavi_sp-style ul li a {
	display: block;
	font-size:1em;
	padding: 15px;
    font-weight: bold;
	color: #ffffff;
	text-align: center;
    text-decoration :none;
    
      
}

.gnavi_sp-style.active {
	opacity: 1;
	visibility:visible;
}


/*　グローバルナビゲーション　ここまで */
#main img {
        position: relative;
        top: 20px;
    }    
.mainbg img{
    width: 640px;
    max-width: 100%;
    box-shadow: 0 0 10px 0 #999;
    
}
/*重なり画像と文章　ここから */
.contents1{
    width: 100%;
    margin: 20px auto;
    flex-direction: column;
    position: relative;
    right: -30px;
}
.contents1 img{
    float: none;
    margin: 10px auto;
    position: relative;
    top: -50px;
    left: 50px;
}
.contents1 p{
    float: none;
    padding: 50px;
    margin: 0 auto;
    width: 80%;
    font-size: 0.8em;
  }
.greeting_sp {
        opacity: 0;
    }        
/*重なり画像と文章　ここまで */
#intro ul{
    flex-direction: column;
}
#intro li{
    width: 100%;
    list-style: none;
    margin-bottom: 20px;
}
#intro li{
    width: 100%;
    font-size: 0.8em;
}
#intro img{
    position: relative;
    top: -10px;
    margin-top: 5px;
}
#intro p{
     font-size: 1.2rem;   
}
.nayami{
    width: 70%;
    margin: 0 auto;
}
.nayami img{
    width: 640px;
    max-width: 100%;
    
}
.onayami p{
    font-size: 1em;
    padding: 5px;
    width: 100%;
    
}
#nayami ul{
    flex-direction: column;
}
#nayami li{
    width: 100%;
    list-style: none;
    margin: 5px auto;
}
#nayami h5{
    font-size: 1.5em;
    position: relative;
    top: 30px;
}
#nayami p{
    font-size: 1.2em;  
    margin: auto;
    text-align: left;   
    }  
#nayami img{
    text-align: center;
    width: 50%;
    padding: 5px;   
} 

#nayami #btn{
    width: 80%;
}

    
    
#access_title{
    position: relative;
    top: 120px;
}    
.shop{
   position: relative;
   top: 50px;
   text-align: center;
}
#contact_form{
    width: 100%;
}

#contact_title{
    position: relative;
    top: 200px;
}
#contact_title h2{
    font-family: serif;
    font-style: italic;
}

.footer{
    position: relative;
    top: 100px;
}
 footer img{
    width: 70%;
 } 
 /* ---greeting.html ここから--- */
.profile img{
    width: 150px;
    border-radius: 50%;
    position: relative;
    right: 50px;
    top: -10px;
 }
.profile {
    font-size: 0.8em;
    width: 640px;
    max-width: 100%;
    margin: 5px auto;
 }
 .greeting_img{
    text-align: left;
    background-image: url(../image/bg1.PNG);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 180%;
    width: 350px;
    }

 .name p{
    text-align: center;
 }
/* ---greeting.html ここまで---*/ 
/*--- class.html ここから　---- */
 
th{
    background-color: rgb(199,155,66,0.4);
        
}     
#free p{
    font-size: 1.2rem;
}
 #free table{
     width: 100%; 
     max-width: 100%;
} 
#free th,#free tr {
      font-size: 1rem;
}
#free th{
      width: 20%;  
}
#free tr{
      width: 70%;    
}    
.class{
    float: none;
}
.sample {
    width: 640px;
    max-width: 100%;
    margin: 10px auto;
}    
.sample ul{
    flex-direction: column; 
     width: 640px;
    max-width: 100%;
 }    
.sample li{
    width: 100%;
    
 }
.sample img{
    margin: auto;    
 }
.sample p{
    font-size: 1.2rem;       
}
.link p{
    font-size: 1.1rem;     
}    
 .fadein{
    position: relative;
    top: 100px;
 }
 
/* --class2.html　ここから　-- */
 .title h2{
    font-style:italic;
    font-family: Serif;
    font-size: 20px;
    margin: 20px auto;
    }    
.class2 {
    margin: 10px auto;
    width: 640px;
    max-width: 100%;
}
.class2_ws {
    margin: 40px;
    position: relative;
    top: 0px;
    left: 0px;
    
 }
 
.class2 h3{
    position: relative;
    top: 80px;
}
.workshop2 p{
    text-align: left;
    padding: 30px;
    position: relative;
    top: 100px;
    left: 0px;
 }
/*　crafts ここから　*/
.crafts img{
    width:20%;
}
main img{
    position: relative;
    top: 20px;
}  
    
/* crafts ここまで*/    
/*　order & repair ここから */

.order_grid{
   display: grid;
   grid-template-columns:  640px;
   grid-template-rows: repeat(4,640px);
   place-content: center;
    place-items: center;
   
 }
    
.order_grid li{
   list-style: none;
   width: 640px;
   max-width: 50%; 
}
.repair_grid{
display: grid;
grid-template-columns: 640px;
grid-template-rows: repeat(9,640px);
place-content: center;
place-items: center; 
  
}
.repair_grid li{
   list-style: none;
   width: 640px;
   max-width: 50%;
}
.order_grid p,.repair_grid p{
	text-align: left;
    position: relative;
     top: 50px;
} 

  /* order & repair ここまで*/  
/* contact ここから*/

    
/* contact ここまで */
footer{
    position: relative;
    top: 300px;
}
}*/
/*-------スマホ＆タブレット:レスポンシブwebデザイン 1280pxまではこの設定で表示　ここから-----

@media screen and (max-width: 1280px){
    *{
        margin: 0px;
        padding: 0px;
    }
    body{
        font-size: 0.9em;
    }
main{
    position: relative;
    top:80px;
}
header{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: solid 5px #af875f;
    width: 100%;
    background-color:  rgba(255,255,255,0.6);
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    z-index: 1;
}
/*グローバルナビゲーションpc用、スマートフォン用のスタイル　
.gnavi_pc-style{
    display: none;
}
.gnavi_sp-style{
    display: block;
}
 /*　メニューボタン展開前（表示場所・サイズ等）
 
.menu-btn{
    display: block;
    position: fixed;
    z-index: 4;
    right: 30px;
    top: 20px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
}

/*　ボタン展開前（1本線の指定）　
.menu-btn span{
    display: block;
    position: absolute;
    width:34px;
    height: 4px;
    right: 6px;
    background: #555;
    transition:0.3s ease-in-out;
}
.menu-btn span:nth-of-type(1){
    top: 10px;
}
.menu-btn span:nth-of-type(2){
    top: 22px;
}
.menu-btn span:nth-of-type(3){
    top: 34px;
}


/*　ボタン展開後　
.menu-btn.active span:nth-of-type(1){
    top: 16px;
    right: 6px;
    background: #555;
    transform: rotate(-45deg);
    z-index: 4;
}
.menu-btn.active span:nth-of-type(2),
.menu-btn.active span:nth-of-type(3){
    top: 16px;
    background: #555;
    transform: rotate(45deg);
    z-index: 4;
}


/* スマートフォン用ボタン展開後　表示メニュー 
.gnavi_sp-style {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    color: #ffffff;
    background-color: rgba(100, 100, 100, 0.8);
   text-align: left;
    width: 100%;
    height: 70%;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
    display: flex;
    align-items: center;
    visibility:hidden;
  font-family: serif,fantasy,monospace,serif;
  cursor: pointer;
     
}
.gnavi_sp-style ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100%;
}
.gnavi_sp-style ul li {
	list-style-type: none;
	padding: 0;
	width: 100%;
	transition: .4s all;
}
.gnavi_sp-style ul li:last-of-type {
	padding-bottom: 0;
}
.gnavi_sp-style ul li:hover{
	background :#555;
    
}
.gnavi_sp-style ul li a {
	display: block;
	font-size:1em;
	padding: 15px;
    font-weight: bold;
	color: #ffffff;
	text-align: center;
    text-decoration :none;
    
      
}

.gnavi_sp-style.active {
	opacity: 1;
	visibility:visible;
}


/*　グローバルナビゲーション　ここまで */
/*　ハートを降らせるスタイル　
.snow {
  /*ハートの色
  color: pink;
  /*雪の大きさ
  font-size: 20px;
  /*初期位置
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  
  animation: roll 5s linear infinite;
}
  /*2つめの雪アニメーション
.snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}


/* ハートを降らせるスタイルここまで　  
#main img {
        position: relative;
        top: 20px;
    } 
.top_banner{
	width: 80%;	
		
}	
.mainbg img{
    width: 640px;
    max-width: 100%;
    box-shadow: 0 0 10px 0 #999;
    
}
/*重なり画像と文章　ここから
.contents1{
    width: 100%;
    margin: 20px auto;
    flex-direction: column;
    position: relative;
    right: -30px;
}
.contents1 img{
    float: none;
    margin: 10px auto;
    position: relative;
    top: -20px;
    left: 50px;
}
.contents1 p{
    float: none;
    width: 80%;
    font-size: 0.7em;
    margin: 15px ;
    letter-spacing: 3px;
    font-family: "Zen Maru Gothic","Kiwi Maru",serif;
  }
.greeting_sp {
        opacity: 0;
    }        
/*重なり画像と文章　ここまで
#intro ul{
    flex-direction: column;
}
#intro li{
    width: 70%;
    list-style: none;
    margin: 80px auto;
    font-size: 0.8em;
}

#intro img{
    position: relative;
    top: -10px;
    margin-top: 5px;
    
}
    
    
#intro p{
     font-size: 1rem;
	 text-align: left;
}
.nayami{
    width: 70%;
    margin: 0 auto;
}
.nayami img{
    width: 640px;
    max-width: 100%;
    
}
.onayami p{
    font-size: 1em;
    padding: 5px;
    width: 80%;
    
}
#nayami ul{
    flex-direction: column;
}
#nayami li{
    width: 100%;
    list-style: none;
    margin: auto;
}
#nayami h5{
    font-size: 1.3em;
    position: relative;
    top: 30px;
}
#nayami p{
	letter-spacing: 0.1em;
    font-size: 1em;  
    margin: auto;
    text-align: left;
	width: 50%;
    }  
#nayami img{
    text-align: center;
    width: 50%;
    padding: 5px;   
} 

#nayami .btn{
    width: 100%;
}
#access_title{
    position: relative;
    top: 120px;
}    
.shop{
   position: relative;
   top: 50px;
   text-align: center;
	width: 70%;
}
#contact_form{
    width: 100%;
}

#contact_title{
    position: relative;
    top: 200px;
}
#contact_title h2{
    font-family: serif;
    font-style: italic;
}

.footer{
    position: relative;
    top: 100px;
}
 footer img{
    width: 70%;
 } 
 /* ---greeting.html ここから---
.profile img{
    width: 150px;
    border-radius: 50%;
    position: relative;
    right: 50px;
    top: -10px;
 }
.profile {
    font-size: 1em;
    width: 800px;
    max-width: 100%;
    margin: 5px auto;
 }
 .greeting_img{
    text-align: left;
    background-image: url(../image/bg1.PNG);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 180%;
    width: 350px;
    }

 .name p{
    text-align: center;
 }
/* ---greeting.html ここまで---*/ 
/*--- class.html ここから　----
th{
   background-color: rgb(199,155,66,0.4);  
} 
     
#free p{
    font-size: 1.2rem;
}
 #free table{
     width: 100%; 
     max-width: 100%;
} 
#free th,#free tr {
      font-size: 1rem;
}
#free th{
      width: 20%;  
}
#free tr{
      width: 70%;    
}    
.class{
    float: none;
}
.sample {
    width: 640px;
    max-width: 100%;
    margin: 10px auto;
}    
.sample ul{
    flex-direction: column; 
     width: 640px;
    max-width: 100%;
 }    
.sample li{
    width: 100%;
    
 }
.sample img{
    margin: auto;    
 }
.sample p{
    font-size: 1.2rem;       
}
.link p{
    font-size: 1.1rem;     
}    
 .fadein{
    position: relative;
    top: 100px;
 }
 
/* --class2.html　ここから　--
 .title h2{
    font-style:italic;
    font-family: Serif;
    font-size: 20px;
    margin: 20px auto;
    }    
.class2 {
    margin: 10px auto;
    width: 640px;
    max-width: 100%;
}
.class2_ws {
    margin: 40px;
    position: relative;
    top: 0px;
    left: 0px;
    
 }
 
.class2 h3{
    position: relative;
    top: 80px;
}
.workshop2 p{
    text-align: left;
    padding: 30px;
    position: relative;
    top: 100px;
    left: 0px;
 }
   
/*　crafts ここから　
.crafts img{
    width:20%;
}
main img{
    position: relative;
    top: 20px;
}  
    
/* crafts ここまで*/    
/*　order & repair ここから

.order_grid{
   display: grid;
   grid-template-columns:  640px;
   grid-template-rows: repeat(4,640px);
   place-content: center;
    place-items: center;
   
 }
    
.order_grid li{
   list-style: none;
   width: 640px;
   max-width: 50%; 
}
.repair_grid{
display: grid;
grid-template-columns: 640px;
grid-template-rows: repeat(9,640px);
place-content: center;
place-items: center; 
  
}
.repair_grid li{
   list-style: none;
   width: 640px;
   max-width: 50%;
}
.order_grid p,.repair_grid p{
	text-align: left;
    position: relative;
     top: 50px;
} 

  /* order & repair ここまで*/  
/* contact ここから*/

    
/* contact ここまで
footer{
    position: relative;
    top: 300px;
}
}
/*-------スマホ＆タブレット:レスポンシブwebデザイン 960pxまではこの設定で表示　ここから-----

@media screen and (max-width: 960px){
    *{
        margin: 0px;
        padding: 0px;
    }
 
main{
    position: relative;
    top:80px;
}
header{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: solid 5px #af875f;
    width: 100%;
    background-color:  rgba(255,255,255,0.6);
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    z-index: 1;
}
/*グローバルナビゲーションpc用、スマートフォン用のスタイル
.gnavi_pc-style{
    display: none;
}
.gnavi_sp-style{
    display: block;
}
 /*　メニューボタン展開前（表示場所・サイズ等）
 
.menu-btn{
    display: block;
    position: fixed;
    z-index: 4;
    right: 30px;
    top: 20px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
}

/*　ボタン展開前（1本線の指定）　
.menu-btn span{
    display: block;
    position: absolute;
    width:34px;
    height: 4px;
    right: 6px;
    background: #555;
    transition:0.3s ease-in-out;
}
.menu-btn span:nth-of-type(1){
    top: 10px;
}
.menu-btn span:nth-of-type(2){
    top: 22px;
}
.menu-btn span:nth-of-type(3){
    top: 34px;
}


/*　ボタン展開後　
.menu-btn.active span:nth-of-type(1){
    top: 16px;
    right: 6px;
    background: #555;
    transform: rotate(-45deg);
    z-index: 4;
}
.menu-btn.active span:nth-of-type(2),
.menu-btn.active span:nth-of-type(3){
    top: 16px;
    background: #555;
    transform: rotate(45deg);
    z-index: 4;
}


/* スマートフォン用ボタン展開後　表示メニュー
.gnavi_sp-style {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    color: #ffffff;
    background-color: rgba(100, 100, 100, 0.8);
   text-align: left;
    width: 100%;
    height: 70%;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
    display: flex;
    align-items: center;
    visibility:hidden;
  font-family: serif,fantasy,monospace,serif;
  cursor: pointer;
     
}
.gnavi_sp-style ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100%;
}
.gnavi_sp-style ul li {
	list-style-type: none;
	padding: 0;
	width: 100%;
	transition: .4s all;
}
.gnavi_sp-style ul li:last-of-type {
	padding-bottom: 0;
}
.gnavi_sp-style ul li:hover{
	background :#555;
    
}
.gnavi_sp-style ul li a {
	display: block;
	font-size:1em;
	padding: 15px;
    font-weight: bold;
	color: #ffffff;
	text-align: center;
    text-decoration :none;
    
      
}

.gnavi_sp-style.active {
	opacity: 1;
	visibility:visible;
}


/*　グローバルナビゲーション　ここまで 
        position: relative;
        top: 20px;
    }    
.mainbg img{
    width: 640px;
    max-width: 100%;
    box-shadow: 0 0 10px 0 #999;
    
}
/*重なり画像と文章　ここから
.contents1{
    width: 100%;
    margin: 20px auto;
    flex-direction: column;
    position: relative;
    right: -30px;
}
.contents1 img{
    float: none;
    margin: 10px auto;
    position: relative;
    top: -50px;
    left: 50px;
}
.contents1 p{
    float: none;
    padding: 50px;
    margin: 0 auto;
    width: 80%;
    font-size: 0.8em;
  }
.greeting_sp {
        opacity: 0;
    }        
/*重なり画像と文章　ここまで
#intro ul{
    flex-direction: column;
}
#intro li{
    width: 100%;
    list-style: none;
    margin-bottom: 20px;
}
#intro li{
    width: 100%;
    font-size: 0.8em;
}
#intro img{
    position: relative;
    top: -10px;
    margin-top: 5px;
}
#intro p{
     font-size: 1.2rem;   
}
.nayami{
    width: 70%;
    margin: 0 auto;
}
.nayami img{
    width: 640px;
    max-width: 100%;
    
}
.onayami p{
    font-size: 1em;
    padding: 5px;
    width: 100%;
    
}
#nayami ul{
    flex-direction: column;
}
#nayami li{
    width: 100%;
    list-style: none;
    margin: 5px auto;
}
#nayami h5{
    font-size: 1.3em;
    position: relative;
    top: 30px;
}
#nayami p{
    font-size: 1em;  
    margin: auto;
    text-align: left;   
    }  
#nayami img{
    text-align: center;
    width: 50%;
    padding: 5px;   
} 

#nayami #btn{
    width: 100%;
}
#access_title{
    position: relative;
    top: 120px;
}    
.shop{
   position: relative;
   top: 50px;
   text-align: center;
}
#contact_form{
    width: 100%;
}

#contact_title{
    position: relative;
    top: 200px;
}
#contact_title h2{
    font-family: serif;
    font-style: italic;
}

.footer{
    position: relative;
    top: 100px;
}
 footer img{
    width: 70%;
 } 
 /* ---greeting.html ここから---
.profile img{
    width: 150px;
    border-radius: 50%;
    position: relative;
    right: 50px;
    top: -10px;
 }
.profile {
    font-size: 0.8em;
    width: 640px;
    max-width: 100%;
    margin: 5px auto;
 }
 .greeting_img{
    text-align: left;
    background-image: url(../image/bg1.PNG);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 180%;
    width: 350px;
    }

 .name p{
    text-align: center;
 }
/* ---greeting.html ここまで---*/ 
/*--- class.html ここから　----
 
th{
    background-color: rgb(199,155,66,0.4);
}     
#free p{
    font-size: 1.2rem;
}
 #free table{
     width: 100%; 
     max-width: 100%;
} 
#free th,#free tr {
      font-size: 1rem;
}
#free th{
      width: 20%;  
}
#free tr{
      width: 70%;    
}    
.class{
    float: none;
}
.sample {
    width: 640px;
    max-width: 100%;
    margin: 10px auto;
}    
.sample ul{
    flex-direction: column; 
     width: 640px;
    max-width: 100%;
 }    
.sample li{
    width: 100%;
    
 }
.sample img{
    margin: auto;    
 }
.sample p{
    font-size: 1.2rem;       
}
.link p{
    font-size: 1.1rem;     
}    
 .fadein{
    position: relative;
    top: 100px;
 }
 
/* --class2.html　ここから　--
 .title h2{
    font-style:italic;
    font-family: Serif;
    font-size: 20px;
    margin: 20px auto;
    }    
.class2 {
    margin: 10px auto;
    width: 640px;
    max-width: 100%;
}
.class2_ws {
    margin: 40px;
    position: relative;
    top: 0px;
    left: 0px;
    
 }
 
.class2 h3{
    position: relative;
    top: 80px;
}
.workshop2 p{
    text-align: left;
    padding: 30px;
    position: relative;
    top: 100px;
    left: 0px;
 }
/*　crafts ここから　
    width:20%;
}
main img{
    position: relative;
    top: 20px;
}  
    
/* crafts ここまで*/    
/*　order & repair ここから

.order_grid{
   display: grid;
   grid-template-columns:  640px;
   grid-template-rows: repeat(4,640px);
   place-content: center;
    place-items: center;
   
 }
    
.order_grid li{
   list-style: none;
   width: 640px;
   max-width: 50%; 
}
.repair_grid{
display: grid;
grid-template-columns: 640px;
grid-template-rows: repeat(9,640px);
place-content: center;
place-items: center; 
  
}
.repair_grid li{
   list-style: none;
   width: 640px;
   max-width: 50%;
}
.order_grid p,.repair_grid p{
	text-align: left;
    position: relative;
     top: 50px;
} 

  /* order & repair ここまで*/  
/* contact ここから*/

    
/* contact ここまで
footer{
    position: relative;
    top: 300px;
}
}*/