@charset "utf-8";

/*========================================
  reset
========================================*/
*{
	padding: 0;
	margin: 0;
}	
body{
	font-family:
		"Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
	line-height: 1;
  background: #f3f3f3;
  /* 乳白色 にゅうはくしょく */
  color: #333;
}
ul,ol{
	list-style: none;
}
a{
	display: block;
	color: inherit;
	text-decoration: none;
}
img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/*========================================
  カスタムプロパティ
========================================*/
:root{
  /* 色は「日本の伝統色」を使用 */
  --main-color: #938b4b;
      /* 根岸色(ねぎしいろ)鈍い黄系の色 */
  --accent-color: #8d6449;
      /*  枯茶色(からちゃ)暗い橙系の色 */
  --more-color: #a8bf93;
      /* 山葵色(わさびいろ) */
  --more-translucent: rgba(168, 191, 147, 0.1);
      /* 山葵色(わさびいろ)透明度を付けて */
}

/*========================================
  layout
========================================*/
.container{
  max-width: 750px;
  margin-inline: auto;
  padding-inline: 5px;
}
.content{
  max-width: 400px;
  margin-inline: auto;
  padding-inline: 5px;
}
.pcnav, .pcContact, .contact, .thanks, .errorMsg{
  display: none;
}

/*========================================
  header
========================================*/
.header{
  background: var(--main-color);
  position: fixed;
  top: 0;
  height: 140px;
  width: 100%;
  z-index: 9999;
}
h1{
  background: url(../img/logo.png) no-repeat left center;
  background-size: 50px;
  width: fit-content;
  margin-inline: auto;
  padding:10px 0 10px 50px;
}
h1 img{
  width: 240px;
}

/*========================================
  footer
========================================*/
.footer{
  background: var(--main-color);
  color: #fff;
  text-align: center;
  margin: 20px auto 0;
  padding: 20px 0;
}

/*========================================
  navigation
========================================*/
.spnav ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 400px;
  margin: 12px auto 0;
}
.spnav li{
/*	width:20%; */
	width:25%;
}
.spnav li+li a{
  border-left: 1px dotted #5b3600;
}
.spnav a{
	line-height: 24px;
	text-align: center;
  font-size: .6em;
  /* letter-spacing: .5em; */
  transform: scaleY(2);
  color: #fff;
}

/*========================================
  keyVisual
========================================*/
#keyVis{
  padding-top: 140px;
}
.slider img {
  width:100vw;/*スライダー内の画像を100vwにしてレスポンシブ化*/
  height:auto;
  margin-block: 0;
}

/* ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★ */
@media screen and (min-width:768px) {
  /*========================================
    layout (min-width:768px)
  ========================================*/
  .container{
    max-width: 1000px;
    margin-inline: auto;
    padding-inline: 10px;
  }
  .content{
    padding-inline: 10px;
  }
  .wrap{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px;
  }
  .pcContact{
    display: block;
  }
  
  /*========================================
    header (min-width:768px)
  ========================================*/
  .header{
    height: 160px;
  }
  h1{
    background-size:75px;
    padding:10px 0 10px 75px;
  }
  h1 img{
    width: 360px;
  }

  /*========================================
    navigation (min-width:768px)
  ========================================*/
  .spnav{
    display: none;
  }
  .pcnav{
    display: block;
  }
  .pcnav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    height: 32px;
    margin: 0 auto;
  }
  .pcnav a{
    line-height: 32px;
    text-align: center; 
    color: #fff;
    padding: 0 20px;
  }
  .pcnav a:hover{
    font-weight: bold;
    color: #5b3600;
    scale: 1.2;
  }
    
  /*========================================
    keyVisual (min-width:768px)
  ========================================*/
  #keyVis{
    padding-top: 160px;
  }
  .slider { 
    width:94%;  /*横幅94%で左右に余白を持たせて*/
    margin:0 auto;  /*中央寄せ*/
  }
  .slider img {
    width:40vw; /*スライダー内の画像を40vw*/
  }
  .slider .slick-slide {
    transform: scale(0.8);  /*左右の画像のサイズを80%に*/
    transition: all .5s;  /*拡大や透過のアニメーションを0.5秒で行う*/
    opacity: 0.5; /*透過50%*/
  }
  .slider .slick-slide.slick-center{
    transform: scale(1);  /*中央の画像のサイズだけ等倍に*/
    opacity: 1; /*透過なし*/
  }
  /*矢印の設定*/
  /*戻る、次へ矢印の位置*/
  .slick-prev, .slick-next {
    position: absolute; /*絶対配置にする*/
    top: 42%;
    cursor: pointer;  /*マウスカーソルを指マークに*/
    outline: none;  /*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
  }
  .slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
  }
  .slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
  }
}/* @media screen and (min-width:768px) */
/* ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★ */

/*========================================
  【共通】main 文字と画像
========================================*/
h2{
  height: 50px;
  background: var(--accent-color) url(../img/footprints.png)  repeat-x  left bottom ;
  background-size: auto 18px, auto;
  color: #fff;
  font-family: 'Zen Antique Soft', serif;
  border-radius: 10px;
  margin-block: 20px 10px;
  padding: 10px 0 0 10px;
}
h3{
  font-weight: normal;
  font-size:  1em;
}
p{
  line-height: 1.5;
}
p+p{
    margin-top: .3em;
}
.main img{
  display: block;
  margin: 10px auto;
}

/* ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★ */
@media screen and (min-width:768px) {
  /*========================================
    【共通】main 文字と画像 (min-width:768px)
  ========================================*/
  h2{
    margin-block: 30px 20px;
  }
  .main img{
    margin: 20px auto;
  }
}/* @media screen and (min-width:768px) */
/* ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★ */

/*========================================
  【共通】snsアイコン
========================================*/
.sns a{
	font-size: 50px;
	display: inline;
  text-align: center;
}
.sns a+a{
	margin-left: 4px;
}
.sns i{
  line-height: 43px;
  border-radius: 10px;
}
.fa-square-facebook{
  color: #2e3192;
  background: #fff;
}
.fa-square-x-twitter{
  color: #000;
  background: #fff;
}
.fa-square-twitter{
  color: #29abe2;
  background: #fff;
}
.fa-line{
  font-size: 0.93em;
  color: #06c755;
  background: #fff;
}
.fa-square-instagram{
  background: radial-gradient(circle at 30% 107%,#fdf497 5%,#fd5959 45%,#d6249f 60%,#285aeb 90%);
  color: transparent;	/*文字色　透明*/
  background-clip: text;
  /*↓ベンダープレフィックス*/
  -webkit-background-clip: text;
}

/*========================================
  ごあいさつ
========================================*/
.welcome{
  padding-inline: 5px;
}
.snsSign{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;  
}
.sign{
  width: 130px;
}
.sign p{
  font-family: 'Zen Antique Soft', serif;
  font-size: 1.2em;
  line-height: 1;
  margin-bottom: 6px;
}
.sign img{
  margin: 0;
}
.note{
  font-size: .8em;
}
.indent1{
  padding-left: 1em;
}
.indent2{
  padding-left: 2em;
  text-indent: -1em;
}

/* ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★ */
@media screen and (min-width:768px) {
  /*========================================
    ごあいさつ (min-width:768px)
  ========================================*/
  .welcome{
    background: url(../img/season.png) right center/auto 300px no-repeat;
    min-height: 300px;
    margin-right: 50px;
  }
  .pcWelcome{
    width: calc(100% - 300px);
    margin-inline: 10px;
  }
}/* @media screen and (min-width:768px) */
/* ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★ */

/*========================================
  書道・学習  accordion
========================================*/
dl.accordion{
  /* max-width: 400px; */
  margin: 10px auto;
}
.accordion p{
  font-weight: bold;
}
.accordion dt{
  /*色の指定など*/
  text-align: center;
  border: 1px solid #333;
  background: var(--more-color);
  padding: 10px;
}
.accordion dt:hover{
  font-weight: bold;
  cursor: pointer;
}
.accordion dd{
  display: none;
  border: 1px solid #333;
  border-top: none;
  font-size: 0.9em;
  padding: .5em;
} 
.accordion dd div{
  background: var(--more-translucent);
  border-radius: .8em;
  padding: 0 .5em 10px;  
  line-height: 1.5;
}
.accordion dd div>ul{
  margin-bottom: 10px;
}
.accordion dd div>ul:last-of-type{
  margin-bottom: 0;
}
.accordion .marker{
  list-style-type: square;
  margin-left: 20px;
  padding-left: 0;
}
.accordion .markerInfo{
  list-style-type: "※ ";
  margin-left: 20px;
  padding-left: 0;
}
.accordion .marker ul{
  list-style-type: circle;
  margin-left: 10px;
}
.accordion .marker ul ul{
  list-style-type: "※ ";
  font-size: 0.8em;  
  margin-left: 20px;
}
.accordion .marker ul ul li:last-of-type{
  margin-bottom: 5px;
}
.accordion li.noMarker{
  list-style: none;
  margin-left: 1.5em;
  padding-left: 0;
}
.accordion li.noLine{
  list-style: none;
  padding-left: 0;
}

/*========================================
  スタッフ
========================================*/
.staff dl{
  line-height: 1.5;
}
.staff dt{
  margin-top: .5em;
}
.staff dd{
  margin: .3em 0 0 2em;
}

/* ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★ */
@media screen and (min-width:768px) {
  dl.accordion{
    margin: 20px auto 10px;
  }  
  .staff img{
    margin: 0 auto 10px;
  }
}/* @media screen and (min-width:768px) */
/* ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★ */

/*========================================
  map
========================================*/
.map{
	position: relative;
	padding-bottom: 90%;
	/* padding の上下の割合は横を基準にしている */
  margin-bottom: 10px;
}
.map iframe{
	width: 100%;
	height: 100%;
	border: none;
	position: absolute;
	top: 0;
	left: 0;
}
.access .sns{
  margin: 10px 0;
}

/*========================================
  cal
========================================*/
.cal{
  max-width: 400px;
  height: 400px;
  margin: 0 auto 10px;
}
.cal iframe{
	width: 100%;
	height: 100%;
}
.calendar  p{
  font-size: 0.8em;
}
.calendar a, .access a{
	display: inline;
	text-decoration: underline;
  font-weight: bold;
  color: #00f;
  margin-bottom: 20px;
}

/*========================================
  お問い合わせ contact
========================================*/
.pcContact{
  font-size: 0.8em;
}
/* .contactForm{
  height: 1800px;
  margin: 0 auto;
}
.contactForm iframe{
	width: 100%;
	height: 100%;
} */
#g-form, .thanks, .errorMsg{
  max-width: 700px;
  margin-inline: auto;
}
#g-form p, .thanks p, .errorMsg p{
  font-size: 1.1em;
}
#g-form>p{
  margin-bottom: 10px;
}
#g-form>p:first-child{
  font-size: 1.5em;
}
/* flex box */
.item{
  margin-left: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.item input, .item p{
  width: 50%;
}
.required{
  border-radius: 6px;
  margin-left: 8px;
  padding: 6px;
  width: fit-content;
  display: inline-block;
  background: var(--more-color);
  font-size: 14px;
}
.comment{
  display: block;
  font-size: .7em;
}
input{
  border: 1px solid #ddd;
  border-radius: 6px;
  padding-inline: 1em;
  height: 48px;
  width: 100%;
  max-width: 410px;
  background: var(--more-translucent);
  font-size: 18px;
}
/* text area */
textarea{
  display: block;
  width: 100%;
  /* resize: none; */
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: .5em;
  background: var(--more-translucent);
  font-size: 18px;
}
/* 送信ボタン */
button{
  display: block;
  margin: 30px auto;
  padding: 20px;
  width: 280px;
  border-radius: 6px;
  background: var(--more-color);
  border: 1px solid #333;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.5em;
}
button:hover{
  cursor: pointer;
}
/* ↓属性セレクタ　[]で囲む　 */
td[colspan="2"]{
  text-align: center;
}

/*========================================
  お問い合わせとサンクスページ
========================================*/
.thanks p:first-child, .errorMsg p:first-child{
  font-size: 1.5em;
}