@charset "UTF-8";

:root {
   --themered: #ae3923;
   --themeyellow: #f0d768;
   --themebrown: #c0a17b;
   --themewhite: #f4f1eb;
   
   --lightbrown: #eadfd2;
   --white: #ffffff;
   --black: #3e3a39;
   --gray: #d8d8d7;

   --booth: #efc341;
   --field:#cf8342;
   --indoor: #345c70;
   --stage: #7da4ae;
   --sympo: #5a7444;
   --decoration: #b4534b;
}

* ,*::before,*::after{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
 }

 body {
   font-family: "Noto Serif JP", serif;
   font-weight: 400;
   font-style: normal;
   background-color: var(--themewhite);
 }
 

 main{
   font-size: 12px;
   margin-top: 110px;/*スマホ版headerの高さ+グロナビ35px＋余白20px*/
 }

 /*確認*/
 main a{
   text-decoration: none;
   color: var(--black);
 }

 p{
   color: var(--black);
   line-height: 1.5;
 }

  /*確認*/
 .midashifont{
   font-family: "Shippori Mincho", serif ;
   font-weight: bold;
   font-style: normal;
 }

/*main_left*/
.main_left{
   display: none;
 }
 
 /*main_right*/
 .main_right{
   margin: 0px 20px 60px 20px;
   padding: 17.5px;
   background-color: var(--white);
 }

 .maillink {
   text-decoration: underline var(--themered);
  -webkit-text-decoration: underline var(--themered); /*確認*/
 }
 .maillink:hover{
   color: var(--themered);
 }

 .pagelink a{
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-weight: 400;
    text-decoration-color:var(--themered) ;
    color: var(--themered);
 }

 .pagetitle {
  position: relative;
  /*相対配置*/
  text-align: center;
}

.pagetitle img {
  width: 100%;
  height: 100px;
  object-fit:cover;
  display: block;
}

 .pagetitle h1 {
  font-family: "Shippori Mincho", serif ;
  position: absolute;
  display: inline-block;
  z-index: 20;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 10px;
  background-color: var(--themebrown);
  color: var(--white);
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

h2{
  font-family: "Shippori Mincho", serif ;
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  position: relative;
  border-bottom: 1px solid var(--black);
  margin: 20px 0 10px 0;
  letter-spacing: 1.5px;
  line-height: 1.8em;
}
h2:after {
  content: "";
  display: block;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 30%;
  border-bottom: 3px solid var(--themered);
}

h3 {
  font-family: "Shippori Mincho", serif ;
  font-weight: 700;
  font-style: normal;
    color: var(--black);
    font-size: 14px;
  border-left: 5px solid var(--themered);
  margin: 20px 0 10px 0;
  padding: 2px 0 2px 5px;
}

/*Button*/
.detail1Button {
  width: 100%;
  padding: 5px 0;
  margin: auto;
  box-sizing: border-box;
  position: relative;
  border: solid 2px var(--themered);
}
.detail1Button p {
  text-align: center;
  font-family: "Shippori Mincho", serif ;
}
.detail1Button a{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.detail1Button:hover{
background: var(--themered);
}
.detail1Button:hover > p{
color: var(--themewhite);
}



/*アコーディオンメニューfin*/


/*



/*
css概説（復習用　要らなければ消してください）

vol.1 用語の解説

セレクタ…装飾をつけたい対象の要素のこと
属性…セレクタに施したい装飾の種類
値…セレクタに施したい装飾の具体的内容

例：h1{color:red;}
h1がセレクタ　colorが属性　redが値

vol.2 セレクタの指定
①要素名で指定
h1{color:red;}

②class名で指定
.class{color:red;}

③id名で指定
#id{color:red;}

④要素名プラスclass名で指定
div.class{color:red;}

⑤要素名プラスid名で指定
div#id{color:red;}

⑥要素の位置から指定
header div{color:red;}   
↑スペースを入れる（ここではheader内のdiv要素を指定）

vol.3 属性・値の指定

①{属性:値;}の形で記述
{color:red;}

②１つのセレクタに対する指定はまとめて記述できる
h1{
   color:red;
   width:90%;
}

③指定が重複したら後の行にあるものが優先
h1{
   color:red;
   width:90%;
   color:blue;
}
↑ここではh1はblueになる

④指定が重複したらより特定が強いものが優先
h1{
   color:red;
   width:90%;
}
header h1{
   color:blue;
}
↑ここではheader内のh1はcolorがblue、widthが90%になる
*/







@media screen and (min-width:1024px){
/*レスポンシブ用*/

main{
   width: 1024px;
   margin: 130px auto 0 auto; /*topはPC版headerの高さ+グロナビ35px+余白20px*/
   font-size: 14px;
   height: auto;
   display: block;
 }

 .main_left{
   width: 310px;
   display: inline-block;
   vertical-align: top;
   padding: 20px;
   margin: 0px -1px 30px 10px;/*確認*/
   background-color: var(--white);
 }

 .banner_contents:hover {
   opacity:.5;
 }
 
 .banner_contents img {
   width: 100%;
 }
 
 .banner_contents {
   width: 100%;
   height: 100%;
   display: inline-block;
   margin: 5px 0;
 }

 .main_right{
   display: inline-block;
   width: 580px;
   vertical-align: top;
   height: auto !important; 
   /* margin-top: 30px; */
 }

 h2 {
  font-size: 20px;
}

h3 {
  font-size: 17px;
}



/*詳細2*/
.pagetitle img {
  height: 180px;
  display: block;
}









}